@bizapps/design-system-testing 1.11.0 → 1.12.1

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 }; }
@@ -5430,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,
       {
@@ -9207,6 +9209,7 @@ var DEFAULT_LABELS = {
   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}`,
@@ -9221,6 +9224,8 @@ var DEFAULT_LABELS = {
 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 },
@@ -9229,8 +9234,132 @@ var BOUNCE_KEYFRAMES = [
 ];
 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 DEFAULT_WIDTH = 276;
+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) {
@@ -9262,31 +9391,29 @@ function isEditableTarget(target) {
   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,
-  small = false
+  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: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-      lucideReact.CircleDashed,
-      {
-        "aria-hidden": "true",
-        className: small ? "size-[18px]" : "size-5",
-        strokeWidth: 1.5
-      }
-    ) });
+    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]",
-        small ? "[&>svg]:size-[18px]" : "[&>svg]:size-5"
-      ),
+      className: cn("flex [&>svg]:stroke-[1.5]", sizeClass2),
       children: resolved
     }
   );
@@ -9303,7 +9430,7 @@ function FloatingSidebar({
   collapsedWidth = DEFAULT_COLLAPSED_WIDTH,
   type = "single",
   openModuleIds: openModulesProp,
-  defaultOpenModuleIds = [],
+  defaultOpenModuleIds,
   onOpenModulesChange,
   hideEmptyModules = true,
   activeItemId: activeItemProp,
@@ -9332,9 +9459,16 @@ function FloatingSidebar({
   const isMobile = useIsMobile();
   const baseId = react.useId();
   const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  const moduleIdByItemId = react.useMemo(
+    () => new Map(modules.flatMap((module) => module.items.map((item) => [item.id, module.id]))),
+    [modules]
+  );
+  const moduleIdOf = (itemId) => itemId ? moduleIdByItemId.get(itemId) : void 0;
+  const initialActiveModuleId = moduleIdOf(activeItemProp ?? defaultActiveItemId);
   const [rawOpenModuleIds, setOpenModuleIds] = useControllableState2(
     openModulesProp,
-    defaultOpenModuleIds,
+    // Without an explicit default, the module of the current page starts open.
+    defaultOpenModuleIds ?? (initialActiveModuleId ? [initialActiveModuleId] : []),
     onOpenModulesChange
   );
   const railWidth = Math.max(MIN_COLLAPSED_WIDTH, collapsedWidth);
@@ -9352,6 +9486,51 @@ function FloatingSidebar({
     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);
@@ -9391,8 +9570,31 @@ function FloatingSidebar({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [shortcut, toggle, isMobile, mobileOpen, setMobileOpen]);
+  const openModule = (moduleId) => {
+    const opened = rawOpenModuleIds.includes(moduleId);
+    if (type === "multiple") {
+      if (!opened) setOpenModuleIds([...rawOpenModuleIds, moduleId]);
+    } else if (!opened || rawOpenModuleIds.length > 1) {
+      setOpenModuleIds([moduleId]);
+    }
+  };
+  const activeModuleId = moduleIdOf(activeItemId);
+  const syncedActive = react.useRef(`${activeItemId}|${activeModuleId}`);
+  react.useEffect(() => {
+    const key = `${activeItemId}|${activeModuleId}`;
+    if (syncedActive.current === key) return;
+    syncedActive.current = key;
+    if (activeModuleId) openModule(activeModuleId);
+  });
   const selectItem = (item, module, navigates) => {
-    if (navigates) setActiveItemId(item.id);
+    if (navigates) {
+      setActiveItemId(item.id);
+      openModule(module.id);
+      if (activeItemProp === void 0) {
+        syncedActive.current = `${item.id}|${moduleIdOf(item.id)}`;
+      }
+      if (queries[module.id]) setQueries((current) => ({ ...current, [module.id]: "" }));
+    }
     setFlyoutId(null);
     if (isMobile) setMobileOpen(false);
     onItemSelect?.(item, module);
@@ -9409,7 +9611,7 @@ function FloatingSidebar({
     renderLink,
     onToggleFavorite: toggleFavorite
   };
-  const toggleLabel = collapsed ? labels.expand : labels.collapse;
+  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)
@@ -9496,20 +9698,25 @@ function FloatingSidebar({
                   children: labels.title
                 }
               ),
-              !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
+                  ref: toggleRef,
                   type: "button",
                   "data-slot": "floating-sidebar-toggle",
                   "aria-label": toggleLabel,
-                  "aria-expanded": !collapsed,
-                  title: shortcut ? `${toggleLabel} (Ctrl/\u2318 + B)` : toggleLabel,
-                  onClick: toggle,
+                  "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.)
@@ -9595,36 +9802,65 @@ function FloatingSidebar({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsx(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",
-        {
-          type: "button",
-          "data-slot": "floating-sidebar-mobile-trigger",
-          "aria-label": labels.openMenu,
-          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,
+    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,
-          "aria-describedby": void 0,
-          className: "p-4 pt-12",
-          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
-          ]
-        }
+          ghostRef: morphGhostRef,
+          getTarget: getMorphTarget,
+          onDone: endMorph
+        },
+        morph.key
       )
-    ] }) });
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: nav });
 }
@@ -9758,7 +9994,8 @@ function ModuleCard({
   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 - 20) / 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(() => {
@@ -9798,7 +10035,7 @@ function ModuleCard({
         "border",
         collapsed ? "rounded-[14px]" : "rounded-2xl",
         tileSelected ? "border-primary bg-primary" : "bg-sidebar border-floating-sidebar-card-border",
-        open ? "shadow-[0_8px_24px_color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "shadow-[0_2px_8px_color-mix(in_srgb,var(--color-primary)_4%,transparent)]"
+        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",
@@ -9866,8 +10103,24 @@ function ModuleCard({
                       "span",
                       {
                         "data-slot": "floating-sidebar-module-icon",
-                        className: "relative flex shrink-0 items-center justify-center",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(SidebarIcon, { icon: module.icon, resolveIcon })
+                        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(
@@ -10055,7 +10308,9 @@ function ModuleCard({
                   "data-slot": "floating-sidebar-flyout-list",
                   "data-scroll": "muted",
                   className: cn(
-                    "max-h-[420px] min-h-0 overflow-y-auto",
+                    // 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: [
@@ -10120,7 +10375,7 @@ function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
       "span",
       {
         className: cn("flex shrink-0", active ? "text-primary" : "text-muted-foreground"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(SidebarIcon, { icon: item.icon, resolveIcon, small: true })
+        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 })
@@ -10229,6 +10484,1111 @@ function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
     }
   );
 }
+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);
@@ -10689,6 +12049,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;