@bizapps/design-system-testing 1.10.1 → 1.12.0

package/dist/main.cjs

@@ -28,6 +28,7 @@ var reactHookForm = require('react-hook-form');
 var zod = require('@hookform/resolvers/zod');
 var confetti = require('canvas-confetti');
 var reactTable = require('@tanstack/react-table');
+var reactDom = require('react-dom');
 var SignaturePadLib = require('signature_pad');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -2243,10 +2244,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);
@@ -2261,7 +2262,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) {
@@ -2405,7 +2406,7 @@ function Toaster({ position = "bottom-right", children }) {
           "pointer-events-none fixed z-[100] flex flex-col gap-2",
           positionStyles[position]
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", initial: false, children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { ...t }) }, t.id)) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", initial: false, children: toasts.map((t2) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { ...t2 }) }, t2.id)) })
       }
     )
   ] });
@@ -5186,13 +5187,11 @@ function AbilityProvider({ children, permissions }) {
     setImperativelyResolved(true);
   }, []);
   const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
-  const syncedKey = react.useRef(permissionKey);
-  react.useEffect(() => {
-    if (permissionKey === null) return;
-    if (permissionKey === syncedKey.current) return;
-    syncedKey.current = permissionKey;
+  const [syncedKey, setSyncedKey] = react.useState(permissionKey);
+  if (permissionKey !== null && permissionKey !== syncedKey) {
+    setSyncedKey(permissionKey);
     setPermissionSet(new Set(permissions));
-  }, [permissionKey, permissions]);
+  }
   const value = react.useMemo(
     () => ({ can: can2, setAbilities, clearAbilities, status }),
     [can2, setAbilities, clearAbilities, status]
@@ -5206,6 +5205,9 @@ function useAbility() {
   }
   return context;
 }
+function useOptionalAbility() {
+  return react.useContext(AbilityContext);
+}
 function useCan(permissions, mode = "any") {
   const { can: can2 } = useAbility();
   return can2(permissions, mode);
@@ -5429,10 +5431,11 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  overlayClassName,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, { className: overlayClassName }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       radixUi.Dialog.Content,
       {
@@ -9200,6 +9203,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 = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const onDoneRef = react.useRef(onDone);
+  react.useLayoutEffect(() => {
+    onDoneRef.current = onDone;
+  });
+  react.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "size-5", strokeWidth: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ref: menuRef, className: "absolute flex", style: { opacity: 1 - morph.chevrons }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = react.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const setValue = react.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__ */ jsxRuntime.jsx("span", { "data-slot": "floating-sidebar-fallback-icon", className: cn("flex", sizeClass2), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { "aria-hidden": "true", strokeWidth: 1.5 }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.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 = react.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 = react.useRef(null);
+  const toggleRef = react.useRef(null);
+  const morphGhostRef = react.useRef(null);
+  const deferredFocus = react.useRef(null);
+  const [morph, setMorph] = react.useState(null);
+  if (morph && !morphEnabled) setMorph(null);
+  const prevMobileOpen = react.useRef(mobileOpen);
+  react.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 = react.useCallback(
+    () => morph?.to === "open" ? toggleRef.current : triggerRef.current,
+    [morph?.to]
+  );
+  const endMorph = react.useCallback(() => setMorph(null), []);
+  react.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] = react.useState({});
+  const [flyoutId, setFlyoutId] = react.useState(null);
+  const [hoverId, setHoverId] = react.useState(null);
+  const collapsed = !isMobile && !open;
+  const [prevCollapsed, setPrevCollapsed] = react.useState(collapsed);
+  const [settling, setSettling] = react.useState(false);
+  if (prevCollapsed !== collapsed) {
+    setPrevCollapsed(collapsed);
+    setSettling(collapsed);
+    setFlyoutId(null);
+    setHoverId(null);
+  }
+  react.useEffect(() => {
+    if (!settling) return;
+    const timer = setTimeout(() => setSettling(false), MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [settling]);
+  const toggle = react.useCallback(() => setOpen(!open), [open, setOpen]);
+  const navRef = react.useRef(null);
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "floating-sidebar-header",
+            className: cn(
+              "flex h-10 shrink-0 items-center",
+              side === "right" && "flex-row-reverse"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "data-slot": "floating-sidebar-skeleton", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(TooltipProvider, { delayDuration: 300, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+        mobileOpenProp === void 0 && /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Menu, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: labels.title }),
+              nav
+            ]
+          }
+        )
+      ] }),
+      morphing && /* @__PURE__ */ jsxRuntime.jsx(
+        MobileMorph,
+        {
+          morph,
+          side,
+          ghostRef: morphGhostRef,
+          getTarget: getMorphTarget,
+          onDone: endMorph
+        },
+        morph.key
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: nav });
+}
+function ModuleSearch({
+  moduleLabel,
+  query,
+  focusable,
+  labels,
+  onQueryChange,
+  className
+}) {
+  const tabIndex = focusable ? 0 : -1;
+  const inputRef = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": "true", className: "size-4 shrink-0", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-4", strokeWidth: 1.5 })
+          }
+        )
+      ]
+    }
+  );
+}
+function NoMatches({
+  show,
+  moduleLabel,
+  query,
+  labels,
+  compact
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "data-slot": "floating-sidebar-no-matches", children: show && /* @__PURE__ */ jsxRuntime.jsx(
+    NoMatchesMessage,
+    {
+      moduleLabel,
+      query,
+      labels,
+      compact
+    }
+  ) });
+}
+function NoMatchesMessage({
+  moduleLabel,
+  query,
+  labels,
+  compact = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          lucideReact.Search,
+          {
+            "aria-hidden": "true",
+            className: "text-muted-foreground size-5",
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary text-sm font-semibold", children: labels.noMatchesTitle }),
+        /* @__PURE__ */ jsxRuntime.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 = react.useRef(null);
+  const wasCollapsed = react.useRef(collapsed);
+  react.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__ */ jsxRuntime.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 = react.useRef(null);
+  const closedFromOutside = react.useRef(false);
+  const skipNextTooltip = react.useRef(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: flyoutOpen, onOpenChange: (next) => !next && onFlyoutClose(), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          Tooltip,
+          {
+            open: tooltipOpen,
+            onOpenChange: (next) => {
+              if (next && skipNextTooltip.current) return;
+              onTooltipOpenChange(collapsed && next);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                          SidebarIcon,
+                          {
+                            icon: module.icon,
+                            resolveIcon,
+                            size: collapsed ? "lg" : "md"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5", strokeWidth: 1.5 })
+                      }
+                    )
+                  ]
+                }
+              ) }) }),
+              collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+                TooltipContent,
+                {
+                  side: side === "right" ? "left" : "right",
+                  sideOffset: 12,
+                  "data-slot": "floating-sidebar-tooltip",
+                  children: module.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-slot": "floating-sidebar-module-body", style: { width: bodyWidth }, children: [
+                  isEmpty && emptyMessage,
+                  !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-slot": "floating-sidebar-search-bar",
+                      className: "bg-sidebar sticky top-0 z-[2] px-3 pb-3",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ModuleSearch,
+                        {
+                          moduleLabel: module.label,
+                          query,
+                          focusable: open,
+                          labels,
+                          onQueryChange
+                        }
+                      )
+                    }
+                  ),
+                  !isEmpty && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        ItemRow,
+                        {
+                          item,
+                          list,
+                          visible: open,
+                          staggerIndex: index,
+                          onSelect: (navigates) => onSelect(item, navigates)
+                        },
+                        item.id
+                      ))
+                    }
+                  ),
+                  !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                    NoMatches,
+                    {
+                      show: items.length === 0,
+                      moduleLabel: module.label,
+                      query,
+                      labels
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        collapsed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                ModuleSearch,
+                {
+                  moduleLabel: module.label,
+                  query,
+                  focusable: flyoutOpen,
+                  labels,
+                  onQueryChange,
+                  className: "mx-2 mb-2"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "ul",
+                      {
+                        "data-slot": "floating-sidebar-item-list",
+                        className: "flex flex-col gap-0.5",
+                        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                          ItemRow,
+                          {
+                            item,
+                            list,
+                            visible: flyoutOpen,
+                            onSelect: (navigates) => onSelect(item, navigates)
+                          },
+                          item.id
+                        ))
+                      }
+                    ),
+                    !isEmpty && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("flex shrink-0", active ? "text-primary" : "text-muted-foreground"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(SidebarIcon, { icon: item.icon, resolveIcon, size: "sm" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("a", { ...linkProps });
+  } else {
+    control = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              lucideReact.Star,
+              {
+                "aria-hidden": "true",
+                className: cn("size-3.5", favorite && "fill-secondary/10"),
+                strokeWidth: 1.5
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var AppHubContext = react.createContext(null);
+function useAppHubContext() {
+  const context = react.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 = classVarianceAuthority.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__ */ jsxRuntime.jsx("a", { ...linkProps });
+}
+function AppHubCounter({ count, className }) {
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "contents", children: app.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(AppHubCounter, { count: normalizePending(app.pending) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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 react.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 = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: appHubIconVariants({
+          tone: locked ? "grey" : app.tone ?? "grey",
+          size: variant === "panel" ? "row" : "sheet"
+        }),
+        children: app.icon
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: cn(
+            "text-light-1000 flex items-center gap-1.5 font-medium",
+            variant === "panel" ? "text-sm" : "text-[15px]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: app.label }),
+            app.external && /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ArrowUpRight,
+              {
+                "aria-hidden": "true",
+                className: "text-main-grey size-3.25 shrink-0"
+              }
+            )
+          ]
+        }
+      ),
+      locked ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-main-grey flex items-center gap-1 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { "aria-hidden": "true", className: "size-3" }),
+        labels.noAccess
+      ] }) : app.description && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: descId,
+          className: cn(
+            "text-main-grey truncate",
+            variant === "panel" ? "text-xs" : "text-[13px]"
+          ),
+          children: app.description
+        }
+      )
+    ] }),
+    current && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useRef(null);
+  const onKeyDown = useArrowNavigation(rootRef);
+  const searchId = react.useId();
+  const searchRef = react.useRef(null);
+  const [query, setQuery] = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      labels.directory,
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = react.useState("");
+  react.useEffect(() => setLive(message), [message]);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-slot": "app-hub-search", className: "relative shrink-0 px-3 pt-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: searchId, className: "sr-only", children: labels.searchLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { role: "status", className: "sr-only", children: live }),
+              status === "loading" && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "app-hub-loading",
+                  "aria-hidden": "true",
+                  className: "flex flex-col gap-1",
+                  children: SKELETON_ROWS.map(([first, second]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-light-200 size-9 shrink-0 rounded-xl" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-1 flex-col gap-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: cn("bg-light-200 h-2.5 rounded-[5px]", first)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("bg-light-200 h-2 rounded-sm", second) })
+                    ] })
+                  ] }, first))
+                }
+              ),
+              status === "error" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex size-9 items-center justify-center rounded-xl bg-red-100 text-red-800",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, { className: "size-4.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-light-1000 text-sm font-semibold", children: labels.error }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-main-grey text-[13px] leading-snug", children: labels.errorDescription })
+                    ] }),
+                    onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "outline",
+                        "data-app-hub-item": "",
+                        onClick: () => {
+                          rootRef.current?.focus();
+                          onRetry();
+                        },
+                        children: labels.retry
+                      }
+                    )
+                  ]
+                }
+              ),
+              ready && filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "app-hub-empty",
+                  className: "flex flex-col items-start gap-1.5 px-2 pt-4 pb-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-light-1000 text-sm font-semibold", children: activeQuery ? labels.noMatch(activeQuery) : labels.empty }),
+                    activeQuery && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-main-grey text-[13px] leading-snug", children: labels.noMatchDescription }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-1", children: [
+                section.heading && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-main-grey px-2 text-[11px] font-semibold uppercase", children: section.heading }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col gap-1", children: section.apps.map((app) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AppHubRow,
+                  {
+                    app,
+                    current: app.id === currentAppId,
+                    variant,
+                    onActivate
+                  }
+                ) }, app.id)) })
+              ] }, section.heading ?? ""))
+            ]
+          }
+        ),
+        directoryHref && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink ? renderLink(directoryProps, void 0) : /* @__PURE__ */ jsxRuntime.jsx("a", { ...directoryProps }) })
+      ]
+    }
+  );
+}
+function AppHubPanel({
+  id,
+  open,
+  onOpenChange,
+  onCloseAutoFocus,
+  ...catalog
+}) {
+  const { labels } = useAppHubContext();
+  const titleId = react.useId();
+  const contentRef = react.useRef(null);
+  const [tooltipOpen, setTooltipOpen] = react.useState(false);
+  if (open && tooltipOpen) setTooltipOpen(false);
+  const quietRef = react.useRef(false);
+  react.useEffect(() => {
+    if (open) return () => void (quietRef.current = true);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Tooltip,
+      {
+        open: tooltipOpen,
+        onOpenChange: (next) => setTooltipOpen(next && !open && !quietRef.current),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipContent,
+            {
+              "aria-hidden": "true",
+              side: "left",
+              variant: "primary",
+              size: "sm",
+              className: TOOLTIP_CLASS,
+              children: labels.allApps
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-3 pb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                id: titleId,
+                className: "font-heading text-main-blue-primary text-base leading-tight font-bold",
+                children: labels.allApps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("ul", { role: "list", className: "flex flex-col items-center gap-2", children: apps.map((app) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(AppHubTile, { app, current: app.id === currentAppId }) }, app.id)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "bg-light-300 my-0.5 h-px w-6.5" }),
+        panel,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "bg-light-300 my-0.5 h-px w-6.5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { "aria-hidden": "true", className: "size-4.5" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { "aria-hidden": "true", className: "size-4.5" }),
+          labels.fab,
+          pending > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+            ", ",
+            labels.pending(pending)
+          ] }),
+          pending > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-light-300 mx-auto mt-2 h-1 w-10 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "font-heading text-main-blue-primary text-xl leading-tight font-bold", children: labels.sheetTitle }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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] = react.useState(void 0);
+  const [sessionOverride, setSessionOverride] = react.useState(void 0);
+  const store = react.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 = react.useSyncExternalStore(store.subscribe, store.getSnapshot, nullSnapshot);
+  const setOpen = react.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 react.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] = react.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] = react.useState(false);
+  if (!open && panelOpen) setPanelOpen(false);
+  const [announcement, setAnnouncement] = react.useState("");
+  const [, requestRender] = react.useReducer((count) => count + 1, 0);
+  const previousOpenRef = react.useRef(open);
+  const railRef = react.useRef(null);
+  const tabRef = react.useRef(null);
+  const focusIntentRef = react.useRef(null);
+  const railId = `${id}-rail`;
+  react.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 = react.useMemo(
+    () => ({ labels, appName, renderLink, onNavigate }),
+    [labels, appName, renderLink, onNavigate]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AppHubContext, { value: context, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          AppHubSheet,
+          {
+            apps,
+            currentAppId,
+            status: catalogStatus,
+            onRetry,
+            directoryHref,
+            searchThreshold,
+            pending: sumPending(apps)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AppHubRail,
+            {
+              id: railId,
+              apps: apps.filter((app) => app.inRail && !app.locked),
+              currentAppId,
+              open,
+              onHide: () => toggle(false),
+              railRef,
+              panel: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            AppHubTab,
+            {
+              railId,
+              open,
+              pending: sumPending(apps),
+              onShow: () => toggle(true),
+              tabRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.createContext({ isOpen: false, modal: true });
 function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
   const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
@@ -9660,6 +12019,8 @@ exports.AlertDialogPortal = AlertDialogPortal;
 exports.AlertDialogTitle = AlertDialogTitle;
 exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.AlertTitle = AlertTitle;
+exports.AppHub = AppHub;
+exports.AppHubSkipLink = AppHubSkipLink;
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarBadge = AvatarBadge;
@@ -9768,6 +12129,7 @@ exports.FieldError = FieldError;
 exports.FieldGroup = FieldGroup;
 exports.FieldLabel = FieldLabel;
 exports.FilterOption = FilterOption;
+exports.FloatingSidebar = FloatingSidebar;
 exports.Input = Input;
 exports.Item = Item;
 exports.ItemActions = ItemActions;