@caratlogic/design-system 0.1.43 → 0.1.44

package/dist/index.cjs.js

@@ -22680,6 +22680,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
  */
@@ -25964,6 +25978,396 @@ function useDroppable(_ref) {
   };
 }
 
+function AnimationManager(_ref) {
+  let {
+    animation,
+    children
+  } = _ref;
+  const [clonedChildren, setClonedChildren] = React.useState(null);
+  const [element, setElement] = React.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.createElement(React.Fragment, null, children, clonedChildren ? React.cloneElement(clonedChildren, {
+    ref: setElement
+  }) : null);
+}
+
+const defaultTransform = {
+  x: 0,
+  y: 0,
+  scaleX: 1,
+  scaleY: 1
+};
+function NullifiedContextProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  return React.createElement(InternalContext.Provider, {
+    value: defaultInternalContext
+  }, React.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__*/React.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.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 React.useMemo(() => {
+    if (id == null) {
+      return;
+    }
+
+    key++;
+    return key;
+  }, [id]);
+}
+
+const DragOverlay = /*#__PURE__*/React.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 = React.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.createElement(NullifiedContextProvider, null, React.createElement(AnimationManager, {
+    animation: dropAnimation
+  }, active && key ? React.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
@@ -77486,7 +77890,25 @@ 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';
@@ -77496,8 +77918,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) {
     React.useEffect(() => {
         const handleKeyDown = (event) => {
@@ -77515,12 +78011,27 @@ function useCloseOnEscape(onClose) {
 }
 function useFilterSurfaceMore(defaultExpanded = false) {
     const [expanded, setExpanded] = React.useState(defaultExpanded);
-    return { expanded, toggle: () => setExpanded((current) => !current) };
+    const [toggleNode, setToggleNode] = React.useState(null);
+    const registerExpander = React.useContext(FilterSurfaceSortableContext)?.registerExpander;
+    // Inside a sortable surface, a dragged card resting on the toggle opens the section.
+    React.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] = React.useState(null);
-    const [span, setSpan] = React.useState(0);
+    const [span, setSpan] = React.useState(initialSpan);
     React.useEffect(() => {
         if (!node)
             return;
@@ -77535,6 +78046,308 @@ function useMasonrySpan() {
     }, [node]);
     return { ref: React.useCallback((next) => setNode(next), []), span };
 }
+const FilterSurfaceSortableContext = React.createContext(null);
+/** The surrounding `FilterSurfaceSortable`, or null outside one. */
+function useFilterSurfaceSortable() {
+    return React.useContext(FilterSurfaceSortableContext);
+}
+/** A sortable card's drag wiring, masonry span and registration for the slide animation. */
+function useSortableFilterCard(id) {
+    const sortable = React.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 = React.useRef(null);
+    React.useEffect(() => {
+        if (span > 0)
+            spans.set(id, span);
+    }, [spans, id, span]);
+    const cardRef = React.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] = React.useState(null);
+    const [activeId, setActiveId] = React.useState(null);
+    const [overlay, setOverlay] = React.useState(null);
+    const shown = draft ?? layout;
+    const shownRef = React.useRef(shown);
+    const activeRef = React.useRef(null);
+    const nodesRef = React.useRef(new Map());
+    const spansRef = React.useRef(new Map());
+    const flipFromRef = React.useRef(null);
+    const expandersRef = React.useRef(new Map());
+    React.useLayoutEffect(() => {
+        shownRef.current = shown;
+    }, [shown]);
+    // A new layout from the consumer (usually the one just dropped) replaces the draft.
+    React.useEffect(() => {
+        if (activeRef.current === null)
+            setDraft(null);
+    }, [layout]);
+    const applyDraft = React.useCallback((next) => {
+        if (!prefersReducedMotion()) {
+            const rects = new Map();
+            nodesRef.current.forEach((node, id) => rects.set(id, node.getBoundingClientRect()));
+            flipFromRef.current = rects;
+        }
+        setDraft(next);
+    }, []);
+    React.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 = React.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 = React.useCallback((id, node) => {
+        if (nodesRef.current.get(id) === node)
+            nodesRef.current.delete(id);
+    }, []);
+    const registerExpander = React.useCallback((toggle, expand) => {
+        const expanders = expandersRef.current;
+        expanders.set(toggle, expand);
+        return () => {
+            expanders.delete(toggle);
+        };
+    }, []);
+    const onDragStart = React.useCallback((event) => {
+        const id = String(event.active.id);
+        activeRef.current = id;
+        setOverlay(cloneCardBody(nodesRef.current.get(id)));
+        setActiveId(id);
+    }, []);
+    const finish = React.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 = React.useCallback(() => finish(true), [finish]);
+    const onDragCancel = React.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) {
+    React.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 React.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. */
@@ -77550,6 +78363,40 @@ function MasonryItem({ children }) {
     const { ref, span } = useMasonrySpan();
     return (jsxRuntime.jsx("div", { style: span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsxRuntime.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 (jsxRuntime.jsx(TooltipProvider, { delayDuration: 500, children: jsxRuntime.jsxs(Tooltip, { open: dragging ? false : undefined, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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: jsxRuntime.jsx(GripHorizontal, { "aria-hidden": "true", className: "size-3.5", strokeWidth: 2.5 }) }) }), jsxRuntime.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 (jsxRuntime.jsx("div", { ref: ref.card, "data-filter-card-id": id, className: "group/card", style: masonry && span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsxRuntime.jsx("div", { ref: masonry ? ref.span : undefined, className: cn(masonry && 'pb-3'), children: jsxRuntime.jsxs("div", { className: cn('relative rounded-xl transition-shadow', !dragging &&
+                    'group-hover/card:ring-2 group-hover/card:ring-primary/20'), children: [jsxRuntime.jsx("div", { "data-filter-card-body": "", className: cn(isActive && 'invisible'), children: children }), isActive ? (jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-xl border-2 border-dashed border-primary/40 bg-primary/5" })) : (jsxRuntime.jsx(CardReorderGrip, { label: label, dragging: dragging, setActivatorNodeRef: setActivatorNodeRef, listeners: listeners }))] }) }) }));
+}
+/** Where a group with no cards takes a drop. */
+function EmptyGroupDropZone({ groupId, }) {
+    return (jsxRuntime.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 (jsxRuntime.jsxs("div", { "aria-hidden": "true", className: "relative cursor-grabbing rounded-xl shadow-lg ring-2 ring-primary/20", children: [jsxRuntime.jsx("div", { ref: (element) => {
+                    element?.replaceChildren(node);
+                } }), jsxRuntime.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: jsxRuntime.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, }) {
@@ -77558,15 +78405,30 @@ function FilterSurface({ title, headerActions, primaryActions, chips, onClose, s
     const actions = ready ? primaryActions : undefined;
     return (jsxRuntime.jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxRuntime.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: [jsxRuntime.jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsxRuntime.jsx(ArrowLeft, {}) }), jsxRuntime.jsx("h1", { className: "sr-only", children: title }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions] })] }), jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsxRuntime.jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsxRuntime.jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
 }
-function FilterSurfaceGroup({ title, masonry = false, className, children, }) {
-    return (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsxRuntime.jsx("div", { className: cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className), children: masonry
+/**
+ * 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 (jsxRuntime.jsxs(DndContext, { sensors: reorder.sensors, onDragStart: reorder.onDragStart, onDragEnd: reorder.onDragEnd, onDragCancel: reorder.onDragCancel, children: [jsxRuntime.jsx(FilterSurfaceSortableContext.Provider, { value: context, children: children }), jsxRuntime.jsx(DragOverlay, { className: "pointer-events-none", dropAnimation: CARD_DROP_ANIMATION, children: reorder.overlay && jsxRuntime.jsx(FilterCardOverlay, { node: reorder.overlay }) })] }));
+}
+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 (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsxRuntime.jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), sortable && sortableId && ids ? (ids.length === 0 ? (jsxRuntime.jsx(EmptyGroupDropZone, { groupId: sortableId })) : (
+            // Top room for the first row's grab tabs, which sit on the cards' top edge.
+            jsxRuntime.jsx("div", { className: cn(gridClassName, 'pt-2'), "data-filter-group-id": sortableId, children: ids.map((id) => (jsxRuntime.jsx(SortableFilterCard, { id: id, masonry: masonry, children: sortable.renderCard(id) }, id))) }))) : (jsxRuntime.jsx("div", { className: gridClassName, children: masonry
                     ? React.Children.map(children, (child) => child ? jsxRuntime.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 (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }), jsxRuntime.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, jsxRuntime.jsx(ChevronDown, { "aria-hidden": "true", className: cn('size-3.5 transition-transform', expanded && 'rotate-180') })] }), jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" })] }), expanded && children] }));
+    const { expanded, toggle, toggleRef } = useFilterSurfaceMore(defaultExpanded);
+    return (jsxRuntime.jsxs("section", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }), jsxRuntime.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, jsxRuntime.jsx(ChevronDown, { "aria-hidden": "true", className: cn('size-3.5 transition-transform', expanded && 'rotate-180') })] }), jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" })] }), expanded && children] }));
 }
 
 /** Falls back to counting the current page when the caller has no total. */
@@ -80231,6 +81093,7 @@ exports.FilterSelect = FilterSelect;
 exports.FilterSurface = FilterSurface;
 exports.FilterSurfaceGroup = FilterSurfaceGroup;
 exports.FilterSurfaceMore = FilterSurfaceMore;
+exports.FilterSurfaceSortable = FilterSurfaceSortable;
 exports.FormSectionCard = FormSectionCard;
 exports.FormSectionCardSkeleton = FormSectionCardSkeleton;
 exports.GEM_AUDIT_CONFIG = GEM_AUDIT_CONFIG;