@bizapps/design-system-testing 1.11.0 → 1.12.0

package/dist/main.js

@@ -1,10 +1,10 @@
 "use client";
-import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, ChevronsUpDownIcon, XIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, ChevronsLeft, Menu, ChevronDown, Star, BrushCleaning, House, Plane, Wallet, LayoutDashboardIcon, CircleDashed, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
+import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, ChevronsUpDownIcon, XIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, ChevronsLeft, Menu, ChevronDown, Star, BrushCleaning, House, Plane, Wallet, LayoutDashboardIcon, CircleDashed, LayoutGrid, PanelRightClose, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon, ArrowRight, CircleAlert, ArrowUpRight, Lock } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect, isValidElement, useImperativeHandle, cloneElement } from 'react';
+import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect, isValidElement, useReducer, useImperativeHandle, cloneElement, useSyncExternalStore, use } from 'react';
 import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Popover as Popover$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
 import { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -28,6 +28,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import confetti from 'canvas-confetti';
 import { flexRender, useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
+import { createPortal } from 'react-dom';
 import SignaturePadLib from 'signature_pad';
 
 // src/components/ui/Alert/alert.tsx
@@ -5404,10 +5405,11 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  overlayClassName,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
     /* @__PURE__ */ jsxs(
       Dialog$1.Content,
       {
@@ -9181,6 +9183,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}`,
@@ -9195,6 +9198,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 },
@@ -9203,8 +9208,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 = useRef(null);
+  const menuRef = useRef(null);
+  const onDoneRef = useRef(onDone);
+  useLayoutEffect(() => {
+    onDoneRef.current = onDone;
+  });
+  useLayoutEffect(() => {
+    const ghost = ghostRef.current;
+    if (!ghost) return;
+    let frame = 0;
+    let tries = 0;
+    const animations = [];
+    const options = {
+      duration: MORPH_MS,
+      easing: MORPH_EASE,
+      fill: "forwards"
+    };
+    const start = () => {
+      const target = getTarget();
+      if (!target) {
+        if (tries++ < 10) frame = requestAnimationFrame(start);
+        else onDoneRef.current();
+        return;
+      }
+      const to = morphBox(target);
+      const chevrons = morph.to === "open" ? 1 : 0;
+      animations.push(
+        ghost.animate([morphStyle(morph.from), morphStyle(to)], options),
+        chevronsRef.current.animate(
+          [{ opacity: morph.chevrons }, { opacity: chevrons }],
+          options
+        ),
+        menuRef.current.animate(
+          [{ opacity: 1 - morph.chevrons }, { opacity: 1 - chevrons }],
+          options
+        )
+      );
+      animations[0].onfinish = () => {
+        const settled = getTarget();
+        const end = settled && morphBox(settled);
+        if (!end || sameBox(end, to)) return onDoneRef.current();
+        const settle = ghost.animate([morphStyle(to), morphStyle(end)], {
+          ...options,
+          duration: MORPH_SETTLE_MS
+        });
+        animations.push(settle);
+        settle.onfinish = () => onDoneRef.current();
+      };
+    };
+    start();
+    return () => {
+      cancelAnimationFrame(frame);
+      animations.forEach((animation2) => animation2.cancel());
+    };
+  }, [morph, getTarget, ghostRef]);
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: ghostRef,
+        "aria-hidden": "true",
+        "data-slot": "floating-sidebar-morph",
+        "data-state": morph.to,
+        className: "text-primary pointer-events-none fixed z-[60] flex items-center justify-center overflow-hidden border-solid",
+        style: morphStyle(morph.from),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: chevronsRef,
+              "data-slot": "floating-sidebar-morph-chevrons",
+              className: "absolute flex",
+              style: {
+                opacity: morph.chevrons,
+                // Same direction as the close button's chevrons in the drawer.
+                transform: side === "right" ? "rotate(180deg)" : void 0
+              },
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "size-5", strokeWidth: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { ref: menuRef, className: "absolute flex", style: { opacity: 1 - morph.chevrons }, children: /* @__PURE__ */ jsx(Menu, { className: "size-5", strokeWidth: 1.5 }) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var DEFAULT_WIDTH = 305;
 var DEFAULT_COLLAPSED_WIDTH = 48;
+var TILE_ICON_SIZE = 22;
 var MIN_COLLAPSED_WIDTH = 40;
 var t = (prop, ms = 300, delay = 0) => `${prop} ${ms}ms ${EASE} ${delay}ms`;
 function transition2(reduced, ...parts) {
@@ -9236,31 +9365,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__ */ jsx("span", { "data-slot": "floating-sidebar-fallback-icon", className: "flex", children: /* @__PURE__ */ jsx(
-      CircleDashed,
-      {
-        "aria-hidden": "true",
-        className: small ? "size-[18px]" : "size-5",
-        strokeWidth: 1.5
-      }
-    ) });
+    return /* @__PURE__ */ jsx("span", { "data-slot": "floating-sidebar-fallback-icon", className: cn("flex", sizeClass2), children: /* @__PURE__ */ jsx(CircleDashed, { "aria-hidden": "true", strokeWidth: 1.5 }) });
   }
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-slot": "floating-sidebar-icon",
-      className: cn(
-        "flex",
-        "[&>svg]:stroke-[1.5]",
-        small ? "[&>svg]:size-[18px]" : "[&>svg]:size-5"
-      ),
+      className: cn("flex [&>svg]:stroke-[1.5]", sizeClass2),
       children: resolved
     }
   );
@@ -9326,6 +9453,51 @@ function FloatingSidebar({
     defaultMobileOpen,
     onMobileOpenChange
   );
+  const morphEnabled = isMobile && mobileOpenProp === void 0 && !reduced;
+  const triggerRef = useRef(null);
+  const toggleRef = useRef(null);
+  const morphGhostRef = useRef(null);
+  const deferredFocus = useRef(null);
+  const [morph, setMorph] = useState(null);
+  if (morph && !morphEnabled) setMorph(null);
+  const prevMobileOpen = useRef(mobileOpen);
+  useLayoutEffect(() => {
+    if (prevMobileOpen.current === mobileOpen) return;
+    prevMobileOpen.current = mobileOpen;
+    const ghost = morphGhostRef.current;
+    const source = ghost ?? (mobileOpen ? triggerRef.current : toggleRef.current);
+    deferredFocus.current = null;
+    if (!morphEnabled || !source || typeof source.animate !== "function") return;
+    deferredFocus.current = mobileOpen ? "toggle" : "trigger";
+    const chevrons = ghost?.querySelector(
+      '[data-slot="floating-sidebar-morph-chevrons"]'
+    );
+    setMorph((current) => ({
+      to: mobileOpen ? "open" : "closed",
+      from: morphBox(source),
+      chevrons: chevrons ? parseFloat(getComputedStyle(chevrons).opacity) : mobileOpen ? 0 : 1,
+      key: (current?.key ?? 0) + 1
+    }));
+  }, [mobileOpen, morphEnabled]);
+  const getMorphTarget = useCallback(
+    () => morph?.to === "open" ? toggleRef.current : triggerRef.current,
+    [morph?.to]
+  );
+  const endMorph = useCallback(() => setMorph(null), []);
+  useLayoutEffect(() => {
+    if (morph) return;
+    const pending = deferredFocus.current;
+    deferredFocus.current = null;
+    const active = document.activeElement;
+    if (pending === "toggle") {
+      const toggle2 = toggleRef.current;
+      if (toggle2 && active === toggle2.closest('[data-slot="sheet-content"]')) toggle2.focus();
+    } else if (pending === "trigger" && (!active || active === document.body)) {
+      triggerRef.current?.focus();
+    }
+  }, [morph]);
+  const morphing = morphEnabled && morph !== null;
+  const finePointer = useMediaQuery("(hover: hover) and (pointer: fine)");
   const [queries, setQueries] = useState({});
   const [flyoutId, setFlyoutId] = useState(null);
   const [hoverId, setHoverId] = useState(null);
@@ -9383,7 +9555,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)
@@ -9470,20 +9642,25 @@ function FloatingSidebar({
                   children: labels.title
                 }
               ),
-              !isMobile && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ 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.)
@@ -9569,36 +9746,65 @@ function FloatingSidebar({
     }
   );
   if (isMobile) {
-    return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
-      mobileOpenProp === void 0 && /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(Menu, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(
-        SheetContent,
+    return /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 300, children: [
+      /* @__PURE__ */ jsxs(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+        mobileOpenProp === void 0 && /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "data-slot": "floating-sidebar-mobile-trigger",
+            "aria-label": labels.openMenu,
+            style: {
+              opacity: morphing ? 0 : void 0,
+              pointerEvents: morphing ? "none" : void 0
+            },
+            className: "text-primary focus-visible:ring-primary bg-sidebar hover:bg-sidebar-accent flex size-10 cursor-pointer items-center justify-center rounded-[10px] shadow-[0_8px_24px_color-mix(in_srgb,var(--color-primary)_8%,transparent)] outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          SheetContent,
+          {
+            side,
+            "aria-describedby": void 0,
+            showCloseButton: false,
+            overlayClassName: "bg-primary/20",
+            className: "bg-transparent p-3 pt-2 shadow-none data-[side=left]:border-r-0 data-[side=right]:border-l-0",
+            style: { width: width + 24, maxWidth: "100%" },
+            onOpenAutoFocus: (event) => {
+              if (deferredFocus.current !== "toggle") return;
+              event.preventDefault();
+              event.currentTarget?.focus();
+            },
+            onCloseAutoFocus: (event) => {
+              if (deferredFocus.current === "trigger") event.preventDefault();
+            },
+            onEscapeKeyDown: (event) => {
+              const active = document.activeElement;
+              if (active instanceof HTMLInputElement && active.value && active.closest('[data-slot="floating-sidebar-search"]')) {
+                event.preventDefault();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: labels.title }),
+              nav
+            ]
+          }
+        )
+      ] }),
+      morphing && /* @__PURE__ */ jsx(
+        MobileMorph,
         {
+          morph,
           side,
-          "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__ */ jsx(SheetTitle, { className: "sr-only", children: labels.title }),
-            nav
-          ]
-        }
+          ghostRef: morphGhostRef,
+          getTarget: getMorphTarget,
+          onDone: endMorph
+        },
+        morph.key
       )
-    ] }) });
+    ] });
   }
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: nav });
 }
@@ -9732,7 +9938,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 = useRef(null);
   const wasCollapsed = useRef(collapsed);
   useEffect(() => {
@@ -9772,7 +9979,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",
@@ -9840,8 +10047,24 @@ function ModuleCard({
                       "span",
                       {
                         "data-slot": "floating-sidebar-module-icon",
-                        className: "relative flex shrink-0 items-center justify-center",
-                        children: /* @__PURE__ */ 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__ */ jsx(
+                          SidebarIcon,
+                          {
+                            icon: module.icon,
+                            resolveIcon,
+                            size: collapsed ? "lg" : "md"
+                          }
+                        )
                       }
                     ),
                     /* @__PURE__ */ jsx(
@@ -10029,7 +10252,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: [
@@ -10094,7 +10319,7 @@ function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
       "span",
       {
         className: cn("flex shrink-0", active ? "text-primary" : "text-muted-foreground"),
-        children: /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon, resolveIcon, small: true })
+        children: /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon, resolveIcon, size: "sm" })
       }
     ),
     /* @__PURE__ */ jsx("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: item.label })
@@ -10203,6 +10428,1111 @@ function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
     }
   );
 }
+var AppHubContext = createContext(null);
+function useAppHubContext() {
+  const context = use(AppHubContext);
+  if (!context) throw new Error("AppHub parts must be rendered inside <AppHub>.");
+  return context;
+}
+
+// src/components/compounds/AppHub/app-hub.constants.ts
+var DEFAULT_APP_HUB_ID = "app-hub";
+var DEFAULT_STORAGE_KEY = "tcce-app-hub:open";
+var OPEN_CHANGE_EVENT = "tcce-app-hub:open-change";
+var ITEM_SELECTOR = "[data-app-hub-item]";
+var ENTRY_SELECTOR = "[data-app-hub-entry]";
+var FOCUS_RING = "outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-3 focus-visible:outline-main-blue-primary";
+var TOOLTIP_CLASS = "rounded-lg px-2.75 py-1.75 text-[11px] leading-none font-semibold shadow-black-button motion-reduce:animate-none";
+var DEFAULT_APP_HUB_LABELS = {
+  navigation: "Applications",
+  allApps: "All applications",
+  sheetTitle: "Applications",
+  hideDock: "Hide dock",
+  showDock: "show applications dock",
+  tab: "Apps",
+  fab: "Apps",
+  pending: (count) => `${count} pending`,
+  leaves: (appName) => `leaves ${appName}`,
+  current: "Current",
+  noAccess: "No access \xB7 ask your manager",
+  searchLabel: "Search applications",
+  searchPlaceholder: "Search apps",
+  clearSearch: "Clear search",
+  resultCount: (count) => count === 1 ? "1 application found" : `${count} applications found`,
+  loading: "Loading applications",
+  empty: "No applications found",
+  noMatch: (query) => `No apps match \u201C${query}\u201D`,
+  noMatchDescription: "Check the spelling or clear the search.",
+  error: "Couldn\u2019t load applications",
+  errorDescription: "The apps in the dock still work.",
+  retry: "Try again",
+  directory: "View all applications",
+  close: "Close",
+  dockHidden: "Applications dock hidden. Use the Apps tab on the right edge to show it again.",
+  dockShown: "Applications dock shown"
+};
+
+// src/components/compounds/AppHub/app-hub.utils.ts
+function mergeLabels(defaults, overrides = {}) {
+  const defined = Object.entries(overrides).filter(([, value]) => value !== void 0);
+  return { ...defaults, ...Object.fromEntries(defined) };
+}
+function areLabelsEqual(a, b) {
+  const keys = Object.keys(a);
+  return keys.every((key) => Object.is(a[key], b[key]));
+}
+function normalizePending(pending) {
+  return typeof pending === "number" && Number.isFinite(pending) && pending >= 1 ? Math.floor(pending) : 0;
+}
+function formatPendingCount(count) {
+  return count > 9 ? "9+" : String(count);
+}
+function sumPending(apps) {
+  return apps.reduce((total, app) => total + (app.locked ? 0 : normalizePending(app.pending)), 0);
+}
+function getAppAccessibleName(app, labels, appName) {
+  const pending = normalizePending(app.pending);
+  return [
+    app.label,
+    pending > 0 && labels.pending(pending),
+    app.external && labels.leaves(appName)
+  ].filter(Boolean).join(", ");
+}
+function getEntryElement(container) {
+  return container?.querySelector(ENTRY_SELECTOR) ?? container?.querySelector(ITEM_SELECTOR) ?? null;
+}
+function groupApps(apps) {
+  const sections = /* @__PURE__ */ new Map([[void 0, []]]);
+  for (const app of apps) {
+    const key = app.group || void 0;
+    sections.set(key, [...sections.get(key) ?? [], app]);
+  }
+  return [...sections].filter(([, items]) => items.length > 0).map(([heading, items]) => ({ heading, apps: items }));
+}
+function filterApps(apps, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return apps;
+  return apps.filter(
+    (app) => `${app.label} ${app.description ?? ""}`.toLowerCase().includes(needle)
+  );
+}
+var appHubIconVariants = cva("relative flex shrink-0 items-center justify-center", {
+  variants: {
+    tone: {
+      green: "bg-green-100 text-green-800",
+      yellow: "bg-yellow-200 text-yellow-800",
+      navy: "bg-main-blue-primary/10 text-main-blue-primary",
+      orange: "bg-orange-100 text-orange-800",
+      purple: "bg-purple-100 text-purple-600",
+      grey: "bg-light-200 text-main-grey"
+    },
+    size: {
+      tile: "size-12 rounded-2xl [&_svg]:size-5",
+      row: "size-9 rounded-xl [&_svg]:size-4.5",
+      sheet: "size-10 rounded-xl [&_svg]:size-5"
+    },
+    // Declared last so `cn()` keeps the current fill over the tone.
+    current: { true: "bg-main-blue-primary text-main-white", false: "" }
+  },
+  defaultVariants: { tone: "grey", size: "tile", current: false }
+});
+function AppHubLink({
+  app,
+  afterNavigate,
+  onClick,
+  ...props
+}) {
+  const { renderLink, onNavigate } = useAppHubContext();
+  const linkProps = {
+    ...props,
+    href: app.href,
+    onClick: (event) => {
+      onClick?.(event);
+      const modified = event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (modified) return;
+      onNavigate?.(app, event);
+      afterNavigate?.();
+    }
+  };
+  return renderLink ? renderLink(linkProps, app) : /* @__PURE__ */ jsx("a", { ...linkProps });
+}
+function AppHubCounter({ count, className }) {
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "app-hub-counter",
+      className: cn(
+        "bg-main-orange-primary text-background ring-background absolute -top-1 -right-1 flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[11px] font-bold ring-2",
+        className
+      ),
+      children: formatPendingCount(count)
+    }
+  );
+}
+function AppHubTile({ app, current = false }) {
+  const { labels, appName } = useAppHubContext();
+  const name = getAppAccessibleName(app, labels, appName);
+  const tone = app.tone ?? "grey";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxs(
+      AppHubLink,
+      {
+        app,
+        "aria-label": name,
+        "aria-current": current ? "page" : void 0,
+        "data-slot": "app-hub-tile",
+        "data-variant": tone,
+        "data-current": current ? "" : void 0,
+        "data-app-hub-item": "",
+        "data-app-hub-entry": current ? "" : void 0,
+        className: cn(
+          appHubIconVariants({ tone, size: "tile", current }),
+          "hover:shadow-black-button transition-[translate,box-shadow] hover:-translate-y-0.5 active:translate-y-px active:shadow-none motion-reduce:transition-none",
+          "data-current:before:bg-main-orange-primary data-current:before:absolute data-current:before:-left-2.5 data-current:before:h-5 data-current:before:w-0.75 data-current:before:rounded-full",
+          FOCUS_RING
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "contents", children: app.icon }),
+          /* @__PURE__ */ jsx(AppHubCounter, { count: normalizePending(app.pending) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        "aria-hidden": "true",
+        side: "left",
+        variant: "primary",
+        size: "sm",
+        className: TOOLTIP_CLASS,
+        children: app.label
+      }
+    )
+  ] });
+}
+var NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End"]);
+function useArrowNavigation(containerRef) {
+  return useCallback(
+    (event) => {
+      const container = containerRef.current;
+      const target = event.target;
+      if (event.defaultPrevented || !container || !NAV_KEYS.has(event.key)) return;
+      if (!(target instanceof Element) || !container.contains(target)) return;
+      const current = target.closest(ITEM_SELECTOR);
+      if (!current) return;
+      const items = Array.from(container.querySelectorAll(ITEM_SELECTOR)).filter(
+        (item) => !item.closest("[inert]")
+      );
+      const index = items.indexOf(current);
+      if (index === -1) return;
+      event.preventDefault();
+      const last = items.length - 1;
+      const next = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowDown" ? (index + 1) % items.length : (index - 1 + items.length) % items.length;
+      items[next]?.focus();
+    },
+    [containerRef]
+  );
+}
+var SKELETON_ROWS = [
+  ["w-[58%]", "w-[82%]"],
+  ["w-[44%]", "w-[70%]"],
+  ["w-[64%]", "w-[76%]"]
+];
+function AppHubRow({
+  app,
+  current,
+  variant,
+  onActivate
+}) {
+  const { labels, appName } = useAppHubContext();
+  const descId = useId();
+  const locked = app.locked === true;
+  const pending = normalizePending(app.pending);
+  const className = cn(
+    "hover:bg-light-200 flex w-full items-center gap-3 rounded-xl p-2 text-left",
+    variant === "panel" ? "min-h-13" : "min-h-14",
+    current && "bg-light-200",
+    FOCUS_RING
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: appHubIconVariants({
+          tone: locked ? "grey" : app.tone ?? "grey",
+          size: variant === "panel" ? "row" : "sheet"
+        }),
+        children: app.icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "text-light-1000 flex items-center gap-1.5 font-medium",
+            variant === "panel" ? "text-sm" : "text-[15px]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: app.label }),
+            app.external && /* @__PURE__ */ jsx(
+              ArrowUpRight,
+              {
+                "aria-hidden": "true",
+                className: "text-main-grey size-3.25 shrink-0"
+              }
+            )
+          ]
+        }
+      ),
+      locked ? /* @__PURE__ */ jsxs("span", { className: "text-main-grey flex items-center gap-1 text-xs", children: [
+        /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true", className: "size-3" }),
+        labels.noAccess
+      ] }) : app.description && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: descId,
+          className: cn(
+            "text-main-grey truncate",
+            variant === "panel" ? "text-xs" : "text-[13px]"
+          ),
+          children: app.description
+        }
+      )
+    ] }),
+    current && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "bg-main-blue-primary text-main-white shrink-0 rounded-full px-2 py-0.5 text-[11px] leading-tight font-semibold",
+        children: labels.current
+      }
+    ),
+    pending > 0 && !locked && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "app-hub-row-counter",
+        className: cn(
+          "bg-main-orange-primary text-background flex shrink-0 items-center justify-center rounded-full font-bold",
+          variant === "panel" ? "h-5 min-w-5 px-1.5 text-[11px]" : "h-5.5 min-w-5.5 px-1.75 text-xs"
+        ),
+        children: formatPendingCount(pending)
+      }
+    )
+  ] });
+  if (locked) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-disabled": "true",
+        "data-slot": "app-hub-row",
+        "data-app-hub-item": "",
+        className: cn(className, "text-main-grey cursor-not-allowed"),
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    AppHubLink,
+    {
+      app,
+      afterNavigate: onActivate,
+      "aria-label": getAppAccessibleName(app, labels, appName),
+      "aria-current": current ? "page" : void 0,
+      "aria-describedby": app.description ? descId : void 0,
+      "data-slot": "app-hub-row",
+      "data-app-hub-item": "",
+      className,
+      children: body
+    }
+  );
+}
+function AppHubCatalog({
+  variant,
+  apps,
+  currentAppId,
+  status,
+  onRetry,
+  directoryHref,
+  searchThreshold,
+  onActivate
+}) {
+  const { labels, renderLink } = useAppHubContext();
+  const rootRef = useRef(null);
+  const onKeyDown = useArrowNavigation(rootRef);
+  const searchId = useId();
+  const searchRef = useRef(null);
+  const [query, setQuery] = useState("");
+  const directoryProps = {
+    href: directoryHref ?? "",
+    "data-slot": "app-hub-directory",
+    "data-app-hub-item": "",
+    onClick: () => onActivate?.(),
+    className: cn(
+      "text-main-blue-primary flex items-center gap-2 font-semibold",
+      variant === "panel" ? "border-light-200 hover:bg-light-200 justify-between border-t px-4 py-3 text-[13px]" : "border-light-300 mx-4 mb-4 min-h-13 justify-center rounded-full border text-sm",
+      FOCUS_RING
+    ),
+    children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      labels.directory,
+      /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true", className: "size-4 shrink-0" })
+    ] })
+  };
+  const ready = status === "ready";
+  const searchVisible = variant === "panel" && ready && apps.length >= searchThreshold;
+  if (!searchVisible && query) setQuery("");
+  const activeQuery = searchVisible ? query : "";
+  const filtered = filterApps(apps, activeQuery);
+  const message = status === "loading" ? labels.loading : activeQuery && labels.resultCount(filtered.length);
+  const [live, setLive] = useState("");
+  useEffect(() => setLive(message), [message]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "app-hub-catalog",
+      "data-variant": variant,
+      tabIndex: -1,
+      onKeyDown,
+      className: "flex min-h-0 flex-1 flex-col outline-none",
+      children: [
+        searchVisible && /* @__PURE__ */ jsxs("div", { "data-slot": "app-hub-search", className: "relative shrink-0 px-3 pt-3", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: searchId, className: "sr-only", children: labels.searchLabel }),
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              "aria-hidden": "true",
+              className: "text-main-grey pointer-events-none absolute top-[calc(50%+6px)] left-6 size-4 -translate-y-1/2"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: searchRef,
+              id: searchId,
+              type: "search",
+              value: query,
+              placeholder: labels.searchPlaceholder,
+              onChange: (event) => setQuery(event.target.value),
+              className: "border-main-grey/70 bg-background h-10 rounded-lg px-9 text-sm [&::-webkit-search-cancel-button]:appearance-none"
+            }
+          ),
+          query && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.clearSearch,
+              onClick: () => {
+                setQuery("");
+                searchRef.current?.focus();
+              },
+              className: cn(
+                "text-main-grey hover:bg-light-200 absolute top-[calc(50%+6px)] right-4 flex size-8 -translate-y-1/2 items-center justify-center rounded-lg [&_svg]:size-3.5",
+                FOCUS_RING
+              ),
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "app-hub-catalog-scroll",
+            className: cn(
+              "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-2",
+              variant === "panel" && "max-h-74"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: live }),
+              status === "loading" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "app-hub-loading",
+                  "aria-hidden": "true",
+                  className: "flex flex-col gap-1",
+                  children: SKELETON_ROWS.map(([first, second]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "bg-light-200 size-9 shrink-0 rounded-xl" }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-1.5", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn("bg-light-200 h-2.5 rounded-[5px]", first)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: cn("bg-light-200 h-2 rounded-sm", second) })
+                    ] })
+                  ] }, first))
+                }
+              ),
+              status === "error" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "alert",
+                  "data-slot": "app-hub-error",
+                  className: "flex flex-col items-start gap-2.5 px-2 pt-3 pb-2",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex size-9 items-center justify-center rounded-xl bg-red-100 text-red-800",
+                        children: /* @__PURE__ */ jsx(CircleAlert, { className: "size-4.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-light-1000 text-sm font-semibold", children: labels.error }),
+                      /* @__PURE__ */ jsx("span", { className: "text-main-grey text-[13px] leading-snug", children: labels.errorDescription })
+                    ] }),
+                    onRetry && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "outline",
+                        "data-app-hub-item": "",
+                        onClick: () => {
+                          rootRef.current?.focus();
+                          onRetry();
+                        },
+                        children: labels.retry
+                      }
+                    )
+                  ]
+                }
+              ),
+              ready && filtered.length === 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "app-hub-empty",
+                  className: "flex flex-col items-start gap-1.5 px-2 pt-4 pb-2",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-light-1000 text-sm font-semibold", children: activeQuery ? labels.noMatch(activeQuery) : labels.empty }),
+                    activeQuery && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-main-grey text-[13px] leading-snug", children: labels.noMatchDescription }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "data-app-hub-item": "",
+                          onClick: () => {
+                            setQuery("");
+                            searchRef.current?.focus();
+                          },
+                          className: cn(
+                            "text-main-blue-primary mt-1 rounded-sm py-1.5 text-[13px] font-semibold underline underline-offset-3",
+                            FOCUS_RING
+                          ),
+                          children: labels.clearSearch
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              ready && groupApps(filtered).map((section) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-1", children: [
+                section.heading && /* @__PURE__ */ jsx("h3", { className: "text-main-grey px-2 text-[11px] font-semibold uppercase", children: section.heading }),
+                /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-1", children: section.apps.map((app) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  AppHubRow,
+                  {
+                    app,
+                    current: app.id === currentAppId,
+                    variant,
+                    onActivate
+                  }
+                ) }, app.id)) })
+              ] }, section.heading ?? ""))
+            ]
+          }
+        ),
+        directoryHref && /* @__PURE__ */ jsx(Fragment$1, { children: renderLink ? renderLink(directoryProps, void 0) : /* @__PURE__ */ jsx("a", { ...directoryProps }) })
+      ]
+    }
+  );
+}
+function AppHubPanel({
+  id,
+  open,
+  onOpenChange,
+  onCloseAutoFocus,
+  ...catalog
+}) {
+  const { labels } = useAppHubContext();
+  const titleId = useId();
+  const contentRef = useRef(null);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  if (open && tooltipOpen) setTooltipOpen(false);
+  const quietRef = useRef(false);
+  useEffect(() => {
+    if (open) return () => void (quietRef.current = true);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs(
+      Tooltip,
+      {
+        open: tooltipOpen,
+        onOpenChange: (next) => setTooltipOpen(next && !open && !quietRef.current),
+        children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsx(
+            PopoverTrigger,
+            {
+              "aria-label": labels.allApps,
+              "aria-controls": id,
+              "data-slot": "app-hub-panel-trigger",
+              onPointerEnter: () => void (quietRef.current = false),
+              onBlur: () => void (quietRef.current = false),
+              "data-app-hub-item": "",
+              className: cn(
+                appHubIconVariants({ tone: "grey", size: "tile" }),
+                // Both triggers write `data-state` through `asChild` and the tooltip's value
+                // wins, so the open tint keys off `aria-expanded` instead.
+                "aria-expanded:bg-main-blue-primary/10 aria-expanded:text-main-blue-primary",
+                FOCUS_RING
+              ),
+              children: /* @__PURE__ */ jsx(LayoutGrid, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TooltipContent,
+            {
+              "aria-hidden": "true",
+              side: "left",
+              variant: "primary",
+              size: "sm",
+              className: TOOLTIP_CLASS,
+              children: labels.allApps
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        ref: contentRef,
+        id,
+        side: "left",
+        align: "center",
+        sideOffset: 22,
+        collisionPadding: 8,
+        "aria-labelledby": titleId,
+        "data-slot": "app-hub-panel",
+        onCloseAutoFocus,
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          const content = contentRef.current;
+          (content?.querySelector('input[type="search"]') ?? content?.querySelector(ITEM_SELECTOR) ?? content)?.focus();
+        },
+        className: "border-light-300 shadow-black-card max-h-(--radix-popover-content-available-height) w-75 gap-0 rounded-2xl border p-0 motion-reduce:data-[state=closed]:animate-none motion-reduce:data-[state=open]:animate-none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-3 pb-1", children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: titleId,
+                className: "font-heading text-main-blue-primary text-base leading-tight font-bold",
+                children: labels.allApps
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.close,
+                onClick: () => onOpenChange(false),
+                className: cn(
+                  "text-main-grey hover:bg-light-200 flex size-8 items-center justify-center rounded-xl [&_svg]:size-4",
+                  FOCUS_RING
+                ),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            AppHubCatalog,
+            {
+              variant: "panel",
+              onActivate: () => onOpenChange(false),
+              ...catalog
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function AppHubRail({
+  id,
+  apps,
+  currentAppId,
+  open,
+  onHide,
+  railRef,
+  panel
+}) {
+  const { labels } = useAppHubContext();
+  const onKeyDown = useArrowNavigation(railRef);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: railRef,
+      id,
+      "data-slot": "app-hub-rail",
+      "data-state": open ? "open" : "closed",
+      inert: !open,
+      onKeyDown,
+      className: cn(
+        "pointer-events-auto flex flex-col items-center gap-2 px-2.5 py-3",
+        "border-light-200 bg-background/95 shadow-black-card rounded-l-4xl border border-r-0",
+        "transition-transform duration-300 data-[state=closed]:translate-x-[150%] motion-reduce:transition-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col items-center gap-2", children: apps.map((app) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppHubTile, { app, current: app.id === currentAppId }) }, app.id)) }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-light-300 my-0.5 h-px w-6.5" }),
+        panel,
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-light-300 my-0.5 h-px w-6.5" }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.hideDock,
+              "aria-expanded": "true",
+              "aria-controls": id,
+              "data-slot": "app-hub-hide",
+              "data-app-hub-item": "",
+              onClick: onHide,
+              className: cn(
+                "text-main-grey hover:bg-light-200 hover:text-main-blue-primary flex size-8 items-center justify-center rounded-xl [&_svg]:size-4",
+                FOCUS_RING
+              ),
+              children: /* @__PURE__ */ jsx(PanelRightClose, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TooltipContent,
+            {
+              "aria-hidden": "true",
+              side: "left",
+              variant: "primary",
+              size: "sm",
+              className: TOOLTIP_CLASS,
+              children: labels.hideDock
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AppHubTab({ railId, open, pending, onShow, tabRef }) {
+  const { labels } = useAppHubContext();
+  const name = [`${labels.tab}, ${labels.showDock}`, pending > 0 && labels.pending(pending)].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "app-hub-tab-wrapper",
+      "data-state": open ? "open" : "closed",
+      inert: open,
+      className: "pointer-events-auto transition-transform duration-300 data-[state=open]:translate-x-[150%] motion-reduce:transition-none",
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: tabRef,
+          type: "button",
+          "aria-label": name,
+          "aria-expanded": "false",
+          "aria-controls": railId,
+          "data-slot": "app-hub-tab",
+          "data-app-hub-entry": "",
+          onClick: onShow,
+          className: cn(
+            "border-light-300 bg-background/95 text-main-blue-primary flex w-10 flex-col items-center gap-2 rounded-l-2xl border border-r-0 py-3.5",
+            FOCUS_RING
+          ),
+          children: [
+            /* @__PURE__ */ jsx(LayoutGrid, { "aria-hidden": "true", className: "size-4.5" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-main-grey text-[11px] leading-none font-semibold tracking-[0.12em] uppercase [writing-mode:vertical-rl]",
+                children: labels.tab
+              }
+            ),
+            pending > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-slot": "app-hub-counter",
+                className: "bg-main-orange-primary text-background flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1.25 text-[11px] leading-none font-bold",
+                children: formatPendingCount(pending)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function AppHubSheet({ pending, ...catalog }) {
+  const { labels } = useAppHubContext();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      SheetTrigger,
+      {
+        "data-slot": "app-hub-fab",
+        "data-app-hub-entry": "",
+        className: cn(
+          // Bottom-right, in the thumb zone and out of the reading area (the rail centers instead).
+          "bg-main-blue-primary text-main-white shadow-black-button pointer-events-auto mr-4 mb-4 flex h-12 items-center gap-2 self-end rounded-full pr-4.5 pl-4 text-sm font-semibold",
+          FOCUS_RING
+        ),
+        children: [
+          /* @__PURE__ */ jsx(LayoutGrid, { "aria-hidden": "true", className: "size-4.5" }),
+          labels.fab,
+          pending > 0 && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            ", ",
+            labels.pending(pending)
+          ] }),
+          pending > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "app-hub-counter",
+              className: "bg-main-orange-primary text-background flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] leading-none font-bold",
+              children: formatPendingCount(pending)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        side: "bottom",
+        "aria-modal": "true",
+        "aria-describedby": void 0,
+        showCloseButton: false,
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          event.currentTarget.querySelector('[data-slot="app-hub-sheet-close"]')?.focus();
+        },
+        className: "max-h-[85dvh] rounded-t-3xl motion-reduce:transition-none motion-reduce:data-closed:animate-none motion-reduce:data-open:animate-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-light-300 mx-auto mt-2 h-1 w-10 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-2", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { className: "font-heading text-main-blue-primary text-xl leading-tight font-bold", children: labels.sheetTitle }),
+            /* @__PURE__ */ jsx(
+              SheetClose,
+              {
+                "data-slot": "app-hub-sheet-close",
+                "aria-label": labels.close,
+                className: cn(
+                  "text-main-grey hover:bg-light-200 flex size-11 items-center justify-center rounded-xl [&_svg]:size-5",
+                  FOCUS_RING
+                ),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(AppHubCatalog, { ...catalog, variant: "sheet", onActivate: () => setOpen(false) })
+        ]
+      }
+    )
+  ] });
+}
+var noopSubscribe = () => () => {
+};
+var nullSnapshot = () => null;
+function useAppHubOpen({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  storageKey: storageKey2,
+  layoutDefault
+}) {
+  const controlled = controlledOpen !== void 0;
+  const persistedKey = !controlled ? storageKey2 : null;
+  const fallback = defaultOpen ?? layoutDefault;
+  const [memoryOpen, setMemoryOpen] = useState(void 0);
+  const [sessionOverride, setSessionOverride] = useState(void 0);
+  const store = useMemo(() => {
+    if (persistedKey === null) return { subscribe: noopSubscribe, getSnapshot: nullSnapshot };
+    const subscribe2 = (notify) => {
+      const onStorage = (event) => {
+        if (event.key === null || event.key === persistedKey) notify();
+      };
+      const onChange = (event) => {
+        if (event.detail?.key === persistedKey) notify();
+      };
+      window.addEventListener("storage", onStorage);
+      window.addEventListener(OPEN_CHANGE_EVENT, onChange);
+      return () => {
+        window.removeEventListener("storage", onStorage);
+        window.removeEventListener(OPEN_CHANGE_EVENT, onChange);
+      };
+    };
+    const getSnapshot2 = () => {
+      try {
+        const value = window.localStorage.getItem(persistedKey);
+        return value === "true" ? true : value === "false" ? false : null;
+      } catch {
+        return null;
+      }
+    };
+    return { subscribe: subscribe2, getSnapshot: getSnapshot2 };
+  }, [persistedKey]);
+  const stored = useSyncExternalStore(store.subscribe, store.getSnapshot, nullSnapshot);
+  const setOpen = useCallback(
+    (next) => {
+      onOpenChange?.(next);
+      if (controlled) return;
+      if (storageKey2 === null) {
+        setMemoryOpen(next);
+        return;
+      }
+      try {
+        window.localStorage.setItem(storageKey2, String(next));
+        setSessionOverride(void 0);
+      } catch {
+        setSessionOverride(next);
+      }
+      window.dispatchEvent(
+        new CustomEvent(OPEN_CHANGE_EVENT, { detail: { key: storageKey2 } })
+      );
+    },
+    [controlled, onOpenChange, storageKey2]
+  );
+  let open;
+  if (controlled) open = controlledOpen;
+  else if (storageKey2 === null) open = memoryOpen ?? fallback;
+  else open = sessionOverride ?? stored ?? fallback;
+  return { open, setOpen };
+}
+var DESKTOP_QUERY = "(min-width: 1024px)";
+var TABLET_QUERY = "(min-width: 768px)";
+function hasMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+function subscribe(notify) {
+  if (!hasMatchMedia()) return () => {
+  };
+  const lists = [DESKTOP_QUERY, TABLET_QUERY].map((query) => window.matchMedia(query));
+  lists.forEach((list) => list.addEventListener("change", notify));
+  return () => lists.forEach((list) => list.removeEventListener("change", notify));
+}
+function getSnapshot() {
+  if (!hasMatchMedia()) return "desktop";
+  if (window.matchMedia(DESKTOP_QUERY).matches) return "desktop";
+  return window.matchMedia(TABLET_QUERY).matches ? "tablet" : "mobile";
+}
+var getServerSnapshot = () => "desktop";
+function useAppHubViewport() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function AppHub({
+  apps,
+  appName,
+  currentAppId,
+  catalogStatus = "ready",
+  onRetry,
+  directoryHref,
+  layout = "auto",
+  searchThreshold = 7,
+  position = "fixed",
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  storageKey: storageKey2 = DEFAULT_STORAGE_KEY,
+  onNavigate,
+  renderLink,
+  labels: labelOverrides,
+  id = DEFAULT_APP_HUB_ID,
+  className
+}) {
+  const merged = mergeLabels(DEFAULT_APP_HUB_LABELS, labelOverrides);
+  const [stableLabels, setStableLabels] = useState(merged);
+  const labels = areLabelsEqual(stableLabels, merged) ? stableLabels : merged;
+  if (labels !== stableLabels) setStableLabels(labels);
+  const viewport = useAppHubViewport();
+  const family = layout === "auto" ? viewport === "mobile" ? "sheet" : "dock" : layout;
+  const { open, setOpen } = useAppHubOpen({
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    storageKey: storageKey2,
+    // Tablet starts collapsed only when the layout follows the viewport.
+    layoutDefault: !(layout === "auto" && viewport === "tablet")
+  });
+  const [panelOpen, setPanelOpen] = useState(false);
+  if (!open && panelOpen) setPanelOpen(false);
+  const [announcement, setAnnouncement] = useState("");
+  const [, requestRender] = useReducer((count) => count + 1, 0);
+  const previousOpenRef = useRef(open);
+  const railRef = useRef(null);
+  const tabRef = useRef(null);
+  const focusIntentRef = useRef(null);
+  const railId = `${id}-rail`;
+  useLayoutEffect(() => {
+    const intent = focusIntentRef.current;
+    focusIntentRef.current = null;
+    if (previousOpenRef.current === open) return;
+    previousOpenRef.current = open;
+    setAnnouncement(intent === open ? open ? labels.dockShown : labels.dockHidden : "");
+    const entry = open ? getEntryElement(railRef.current) : tabRef.current;
+    if (intent === open) {
+      entry?.focus();
+      return;
+    }
+    const active = document.activeElement;
+    const stranded = open ? [tabRef.current] : [railRef.current, document.getElementById(`${id}-panel`)];
+    if (active && stranded.some((element) => element?.contains(active))) entry?.focus();
+  });
+  function toggle(next) {
+    focusIntentRef.current = next;
+    setOpen(next);
+    requestRender();
+  }
+  const context = useMemo(
+    () => ({ labels, appName, renderLink, onNavigate }),
+    [labels, appName, renderLink, onNavigate]
+  );
+  return /* @__PURE__ */ jsx(AppHubContext, { value: context, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      id,
+      "aria-label": labels.navigation,
+      "data-slot": "app-hub",
+      "data-layout": family,
+      "data-state": open ? "open" : "closed",
+      "data-position": position,
+      className: cn(
+        // `overflow-x-clip` keeps the slid-out form from creating scrollable overflow
+        // (a scrollIntoView would otherwise shift the host); `pl-8` leaves room for the shadow.
+        "pointer-events-none inset-y-0 right-0 z-40 grid items-center justify-items-end overflow-x-clip pl-8 *:col-start-1 *:row-start-1",
+        position === "fixed" ? "fixed" : "absolute",
+        className
+      ),
+      children: [
+        family === "sheet" ? /* @__PURE__ */ jsx(
+          AppHubSheet,
+          {
+            apps,
+            currentAppId,
+            status: catalogStatus,
+            onRetry,
+            directoryHref,
+            searchThreshold,
+            pending: sumPending(apps)
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(
+            AppHubRail,
+            {
+              id: railId,
+              apps: apps.filter((app) => app.inRail && !app.locked),
+              currentAppId,
+              open,
+              onHide: () => toggle(false),
+              railRef,
+              panel: /* @__PURE__ */ jsx(
+                AppHubPanel,
+                {
+                  id: `${id}-panel`,
+                  open: panelOpen,
+                  onOpenChange: setPanelOpen,
+                  onCloseAutoFocus: (event) => {
+                    if (open) return;
+                    event.preventDefault();
+                    const active = document.activeElement;
+                    if (!active || active === document.body)
+                      tabRef.current?.focus();
+                  },
+                  apps,
+                  currentAppId,
+                  status: catalogStatus,
+                  onRetry,
+                  directoryHref,
+                  searchThreshold
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AppHubTab,
+            {
+              railId,
+              open,
+              pending: sumPending(apps),
+              onShow: () => toggle(true),
+              tabRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "data-slot": "app-hub-live",
+            className: "sr-only",
+            children: announcement
+          }
+        )
+      ]
+    }
+  ) });
+}
+function getLiveEntry(root) {
+  const live = [...root?.querySelectorAll("[data-slot]") ?? []].find(
+    (region) => !region.closest("[inert]") && getEntryElement(region) !== null
+  );
+  return getEntryElement(live ?? root);
+}
+function AppHubSkipLink({
+  targetId = DEFAULT_APP_HUB_ID,
+  children = "Skip to applications",
+  className,
+  onClick,
+  ...props
+}) {
+  function handleClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    const entry = getLiveEntry(document.getElementById(targetId));
+    if (!entry) return;
+    event.preventDefault();
+    entry.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      href: `#${targetId}`,
+      "data-slot": "app-hub-skip-link",
+      onClick: handleClick,
+      className: cn(
+        "bg-main-blue-primary text-main-white sr-only rounded-md px-4 py-2 text-sm font-semibold",
+        "focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50",
+        "focus-visible:outline-main-orange-primary outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
+        className
+      ),
+      children
+    }
+  );
+}
 var DrawerContext = createContext({ isOpen: false, modal: true });
 function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
   const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
@@ -10631,6 +11961,6 @@ function TCCEProvider({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
-export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONFETTI_COLORS, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, FloatingSidebar, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignaturePad, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast, validatePhone };
+export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppHub, AppHubSkipLink, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONFETTI_COLORS, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, FloatingSidebar, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignaturePad, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast, validatePhone };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map