zidane-ui 9.1.1 → 9.1.3

package/src/components/Overlay.tsx

@@ -1,327 +0,0 @@
-/**
- * A layer above the page: portal, scrim, enter / exit motion, Esc, scroll
- * lock and focus. The surface inside is the caller's (a `.zg-float` dialog,
- * a `.zg-sheet` menu); it receives the state (`open` / `closed`) to put on
- * its own `data-state` (a sheet's CSS keys on it).
- *
- * Motion: the scrim is motion's (opacity on `fade`, out on `fade-out`: an
- * opacity never rides a spring) and holds the layer mounted until its fade
- * finishes (`AnimatePresence`), the same length as the surface's CSS exit.
- * The caller's surface animates in CSS off its `data-state` on the same
- * curves (`--zg-motion-*`, primitives.css): the layout is the caller's, so
- * the layer adds no box of its own around it. Reduced fades, Off is instant.
- *
- * Focus: on close it returns to whatever had it when the layer opened.
- * `trapFocus` makes the layer modal (dialogs): focus moves in on open (to
- * whatever inside asked for it with `autoFocus`, else the first control,
- * else the layer itself), Tab stays inside, and everything else under
- * `body` is `inert` so a screen reader can't browse behind it. A layer
- * that leaves part of the page usable (a menu under a header whose button
- * closes it) skips the trap and names the background in `inertSelector`
- * instead, so Tab can't wander behind it.
- *
- * Stacking: layers opened over one another (a confirm over a dialog, a
- * lightbox over a sheet) each own Esc and Tab only while topmost, so one Esc
- * closes one layer. The scroll lock and the inert background are counted
- * and released when the last layer that took them closes. The host app's
- * own modal layer (the desktop app's ModalProvider) is outside this stack.
- */
-import { AnimatePresence, domAnimation, LazyMotion, m, useIsPresent } from 'motion/react';
-import {
-  useCallback,
-  useEffect,
-  useInsertionEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-  type RefObject,
-} from 'react';
-import { createPortal } from 'react-dom';
-
-import { useScrollLock } from '../motion/presence';
-import { useMotionTransition } from '../motion/springs';
-
-const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])';
-
-/** Can take focus right now: rendered, not hidden, not inert. */
-function focusable(el: HTMLElement): boolean {
-  if (el.closest('[hidden], [inert], [aria-hidden="true"]')) return false;
-  return typeof el.checkVisibility === 'function' ? el.checkVisibility() : true;
-}
-
-/** The open layers, oldest first: Esc and the Tab trap belong to the last one. */
-const layers: object[] = [];
-
-/**
- * How many open layers hold each element inert. Stacked modal layers share
- * most of the background, so it stays inert until the last of them closes,
- * whatever order they close in.
- */
-const inertHolds = new Map<HTMLElement, number>();
-
-/** Makes `el` inert for one layer; false when it was already inert by someone else's hand (theirs to undo). */
-function holdInert(el: HTMLElement): boolean {
-  const held = inertHolds.get(el) ?? 0;
-  if (held === 0) {
-    if (el.inert) return false;
-    el.inert = true;
-  }
-  inertHolds.set(el, held + 1);
-  return true;
-}
-
-function releaseInert(el: HTMLElement): void {
-  const held = inertHolds.get(el) ?? 0;
-  if (held > 1) {
-    inertHolds.set(el, held - 1);
-    return;
-  }
-  inertHolds.delete(el);
-  el.inert = false;
-}
-
-/** Options of {@link useLayer}. */
-export interface LayerOptions {
-  /** Called on Esc while this is the topmost layer. Omit to leave Esc alone (it still never reaches a layer below). */
-  onEscape?: () => void;
-  /** Modal: focus moves in, Tab stays in, the rest of `body` goes inert. Default true. */
-  trapFocus?: boolean;
-  /** Elements made `inert` while open (e.g. `main, footer`). */
-  inertSelector?: string;
-  /** Where focus lands on open when nothing inside took it already; else the first control, else the layer. */
-  initialFocus?: RefObject<HTMLElement | null>;
-}
-
-/**
- * The behaviour of a layer whose root (`layerRef`, a child of `body`) is
- * portaled by the caller: scroll lock, stacking, Esc, focus and the inert
- * background, as described above. Overlay and Lightbox both run on it.
- * Returns whether this layer is the topmost one right now, for a caller
- * that handles more keys of its own.
- *
- * @param open - Whether the layer is open. Scroll lock, stacking, Esc handling and the focus trap
- * run only while it is.
- * @param layerRef - Ref to the layer's root element, a child of `body` the caller portals.
- * @param options - Esc handling, focus trap and inert background options, see {@link LayerOptions}.
- */
-export function useLayer(
-  open: boolean,
-  layerRef: RefObject<HTMLElement | null>,
-  { onEscape, trapFocus = true, inertSelector, initialFocus }: LayerOptions = {},
-): () => boolean {
-  useScrollLock(open);
-  const [token] = useState(() => ({}));
-  const isTop = useCallback(() => layers[layers.length - 1] === token, [token]);
-
-  const onEscapeRef = useRef(onEscape);
-  useLayoutEffect(() => {
-    onEscapeRef.current = onEscape;
-  });
-
-  // The opener is read before the layer's DOM is committed: by the time a
-  // layout effect runs, an `autoFocus` inside has already moved focus in.
-  const opener = useRef<HTMLElement | null>(null);
-  useInsertionEffect(() => {
-    if (open) opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-  }, [open]);
-
-  // Declared before the focus effect: on close the background leaves inert
-  // first, so focus can return to the opener behind it.
-  useEffect(() => {
-    if (!open) return undefined;
-    const held: HTMLElement[] = [];
-    const hold = (el: HTMLElement) => {
-      if (holdInert(el)) held.push(el);
-    };
-    if (inertSelector) document.querySelectorAll<HTMLElement>(inertSelector).forEach(hold);
-    const layer = layerRef.current;
-    if (trapFocus && layer?.parentElement) {
-      for (const el of layer.parentElement.children) {
-        // Live regions (toasts) keep announcing over the layer.
-        if (el !== layer && el instanceof HTMLElement && !el.hasAttribute('aria-live')) hold(el);
-      }
-    }
-    return () => held.forEach(releaseInert);
-  }, [open, trapFocus, inertSelector, layerRef]);
-
-  useEffect(() => {
-    if (!open) return undefined;
-    layers.push(token);
-    const layer = layerRef.current;
-    if (trapFocus && layer && !layer.contains(document.activeElement)) {
-      const target =
-        initialFocus?.current ?? [...layer.querySelectorAll<HTMLElement>(FOCUSABLE)].find(focusable) ?? layer;
-      if (target === layer && !layer.hasAttribute('tabindex')) layer.tabIndex = -1;
-      target.focus({ preventScroll: true });
-    }
-    return () => {
-      const at = layers.indexOf(token);
-      if (at !== -1) layers.splice(at, 1);
-      const el = opener.current;
-      if (el?.isConnected) el.focus({ preventScroll: true });
-    };
-    // Focus moves in once per opening; a later change of options must not pull it back.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, token]);
-
-  useEffect(() => {
-    if (!open) return undefined;
-    const onKey = (e: KeyboardEvent) => {
-      if (!isTop()) return;
-      if (e.key === 'Escape') {
-        // Esc mid-composition cancels the IME's candidate, not the layer.
-        if (!e.isComposing) onEscapeRef.current?.();
-        return;
-      }
-      const layer = layerRef.current;
-      if (e.key !== 'Tab' || !trapFocus || !layer) return;
-      const items = [...layer.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(focusable);
-      if (!items.length) return;
-      const first = items[0];
-      const last = items[items.length - 1];
-      const inside = layer.contains(document.activeElement);
-      if (e.shiftKey && (document.activeElement === first || !inside)) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && (document.activeElement === last || !inside)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [open, trapFocus, isTop, layerRef]);
-
-  return isTop;
-}
-
-/** Props for {@link Overlay}. */
-export interface OverlayProps {
-  /** Whether the layer is shown. */
-  open: boolean;
-  /** Called when the scrim is clicked, or on Esc when `closeOnEscape` is on. */
-  onClose: () => void;
-  /**
-   * Renders the surface. It receives `open` or `closed`, to put on the surface's `data-state`. The
-   * state is `closed` on the first frame and during exit, so CSS has a from-state.
-   */
-  children: (state: 'open' | 'closed') => ReactNode;
-  /** Position of the layer (the scrim fills it). */
-  className?: string;
-  /**
-   * Extra classes on the scrim.
-   * @default ''
-   */
-  scrimClassName?: string;
-  /**
-   * Exit duration in milliseconds. Ignored.
-   *
-   * @deprecated The exit lasts as long as its motion; kept so older callers compile.
-   */
-  exitMs?: number;
-  /**
-   * Close the layer on Esc while it is the topmost layer.
-   * @default true
-   */
-  closeOnEscape?: boolean;
-  /**
-   * Make the layer modal: focus moves in on open, Tab stays inside, and the rest of `body` goes
-   * inert.
-   * @default true
-   */
-  trapFocus?: boolean;
-  /** Elements made `inert` while open (e.g. `main, footer`). */
-  inertSelector?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a layer above the page through a portal: a scrim that fades in and out, with the
- * surface drawn by `children`. It adds scroll lock, Esc to close, focus return on close and,
- * with `trapFocus`, a modal focus trap that makes the rest of the page inert. The layer stays
- * mounted until the scrim's exit finishes.
- *
- * @param props - Component props.
- */
-export function Overlay({
-  open,
-  onClose,
-  children,
-  className = 'fixed inset-0 z-zg-overlay',
-  scrimClassName = '',
-  closeOnEscape = true,
-  trapFocus = true,
-  inertSelector,
-  style,
-}: OverlayProps) {
-  const layerRef = useRef<HTMLDivElement>(null);
-  useLayer(open, layerRef, { onEscape: closeOnEscape ? onClose : undefined, trapFocus, inertSelector });
-
-  if (typeof document === 'undefined') return null;
-  return createPortal(
-    // `m` with the DOM animation features only: an app that renders no other motion component
-    // pays for these, not for motion's whole feature set (layout, drag).
-    <LazyMotion features={domAnimation}>
-      <AnimatePresence>
-        {open && (
-          <Layer
-            key="layer"
-            layerRef={layerRef}
-            className={className}
-            style={style}
-            scrimClassName={scrimClassName}
-            onClose={onClose}
-          >
-            {children}
-          </Layer>
-        )}
-      </AnimatePresence>
-    </LazyMotion>,
-    document.body,
-  );
-}
-
-function Layer({
-  layerRef,
-  className,
-  style,
-  scrimClassName,
-  onClose,
-  children,
-}: {
-  layerRef: React.RefObject<HTMLDivElement | null>;
-  className: string;
-  style: CSSProperties | undefined;
-  scrimClassName: string;
-  onClose: () => void;
-  children: (state: 'open' | 'closed') => ReactNode;
-}) {
-  const present = useIsPresent();
-  // `closed` on the first frame too, so the surface's CSS enter has a from-state.
-  const [entered, setEntered] = useState(false);
-  useEffect(() => {
-    const id = requestAnimationFrame(() => setEntered(true));
-    return () => cancelAnimationFrame(id);
-  }, []);
-  const state = present && entered ? 'open' : 'closed';
-  const fadeIn = useMotionTransition('fade');
-  const fadeOut = useMotionTransition('fade-out');
-  return (
-    <div ref={layerRef} className={className} style={style} data-zg-overlay="" {...(present ? {} : { inert: true })}>
-      <m.div
-        className={`zg-scrim absolute inset-0 ${scrimClassName}`}
-        data-state={state}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1, transition: fadeIn }}
-        exit={{ opacity: 0, transition: fadeOut }}
-        onClick={onClose}
-        aria-hidden
-      />
-      {children(state)}
-    </div>
-  );
-}

package/src/components/PanelEmpty.tsx

@@ -1,80 +0,0 @@
-/**
- * Empty and loading states for the side panel's tabs: the shared
- * `EmptyState` block, inset from the panel edges and centred in the
- * remaining height.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-import { useLabels } from '../labels';
-import { SegmentSpinner } from './SegmentSpinner';
-import { EmptyState } from './Surface';
-
-/** Props for {@link PanelEmpty}. */
-export interface PanelEmptyProps {
-  /** Icon class shown above the title, such as `i-ph-files`. */
-  icon?: string;
-  /** Main message. It takes the warning colour when `warn` is set. */
-  title: ReactNode;
-  /** Secondary text under the title. */
-  hint?: ReactNode;
-  /** An error in place of content. */
-  warn?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders an empty or error state for a side panel tab: an {@link EmptyState} inset from the
- * panel edges and centred in the remaining height.
- *
- * @param props - Component props.
- */
-export function PanelEmpty({ icon, title, hint, warn = false, className, style }: PanelEmptyProps) {
-  return (
-    <div
-      className={['flex-1 min-h-0 flex flex-col justify-center p-3', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <EmptyState
-        icon={icon}
-        title={warn ? <span className="text-[var(--zg-warn)]">{title}</span> : title}
-        hint={hint}
-        framed={false}
-        compact
-      />
-    </div>
-  );
-}
-
-/** Props for {@link PanelLoading}. */
-export interface PanelLoadingProps {
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a centred spinner with a loading label for a side panel tab.
- *
- * @param props - Component props.
- */
-export function PanelLoading({ className, style }: PanelLoadingProps) {
-  const labels = useLabels();
-  return (
-    <div
-      className={[
-        'flex-1 min-h-0 flex items-center justify-center gap-2 p-6 text-zg-label text-[var(--zg-text-muted)]',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <SegmentSpinner size="sm" tone="muted" label={labels.loading} />
-      <span aria-hidden>{labels.loading}…</span>
-    </div>
-  );
-}

package/src/components/PanelRows.tsx

@@ -1,107 +0,0 @@
-/**
- * Row furniture shared by the Artifacts tab and extension panels
- * (`PanelContentView`): the flat hoverable row, its badges, and the
- * `+N −M` diff counts (also the Diffs tab's).
- */
-import type { CSSProperties } from 'react';
-
-/** A flat list row: no fill until hovered, bleeding into the list's padding. */
-export const PANEL_ROW = 'relative flex items-start gap-2 -mx-2 px-2 py-1.5 rounded-zg-md';
-/**
- * Class that adds the hover fill to a {@link PANEL_ROW}. Left separate for rows that supply their
- * own hover.
- */
-export const PANEL_ROW_HOVER = 'hover:bg-[var(--zg-row-hover)]';
-
-/**
- * Colour of a {@link RowBadge}: `neutral` (or none) is muted, `success` and `warn` take their
- * status colour, and `diff` is monospaced text for `+N -M` counts.
- */
-export type BadgeTone = 'neutral' | 'diff' | 'success' | 'warn' | undefined;
-
-/** Props for {@link DiffCounts}. */
-export interface DiffCountsProps {
-  /** Number of added lines, shown as `+N` in the success colour. */
-  added: number;
-  /** Number of removed lines, shown as `-N` in the danger colour. */
-  removed: number;
-  /** Extra classes on the wrapping element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * `+120 −8` with the halves colored like a diff, in the meta voice.
- *
- * @param props - Component props.
- */
-export function DiffCounts({ added, removed, className = '', style }: DiffCountsProps) {
-  return (
-    <span className={`zg-meta shrink-0 inline-flex items-center gap-1 ${className}`} style={style}>
-      <span className="text-zg-success">+{added}</span>
-      <span className="text-zg-danger">−{removed}</span>
-    </span>
-  );
-}
-
-/** Props for {@link RowBadge}. */
-export interface RowBadgeProps {
-  /** Badge text. With `tone="diff"`, text shaped like `+12 -3` renders as {@link DiffCounts}. */
-  text: string;
-  /** Colour of the text. See {@link BadgeTone}. */
-  tone?: BadgeTone;
-  /** Native tooltip. */
-  title?: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A small status chip set into the row. A `diff` badge reading `+N −M` renders as `DiffCounts`.
- *
- * @param props - Component props.
- */
-export function RowBadge({ text, tone, title, className, style }: RowBadgeProps) {
-  const diff = tone === 'diff' ? /^\+(\d+) −(\d+)$/.exec(text) : null;
-  if (diff) {
-    return (
-      <span
-        className={['zg-track-chip inline-flex items-center h-4 px-1.5', className].filter(Boolean).join(' ')}
-        style={style}
-        title={title}
-      >
-        <DiffCounts added={Number(diff[1])} removed={Number(diff[2])} />
-      </span>
-    );
-  }
-  return (
-    <span
-      className={[
-        `zg-track-chip inline-flex items-center h-4 px-1.5 text-zg-badge leading-4 tabular-nums whitespace-nowrap ${badgeTone(tone)}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-      title={title}
-    >
-      {text}
-    </span>
-  );
-}
-
-function badgeTone(tone: BadgeTone): string {
-  switch (tone) {
-    case 'success':
-      return 'text-zg-success';
-    case 'warn':
-      return 'text-zg-warn';
-    case 'diff':
-      return 'font-mono text-[var(--zg-text)]';
-    default:
-      return 'text-[var(--zg-text-muted)]';
-  }
-}

package/src/components/PreviewWindow.tsx

@@ -1,53 +0,0 @@
-/**
- * A small app window around a live preview: a title bar with three dots and
- * a caption, then the content. With `vars` (the CSS variables of a palette),
- * the window has its own theme (`zg-theme-scope`). A theme picker can then
- * show a theme before it applies to the page.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-/** Props for {@link PreviewWindow}. */
-export interface PreviewWindowProps {
-  /** Caption in the title bar. */
-  title?: ReactNode;
-  /**
-   * A theme's CSS variables, the full set the app applies: `themeCssVars(id)`, or `paletteToCssVars`
-   * with `contrastToCssVars` and `depthToCssVars`. Palette vars alone leave text on the page's
-   * contrast. Absent: the page's theme.
-   */
-  vars?: Readonly<Record<string, string>>;
-  /** Light or dark, for `vars` from a palette of that appearance. */
-  appearance?: 'dark' | 'light';
-  /** Accessible name of the preview. */
-  label?: string;
-  /** Extra classes on the window. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** The preview. */
-  children: ReactNode;
-}
-
-/**
- * Renders a window frame around a preview, themed by `vars` when given.
- *
- * @param props - Component props.
- */
-export function PreviewWindow({ title, vars, appearance, label, className = '', style, children }: PreviewWindowProps) {
-  const scope = vars ? `zg-theme-scope ${appearance ?? ''}` : '';
-  return (
-    <figure
-      aria-label={label}
-      className={`m-0 flex flex-col min-w-0 overflow-hidden rounded-zg-lg border border-[var(--zg-hairline)] bg-[var(--zg-bg)] text-[var(--zg-text)] ${scope} ${className}`}
-      style={style ? { ...(vars as CSSProperties | undefined), ...style } : (vars as CSSProperties | undefined)}
-    >
-      <div aria-hidden className="flex items-center gap-1.5 h-7 px-3 shrink-0 bg-[var(--zg-tray)]">
-        <span className="w-2 h-2 rounded-full bg-[var(--zg-track)]" />
-        <span className="w-2 h-2 rounded-full bg-[var(--zg-track)]" />
-        <span className="w-2 h-2 rounded-full bg-[var(--zg-track)]" />
-        {title && <span className="ml-2 zg-meta truncate">{title}</span>}
-      </div>
-      <div className="flex-1 min-w-0 min-h-0">{children}</div>
-    </figure>
-  );
-}

package/src/components/ReorderTabs.tsx

@@ -1,103 +0,0 @@
-/**
- * A strip of pills the user drags to reorder: every sibling slides to its
- * new slot as the held pill passes it (the `settle` motion), the held pill
- * lifts, and the order is committed once on drop. Alt+Shift+←/→ on a
- * focused tab moves it one slot (`onMove` in `renderTab`). The active tab
- * scrolls into view; the strip scrolls sideways when it overflows.
- */
-import { AnimatePresence, Reorder } from 'motion/react';
-import { useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
-
-import { moveId, useTabDrag } from '../hooks/useTabDrag';
-import { useMotionTransition, useTabExit } from '../motion/springs';
-
-/** What a tab needs to take part in the strip. */
-export interface ReorderTabState {
-  /** Held by the pointer. */
-  lifted: boolean;
-  /** Wraps the tab's pick, so the click that ends a drag doesn't pick. */
-  pick: (run: () => void) => () => void;
-  /** Moves the tab one slot left (-1) or right (+1). */
-  onMove: (delta: number) => void;
-}
-
-/** Props of {@link ReorderTabs}. */
-export interface ReorderTabsProps {
-  /** The tabs, in their current order. */
-  ids: readonly string[];
-  /** The selected tab, scrolled into view; `null` when none is. */
-  activeId: string | null;
-  /** The new order, once per drop or keyboard move. */
-  onReorder: (ids: readonly string[]) => void;
-  /** Draws one tab (a `role="tab"` element); `state` wires its pick, lift and keyboard move. */
-  renderTab: (id: string, state: ReorderTabState) => ReactNode;
-  /** Accessible name of the tablist. */
-  label: string;
-  /** Extra classes on the strip. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the reorderable tab strip (see the module comment).
- *
- * @param props - Component props.
- */
-export function ReorderTabs({ ids, activeId, onReorder, renderTab, label, className = '', style }: ReorderTabsProps) {
-  const tabLayout = useMotionTransition('settle');
-  const tabExit = useTabExit();
-  const stripRef = useRef<HTMLDivElement>(null);
-  const drag = useTabDrag(ids, onReorder);
-  useEffect(() => {
-    stripRef.current
-      ?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')
-      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-  }, [activeId, ids.length]);
-  return (
-    <Reorder.Group
-      as="div"
-      axis="x"
-      values={drag.shown as string[]}
-      onReorder={drag.onReorder}
-      layoutScroll
-      ref={stripRef}
-      role="tablist"
-      aria-label={label}
-      className={`zg-segment zg-no-scrollbar zg-scroll-fade-x min-w-0 max-w-full overflow-x-auto ${className}`}
-      style={style}
-    >
-      <AnimatePresence initial={false}>
-        {drag.shown.map((id) => {
-          const lifted = drag.dragging === id;
-          return (
-            <Reorder.Item
-              key={id}
-              as="div"
-              value={id}
-              data-reorder-tab={id}
-              data-dragging={lifted || undefined}
-              onDragStart={() => drag.onDragStart(id)}
-              onDragEnd={drag.onDragEnd}
-              onPointerDown={drag.onPointerDown}
-              dragConstraints={drag.bounds}
-              dragElastic={0.08}
-              transition={tabLayout}
-              exit={tabExit}
-              whileDrag={{ scale: 1.04 }}
-              className={`relative shrink-0 rounded-full ${lifted ? 'z-10 shadow-[var(--zg-shadow-float)]' : ''}`}
-            >
-              {renderTab(id, {
-                lifted,
-                pick: (run) => () => {
-                  if (!drag.wasDragged()) run();
-                },
-                onMove: (delta) => onReorder(moveId(drag.shown, id, delta)),
-              })}
-            </Reorder.Item>
-          );
-        })}
-      </AnimatePresence>
-    </Reorder.Group>
-  );
-}