@bizapps/design-system-testing 1.10.0 → 1.11.0

package/dist/main.cjs

@@ -2243,10 +2243,10 @@ function createStore() {
     listeners: [],
     add(item, id) {
       const toastId = id ?? Math.random().toString(36).slice(2);
-      const exists = store.toasts.find((t) => t.id === toastId);
+      const exists = store.toasts.find((t2) => t2.id === toastId);
       if (exists) {
         store.toasts = store.toasts.map(
-          (t) => t.id === toastId ? { ...t, ...item, id: toastId } : t
+          (t2) => t2.id === toastId ? { ...t2, ...item, id: toastId } : t2
         );
       } else {
         store.toasts = [{ id: toastId, ...item }, ...store.toasts].slice(0, MAX_TOASTS);
@@ -2261,7 +2261,7 @@ function createStore() {
     remove(id) {
       clearTimeout(timers.get(id));
       timers.delete(id);
-      store.toasts = store.toasts.filter((t) => t.id !== id);
+      store.toasts = store.toasts.filter((t2) => t2.id !== id);
       store.listeners.forEach((l) => l([...store.toasts]));
     },
     subscribe(listener) {
@@ -2405,7 +2405,7 @@ function Toaster({ position = "bottom-right", children }) {
           "pointer-events-none fixed z-[100] flex flex-col gap-2",
           positionStyles[position]
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", initial: false, children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { ...t }) }, t.id)) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", initial: false, children: toasts.map((t2) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { ...t2 }) }, t2.id)) })
       }
     )
   ] });
@@ -5186,13 +5186,11 @@ function AbilityProvider({ children, permissions }) {
     setImperativelyResolved(true);
   }, []);
   const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
-  const syncedKey = react.useRef(permissionKey);
-  react.useEffect(() => {
-    if (permissionKey === null) return;
-    if (permissionKey === syncedKey.current) return;
-    syncedKey.current = permissionKey;
+  const [syncedKey, setSyncedKey] = react.useState(permissionKey);
+  if (permissionKey !== null && permissionKey !== syncedKey) {
+    setSyncedKey(permissionKey);
     setPermissionSet(new Set(permissions));
-  }, [permissionKey, permissions]);
+  }
   const value = react.useMemo(
     () => ({ can: can2, setAbilities, clearAbilities, status }),
     [can2, setAbilities, clearAbilities, status]
@@ -5206,6 +5204,9 @@ function useAbility() {
   }
   return context;
 }
+function useOptionalAbility() {
+  return react.useContext(AbilityContext);
+}
 function useCan(permissions, mode = "any") {
   const { can: can2 } = useAbility();
   return can2(permissions, mode);
@@ -9200,6 +9201,1034 @@ function BottomNavTabsList({ items, className }) {
     }
   );
 }
+var DEFAULT_LABELS = {
+  navigation: "Modules navigation",
+  title: "Modules",
+  collapse: "Collapse menu",
+  expand: "Expand menu",
+  openMenu: "Open menu",
+  currentPageSuffix: " (contains the current page)",
+  searchPlaceholder: () => "Filter links\u2026",
+  searchLabel: (moduleLabel) => `Filter links of ${moduleLabel}`,
+  clearSearch: "Clear search",
+  noMatchesTitle: "No matches",
+  noMatches: (moduleLabel, query) => `No links in ${moduleLabel} match \u201C${query}\u201D.`,
+  flyoutNoMatches: (query) => `No links match \u201C${query}\u201D.`,
+  emptyModule: "No links in this module yet.",
+  addFavorite: (itemLabel) => `Add to favorites: ${itemLabel}`,
+  removeFavorite: (itemLabel) => `Remove from favorites: ${itemLabel}`
+};
+var EASE = "cubic-bezier(.2,.8,.2,1)";
+var MOTION_MS = 240;
+var FADE_MS = MOTION_MS / 2;
+var BOUNCE_KEYFRAMES = [
+  { transform: "translateY(0) scale(1)" },
+  { transform: "translateY(-3px) scale(1.06)", offset: 0.35 },
+  { transform: "translateY(0) scale(0.97)", offset: 0.65 },
+  { transform: "translateY(0) scale(1)" }
+];
+var BOUNCE_MS = 420;
+var SUBTLE_SCROLLBAR = "[scrollbar-color:var(--floating-sidebar-scrollbar-thumb)_var(--floating-sidebar-scrollbar-track)]! [&::-webkit-scrollbar]:w-2.5! [&::-webkit-scrollbar-track]:bg-floating-sidebar-scrollbar-track! [&::-webkit-scrollbar-thumb]:rounded-full! [&::-webkit-scrollbar-thumb]:border-2! [&::-webkit-scrollbar-thumb]:border-solid! [&::-webkit-scrollbar-thumb]:border-floating-sidebar-scrollbar-track! [&::-webkit-scrollbar-thumb]:bg-floating-sidebar-scrollbar-thumb! [&::-webkit-scrollbar-thumb:hover]:bg-floating-sidebar-scrollbar-thumb-hover!";
+var DEFAULT_WIDTH = 276;
+var DEFAULT_COLLAPSED_WIDTH = 48;
+var MIN_COLLAPSED_WIDTH = 40;
+var t = (prop, ms = 300, delay = 0) => `${prop} ${ms}ms ${EASE} ${delay}ms`;
+function transition2(reduced, ...parts) {
+  const kept = reduced ? parts.filter((part) => /^(opacity|visibility|background|color|box-shadow)/.test(part)) : parts;
+  return kept.join(", ") || "none";
+}
+function useControllableState2(value, defaultValue, onChange) {
+  const [internal, setInternal] = react.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const setValue = react.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [current, setValue];
+}
+var normalize = (value) => value.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function filterItems(items, query) {
+  const needle = normalize(query.trim());
+  return needle ? items.filter((item) => normalize(item.label).includes(needle)) : items;
+}
+var lastUsedSidebar = null;
+var SHORTCUT_SIDEBAR = '[data-slot="floating-sidebar"][data-shortcut]';
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.closest('[data-slot="floating-sidebar-search"]')) return false;
+  return target.closest('[contenteditable]:not([contenteditable="false"])') !== null || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+}
+function SidebarIcon({
+  icon,
+  resolveIcon,
+  small = false
+}) {
+  const resolved = typeof icon === "string" ? resolveIcon?.(icon) : icon;
+  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-icon",
+      className: cn(
+        "flex",
+        "[&>svg]:stroke-[1.5]",
+        small ? "[&>svg]:size-[18px]" : "[&>svg]:size-5"
+      ),
+      children: resolved
+    }
+  );
+}
+function FloatingSidebar({
+  modules,
+  resolveIcon,
+  renderLink,
+  open: openProp,
+  defaultOpen = true,
+  onOpenChange,
+  side = "left",
+  width = DEFAULT_WIDTH,
+  collapsedWidth = DEFAULT_COLLAPSED_WIDTH,
+  type = "single",
+  openModuleIds: openModulesProp,
+  defaultOpenModuleIds = [],
+  onOpenModulesChange,
+  hideEmptyModules = true,
+  activeItemId: activeItemProp,
+  defaultActiveItemId = null,
+  onItemSelect,
+  favoriteIds: favoritesProp,
+  defaultFavoriteIds = [],
+  onFavoritesChange,
+  showFavorites = true,
+  loading = false,
+  emptyState,
+  mobileOpen: mobileOpenProp,
+  defaultMobileOpen = false,
+  onMobileOpenChange,
+  shortcut = true,
+  labels: labelsProp,
+  className,
+  ref,
+  style,
+  onPointerDownCapture,
+  onFocusCapture,
+  ...navProps
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const isMobile = useIsMobile();
+  const baseId = react.useId();
+  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  const [rawOpenModuleIds, setOpenModuleIds] = useControllableState2(
+    openModulesProp,
+    defaultOpenModuleIds,
+    onOpenModulesChange
+  );
+  const railWidth = Math.max(MIN_COLLAPSED_WIDTH, collapsedWidth);
+  const [activeItemId, setActiveItemId] = useControllableState2(
+    activeItemProp,
+    defaultActiveItemId
+  );
+  const [favoriteIds, setFavoriteIds] = useControllableState2(
+    favoritesProp,
+    defaultFavoriteIds,
+    onFavoritesChange
+  );
+  const [mobileOpen, setMobileOpen] = useControllableState2(
+    mobileOpenProp,
+    defaultMobileOpen,
+    onMobileOpenChange
+  );
+  const [queries, setQueries] = react.useState({});
+  const [flyoutId, setFlyoutId] = react.useState(null);
+  const [hoverId, setHoverId] = react.useState(null);
+  const collapsed = !isMobile && !open;
+  const [prevCollapsed, setPrevCollapsed] = react.useState(collapsed);
+  const [settling, setSettling] = react.useState(false);
+  if (prevCollapsed !== collapsed) {
+    setPrevCollapsed(collapsed);
+    setSettling(collapsed);
+    setFlyoutId(null);
+    setHoverId(null);
+  }
+  react.useEffect(() => {
+    if (!settling) return;
+    const timer = setTimeout(() => setSettling(false), MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [settling]);
+  const toggle = react.useCallback(() => setOpen(!open), [open, setOpen]);
+  const navRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!shortcut) return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || isEditableTarget(event.target)) return;
+      if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === "b") {
+        const owner = event.target instanceof Element ? event.target.closest(SHORTCUT_SIDEBAR) : null;
+        const nav2 = navRef.current;
+        if (owner && owner !== nav2) return;
+        if (!owner) {
+          const fallback = lastUsedSidebar?.isConnected && lastUsedSidebar.matches(SHORTCUT_SIDEBAR) ? lastUsedSidebar : document.querySelector(SHORTCUT_SIDEBAR);
+          if (fallback && fallback !== nav2) return;
+        }
+        event.preventDefault();
+        if (isMobile) setMobileOpen(!mobileOpen);
+        else toggle();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [shortcut, toggle, isMobile, mobileOpen, setMobileOpen]);
+  const selectItem = (item, module, navigates) => {
+    if (navigates) setActiveItemId(item.id);
+    setFlyoutId(null);
+    if (isMobile) setMobileOpen(false);
+    onItemSelect?.(item, module);
+  };
+  const toggleFavorite = (itemId) => setFavoriteIds(
+    favoriteIds.includes(itemId) ? favoriteIds.filter((id) => id !== itemId) : [...favoriteIds, itemId]
+  );
+  const list = {
+    activeItemId,
+    favoriteIds: showFavorites ? favoriteIds : null,
+    reduced,
+    labels,
+    resolveIcon,
+    renderLink,
+    onToggleFavorite: toggleFavorite
+  };
+  const toggleLabel = collapsed ? labels.expand : labels.collapse;
+  const ability = useOptionalAbility();
+  const usesPermissions = modules.some(
+    (module) => module.permission || module.items.some((item) => item.permission)
+  );
+  const permissionsPending = usesPermissions && ability?.status === "loading";
+  const isAllowed = (entry) => !entry.permission || ability?.status === "ready" && ability.can(entry.permission, entry.permissionMode);
+  const authorizedModules = usesPermissions ? modules.filter(isAllowed).flatMap((module) => {
+    const items = module.items.filter(isAllowed);
+    return items.length > 0 || module.items.length === 0 ? [{ ...module, items }] : [];
+  }) : modules;
+  const showSkeletons = loading || permissionsPending;
+  const visibleModules = hideEmptyModules ? authorizedModules.filter((module) => module.items.length > 0) : authorizedModules;
+  const visibleModuleIds = new Set(visibleModules.map((module) => module.id));
+  const openModuleIds = type === "single" ? rawOpenModuleIds.filter((id) => visibleModuleIds.has(id)).slice(0, 1) : rawOpenModuleIds;
+  const toggleModule = (moduleId) => {
+    const isOpen = openModuleIds.includes(moduleId);
+    if (type === "multiple") {
+      setOpenModuleIds(
+        isOpen ? openModuleIds.filter((id) => id !== moduleId) : [...openModuleIds, moduleId]
+      );
+    } else {
+      setOpenModuleIds(isOpen ? [] : [moduleId]);
+    }
+  };
+  const nav = /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ...navProps,
+      ref: (node) => {
+        navRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      },
+      onPointerDownCapture: (event) => {
+        lastUsedSidebar = event.currentTarget;
+        onPointerDownCapture?.(event);
+      },
+      onFocusCapture: (event) => {
+        lastUsedSidebar = event.currentTarget;
+        onFocusCapture?.(event);
+      },
+      "data-slot": "floating-sidebar",
+      "data-shortcut": shortcut ? "" : void 0,
+      "data-state": collapsed ? "collapsed" : "expanded",
+      "data-side": side,
+      "aria-label": labels.navigation,
+      "aria-busy": showSkeletons || void 0,
+      className: cn(
+        "flex h-full min-h-0 flex-col gap-3",
+        // useIsMobile only resolves after mount; hide the inline layout on phones with CSS
+        // so the first paint never shows it before the drawer takes over.
+        !isMobile && "max-md:hidden",
+        className
+      ),
+      style: isMobile ? style : {
+        ...style,
+        width: collapsed ? railWidth : width,
+        transition: transition2(reduced, t("width", MOTION_MS))
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "floating-sidebar-header",
+            className: cn(
+              "flex h-10 shrink-0 items-center",
+              side === "right" && "flex-row-reverse"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  title: labels.title,
+                  className: "text-muted-foreground overflow-hidden pl-1.5 text-[11px] font-medium tracking-[.12em] text-ellipsis whitespace-nowrap uppercase",
+                  style: {
+                    opacity: collapsed ? 0 : 1,
+                    maxWidth: collapsed ? 0 : 200,
+                    transition: transition2(
+                      reduced,
+                      t("opacity", FADE_MS, collapsed ? 0 : FADE_MS),
+                      t("max-width", MOTION_MS)
+                    )
+                  },
+                  children: labels.title
+                }
+              ),
+              !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "floating-sidebar-toggle",
+                  "aria-label": toggleLabel,
+                  "aria-expanded": !collapsed,
+                  title: shortcut ? `${toggleLabel} (Ctrl/\u2318 + B)` : toggleLabel,
+                  onClick: 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: {
+                    // The auto margin keeps the toggle on the edge while the width animates;
+                    // only the outer margin changes, to center it on the collapsed rail.
+                    // (`auto` cannot be interpolated, so animating it made the toggle jump.)
+                    [side === "right" ? "marginLeft" : "marginRight"]: collapsed ? (railWidth - 32) / 2 : 0,
+                    transition: transition2(
+                      reduced,
+                      t(side === "right" ? "margin-left" : "margin-right", MOTION_MS)
+                    )
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "flex",
+                      style: {
+                        // The chevrons point towards the edge when they collapse the sidebar.
+                        transform: collapsed !== (side === "right") ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: transition2(reduced, t("transform", MOTION_MS))
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "floating-sidebar-modules",
+            className: "flex min-h-0 flex-1 flex-col",
+            style: {
+              gap: collapsed ? 8 : 12,
+              transition: transition2(reduced, t("gap", MOTION_MS))
+            },
+            children: [
+              showSkeletons && Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "floating-sidebar-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Skeleton,
+                {
+                  className: collapsed ? "rounded-[14px]" : "h-[58px] w-full rounded-2xl",
+                  style: collapsed ? { width: railWidth, height: railWidth } : void 0
+                }
+              ) }, index)),
+              !showSkeletons && visibleModules.length === 0 && emptyState,
+              !showSkeletons && visibleModules.map((module) => /* @__PURE__ */ jsxRuntime.jsx(
+                ModuleCard,
+                {
+                  tileSize: railWidth,
+                  module,
+                  regionId: `${baseId}-${module.id}`,
+                  flyoutRegionId: `${baseId}-${module.id}-flyout`,
+                  bodyWidth: isMobile ? void 0 : width - 2,
+                  collapsed,
+                  side,
+                  open: !collapsed && openModuleIds.includes(module.id),
+                  flyoutOpen: collapsed && flyoutId === module.id,
+                  anyFlyoutOpen: collapsed && flyoutId !== null,
+                  settling,
+                  tooltipOpen: collapsed && hoverId === module.id && !flyoutId,
+                  onTooltipOpenChange: (next) => setHoverId(
+                    (current) => next ? module.id : current === module.id ? null : current
+                  ),
+                  onFlyoutClose: () => setFlyoutId((current) => current === module.id ? null : current),
+                  list,
+                  query: queries[module.id] ?? "",
+                  onQueryChange: (query) => setQueries((current) => ({ ...current, [module.id]: query })),
+                  onHeaderClick: () => {
+                    if (collapsed) {
+                      setHoverId(null);
+                      setFlyoutId(flyoutId === module.id ? null : module.id);
+                    } else {
+                      toggleModule(module.id);
+                    }
+                  },
+                  onSelect: (item, navigates) => selectItem(item, module, navigates)
+                },
+                module.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.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,
+        {
+          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
+          ]
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: nav });
+}
+function ModuleSearch({
+  moduleLabel,
+  query,
+  focusable,
+  labels,
+  onQueryChange,
+  className
+}) {
+  const tabIndex = focusable ? 0 : -1;
+  const inputRef = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "floating-sidebar-search",
+      className: cn(
+        "text-muted-foreground border-floating-sidebar-search-border bg-floating-sidebar-search flex h-[38px] items-center gap-2 rounded-[10px] border pr-1 pl-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": "true", className: "size-4 shrink-0", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "search",
+            "aria-label": labels.searchLabel(moduleLabel),
+            placeholder: labels.searchPlaceholder(moduleLabel),
+            tabIndex,
+            value: query,
+            onChange: (event) => onQueryChange(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && query) {
+                event.stopPropagation();
+                onQueryChange("");
+              }
+            },
+            className: "text-foreground placeholder:text-muted-foreground h-[34px] min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] outline-none [&::-webkit-search-cancel-button]:appearance-none"
+          }
+        ),
+        query && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.clearSearch,
+            tabIndex,
+            onClick: () => {
+              onQueryChange("");
+              inputRef.current?.focus();
+            },
+            className: "focus-visible:ring-primary hover:bg-accent/60 flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent outline-none focus-visible:ring-2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-4", strokeWidth: 1.5 })
+          }
+        )
+      ]
+    }
+  );
+}
+function NoMatches({
+  show,
+  moduleLabel,
+  query,
+  labels,
+  compact
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "data-slot": "floating-sidebar-no-matches", children: show && /* @__PURE__ */ jsxRuntime.jsx(
+    NoMatchesMessage,
+    {
+      moduleLabel,
+      query,
+      labels,
+      compact
+    }
+  ) });
+}
+function NoMatchesMessage({
+  moduleLabel,
+  query,
+  labels,
+  compact = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        compact ? "gap-1 px-3 py-4" : "gap-1.5 px-3 py-5"
+      ),
+      children: [
+        !compact && /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.Search,
+          {
+            "aria-hidden": "true",
+            className: "text-muted-foreground size-5",
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary text-sm font-semibold", children: labels.noMatchesTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-[13px] leading-[1.4]", children: compact ? labels.flyoutNoMatches(query) : labels.noMatches(moduleLabel, query) })
+      ]
+    }
+  );
+}
+function ModuleCard({
+  module,
+  tileSize,
+  regionId,
+  flyoutRegionId,
+  bodyWidth,
+  side,
+  collapsed,
+  open,
+  flyoutOpen,
+  anyFlyoutOpen,
+  settling,
+  tooltipOpen,
+  onTooltipOpenChange,
+  onFlyoutClose,
+  list,
+  query,
+  onQueryChange,
+  onHeaderClick,
+  onSelect
+}) {
+  const { activeItemId, reduced, labels, resolveIcon } = list;
+  const hasActive = module.items.some((item) => item.id === activeItemId);
+  const tileActive = collapsed && hasActive;
+  const tileSelected = anyFlyoutOpen ? flyoutOpen : tileActive;
+  const fillAfterCollapse = tileSelected && tileActive && settling && !reduced;
+  const fillTransition = fillAfterCollapse ? `0ms linear ${MOTION_MS}ms` : `${FADE_MS}ms linear 0ms`;
+  const iconFlipDelay = fillAfterCollapse ? MOTION_MS : FADE_MS / 2;
+  const tilePadding = (tileSize - 2 - 20) / 2;
+  const cardRef = react.useRef(null);
+  const wasCollapsed = react.useRef(collapsed);
+  react.useEffect(() => {
+    const justCollapsed = collapsed && !wasCollapsed.current;
+    wasCollapsed.current = collapsed;
+    if (!justCollapsed || !hasActive || reduced) return;
+    const animation2 = cardRef.current?.animate?.(BOUNCE_KEYFRAMES, {
+      duration: BOUNCE_MS,
+      delay: MOTION_MS,
+      easing: "ease-out"
+    });
+    return () => animation2?.cancel();
+  }, [collapsed, hasActive, reduced]);
+  const items = filterItems(module.items, query);
+  const isEmpty = module.items.length === 0;
+  const emptyMessage = /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "floating-sidebar-empty-module",
+      className: "text-muted-foreground px-3 py-4 text-center text-[13px] leading-[1.4]",
+      children: labels.emptyModule
+    }
+  );
+  const tileRef = react.useRef(null);
+  const closedFromOutside = react.useRef(false);
+  const skipNextTooltip = react.useRef(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: flyoutOpen, onOpenChange: (next) => !next && onFlyoutClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: cardRef,
+      "data-slot": "floating-sidebar-module",
+      "data-module-id": module.id,
+      "data-state": open ? "open" : "closed",
+      "data-active": hasActive ? "true" : void 0,
+      className: cn(
+        "relative flex min-h-0 w-full flex-col",
+        "border",
+        collapsed ? "rounded-[14px]" : "rounded-2xl",
+        tileSelected ? "border-primary bg-primary" : "bg-sidebar border-floating-sidebar-card-border",
+        open ? "shadow-[0_8px_24px_color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "shadow-[0_2px_8px_color-mix(in_srgb,var(--color-primary)_4%,transparent)]"
+      ),
+      style: {
+        flex: open ? "0 1 auto" : "0 0 auto",
+        transition: transition2(
+          reduced,
+          t("border-radius", MOTION_MS),
+          `background-color ${fillTransition}`,
+          `border-color ${fillTransition}`,
+          t("box-shadow", MOTION_MS)
+        )
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Tooltip,
+          {
+            open: tooltipOpen,
+            onOpenChange: (next) => {
+              if (next && skipNextTooltip.current) return;
+              onTooltipOpenChange(collapsed && next);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  ref: tileRef,
+                  type: "button",
+                  "data-slot": "floating-sidebar-module-trigger",
+                  "aria-label": collapsed && hasActive ? module.label + labels.currentPageSuffix : module.label,
+                  "aria-expanded": collapsed ? flyoutOpen : open,
+                  "aria-controls": collapsed ? flyoutOpen ? flyoutRegionId : void 0 : regionId,
+                  onClick: onHeaderClick,
+                  className: cn(
+                    "group/head focus-visible:ring-primary relative flex w-full shrink-0 cursor-pointer items-center gap-3 overflow-hidden border-0 bg-transparent text-left outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                    collapsed ? "rounded-[14px]" : "h-[58px] rounded-2xl",
+                    tileSelected ? "text-primary-foreground" : "text-primary"
+                  ),
+                  style: {
+                    // Collapsed: a square tile (border included) with the icon centered.
+                    ...collapsed && { height: tileSize - 2 },
+                    paddingLeft: collapsed ? tilePadding : 20,
+                    paddingRight: collapsed ? tilePadding : 20,
+                    transition: transition2(
+                      reduced,
+                      t("height", MOTION_MS),
+                      t("padding", MOTION_MS),
+                      `color 0ms linear ${iconFlipDelay}ms`,
+                      t("border-radius", MOTION_MS)
+                    )
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "floating-sidebar-module-hover",
+                        className: cn(
+                          "pointer-events-none absolute transition-colors duration-180 ease-out",
+                          // Inset on expanded cards; edge to edge on collapsed tiles.
+                          collapsed ? "inset-0 rounded-[inherit]" : "inset-1.5 rounded-[10px]",
+                          !open && (tileSelected ? "group-hover/head:bg-primary-foreground/12" : "group-hover/head:bg-floating-sidebar-hover")
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-slot": "floating-sidebar-module-icon",
+                        className: "relative flex shrink-0 items-center justify-center",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(SidebarIcon, { icon: module.icon, resolveIcon })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-slot": "floating-sidebar-module-label",
+                        "aria-hidden": collapsed || void 0,
+                        className: "relative min-w-0 flex-1 text-sm font-medium whitespace-nowrap",
+                        style: {
+                          opacity: collapsed ? 0 : 1,
+                          transition: transition2(
+                            reduced,
+                            t("opacity", FADE_MS, collapsed ? 0 : FADE_MS)
+                          )
+                        },
+                        children: module.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-slot": "floating-sidebar-module-chevron",
+                        "aria-hidden": "true",
+                        className: cn(
+                          "relative flex shrink-0",
+                          !tileSelected && "text-muted-foreground"
+                        ),
+                        style: {
+                          opacity: collapsed ? 0 : 1,
+                          transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                          transition: transition2(
+                            reduced,
+                            t("transform", 220),
+                            t("opacity", FADE_MS, collapsed ? 0 : FADE_MS)
+                          )
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5", strokeWidth: 1.5 })
+                      }
+                    )
+                  ]
+                }
+              ) }) }),
+              collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+                TooltipContent,
+                {
+                  side: side === "right" ? "left" : "right",
+                  sideOffset: 12,
+                  "data-slot": "floating-sidebar-tooltip",
+                  children: module.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid min-h-0 flex-[1_1_auto]",
+            style: {
+              gridTemplateRows: open ? "1fr" : "0fr",
+              transition: transition2(reduced, t("grid-template-rows", MOTION_MS))
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: regionId,
+                "data-slot": "floating-sidebar-module-content",
+                "data-state": open ? "open" : "closed",
+                "data-scroll": "muted",
+                className: cn("min-h-0 overflow-x-hidden", SUBTLE_SCROLLBAR),
+                style: {
+                  overflowY: open ? "auto" : "hidden",
+                  visibility: open ? "visible" : "hidden",
+                  transition: open ? "visibility 0s" : `visibility 0s linear ${MOTION_MS}ms`
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "floating-sidebar-module-body", style: { width: bodyWidth }, children: [
+                  isEmpty && emptyMessage,
+                  !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-slot": "floating-sidebar-search-bar",
+                      className: "bg-sidebar sticky top-0 z-[2] px-3 pb-3",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ModuleSearch,
+                        {
+                          moduleLabel: module.label,
+                          query,
+                          focusable: open,
+                          labels,
+                          onQueryChange
+                        }
+                      )
+                    }
+                  ),
+                  !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                    "ul",
+                    {
+                      "data-slot": "floating-sidebar-item-list",
+                      className: "flex flex-col gap-0.5 px-3 pb-3",
+                      children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                        ItemRow,
+                        {
+                          item,
+                          list,
+                          visible: open,
+                          staggerIndex: index,
+                          onSelect: (navigates) => onSelect(item, navigates)
+                        },
+                        item.id
+                      ))
+                    }
+                  ),
+                  !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                    NoMatches,
+                    {
+                      show: items.length === 0,
+                      moduleLabel: module.label,
+                      query,
+                      labels
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        collapsed && /* @__PURE__ */ jsxRuntime.jsxs(
+          PopoverContent,
+          {
+            id: flyoutRegionId,
+            role: "group",
+            "aria-label": module.label,
+            "data-slot": "floating-sidebar-flyout",
+            "data-side": side,
+            side: side === "right" ? "left" : "right",
+            align: "start",
+            sideOffset: 16,
+            collisionPadding: 8,
+            className: "ring-floating-sidebar-card-border max-h-(--radix-popover-content-available-height) w-[268px] gap-0 rounded-2xl px-2 pt-4 pb-2",
+            onEscapeKeyDown: (event) => {
+              if (!query) return;
+              event.preventDefault();
+              onQueryChange("");
+            },
+            onInteractOutside: (event) => {
+              if (tileRef.current?.contains(event.target)) {
+                event.preventDefault();
+                return;
+              }
+              closedFromOutside.current = true;
+            },
+            onCloseAutoFocus: (event) => {
+              event.preventDefault();
+              if (!closedFromOutside.current) {
+                skipNextTooltip.current = true;
+                tileRef.current?.focus();
+                skipNextTooltip.current = false;
+              }
+              closedFromOutside.current = false;
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "floating-sidebar-flyout-title",
+                  className: "text-muted-foreground px-3 pb-2.5 text-[11px] font-medium tracking-[.1em] uppercase",
+                  children: module.label
+                }
+              ),
+              isEmpty && emptyMessage,
+              !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                ModuleSearch,
+                {
+                  moduleLabel: module.label,
+                  query,
+                  focusable: flyoutOpen,
+                  labels,
+                  onQueryChange,
+                  className: "mx-2 mb-2"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "floating-sidebar-flyout-list",
+                  "data-scroll": "muted",
+                  className: cn(
+                    "max-h-[420px] min-h-0 overflow-y-auto",
+                    SUBTLE_SCROLLBAR
+                  ),
+                  children: [
+                    !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                      "ul",
+                      {
+                        "data-slot": "floating-sidebar-item-list",
+                        className: "flex flex-col gap-0.5",
+                        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                          ItemRow,
+                          {
+                            item,
+                            list,
+                            visible: flyoutOpen,
+                            onSelect: (navigates) => onSelect(item, navigates)
+                          },
+                          item.id
+                        ))
+                      }
+                    ),
+                    !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+                      NoMatches,
+                      {
+                        show: items.length === 0,
+                        moduleLabel: module.label,
+                        query,
+                        labels,
+                        compact: true
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
+  const { activeItemId, favoriteIds, reduced, labels, resolveIcon, renderLink } = list;
+  const active = item.id === activeItemId;
+  const favorite = favoriteIds?.includes(item.id) ?? false;
+  const tabIndex = visible ? 0 : -1;
+  const staggered = staggerIndex !== void 0;
+  const delay = staggered && visible ? Math.min(staggerIndex * 20, FADE_MS) : 0;
+  const rowStyle = staggered ? {
+    opacity: visible ? 1 : 0,
+    transition: transition2(
+      reduced,
+      t("opacity", FADE_MS, delay),
+      "background-color 180ms ease-out"
+    )
+  } : { transition: "background-color 180ms ease-out" };
+  const className = cn(
+    "focus-visible:ring-primary flex min-h-[46px] min-w-0 flex-1 cursor-pointer items-start gap-3 rounded-[10px] border-0 bg-transparent py-[13px] pr-1 pl-3 text-left text-[13px] leading-5 transition-transform duration-180 ease-[cubic-bezier(.2,.8,.2,1)] outline-none hover:text-primary focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",
+    active ? "text-primary font-bold" : "font-normal text-floating-sidebar-item-foreground hover:translate-x-0.5 motion-reduce:hover:translate-x-0"
+  );
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("flex shrink-0", active ? "text-primary" : "text-muted-foreground"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(SidebarIcon, { icon: item.icon, resolveIcon, small: true })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: item.label })
+  ] });
+  const common = {
+    className,
+    tabIndex,
+    "aria-current": active ? "page" : void 0,
+    "data-slot": "floating-sidebar-item",
+    "data-active": active ? "true" : void 0
+  };
+  let control;
+  if (item.href && !item.disabled) {
+    const linkProps = {
+      ...common,
+      href: item.href,
+      children: content,
+      // Only a plain click on an in-app link moves the current page; external links and
+      // modifier or middle clicks open elsewhere and leave this tab where it is.
+      onClick: (event) => onSelect(
+        !item.external && event.button === 0 && !(event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
+      ),
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+    };
+    control = renderLink ? renderLink(linkProps, item) : /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
+  } else {
+    control = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        ...common,
+        disabled: item.disabled,
+        onClick: () => onSelect(false),
+        children: content
+      }
+    );
+  }
+  const favoriteLabel = favorite ? labels.removeFavorite(item.label) : labels.addFavorite(item.label);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      "data-slot": "floating-sidebar-item-row",
+      className: cn(
+        "group/row relative flex shrink-0 items-start rounded-[10px]",
+        active ? "bg-accent/70" : "hover:bg-floating-sidebar-hover"
+      ),
+      style: rowStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "floating-sidebar-item-indicator",
+            className: "bg-floating-sidebar-indicator absolute top-3.5 bottom-3.5 left-0 w-[3px] rounded-r-[3px]",
+            style: { opacity: active ? 1 : 0, transition: "opacity 160ms ease-out" }
+          }
+        ),
+        control,
+        favoriteIds && item.favoritable !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "floating-sidebar-favorite",
+            "data-favorite": favorite ? "true" : void 0,
+            "aria-pressed": favorite,
+            "aria-label": favoriteLabel,
+            title: favoriteLabel,
+            tabIndex,
+            onClick: (event) => {
+              event.stopPropagation();
+              if (!reduced) {
+                event.currentTarget.animate?.(
+                  [
+                    { transform: "scale(1)" },
+                    { transform: "scale(1.3)" },
+                    { transform: "scale(1)" }
+                  ],
+                  { duration: 220, easing: "ease-out" }
+                );
+              }
+              list.onToggleFavorite(item.id);
+            },
+            className: cn(
+              "focus-visible:ring-primary hover:bg-primary/6 mt-[9px] mr-1.5 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent outline-none focus-visible:ring-2",
+              "hover:text-secondary",
+              // Stars stay hidden until their row is hovered or focused, unless favorited.
+              favorite ? "text-secondary opacity-100" : (
+                // Revealed on row hover or focus; always shown on touch, where there is no hover.
+                "text-muted-foreground opacity-0 group-focus-within/row:opacity-100 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100"
+              )
+            ),
+            style: {
+              transition: "color 120ms ease-out, background 120ms ease-out, opacity 120ms ease-out"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.Star,
+              {
+                "aria-hidden": "true",
+                className: cn("size-3.5", favorite && "fill-secondary/10"),
+                strokeWidth: 1.5
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 var DrawerContext = react.createContext({ isOpen: false, modal: true });
 function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
   const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
@@ -9576,8 +10605,9 @@ function SignaturePad({
       className: cn(
         // Fixed light "paper": the pen is black and the PNG is read on white by others. The
         // primitive keeps the pad light for consumers that define a dark theme, where a themed
-        // surface (`background`, `border`) would turn dark and hide the black ink.
-        "bg-main-alternative-secondary border-dark-100 relative overflow-hidden rounded-xl border",
+        // surface (`background`, `border`) would turn dark and hide the black ink. The edge
+        // uses `dark-400` (4.66:1 on white) so the pad reads as a control (WCAG 1.4.11).
+        "bg-main-alternative-secondary border-dark-400 relative overflow-hidden rounded-xl border",
         "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
         className
       ),
@@ -9595,21 +10625,23 @@ function SignaturePad({
             className: "block w-full touch-none"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
             type: "button",
             variant: "ghost",
-            size: "icon-sm",
+            size: "sm",
             "data-slot": "signature-pad-clear",
-            "aria-label": clearLabel,
             disabled,
             "aria-disabled": empty && !disabled ? true : void 0,
             onClick: () => {
               if (!emptyRef.current) clear();
             },
-            className: "bg-main-white text-dark-600 border-dark-100 hover:bg-dark-100 hover:text-main-black aria-disabled:hover:bg-main-white absolute right-2 bottom-2 border border-solid aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrushCleaning, { "aria-hidden": true, className: "size-4" })
+            className: "bg-main-white text-dark-600 border-dark-400 hover:bg-dark-100 hover:text-main-black aria-disabled:hover:bg-main-white absolute right-2 bottom-2 h-11 max-w-[calc(100%-1rem)] gap-1.5 rounded-full border border-solid px-4 text-sm aria-disabled:cursor-not-allowed aria-disabled:opacity-70",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrushCleaning, { "aria-hidden": true, className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: clearLabel })
+            ]
           }
         )
       ]
@@ -9765,6 +10797,7 @@ exports.FieldError = FieldError;
 exports.FieldGroup = FieldGroup;
 exports.FieldLabel = FieldLabel;
 exports.FilterOption = FilterOption;
+exports.FloatingSidebar = FloatingSidebar;
 exports.Input = Input;
 exports.Item = Item;
 exports.ItemActions = ItemActions;