@caratlogic/design-system 0.1.43 → 0.1.45

package/dist/index.esm.js

@@ -22650,6 +22650,20 @@ function distanceBetween(p1, p2) {
   return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
 }
 
+function getRelativeTransformOrigin(event, rect) {
+  const eventCoordinates = getEventCoordinates(event);
+
+  if (!eventCoordinates) {
+    return '0 0';
+  }
+
+  const transformOrigin = {
+    x: (eventCoordinates.x - rect.left) / rect.width * 100,
+    y: (eventCoordinates.y - rect.top) / rect.height * 100
+  };
+  return transformOrigin.x + "% " + transformOrigin.y + "%";
+}
+
 /**
  * Sort collisions from smallest to greatest value
  */
@@ -25934,6 +25948,396 @@ function useDroppable(_ref) {
   };
 }
 
+function AnimationManager(_ref) {
+  let {
+    animation,
+    children
+  } = _ref;
+  const [clonedChildren, setClonedChildren] = useState(null);
+  const [element, setElement] = useState(null);
+  const previousChildren = usePrevious(children);
+
+  if (!children && !clonedChildren && previousChildren) {
+    setClonedChildren(previousChildren);
+  }
+
+  useIsomorphicLayoutEffect$1(() => {
+    if (!element) {
+      return;
+    }
+
+    const key = clonedChildren == null ? void 0 : clonedChildren.key;
+    const id = clonedChildren == null ? void 0 : clonedChildren.props.id;
+
+    if (key == null || id == null) {
+      setClonedChildren(null);
+      return;
+    }
+
+    Promise.resolve(animation(id, element)).then(() => {
+      setClonedChildren(null);
+    });
+  }, [animation, clonedChildren, element]);
+  return React__default.createElement(React__default.Fragment, null, children, clonedChildren ? cloneElement(clonedChildren, {
+    ref: setElement
+  }) : null);
+}
+
+const defaultTransform = {
+  x: 0,
+  y: 0,
+  scaleX: 1,
+  scaleY: 1
+};
+function NullifiedContextProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  return React__default.createElement(InternalContext.Provider, {
+    value: defaultInternalContext
+  }, React__default.createElement(ActiveDraggableContext.Provider, {
+    value: defaultTransform
+  }, children));
+}
+
+const baseStyles = {
+  position: 'fixed',
+  touchAction: 'none'
+};
+
+const defaultTransition$1 = activatorEvent => {
+  const isKeyboardActivator = isKeyboardEvent(activatorEvent);
+  return isKeyboardActivator ? 'transform 250ms ease' : undefined;
+};
+
+const PositionedOverlay = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    as,
+    activatorEvent,
+    adjustScale,
+    children,
+    className,
+    rect,
+    style,
+    transform,
+    transition = defaultTransition$1
+  } = _ref;
+
+  if (!rect) {
+    return null;
+  }
+
+  const scaleAdjustedTransform = adjustScale ? transform : { ...transform,
+    scaleX: 1,
+    scaleY: 1
+  };
+  const styles = { ...baseStyles,
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    left: rect.left,
+    transform: CSS$1.Transform.toString(scaleAdjustedTransform),
+    transformOrigin: adjustScale && activatorEvent ? getRelativeTransformOrigin(activatorEvent, rect) : undefined,
+    transition: typeof transition === 'function' ? transition(activatorEvent) : transition,
+    ...style
+  };
+  return React__default.createElement(as, {
+    className,
+    style: styles,
+    ref
+  }, children);
+});
+
+const defaultDropAnimationSideEffects = options => _ref => {
+  let {
+    active,
+    dragOverlay
+  } = _ref;
+  const originalStyles = {};
+  const {
+    styles,
+    className
+  } = options;
+
+  if (styles != null && styles.active) {
+    for (const [key, value] of Object.entries(styles.active)) {
+      if (value === undefined) {
+        continue;
+      }
+
+      originalStyles[key] = active.node.style.getPropertyValue(key);
+      active.node.style.setProperty(key, value);
+    }
+  }
+
+  if (styles != null && styles.dragOverlay) {
+    for (const [key, value] of Object.entries(styles.dragOverlay)) {
+      if (value === undefined) {
+        continue;
+      }
+
+      dragOverlay.node.style.setProperty(key, value);
+    }
+  }
+
+  if (className != null && className.active) {
+    active.node.classList.add(className.active);
+  }
+
+  if (className != null && className.dragOverlay) {
+    dragOverlay.node.classList.add(className.dragOverlay);
+  }
+
+  return function cleanup() {
+    for (const [key, value] of Object.entries(originalStyles)) {
+      active.node.style.setProperty(key, value);
+    }
+
+    if (className != null && className.active) {
+      active.node.classList.remove(className.active);
+    }
+  };
+};
+
+const defaultKeyframeResolver = _ref2 => {
+  let {
+    transform: {
+      initial,
+      final
+    }
+  } = _ref2;
+  return [{
+    transform: CSS$1.Transform.toString(initial)
+  }, {
+    transform: CSS$1.Transform.toString(final)
+  }];
+};
+
+const defaultDropAnimationConfiguration = {
+  duration: 250,
+  easing: 'ease',
+  keyframes: defaultKeyframeResolver,
+  sideEffects: /*#__PURE__*/defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: '0'
+      }
+    }
+  })
+};
+function useDropAnimation(_ref3) {
+  let {
+    config,
+    draggableNodes,
+    droppableContainers,
+    measuringConfiguration
+  } = _ref3;
+  return useEvent((id, node) => {
+    if (config === null) {
+      return;
+    }
+
+    const activeDraggable = draggableNodes.get(id);
+
+    if (!activeDraggable) {
+      return;
+    }
+
+    const activeNode = activeDraggable.node.current;
+
+    if (!activeNode) {
+      return;
+    }
+
+    const measurableNode = getMeasurableNode(node);
+
+    if (!measurableNode) {
+      return;
+    }
+
+    const {
+      transform
+    } = getWindow$1(node).getComputedStyle(node);
+    const parsedTransform = parseTransform(transform);
+
+    if (!parsedTransform) {
+      return;
+    }
+
+    const animation = typeof config === 'function' ? config : createDefaultDropAnimation(config);
+    scrollIntoViewIfNeeded(activeNode, measuringConfiguration.draggable.measure);
+    return animation({
+      active: {
+        id,
+        data: activeDraggable.data,
+        node: activeNode,
+        rect: measuringConfiguration.draggable.measure(activeNode)
+      },
+      draggableNodes,
+      dragOverlay: {
+        node,
+        rect: measuringConfiguration.dragOverlay.measure(measurableNode)
+      },
+      droppableContainers,
+      measuringConfiguration,
+      transform: parsedTransform
+    });
+  });
+}
+
+function createDefaultDropAnimation(options) {
+  const {
+    duration,
+    easing,
+    sideEffects,
+    keyframes
+  } = { ...defaultDropAnimationConfiguration,
+    ...options
+  };
+  return _ref4 => {
+    let {
+      active,
+      dragOverlay,
+      transform,
+      ...rest
+    } = _ref4;
+
+    if (!duration) {
+      // Do not animate if animation duration is zero.
+      return;
+    }
+
+    const delta = {
+      x: dragOverlay.rect.left - active.rect.left,
+      y: dragOverlay.rect.top - active.rect.top
+    };
+    const scale = {
+      scaleX: transform.scaleX !== 1 ? active.rect.width * transform.scaleX / dragOverlay.rect.width : 1,
+      scaleY: transform.scaleY !== 1 ? active.rect.height * transform.scaleY / dragOverlay.rect.height : 1
+    };
+    const finalTransform = {
+      x: transform.x - delta.x,
+      y: transform.y - delta.y,
+      ...scale
+    };
+    const animationKeyframes = keyframes({ ...rest,
+      active,
+      dragOverlay,
+      transform: {
+        initial: transform,
+        final: finalTransform
+      }
+    });
+    const [firstKeyframe] = animationKeyframes;
+    const lastKeyframe = animationKeyframes[animationKeyframes.length - 1];
+
+    if (JSON.stringify(firstKeyframe) === JSON.stringify(lastKeyframe)) {
+      // The start and end keyframes are the same, infer that there is no animation needed.
+      return;
+    }
+
+    const cleanup = sideEffects == null ? void 0 : sideEffects({
+      active,
+      dragOverlay,
+      ...rest
+    });
+    const animation = dragOverlay.node.animate(animationKeyframes, {
+      duration,
+      easing,
+      fill: 'forwards'
+    });
+    return new Promise(resolve => {
+      animation.onfinish = () => {
+        cleanup == null ? void 0 : cleanup();
+        resolve();
+      };
+    });
+  };
+}
+
+let key = 0;
+function useKey(id) {
+  return useMemo(() => {
+    if (id == null) {
+      return;
+    }
+
+    key++;
+    return key;
+  }, [id]);
+}
+
+const DragOverlay = /*#__PURE__*/React__default.memo(_ref => {
+  let {
+    adjustScale = false,
+    children,
+    dropAnimation: dropAnimationConfig,
+    style,
+    transition,
+    modifiers,
+    wrapperElement = 'div',
+    className,
+    zIndex = 999
+  } = _ref;
+  const {
+    activatorEvent,
+    active,
+    activeNodeRect,
+    containerNodeRect,
+    draggableNodes,
+    droppableContainers,
+    dragOverlay,
+    over,
+    measuringConfiguration,
+    scrollableAncestors,
+    scrollableAncestorRects,
+    windowRect
+  } = useDndContext();
+  const transform = useContext(ActiveDraggableContext);
+  const key = useKey(active == null ? void 0 : active.id);
+  const modifiedTransform = applyModifiers(modifiers, {
+    activatorEvent,
+    active,
+    activeNodeRect,
+    containerNodeRect,
+    draggingNodeRect: dragOverlay.rect,
+    over,
+    overlayNodeRect: dragOverlay.rect,
+    scrollableAncestors,
+    scrollableAncestorRects,
+    transform,
+    windowRect
+  });
+  const initialRect = useInitialValue(activeNodeRect);
+  const dropAnimation = useDropAnimation({
+    config: dropAnimationConfig,
+    draggableNodes,
+    droppableContainers,
+    measuringConfiguration
+  }); // We need to wait for the active node to be measured before connecting the drag overlay ref
+  // otherwise collisions can be computed against a mispositioned drag overlay
+
+  const ref = initialRect ? dragOverlay.setRef : undefined;
+  return React__default.createElement(NullifiedContextProvider, null, React__default.createElement(AnimationManager, {
+    animation: dropAnimation
+  }, active && key ? React__default.createElement(PositionedOverlay, {
+    key: key,
+    id: active.id,
+    ref: ref,
+    as: wrapperElement,
+    activatorEvent: activatorEvent,
+    adjustScale: adjustScale,
+    className: className,
+    transition: transition,
+    rect: initialRect,
+    style: {
+      zIndex,
+      ...style
+    },
+    transform: modifiedTransform
+  }, children) : null));
+});
+
 const PERMISSIONS = {
     NONE: 0, // no access
     READ: 2, // can only read
@@ -43398,6 +43802,154 @@ function TriStateFilter({ value, onChange, ariaLabel, compact = false, }) {
         }) }));
 }
 
+const SlideOut = ({ open, onOpenChange, ...props }) => {
+    const scheduleLockRelease = useOverlayBodyLockRelease(open);
+    return (jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: (next) => {
+            onOpenChange?.(next);
+            if (!next)
+                scheduleLockRelease();
+        } }));
+};
+const SlideOutTrigger = DialogPrimitive.Trigger;
+const SlideOutClose = DialogPrimitive.Close;
+const SlideOutPortal = DialogPrimitive.Portal;
+// Overlay
+const SLIDE_OUT_OVERLAY_CLASS_NAME = 'fixed inset-0 z-40 bg-black/50';
+const SLIDE_OUT_OVERLAY_BLUR_CLASS_NAME = 'backdrop-blur-sm';
+/** The slide-outs' backdrop, dimmed and slightly blurred; other panels over the page reuse it to match. */
+const SLIDE_OUT_BACKDROP_CLASS_NAME = cn(SLIDE_OUT_OVERLAY_CLASS_NAME, SLIDE_OUT_OVERLAY_BLUR_CLASS_NAME);
+const SlideOutOverlay = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Overlay, { ref: ref, className: cn(SLIDE_OUT_OVERLAY_CLASS_NAME, className), ...props })));
+SlideOutOverlay.displayName = DialogPrimitive.Overlay.displayName;
+// Positional classes per edge. `right` is the historical default and its
+// value is byte-for-byte what SlideOutContent always rendered.
+const slideOutSideClasses = {
+    right: 'right-0 top-0 h-full w-[488px] max-w-full border-l slide-in-from-right',
+    left: 'left-0 top-0 h-full w-[488px] max-w-full border-r slide-in-from-left',
+    top: 'inset-x-0 top-0 h-1/3 w-full border-b slide-in-from-top',
+    bottom: 'inset-x-0 bottom-0 h-1/3 w-full border-t slide-in-from-bottom',
+};
+// Content — slide-out panel. Defaults to a right-anchored 488px drawer;
+// pass `side` to anchor to any edge (absorbs the old sheet/drawer use cases).
+const SlideOutContent = React.forwardRef(({ className, children, overlayClassName, side = 'right', ...props }, ref) => (jsxs(SlideOutPortal, { children: [jsx(SlideOutOverlay, { className: overlayClassName ?? SLIDE_OUT_OVERLAY_BLUR_CLASS_NAME }), jsx(DialogPrimitive.Content, { ref: ref, className: cn('fixed z-50 border-border bg-card text-card-foreground shadow-xl animate-in', slideOutSideClasses[side], className), ...props, children: children })] })));
+SlideOutContent.displayName = DialogPrimitive.Content.displayName;
+// Header — owns the standard 16px padding and bottom border.
+const SlideOutHeader = ({ className, ...props }) => (jsx("div", { className: cn('flex flex-col space-y-1.5 border-b border-border px-4 py-4 text-xs', className), ...props }));
+SlideOutHeader.displayName = 'SlideOutHeader';
+// Title
+const SlideOutTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
+SlideOutTitle.displayName = DialogPrimitive.Title.displayName;
+// Description
+const SlideOutDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+SlideOutDescription.displayName = DialogPrimitive.Description.displayName;
+
+/** The app's content area, right of the sidebar; the panel starts at its left edge. */
+const SIDEBAR_INSET_SELECTOR = '[data-slot="sidebar-inset"]';
+/** Dropdowns, menus and listboxes, portaled outside the panel; an outside click first closes them. */
+const OPEN_LAYER_SELECTOR = '[data-slot="popover-content"], [role="menu"], [role="listbox"]';
+/** How long the panel takes to slide out; it stays mounted until then. */
+const SLIDE_OUT_MS = 200;
+/** The top-level element under `<body>` that holds `node`: the app root, for a node in the page. */
+function getBodyChild(node) {
+    let current = node;
+    while (current && current.parentElement !== node.ownerDocument.body)
+        current = current.parentElement;
+    return current;
+}
+
+/**
+ * Backdrop handlers that call `onClose` on a click outside the panel, unless a dropdown or menu was open
+ * when the press began: that click only closes the dropdown.
+ */
+function useBackdropClose(onClose) {
+    const layerOpenRef = useRef(false);
+    return {
+        onPointerDown: () => {
+            layerOpenRef.current = !!document.querySelector(OPEN_LAYER_SELECTOR);
+        },
+        onClick: () => {
+            if (!layerOpenRef.current)
+                onClose?.();
+            layerOpenRef.current = false;
+        },
+    };
+}
+/** Keeps the panel mounted while it slides out; `closing` is true for that time. */
+function useSlideOverPresence(open) {
+    const [mounted, setMounted] = useState(open);
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            return;
+        }
+        const timer = window.setTimeout(() => setMounted(false), SLIDE_OUT_MS);
+        return () => window.clearTimeout(timer);
+    }, [open]);
+    return { mounted: mounted || open, closing: mounted && !open };
+}
+/** Where the content area right of the sidebar starts, in px from the viewport's left; 0 without a sidebar. */
+function useSidebarInsetLeft(active) {
+    const [left, setLeft] = useState(0);
+    useLayoutEffect(() => {
+        if (!active)
+            return;
+        const inset = document.querySelector(SIDEBAR_INSET_SELECTOR);
+        if (!inset)
+            return;
+        const measure = () => setLeft(Math.max(0, inset.getBoundingClientRect().left));
+        measure();
+        // The inset narrows or widens with the window and the sidebar.
+        const observer = new ResizeObserver(measure);
+        observer.observe(inset);
+        window.addEventListener('resize', measure);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [active]);
+    return left;
+}
+/**
+ * While `active`, makes the app behind the panel inert (no clicks, focus or screen reader) and moves focus
+ * into `panel`; on close, focus goes back where it was. Popovers and menus portal outside the app root, so
+ * they stay usable.
+ */
+function useModalPanel(anchor, panel, active) {
+    useEffect(() => {
+        const root = anchor.current && getBodyChild(anchor.current);
+        if (!active || !(root instanceof HTMLElement))
+            return;
+        const previousFocus = document.activeElement;
+        const wasInert = root.inert;
+        root.inert = true;
+        panel.current?.focus({ preventScroll: true });
+        return () => {
+            root.inert = wasInert;
+            if (previousFocus instanceof HTMLElement)
+                previousFocus.focus({ preventScroll: true });
+        };
+    }, [anchor, panel, active]);
+}
+
+/**
+ * A large panel that slides in from the right over the page and covers everything right of the sidebar,
+ * floating with a small gap on every side and rounded corners, on the slide-outs' dimmed, slightly blurred
+ * backdrop. The page behind, sidebar included, can't be used until it closes. A click outside calls
+ * `onClose`; the content closes it otherwise (a close button, Escape).
+ */
+function FloatingSlideOver({ open, title, onClose, className, children, }) {
+    const anchorRef = useRef(null);
+    const panelRef = useRef(null);
+    const { mounted, closing } = useSlideOverPresence(open);
+    const left = useSidebarInsetLeft(mounted);
+    useModalPanel(anchorRef, panelRef, mounted);
+    const backdrop = useBackdropClose(onClose);
+    const state = closing ? 'closed' : 'open';
+    return (jsxs(Fragment$2, { children: [jsx("span", { ref: anchorRef, hidden: true }), mounted &&
+                createPortal(jsxs(Fragment$2, { children: [jsx("div", { "aria-hidden": "true", "data-state": state, className: SLIDE_OUT_BACKDROP_CLASS_NAME, onPointerDown: backdrop.onPointerDown, onClick: backdrop.onClick }), jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, "data-state": state, 
+                            // The same gap from the sidebar's edge as on the other sides.
+                            style: { left: `calc(${left}px + 0.5rem)` }, className: cn('fixed inset-y-2 right-2 z-50 flex flex-col overflow-hidden rounded-xl border border-border bg-background shadow-xl outline-none', 'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:duration-300 data-[state=open]:ease-out', 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:duration-200 data-[state=closed]:ease-in', 'motion-reduce:animate-none', className), children: children })] }), document.body)] }));
+}
+
 /** Read-only filter summaries of a saved search, as pills; optionally one line ending in "+N more". */
 function SavedSearchChipList({ chips, emptyText = 'No filters', collapsible = false, className, }) {
     const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips, collapsible);
@@ -73045,7 +73597,7 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
     return (jsx("button", { ref: ref, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', 'group-data-[side=left][data-collapsible=offcanvas]:-right-2', 'group-data-[side=right][data-collapsible=offcanvas]:-left-2', className), ...props }));
 });
 SidebarRail.displayName = 'SidebarRail';
-const SidebarInset = React.forwardRef(({ className, ...props }, ref) => (jsx("main", { ref: ref, className: cn('relative flex min-h-screen flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props })));
+const SidebarInset = React.forwardRef(({ className, ...props }, ref) => (jsx("main", { ref: ref, "data-slot": "sidebar-inset", className: cn('relative flex min-h-screen flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props })));
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = React.forwardRef(({ className, ...props }, ref) => (jsx("input", { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background text-sm shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', className), ...props })));
 SidebarInput.displayName = 'SidebarInput';
@@ -73183,42 +73735,6 @@ const AppSidebar = ({ brand, navGroups = [], footer, className, }) => {
     return (jsxs(Sidebar, { collapsible: "icon", className: className, children: [brand && (jsx(SidebarHeader, { children: jsx(BrandHeader$1, { brand: brand }) })), jsx(SidebarContent, { children: navGroups.map((group) => (jsx(NavGroupSection, { group: group }, group.label ?? 'nav-group'))) }), footer && jsx(SidebarFooter, { children: footer }), jsx(SidebarRail, {})] }));
 };
 
-const SlideOut = ({ open, onOpenChange, ...props }) => {
-    const scheduleLockRelease = useOverlayBodyLockRelease(open);
-    return (jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: (next) => {
-            onOpenChange?.(next);
-            if (!next)
-                scheduleLockRelease();
-        } }));
-};
-const SlideOutTrigger = DialogPrimitive.Trigger;
-const SlideOutClose = DialogPrimitive.Close;
-const SlideOutPortal = DialogPrimitive.Portal;
-// Overlay
-const SlideOutOverlay = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-40 bg-black/50', className), ...props })));
-SlideOutOverlay.displayName = DialogPrimitive.Overlay.displayName;
-// Positional classes per edge. `right` is the historical default and its
-// value is byte-for-byte what SlideOutContent always rendered.
-const slideOutSideClasses = {
-    right: 'right-0 top-0 h-full w-[488px] max-w-full border-l slide-in-from-right',
-    left: 'left-0 top-0 h-full w-[488px] max-w-full border-r slide-in-from-left',
-    top: 'inset-x-0 top-0 h-1/3 w-full border-b slide-in-from-top',
-    bottom: 'inset-x-0 bottom-0 h-1/3 w-full border-t slide-in-from-bottom',
-};
-// Content — slide-out panel. Defaults to a right-anchored 488px drawer;
-// pass `side` to anchor to any edge (absorbs the old sheet/drawer use cases).
-const SlideOutContent = React.forwardRef(({ className, children, overlayClassName, side = 'right', ...props }, ref) => (jsxs(SlideOutPortal, { children: [jsx(SlideOutOverlay, { className: overlayClassName ?? 'backdrop-blur-sm' }), jsx(DialogPrimitive.Content, { ref: ref, className: cn('fixed z-50 border-border bg-card text-card-foreground shadow-xl animate-in', slideOutSideClasses[side], className), ...props, children: children })] })));
-SlideOutContent.displayName = DialogPrimitive.Content.displayName;
-// Header — owns the standard 16px padding and bottom border.
-const SlideOutHeader = ({ className, ...props }) => (jsx("div", { className: cn('flex flex-col space-y-1.5 border-b border-border px-4 py-4 text-xs', className), ...props }));
-SlideOutHeader.displayName = 'SlideOutHeader';
-// Title
-const SlideOutTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
-SlideOutTitle.displayName = DialogPrimitive.Title.displayName;
-// Description
-const SlideOutDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
-SlideOutDescription.displayName = DialogPrimitive.Description.displayName;
-
 const SpecList = ({ rows, zebra = true, className, }) => {
     const visible = rows.filter((r) => !r.hidden);
     if (visible.length === 0)
@@ -77452,11 +77968,30 @@ function FilterField(props) {
 
 /** Leaves without applying; the draft is discarded. */
 const BACK_LABEL = 'Back without applying';
+const CLOSE_LABEL = 'Close without applying';
 const LOADING_LABEL = 'Loading filters';
 const ERROR_TITLE = "Couldn't load filters";
 const DEFAULT_ERROR_MESSAGE = 'Something went wrong while loading the filters. Check your connection and try again.';
 const RETRY_LABEL = 'Try again';
+const CARD_REORDER_HINT = 'Drag to rearrange';
+const getCardGripLabel = (card) => `Move ${card}`;
+const EMPTY_GROUP_LABEL = 'Drag filter cards here';
 
+/** Popovers, dialogs, menus and listboxes opened on top of the surface. */
+const NESTED_LAYER_SELECTOR = '[data-slot="popover-content"], [role="dialog"], [role="menu"], [role="listbox"]';
+/**
+ * Closes the open popover or menu (not one that holds `from`) as Escape would. Radix closes a popover on
+ * the click after an outside press, which a card drag never makes, so a grab would leave it open.
+ */
+function dismissOpenLayer(from) {
+    const layer = Array.from(from.ownerDocument.querySelectorAll(NESTED_LAYER_SELECTOR)).find((node) => !node.contains(from));
+    // Sent from inside the layer, so the surface's own Escape handler leaves it alone.
+    layer?.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Escape',
+        bubbles: true,
+        cancelable: true,
+    }));
+}
 /** Placeholder cards while the filters load; roughly the first rows of a card grid. */
 const SKELETON_CARD_COUNT = 8;
 const SKELETON_GRID_CLASS_NAME = 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4';
@@ -77466,8 +78001,82 @@ const MASONRY_ROW_PX = 4;
 const getMasonrySpan = (height) => height > 0 ? Math.ceil(height / MASONRY_ROW_PX) : 0;
 /** Dense 4px rows; the vertical gap comes from each item's bottom padding. */
 const MASONRY_GRID_CLASS_NAME = 'grid-flow-row-dense auto-rows-[4px] gap-x-3';
+// Card drag: the DOM marks each card, group grid and "More filters" toggle, so a pointer hit is found by attribute.
+const CARD_ID_ATTR = 'data-filter-card-id';
+const GROUP_ID_ATTR = 'data-filter-group-id';
+const MORE_TOGGLE_ATTR = 'data-filter-more-toggle';
+const CARD_BODY_ATTR = 'data-filter-card-body';
+/** The group holding `id`, if any. */
+function findCardGroup(layout, id) {
+    return Object.keys(layout).find((group) => layout[group].includes(id));
+}
+/** `layout` with `id` taken out of its group and put into `target.group`, beside `target.key` or at the end. */
+function moveCard(layout, id, target) {
+    const rest = (layout[target.group] ?? []).filter((key) => key !== id);
+    let at = rest.length;
+    if (target.key !== undefined) {
+        const index = rest.indexOf(target.key);
+        if (index === -1)
+            return layout;
+        at = index + (target.side === 'after' ? 1 : 0);
+    }
+    const next = Object.fromEntries(Object.entries(layout).map(([group, ids]) => [
+        group,
+        ids.filter((key) => key !== id),
+    ]));
+    next[target.group] = [...rest.slice(0, at), id, ...rest.slice(at)];
+    return next;
+}
+function isSameLayout(a, b) {
+    const groups = Object.keys(a);
+    return (groups.length === Object.keys(b).length &&
+        groups.every((group) => b[group]?.length === a[group].length &&
+            a[group].every((id, index) => b[group][index] === id)));
+}
+/**
+ * Where a card lands when dropped on `hit` at height `y`. In its own group it takes the hit card's place
+ * (after it when moving forward), the way a sortable list swaps; from another group the pointer's half
+ * of the hit card decides.
+ */
+function getCardDropTarget(layout, activeId, hit, y) {
+    const ids = layout[hit.group] ?? [];
+    const from = ids.indexOf(activeId);
+    const side = from === -1
+        ? y > hit.rect.top + hit.rect.height / 2
+            ? 'after'
+            : 'before'
+        : from < ids.indexOf(hit.id)
+            ? 'after'
+            : 'before';
+    return { group: hit.group, key: hit.id, side };
+}
+/** The card, group or "More filters" toggle at a viewport point. */
+function getDropHit(x, y) {
+    const element = document.elementFromPoint(x, y);
+    if (!element)
+        return null;
+    const group = element.closest(`[${GROUP_ID_ATTR}]`);
+    const groupId = group?.getAttribute(GROUP_ID_ATTR);
+    const card = element.closest(`[${CARD_ID_ATTR}]`);
+    const cardId = card?.getAttribute(CARD_ID_ATTR);
+    if (card && cardId && groupId)
+        return {
+            kind: 'card',
+            id: cardId,
+            group: groupId,
+            rect: card.getBoundingClientRect(),
+        };
+    if (groupId)
+        return { kind: 'group', group: groupId };
+    const toggle = element.closest(`[${MORE_TOGGLE_ATTR}]`);
+    return toggle ? { kind: 'more', toggle } : null;
+}
+/** The dropped card's copy settles into its slot at the speed the other cards slide. */
+const CARD_DROP_ANIMATION = {
+    duration: 200,
+    easing: 'ease',
+};
 
-const NESTED_LAYER_SELECTOR = '[data-slot="popover-content"], [role="dialog"], [role="menu"], [role="listbox"]';
 function useCloseOnEscape(onClose) {
     useEffect(() => {
         const handleKeyDown = (event) => {
@@ -77485,12 +78094,27 @@ function useCloseOnEscape(onClose) {
 }
 function useFilterSurfaceMore(defaultExpanded = false) {
     const [expanded, setExpanded] = useState(defaultExpanded);
-    return { expanded, toggle: () => setExpanded((current) => !current) };
+    const [toggleNode, setToggleNode] = useState(null);
+    const registerExpander = useContext(FilterSurfaceSortableContext)?.registerExpander;
+    // Inside a sortable surface, a dragged card resting on the toggle opens the section.
+    useEffect(() => {
+        if (!toggleNode || !registerExpander)
+            return;
+        return registerExpander(toggleNode, () => setExpanded(true));
+    }, [toggleNode, registerExpander]);
+    return {
+        expanded,
+        toggle: () => setExpanded((current) => !current),
+        toggleRef: setToggleNode,
+    };
 }
-/** Measures a masonry card and keeps its row span in step with its height (content opening, wrapping…). */
-function useMasonrySpan() {
+/**
+ * Measures a masonry card and keeps its row span in step with its height (content opening, wrapping…).
+ * `initialSpan` lets a remounted card take its known height on the first render.
+ */
+function useMasonrySpan(initialSpan = 0) {
     const [node, setNode] = useState(null);
-    const [span, setSpan] = useState(0);
+    const [span, setSpan] = useState(initialSpan);
     useEffect(() => {
         if (!node)
             return;
@@ -77505,6 +78129,308 @@ function useMasonrySpan() {
     }, [node]);
     return { ref: useCallback((next) => setNode(next), []), span };
 }
+const FilterSurfaceSortableContext = createContext(null);
+/** The surrounding `FilterSurfaceSortable`, or null outside one. */
+function useFilterSurfaceSortable() {
+    return useContext(FilterSurfaceSortableContext);
+}
+/** A sortable card's drag wiring, masonry span and registration for the slide animation. */
+function useSortableFilterCard(id) {
+    const sortable = useContext(FilterSurfaceSortableContext);
+    if (!sortable)
+        throw new Error('SortableFilterCard must be inside FilterSurfaceSortable');
+    const { spans, registerCard, unregisterCard } = sortable;
+    const { setNodeRef, setActivatorNodeRef, listeners } = useDraggable({ id });
+    const { ref: spanRef, span } = useMasonrySpan(spans.get(id));
+    const nodeRef = useRef(null);
+    useEffect(() => {
+        if (span > 0)
+            spans.set(id, span);
+    }, [spans, id, span]);
+    const cardRef = useCallback((node) => {
+        setNodeRef(node);
+        if (node)
+            registerCard(id, node);
+        else
+            unregisterCard(id, nodeRef.current);
+        nodeRef.current = node;
+    }, [id, setNodeRef, registerCard, unregisterCard]);
+    return {
+        ref: { card: cardRef, span: spanRef },
+        span,
+        isActive: sortable.activeId === id,
+        dragging: sortable.activeId !== null,
+        label: sortable.cardLabel(id),
+        setActivatorNodeRef,
+        listeners,
+    };
+}
+const FLIP_MS = 200;
+const FLIP_TRANSITION = `transform ${FLIP_MS}ms ease`;
+// After a move the cards repack and a different card can end up under a still pointer; the pointer must
+// travel this far before the next move, so cards never rock back and forth on their own.
+const MOVE_TRAVEL_PX = 32;
+// Long enough that sweeping past "More filters" doesn't open it.
+const EXPAND_DELAY_MS = 400;
+function prefersReducedMotion() {
+    return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+/** Slides each card from where it was (`from`) to where the new layout put it. */
+function playFlip(nodes, from) {
+    nodes.forEach((node, id) => {
+        const before = from.get(id);
+        if (!before)
+            return;
+        const after = node.getBoundingClientRect();
+        const dx = before.left - after.left;
+        const dy = before.top - after.top;
+        if (!dx && !dy)
+            return;
+        node.style.transition = 'none';
+        node.style.transform = `translate(${dx}px, ${dy}px)`;
+        // Commit the offset before transitioning it away.
+        void node.offsetWidth;
+        node.style.transition = FLIP_TRANSITION;
+        node.style.transform = '';
+        node.addEventListener('transitionend', () => {
+            node.style.transition = '';
+        }, { once: true });
+    });
+}
+/** A copy of the card for the drag overlay, without ids that would clash with the original. */
+function cloneCardBody(card) {
+    const body = card?.querySelector(`[${CARD_BODY_ATTR}]`);
+    if (!body)
+        return null;
+    const clone = body.cloneNode(true);
+    if (!(clone instanceof HTMLElement))
+        return null;
+    clone.removeAttribute(CARD_BODY_ATTR);
+    clone.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
+    return clone;
+}
+/**
+ * Card drag-to-reorder across a surface's groups. The live order is a draft: cards reflow as the pointer
+ * crosses them and slide (FLIP) from their old spots, and the draft is handed over on drop. The pointer is
+ * hit-tested against what is on screen, so masonry cards of any height land where they look.
+ */
+function useFilterCardReorder({ layout, onLayoutChange, }) {
+    const [draft, setDraft] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const [overlay, setOverlay] = useState(null);
+    const shown = draft ?? layout;
+    const shownRef = useRef(shown);
+    const activeRef = useRef(null);
+    const nodesRef = useRef(new Map());
+    const spansRef = useRef(new Map());
+    const flipFromRef = useRef(null);
+    const expandersRef = useRef(new Map());
+    useLayoutEffect(() => {
+        shownRef.current = shown;
+    }, [shown]);
+    // A new layout from the consumer (usually the one just dropped) replaces the draft.
+    useEffect(() => {
+        if (activeRef.current === null)
+            setDraft(null);
+    }, [layout]);
+    const applyDraft = useCallback((next) => {
+        if (!prefersReducedMotion()) {
+            const rects = new Map();
+            nodesRef.current.forEach((node, id) => rects.set(id, node.getBoundingClientRect()));
+            flipFromRef.current = rects;
+        }
+        setDraft(next);
+    }, []);
+    useLayoutEffect(() => {
+        const from = flipFromRef.current;
+        if (!from)
+            return;
+        flipFromRef.current = null;
+        playFlip(nodesRef.current, from);
+    }, [draft]);
+    useCardDragTracking(activeId, shownRef, applyDraft, expandersRef.current);
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
+    const registerCard = useCallback((id, node) => {
+        nodesRef.current.set(id, node);
+    }, []);
+    // A card moving between groups remounts; only forget it if the new node hasn't registered already.
+    const unregisterCard = useCallback((id, node) => {
+        if (nodesRef.current.get(id) === node)
+            nodesRef.current.delete(id);
+    }, []);
+    const registerExpander = useCallback((toggle, expand) => {
+        const expanders = expandersRef.current;
+        expanders.set(toggle, expand);
+        return () => {
+            expanders.delete(toggle);
+        };
+    }, []);
+    const onDragStart = useCallback((event) => {
+        const id = String(event.active.id);
+        activeRef.current = id;
+        setOverlay(cloneCardBody(nodesRef.current.get(id)));
+        setActiveId(id);
+    }, []);
+    const finish = useCallback((commit) => {
+        activeRef.current = null;
+        setActiveId(null);
+        setOverlay(null);
+        const next = shownRef.current;
+        if (commit && !isSameLayout(next, layout)) {
+            // The draft stays on screen until the consumer passes the saved layout back.
+            onLayoutChange(next);
+            return;
+        }
+        applyDraft(null);
+    }, [layout, onLayoutChange, applyDraft]);
+    const onDragEnd = useCallback(() => finish(true), [finish]);
+    const onDragCancel = useCallback(() => finish(false), [finish]);
+    return {
+        layout: shown,
+        activeId,
+        overlay,
+        sensors,
+        spans: spansRef.current,
+        registerCard,
+        unregisterCard,
+        registerExpander,
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+    };
+}
+/**
+ * While a card drags: follows the pointer, moves the card in the draft as it crosses other cards or an
+ * empty group, and opens a collapsed "More filters" the pointer rests on.
+ */
+function useCardDragTracking(activeId, shownRef, applyDraft, expanders) {
+    useEffect(() => {
+        if (activeId === null)
+            return;
+        let point = null;
+        let frame = null;
+        // Cards are mid-slide until then; hit-testing them would chase a moving target.
+        let settledAt = 0;
+        let settleTimer;
+        // The card last moved beside: staying over it does nothing, or two cards of different heights would swap forever.
+        let lastOver = null;
+        // Where the pointer was at the last move.
+        let movedAt = null;
+        const hasTravelled = (x, y) => !movedAt || Math.hypot(x - movedAt.x, y - movedAt.y) >= MOVE_TRAVEL_PX;
+        let expandTimer;
+        let expandToggle = null;
+        const stopExpand = () => {
+            window.clearTimeout(expandTimer);
+            expandToggle = null;
+        };
+        const handleHit = (hit, x, y) => {
+            if (hit?.kind !== 'more')
+                stopExpand();
+            if (!hit)
+                return;
+            const layout = shownRef.current;
+            if (hit.kind === 'more') {
+                if (hit.toggle === expandToggle)
+                    return;
+                stopExpand();
+                const expand = expanders.get(hit.toggle);
+                if (!expand || hit.toggle.getAttribute('aria-expanded') !== 'false')
+                    return;
+                expandToggle = hit.toggle;
+                // Not a click: the drag swallows clicks until the drop.
+                expandTimer = window.setTimeout(expand, EXPAND_DELAY_MS);
+                return;
+            }
+            if (!hasTravelled(x, y))
+                return;
+            let next;
+            if (hit.kind === 'group') {
+                // Only an empty group takes a drop here; between cards of a full one the pointer is in a gap.
+                if ((layout[hit.group] ?? []).some((id) => id !== activeId))
+                    return;
+                if (findCardGroup(layout, activeId) === hit.group)
+                    return;
+                next = moveCard(layout, activeId, { group: hit.group });
+            }
+            else {
+                if (hit.id === activeId) {
+                    lastOver = null;
+                    return;
+                }
+                if (hit.id === lastOver)
+                    return;
+                lastOver = hit.id;
+                next = moveCard(layout, activeId, getCardDropTarget(layout, activeId, hit, y));
+            }
+            if (isSameLayout(next, layout))
+                return;
+            settledAt = performance.now() + FLIP_MS;
+            movedAt = { x, y };
+            applyDraft(next);
+        };
+        const check = () => {
+            frame = null;
+            if (!point)
+                return;
+            const wait = settledAt - performance.now();
+            if (wait > 0) {
+                window.clearTimeout(settleTimer);
+                settleTimer = window.setTimeout(schedule, wait);
+                return;
+            }
+            handleHit(getDropHit(point.x, point.y), point.x, point.y);
+        };
+        const schedule = () => {
+            if (frame === null)
+                frame = requestAnimationFrame(check);
+        };
+        const onPointerMove = (event) => {
+            point = { x: event.clientX, y: event.clientY };
+            schedule();
+        };
+        // Escape cancels the drag; marked handled so the surface doesn't also close.
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                event.preventDefault();
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        // Auto-scroll moves the cards under a still pointer.
+        window.addEventListener('scroll', schedule, true);
+        window.addEventListener('keydown', onKeyDown, true);
+        return () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('scroll', schedule, true);
+            window.removeEventListener('keydown', onKeyDown, true);
+            if (frame !== null)
+                cancelAnimationFrame(frame);
+            window.clearTimeout(settleTimer);
+            stopExpand();
+        };
+    }, [activeId, shownRef, applyDraft, expanders]);
+}
+/** The context the sortable groups and cards read. */
+function useSortableContextValue(reorder, renderCard, cardLabel) {
+    const { layout, activeId, spans, registerCard, unregisterCard, registerExpander, } = reorder;
+    return useMemo(() => ({
+        layout,
+        activeId,
+        spans,
+        renderCard,
+        cardLabel: cardLabel ?? ((id) => id),
+        registerCard,
+        unregisterCard,
+        registerExpander,
+    }), [
+        layout,
+        activeId,
+        spans,
+        renderCard,
+        cardLabel,
+        registerCard,
+        unregisterCard,
+        registerExpander,
+    ]);
+}
 
 const DEFAULT_SKELETON_CARDS = Array.from({ length: SKELETON_CARD_COUNT }, (_, index) => `card-${index}`);
 /** Loading placeholder: the page's own skeleton, or generic list cards. */
@@ -77520,23 +78446,72 @@ function MasonryItem({ children }) {
     const { ref, span } = useMasonrySpan();
     return (jsx("div", { style: span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsx("div", { ref: ref, className: "pb-3", children: children }) }));
 }
+/**
+ * A grab tab on the middle of the card's top edge, always visible so the cards read as movable, and clear
+ * of the header's title and actions. It lights up with its card on hover. The only place a card drag starts.
+ */
+function CardReorderGrip({ label, dragging, setActivatorNodeRef, listeners, }) {
+    return (jsx(TooltipProvider, { delayDuration: 500, children: jsxs(Tooltip, { open: dragging ? false : undefined, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { ref: setActivatorNodeRef, type: "button", 
+                        // Mouse and touch only, like column reorder.
+                        tabIndex: -1, "aria-label": getCardGripLabel(label), className: cn(
+                        // The ::before pads the tab's hit area beyond what it shows.
+                        'absolute left-1/2 top-0 z-10 flex h-4 w-10 -translate-x-1/2 -translate-y-1/2 cursor-grab touch-none select-none items-center justify-center rounded-full border border-border bg-card text-foreground/50 shadow-sm transition-colors before:absolute before:-inset-2 before:content-[""] active:cursor-grabbing', dragging
+                            ? 'pointer-events-none'
+                            : 'group-hover/card:border-primary/50 group-hover/card:text-primary group-hover/card:hover:border-primary group-hover/card:hover:bg-primary group-hover/card:hover:text-primary-foreground'), onClick: (event) => event.stopPropagation(), ...listeners, 
+                        // A grab closes any open dropdown first, so it doesn't stay open over the drag.
+                        onPointerDown: (event) => {
+                            dismissOpenLayer(event.currentTarget);
+                            listeners?.onPointerDown?.(event);
+                        }, children: jsx(GripHorizontal, { "aria-hidden": "true", className: "size-3.5", strokeWidth: 2.5 }) }) }), jsx(TooltipContent, { side: "top", children: CARD_REORDER_HINT })] }) }));
+}
+/** A card in a sortable group: draggable from its grip, and a dashed slot where it will land while it drags. */
+function SortableFilterCard({ id, masonry, children, }) {
+    const { ref, span, isActive, dragging, label, setActivatorNodeRef, listeners, } = useSortableFilterCard(id);
+    return (jsx("div", { ref: ref.card, "data-filter-card-id": id, className: "group/card", style: masonry && span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsx("div", { ref: masonry ? ref.span : undefined, className: cn(masonry && 'pb-3'), children: jsxs("div", { className: cn('relative rounded-xl transition-shadow', !dragging &&
+                    'group-hover/card:ring-2 group-hover/card:ring-primary/20'), children: [jsx("div", { "data-filter-card-body": "", className: cn(isActive && 'invisible'), children: children }), isActive ? (jsx("div", { className: "absolute inset-0 rounded-xl border-2 border-dashed border-primary/40 bg-primary/5" })) : (jsx(CardReorderGrip, { label: label, dragging: dragging, setActivatorNodeRef: setActivatorNodeRef, listeners: listeners }))] }) }) }));
+}
+/** Where a group with no cards takes a drop. */
+function EmptyGroupDropZone({ groupId, }) {
+    return (jsx("div", { "data-filter-group-id": groupId, className: "flex min-h-24 items-center justify-center rounded-xl border-2 border-dashed border-border text-sm text-muted-foreground", children: EMPTY_GROUP_LABEL }));
+}
+/** The copy of the dragged card under the pointer. */
+function FilterCardOverlay({ node, }) {
+    return (jsxs("div", { "aria-hidden": "true", className: "relative cursor-grabbing rounded-xl shadow-lg ring-2 ring-primary/20", children: [jsx("div", { ref: (element) => {
+                    element?.replaceChildren(node);
+                } }), jsx("span", { className: "absolute left-1/2 top-0 flex h-4 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-primary bg-primary text-primary-foreground shadow-sm", children: jsx(GripHorizontal, { "aria-hidden": "true", className: "size-3.5", strokeWidth: 2.5 }) })] }));
+}
 
 /** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
-function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
+function FilterSurface({ title, headerActions, primaryActions, chips, onClose, closeButton = 'back', status = 'ready', errorMessage, onRetry, skeleton, children, }) {
     useCloseOnEscape(onClose);
     const ready = status === 'ready';
     const actions = ready ? primaryActions : undefined;
-    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) }), jsx("h1", { className: "sr-only", children: title }), jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
+    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [closeButton === 'back' && (jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) })), jsx("h1", { className: "sr-only", children: title }), jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions, closeButton === 'close' && (jsxs(Fragment$2, { children: [jsx("span", { "aria-hidden": "true", className: "mx-1 h-6 w-px bg-border" }), jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": CLOSE_LABEL, title: CLOSE_LABEL, onClick: onClose, children: jsx(X$2, {}) })] }))] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
+}
+/**
+ * Lets the user drag the cards of its `FilterSurfaceGroup`s (those with a `sortableId`) into any order and
+ * between groups, from a grip on each card. A collapsed `FilterSurfaceMore` opens when a card rests on it.
+ */
+function FilterSurfaceSortable({ layout, onLayoutChange, renderCard, cardLabel, children, }) {
+    const reorder = useFilterCardReorder({ layout, onLayoutChange });
+    const context = useSortableContextValue(reorder, renderCard, cardLabel);
+    return (jsxs(DndContext, { sensors: reorder.sensors, onDragStart: reorder.onDragStart, onDragEnd: reorder.onDragEnd, onDragCancel: reorder.onDragCancel, children: [jsx(FilterSurfaceSortableContext.Provider, { value: context, children: children }), jsx(DragOverlay, { className: "pointer-events-none", dropAnimation: CARD_DROP_ANIMATION, children: reorder.overlay && jsx(FilterCardOverlay, { node: reorder.overlay }) })] }));
 }
-function FilterSurfaceGroup({ title, masonry = false, className, children, }) {
-    return (jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsx("div", { className: cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className), children: masonry
+function FilterSurfaceGroup({ title, masonry = false, sortableId, className, children, }) {
+    const sortable = useFilterSurfaceSortable();
+    const ids = sortable && sortableId ? (sortable.layout[sortableId] ?? []) : null;
+    // Cards keep their own height (no stretching to the row's tallest), so short cards carry no empty space.
+    const gridClassName = cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className);
+    return (jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), sortable && sortableId && ids ? (ids.length === 0 ? (jsx(EmptyGroupDropZone, { groupId: sortableId })) : (
+            // Top room for the first row's grab tabs, which sit on the cards' top edge.
+            jsx("div", { className: cn(gridClassName, 'pt-2'), "data-filter-group-id": sortableId, children: ids.map((id) => (jsx(SortableFilterCard, { id: id, masonry: masonry, children: sortable.renderCard(id) }, id))) }))) : (jsx("div", { className: gridClassName, children: masonry
                     ? Children.map(children, (child) => child ? jsx(MasonryItem, { children: child }) : null)
-                    : children })] }));
+                    : children }))] }));
 }
 /** Collapsed "More filters" divider that reveals extra cards. */
 function FilterSurfaceMore({ label, defaultExpanded, children, }) {
-    const { expanded, toggle } = useFilterSurfaceMore(defaultExpanded);
-    return (jsxs("section", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "h-px flex-1 bg-border" }), jsxs("button", { type: "button", "aria-expanded": expanded, onClick: toggle, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-xs font-medium text-primary outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-primary/30", children: [label, jsx(ChevronDown, { "aria-hidden": "true", className: cn('size-3.5 transition-transform', expanded && 'rotate-180') })] }), jsx("span", { className: "h-px flex-1 bg-border" })] }), expanded && children] }));
+    const { expanded, toggle, toggleRef } = useFilterSurfaceMore(defaultExpanded);
+    return (jsxs("section", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "h-px flex-1 bg-border" }), jsxs("button", { ref: toggleRef, type: "button", "aria-expanded": expanded, onClick: toggle, "data-filter-more-toggle": "", className: "inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-xs font-medium text-primary outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-primary/30", children: [label, jsx(ChevronDown, { "aria-hidden": "true", className: cn('size-3.5 transition-transform', expanded && 'rotate-180') })] }), jsx("span", { className: "h-px flex-1 bg-border" })] }), expanded && children] }));
 }
 
 /** Falls back to counting the current page when the caller has no total. */
@@ -80112,5 +81087,5 @@ var RichTextAreaImpl = /*#__PURE__*/Object.freeze({
   RichTextarea: RichTextarea
 });
 
-export { ACTIVITY_CATEGORIES, ACTIVITY_CATEGORY_META, ActionBadge, ActionButtonWithTooltip, ActiveFilterChips, ActivityFeed, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, CompanyCard, ConfirmDialog, ContactTypeFilter, ContainsFilter, CopyButton, CountrySelect, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomFieldInput, CustomFieldValue, CustomTable, CustomizeColumnsDrawer, DATE_PRESET_OPTIONS, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DateRangeFilter, DetailChip, DetailPageLayout, DetailPageSkeleton, DetailSection, DocumentDeleteDialog, DocumentDetailSkeleton, DocumentHero, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyValue, EntityHeader, FILTER_COUNT_BADGE_CLASS_NAME, Field, FieldSkeleton, FileUploader, FilterCardSkeleton, FilterCellPopover, FilterEmptyState, FilterField, FilterFieldCard, FilterFieldCell, FilterFieldControl, FilterMultiSelect, FilterPanel, FilterSelect, FilterSurface, FilterSurfaceGroup, FilterSurfaceMore, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, IdListInput, InAppNotificationCard, InAppNotificationsPanel, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, LineItemsCard, LineProductCell, LineProductThumb, LineProductTypeChip, LineRowActionsMenu, LineTable, LineTableEmpty, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, NOT_CAPTURED, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberExpressionFilter, NumberInput, NumberRangeInputs, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PickListDropdown, PickListFilter, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SAVED_SEARCH_NAME_MAX_LENGTH, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SaveSearchDialog, SavedSearchChipList, SavedSearchDetail, SavedSearchesMenu, ScaleRangeFilter, ScrollFade, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StateSelect, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableRowsSkeleton, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TriStateFilter, TruncateTooltip, TruncatedLabel, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, asList, asText, badgeVariants, buildBulkShareMessage, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildNumberRuleHelp, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, describeFilterValue, dropdownMenuItemDestructiveClass, expandScaleRange, fieldTypeIcon, filterSavedSearches, findRegion, flagEmoji, formatAddressLocation, formatDateRange, formatFileSize, formatNumberRange, formatScaleRange, formatSelectedCount, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isDuplicateSearchName, isFilterValueActive, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, isValidSearchName, isValueEmpty, notify, parseNumberExpression, releaseStaleOverlayBodyLock, renderBadge, resolveCountryCode, resolveDatePreset, resolveDateRange, richTextChangeText, splitIdList, toAddressFormValues, toBoolValue, toContainsValue, toDateValue, toIdsValue, toListValue, toNumberValue, toScaleValue, useAuditShowMore, useBadge, useButton, useDropdownMenu, useInAppNotificationsPanel, useNavbar, useSidebar, valueOfType, videoThumbnailSrc, watchOverlayBodyLock };
+export { ACTIVITY_CATEGORIES, ACTIVITY_CATEGORY_META, ActionBadge, ActionButtonWithTooltip, ActiveFilterChips, ActivityFeed, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, CompanyCard, ConfirmDialog, ContactTypeFilter, ContainsFilter, CopyButton, CountrySelect, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomFieldInput, CustomFieldValue, CustomTable, CustomizeColumnsDrawer, DATE_PRESET_OPTIONS, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DateRangeFilter, DetailChip, DetailPageLayout, DetailPageSkeleton, DetailSection, DocumentDeleteDialog, DocumentDetailSkeleton, DocumentHero, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyValue, EntityHeader, FILTER_COUNT_BADGE_CLASS_NAME, Field, FieldSkeleton, FileUploader, FilterCardSkeleton, FilterCellPopover, FilterEmptyState, FilterField, FilterFieldCard, FilterFieldCell, FilterFieldControl, FilterMultiSelect, FilterPanel, FilterSelect, FilterSurface, FilterSurfaceGroup, FilterSurfaceMore, FilterSurfaceSortable, FloatingSlideOver, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, IdListInput, InAppNotificationCard, InAppNotificationsPanel, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, LineItemsCard, LineProductCell, LineProductThumb, LineProductTypeChip, LineRowActionsMenu, LineTable, LineTableEmpty, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, NOT_CAPTURED, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberExpressionFilter, NumberInput, NumberRangeInputs, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PickListDropdown, PickListFilter, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SAVED_SEARCH_NAME_MAX_LENGTH, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SaveSearchDialog, SavedSearchChipList, SavedSearchDetail, SavedSearchesMenu, ScaleRangeFilter, ScrollFade, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StateSelect, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableRowsSkeleton, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TriStateFilter, TruncateTooltip, TruncatedLabel, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, asList, asText, badgeVariants, buildBulkShareMessage, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildNumberRuleHelp, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, describeFilterValue, dropdownMenuItemDestructiveClass, expandScaleRange, fieldTypeIcon, filterSavedSearches, findRegion, flagEmoji, formatAddressLocation, formatDateRange, formatFileSize, formatNumberRange, formatScaleRange, formatSelectedCount, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isDuplicateSearchName, isFilterValueActive, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, isValidSearchName, isValueEmpty, notify, parseNumberExpression, releaseStaleOverlayBodyLock, renderBadge, resolveCountryCode, resolveDatePreset, resolveDateRange, richTextChangeText, splitIdList, toAddressFormValues, toBoolValue, toContainsValue, toDateValue, toIdsValue, toListValue, toNumberValue, toScaleValue, useAuditShowMore, useBadge, useButton, useDropdownMenu, useInAppNotificationsPanel, useNavbar, useSidebar, valueOfType, videoThumbnailSrc, watchOverlayBodyLock };
 //# sourceMappingURL=index.esm.js.map