@trackunit/react-components 3.12.4-alpha-07efa4379b2.0 → 4.0.1

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { twMerge } from 'tailwind-merge';
-import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, validateState, writeToStorage, readFromStorage, storageSerializer, filterByMultiple } from '@trackunit/shared-utils';
+import { objectKeys, uuidv4, parseTailwindArbitraryValue, nonNullable, objectValues, validateState, writeToStorage, readFromStorage, identityFingerprint, listHashKeys, readHashKey, unwrapUrlOwner, writeHashKey, objectEntries, filterByMultiple } from '@trackunit/shared-utils';
 export { storageSerializer } from '@trackunit/shared-utils';
 import { useRef, useMemo, useEffect, useSyncExternalStore, useState, useLayoutEffect, createContext, useContext, isValidElement, cloneElement, createElement, useId, useCallback, Fragment as Fragment$1, memo, forwardRef, useReducer, Children } from 'react';
-import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, trackunitBrandingPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
+import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, trackunitBrandingPalette, generalPalette, intentPalette, themeContainerSize, color, themeScreenSizeAsNumber } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
@@ -15,18 +15,15 @@ import { cva } from '@trackunit/css-class-variance-utilities';
 import { FloatingTree, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingNode, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow, useListNavigation, useTypeahead, FloatingList, useListItem } from '@floating-ui/react';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { omit, isEqual } from 'es-toolkit';
-import { Link, useBlocker, useNavigate, useLocation, useRouter, useSearch } from '@tanstack/react-router';
+import { Link, useBlocker } from '@tanstack/react-router';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { isTypeableElement } from '@floating-ui/react/utils';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
 import { gzipSync, gunzipSync } from 'fflate';
-import { dequal } from 'dequal';
-import { z } from 'zod';
 
 var defaultTranslations = {
 	"breadcrumb.backButton": "Back",
-	"breadcrumb.expandButton": "expand",
 	"copyableValue.copyValue": "Copy {{value}}",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
@@ -3878,235 +3875,6 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
     return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, style: style, children: compact ? null : displayedCount }));
 };
 
-const cvaBreadcrumb = cva({ base: ["my-4", "flex", "place-items-center"] });
-const cvaBreadcrumbItem = cva({ base: ["flex", "items-center"] });
-const cvaBreadcrumbForLargeScreen = cva({ base: ["flex", "flex-nowrap", "items-center"] });
-const cvaBreadcrumbForMediumScreen = cva({
-    base: ["flex", "items-center"],
-    variants: {
-        expanded: {
-            true: "flex-wrap",
-            false: "flex-nowrap",
-        },
-    },
-    defaultVariants: { expanded: false },
-});
-
-/**
- * Maps size keys to their corresponding state property names.
- */
-const breakpointPropsMap = {
-    xs: "isXs",
-    sm: "isSm",
-    md: "isMd",
-    lg: "isLg",
-    xl: "isXl",
-    "2xl": "is2xl",
-    "3xl": "is3xl",
-};
-/**
- * The default state for sizes, with all values set to false.
- */
-const defaultBreakpointState = {
-    isXs: false,
-    isSm: false,
-    isMd: false,
-    isLg: false,
-    isXl: false,
-    is2xl: false,
-    is3xl: false,
-};
-/**
- * Creates a breakpoint state object based on a width value
- */
-const createBreakpointState = ({ width }) => {
-    return objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
-        ...acc,
-        [breakpointPropsMap[size]]: width >= minWidth,
-    }), { ...defaultBreakpointState });
-};
-
-const canUseMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-const getViewportBreakpointState = () => {
-    if (!canUseMatchMedia())
-        return { ...defaultBreakpointState };
-    return objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
-        ...acc,
-        [breakpointPropsMap[size]]: window.matchMedia(`(min-width: ${minWidth}px)`).matches,
-    }), { ...defaultBreakpointState });
-};
-/**
- * Returns real-time boolean flags for each design-token breakpoint based on viewport width.
- *
- * **When to use:**
- * - Use `useViewportBreakpoints` when you need to respond to the **full viewport width**
- *   — for example, toggling a mobile navigation drawer or switching a global layout shell.
- * - **Prefer `useContainerBreakpoints`** for component-level responsiveness, as it
- *   responds to the parent container's width and works correctly when a component appears
- *   in different layout contexts (sidebar, main content, widget).
- * - Pass `{ skip: true }` when you only need the initial value and don't want ongoing
- *   `matchMedia` listeners.
- *
- * @param {object} [options] - Configuration options
- * @param {boolean} [options.skip] - Whether to skip observing for viewport changes (default: false)
- * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
- * @example
- * const MyComponent = () => {
- *   const viewportSize = useViewportBreakpoints();
- *
- *   if (viewportSize.isLg) {
- *     return <LargeScreenLayout />;
- *   }
- *
- *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
- * }
- */
-const useViewportBreakpoints = (options = {}) => {
-    const { skip = false } = options;
-    const [viewportSize, setViewportSize] = useState(getViewportBreakpointState);
-    const updateViewportSize = useCallback(() => {
-        setViewportSize(getViewportBreakpointState());
-    }, []);
-    const updateViewportSizeRef = useRef(updateViewportSize);
-    useEffect(() => {
-        updateViewportSizeRef.current = updateViewportSize;
-    }, [updateViewportSize]);
-    useEffect(() => {
-        if (skip || !canUseMatchMedia()) {
-            return;
-        }
-        updateViewportSizeRef.current();
-        const mediaQueryLists = objectEntries(themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
-        mediaQueryLists.forEach(mql => {
-            mql.addEventListener("change", updateViewportSizeRef.current);
-        });
-        return () => {
-            mediaQueryLists.forEach(mql => {
-                mql.removeEventListener("change", updateViewportSizeRef.current);
-            });
-        };
-    }, [skip]);
-    return viewportSize;
-};
-
-/**
- * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
- */
-const BreadcrumbItem = ({ item, "data-testid": dataTestId, className, style, }) => {
-    const id = uuidv4();
-    return (jsx("div", { className: cvaBreadcrumbItem({ className }), "data-testid": dataTestId, id: `${item.props.label}-${id}`, style: style, children: item }));
-};
-
-/**
- * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
- */
-const BreadcrumbForLargeScreen = ({ "data-testid": dataTestId, breadcrumbItems, className, style, }) => {
-    return (jsx("div", { className: cvaBreadcrumbForLargeScreen({ className }), "data-testid": dataTestId, style: style, children: breadcrumbItems.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `BreadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
-};
-
-/**
- * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
- */
-const BreadcrumbForMediumScreen = ({ "data-testid": dataTestId, breadcrumbItems, className, style, }) => {
-    const [t] = useTranslation();
-    const [expanded, setExpanded] = useState(false);
-    const getReducedArray = useCallback(() => {
-        let reducedArrayElements = [];
-        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { "data-testid": `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal" }), onClick: () => setExpanded(true), size: "small", title: t("breadcrumb.expandButton"), variant: "ghost-neutral" }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }));
-        const firstBreadcrumbItem = breadcrumbItems[0];
-        if (firstBreadcrumbItem && breadcrumbItems.length > 3) {
-            const lastTwoBreadcrumbItem = breadcrumbItems.slice(-2);
-            reducedArrayElements = [firstBreadcrumbItem, collapsibleButton, ...lastTwoBreadcrumbItem];
-        }
-        return reducedArrayElements;
-    }, [breadcrumbItems, dataTestId, t]);
-    const reducedArray = getReducedArray();
-    return (jsx("div", { className: cvaBreadcrumbForMediumScreen({ className, expanded }), "data-testid": dataTestId, style: style, children: (!expanded && reducedArray.length !== 0 ? reducedArray : breadcrumbItems).map(item => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `${item.props.label}-${uuidv4()}`))) }));
-};
-
-/**
- * BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
- */
-const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems, className, style, }) => {
-    const lastBreadcrumbItem = breadcrumbItems.slice(-1);
-    return (jsx("div", { className: className, "data-testid": dataTestId, style: style, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
-};
-
-/**
- * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
- *
- * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
- */
-const BreadcrumbContainer = ({ className, "data-testid": dataTestId, breadcrumbItems, style, ref, }) => {
-    const { isLg: isLargeScreen, isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
-    const sharedContainerProps = { className, "data-testid": dataTestId, ref, style };
-    if (isLargeScreen) {
-        return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` }) }));
-    }
-    if (isMediumScreen) {
-        return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` }) }));
-    }
-    if (isSmallScreen) {
-        return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` }) }));
-    }
-    return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` }) }));
-};
-
-/**
- * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
- */
-const useBreadcrumbItemsToRender = (breadcrumbItems) => {
-    return useMemo(() => breadcrumbItems.map((item, index, array) => {
-        const isLast = index === array.length - 1;
-        if (!isLast) {
-            return (jsxs("div", { className: "flex items-center", children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
-        }
-        return (jsx(Text, { className: "text-nowrap pl-2 font-medium", size: "small", children: item.label }, index));
-    }), [breadcrumbItems]);
-};
-
-/**
- * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
- *
- * All items except the last are rendered as clickable links. The last item is rendered as plain text representing the current page.
- * The component automatically adapts to the screen size: on large screens all items are visible, on medium screens middle items collapse behind an ellipsis button, and on small screens only the current page is shown.
- *
- * ### When to use
- * Use breadcrumbs when deep navigation is available, on apps or pages where users might dive into content and could benefit from a quick way to return to higher levels. Breadcrumbs display the current screen as the final item in the list to make it clear where the user is.
- *
- * ### When not to use
- * Do not use on the first hierarchal level, such as a home page or a main page, as there is no previous step the user can get to.
- * Avoid using breadcrumbs to indicate forthcoming steps. For processes with sequential steps, use a wizard flow instead.
- *
- * @example Basic breadcrumb navigation
- * ```tsx
- * import { Breadcrumb } from "@trackunit/react-components";
- * import { useNavigate } from "@tanstack/react-router";
- *
- * const AssetDetailBreadcrumb = () => {
- *   const navigate = useNavigate();
- *
- *   return (
- *     <Breadcrumb
- *       breadcrumbItems={[
- *         { label: "Fleet", to: "/fleet" },
- *         { label: "Assets", to: "/fleet/assets" },
- *         { label: "Excavator 001", to: "/fleet/assets/123" },
- *       ]}
- *       onClickBack={() => navigate({ to: "/fleet/assets" })}
- *     />
- *   );
- * };
- * ```
- * @param {BreadcrumbProps} props - The props for the Breadcrumb component
- * @returns {ReactElement} Breadcrumb component
- */
-const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, style, ref, }) => {
-    const [t] = useTranslation();
-    const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
-    return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", title: t("breadcrumb.backButton"), variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
-};
-
 /**
  * StarButton renders a clickable star icon for toggling favorite/starred state.
  * The star appears in the primary color when starred and neutral when unstarred.
@@ -5137,7 +4905,7 @@ const cvaExternalLink = cva({
  * Use ExternalLink for any links that navigate to external resources outside the application (e.g., documentation, support pages, vendor sites).
  *
  * ### When not to use
- * Do not use ExternalLink for in-app navigation. Use `Link` from `@tanstack/react-router` for internal routes.
+ * Do not use ExternalLink for in-app navigation. Use `RouteLink` from `@trackunit/react-router-components` for in-app routes.
  *
  * @example Basic external link
  * ```tsx
@@ -13525,76 +13293,6 @@ const useSessionStorage = (options) => useWebStorage(globalThis.sessionStorage,
  */
 const useSessionStorageReducer = (options) => useWebStorageReducer(globalThis.sessionStorage, options);
 
-/**
- * Pure utilities for stamping a URL-persisted value with the identity that
- * wrote it.
- *
- * A URL (hash or search param) is shared by every account that uses the same
- * browser: it survives login redirects, history and bookmarks, and it takes
- * precedence over per-user localStorage when a page loads. Without a stamp
- * there is no way to tell "a colleague shared this link" from "the previous
- * account on this PC left its layout in the address bar" — and the second
- * case silently replaces the current user's saved state (GLU-2396).
- *
- * The stamp is a short, non-reversible fingerprint of `clientSideUserId`.
- * It is not a secret and not a security boundary; it only lets a reader
- * recognise a value written by a *different* identity on the same device.
- */
-/**
- * Wire shape of a stamped URL value: `{ o: <fingerprint>, v: <payload> }`.
- * Values written before stamping existed are bare payloads and decode as
- * unowned (see {@link unwrapUrlOwner}).
- */
-const stampedUrlValueSchema = z.object({
-    o: z.string(),
-    v: z.unknown(),
-});
-const FNV_OFFSET_BASIS = 0x811c9dc5;
-const FNV_PRIME = 0x01000193;
-/**
- * 32-bit FNV-1a of `identity`, rendered in base36 (≤ 7 chars).
- *
- * Synchronous and dependency-free so it can run inside a `useState`
- * initializer. Collisions are possible in theory but irrelevant here: a
- * collision can only make a foreign value look like the reader's own, which
- * is today's behaviour for every value.
- *
- * @param identity - The client-side user id to fingerprint.
- * @returns {string} A short stable fingerprint of `identity`.
- */
-const identityFingerprint = (identity) => {
-    let hash = FNV_OFFSET_BASIS;
-    for (let index = 0; index < identity.length; index++) {
-        hash ^= identity.charCodeAt(index);
-        hash = Math.imul(hash, FNV_PRIME) >>> 0;
-    }
-    return hash.toString(36);
-};
-/**
- * Wraps a URL payload with the fingerprint of the identity writing it.
- *
- * @param value - The payload that would otherwise be encoded into the URL.
- * @param owner - Fingerprint of the writing identity (see {@link identityFingerprint}).
- * @returns {StampedUrlValue} The payload wrapped in its ownership envelope.
- */
-const wrapUrlOwner = (value, owner) => ({ o: owner, v: value });
-/**
- * Splits a decoded URL value into its owner fingerprint and payload.
- * Bare (pre-stamping) payloads come back with `owner: undefined`.
- *
- * @param decoded - The decoded URL value, stamped or bare.
- * @returns {{ owner: string | undefined; value: unknown }} The owner fingerprint (if any) and the payload.
- */
-const unwrapUrlOwner = (decoded) => {
-    const stamped = stampedUrlValueSchema.safeParse(decoded);
-    // `z.unknown()` accepts a missing key, so `{ o: "x" }` parses without `v`.
-    // Such an object is a payload of its own, not an envelope; the `in` check
-    // is what keeps it unowned. Do not remove it as redundant.
-    return stamped.success && "v" in stamped.data
-        ? { owner: stamped.data.o, value: stamped.data.v }
-        : { owner: undefined, value: decoded };
-};
-
 /**
  * Generates a localStorage key, optionally scoped to a specific user.
  *
@@ -13609,580 +13307,6 @@ const useStorageKey = (key, userId) => {
     return useMemo(() => (userId ? `${key}-${userId}` : key), [key, userId]);
 };
 
-/**
- * Pure utilities for reading and writing single named entries inside a URL
- * fragment (the part after `#`).
- *
- * # Format contract
- *
- * The fragment body (after the leading `#`) is treated as a sequence of
- * `&`-separated tokens. A token may be:
- *  - **A named entry** — `<key>=<value>` (the first `=` separates key from
- *    value; later `=` chars are part of the value).
- *  - **Foreign content** — anything else (bare scroll anchors like
- *    `section`, hash routes, third-party data, malformed tokens). Foreign
- *    tokens are preserved byte-for-byte, in their original positions.
- *
- * # Single-key ownership
- *
- * Callers operate on **one** named key per invocation. Every token whose
- * key does not match the supplied key is foreign — the utility never
- * categorises or rewrites it. This mirrors how `useSearchParamSync`
- * treats a single named search param.
- *
- * # Value-encoding invariant
- *
- * Values passed to {@link writeHashKey} must not contain `&`, `=`, or `#`.
- * The standard producer for this codebase is `useCustomEncoding`, whose
- * base64url alphabet (`[A-Za-z0-9_-]`) satisfies the invariant by
- * construction. Keys are restricted by the existing persistence-key
- * schema (camelCase, ≤15 chars), so they are likewise safe.
- *
- * # Anchor-scroll caveat
- *
- * Browsers locate scroll targets by matching the entire fragment string
- * against element IDs. Appending a named entry to a fragment containing
- * a bare anchor (e.g. `#section` becoming `#section&userTableTp=...`)
- * therefore breaks anchor scrolling on that page. This is unavoidable
- * for any hash-backed shared state. Consumers that rely on scroll
- * anchors should not also persist state to the hash on the same route.
- */
-const TOKEN_SEPARATOR = "&";
-const KEY_VALUE_SEPARATOR = "=";
-const stripLeadingHash = (hash) => (hash.startsWith("#") ? hash.slice(1) : hash);
-const formatHash = (body) => (body.length === 0 ? "" : `#${body}`);
-/**
- * Reads the value of a single named entry from a URL fragment.
- *
- * @param hash - The fragment string, with or without the leading `#`.
- * @param key - The entry key to look up.
- * @returns {string | undefined} The raw value (everything after the first
- *   `=` in the matching token), or `undefined` when the key is absent. An
- *   entry whose token has no `=` is treated as foreign content and ignored.
- */
-const readHashKey = (hash, key) => {
-    const body = stripLeadingHash(hash);
-    if (body.length === 0) {
-        return undefined;
-    }
-    for (const token of body.split(TOKEN_SEPARATOR)) {
-        const eqIndex = token.indexOf(KEY_VALUE_SEPARATOR);
-        if (eqIndex > 0 && token.slice(0, eqIndex) === key) {
-            return token.slice(eqIndex + 1);
-        }
-    }
-    return undefined;
-};
-/**
- * Lists the key of every named entry in a URL fragment, in order of first
- * appearance. Foreign tokens (no `=`) are skipped and duplicates collapse.
- *
- * @param hash - The fragment string, with or without the leading `#`.
- * @returns {Array<string>} The distinct entry keys.
- */
-const listHashKeys = (hash) => {
-    const body = stripLeadingHash(hash);
-    if (body.length === 0) {
-        return [];
-    }
-    const keys = [];
-    for (const token of body.split(TOKEN_SEPARATOR)) {
-        const eqIndex = token.indexOf(KEY_VALUE_SEPARATOR);
-        if (eqIndex > 0) {
-            const key = token.slice(0, eqIndex);
-            if (!keys.includes(key)) {
-                keys.push(key);
-            }
-        }
-    }
-    return keys;
-};
-/**
- * Returns a new fragment string with the named entry written, replaced,
- * or removed. Foreign tokens are preserved in their original order; the
- * named entry retains its position if it already exists, and is appended
- * to the end when newly inserted. Empty tokens (e.g. produced by
- * consecutive `&`) are dropped on the way out.
- *
- * @param hash - The current fragment string, with or without the leading `#`.
- * @param key - The entry key to write.
- * @param value - The value to set, or `undefined` to remove the entry.
- * @returns {string} The new fragment string, including a leading `#` when
- *   non-empty, or an empty string when the result has no tokens left.
- */
-const writeHashKey = (hash, key, value) => {
-    const body = stripLeadingHash(hash);
-    const tokens = body.length === 0 ? [] : body.split(TOKEN_SEPARATOR);
-    const next = [];
-    let replaced = false;
-    for (const token of tokens) {
-        if (token.length === 0) {
-            continue;
-        }
-        const eqIndex = token.indexOf(KEY_VALUE_SEPARATOR);
-        if (eqIndex > 0 && token.slice(0, eqIndex) === key) {
-            if (value !== undefined && !replaced) {
-                next.push(`${key}${KEY_VALUE_SEPARATOR}${value}`);
-                replaced = true;
-            }
-            // Else: drop the token (either removing the key or dropping a
-            // duplicate occurrence after we already wrote the replacement).
-            continue;
-        }
-        next.push(token);
-    }
-    if (value !== undefined && !replaced) {
-        next.push(`${key}${KEY_VALUE_SEPARATOR}${value}`);
-    }
-    return formatHash(next.join(TOKEN_SEPARATOR));
-};
-
-const searchRecordSchema = z.record(z.string(), z.unknown());
-const primitiveSearchValueSchema = z.union([z.string(), z.number(), z.boolean()]);
-/**
- * Reads one search param from a TanStack `useSearch({ strict: false })` result.
- *
- * The registered route tree often has an empty or closed search schema, so a
- * string key cannot index that type. Parsing to a string record keeps the
- * lookup valid for every app router.
- */
-const readPrimitiveSearchParam = (search, key) => {
-    const parsedSearch = searchRecordSchema.safeParse(search);
-    if (!parsedSearch.success) {
-        return undefined;
-    }
-    const parsedValue = primitiveSearchValueSchema.safeParse(parsedSearch.data[key]);
-    if (!parsedValue.success) {
-        return undefined;
-    }
-    return String(parsedValue.data);
-};
-
-/**
- * Maximum full URL length after adding one persisted search param before the
- * URL write is skipped (localStorage still persists the full state).
- *
- * Sized to stay safely below the AWS WAF managed-rule default
- * `SizeRestrictions_QUERYSTRING` cap of 5000 bytes for the entire
- * host + path + query + hash string.
- */
-const MAX_URL_LENGTH = 5000;
-/**
- * Maximum length of the URL fragment after adding one persisted entry.
- * Oversized new entries are skipped; oversized replacements remove the stale
- * entry so localStorage remains authoritative.
- *
- * The fragment is never sent to the server, so the WAF cap above does not
- * apply. 64 KB stays well below typical browser URL limits (Chromium ≳ 100 KB,
- * Firefox ≳ 64 KB on the address bar) while leaving generous headroom for any
- * realistic table state.
- */
-const MAX_HASH_LENGTH = 64 * 1024;
-/**
- * Syncs an encoded string value with a single named entry in the URL — either
- * a search param or an entry inside the hash fragment — via Tanstack Router.
- *
- * Writes go through the application router so other search params and
- * foreign fragment content are preserved. Each slot has a size guard
- * ({@link MAX_URL_LENGTH} for search, {@link MAX_HASH_LENGTH} for hash); an
- * oversized value is dropped from the URL and localStorage stays
- * authoritative. External changes to the entry (browser back/forward, a
- * pasted link, a foreign router push) fire `onExternalChange`.
- *
- * Writes are dispatched via a pending-write queue rather than calling
- * `navigate` directly. Tanstack Router's `router.state.status === "pending"`
- * is common during the first paint of a route (loaders, suspense), and an
- * implementation that simply returned in that case lost the write outright.
- * `updateSearchParam` stores the latest attempted write and schedules an rAF
- * flush; the flush only navigates when the router is idle, and an effect
- * retries whenever the router settles. A queued write is dropped on unmount so
- * it cannot drain onto the next route.
- *
- * @param options - Configuration for the URL entry sync.
- * @param options.key - The search param name or fragment entry name.
- * @param options.location - `"search"` or `"hash"`.
- * @param options.enabled - Set to `false` to disable all URL interaction (default `true`).
- * @param options.onExternalChange - Called when the entry changes externally.
- * @param options.replace - `true` to always use `replaceState`; `false` to always push.
- *   Default: replace when the entry is being added, push when it already has a value.
- */
-const useUrlParamSync = ({ key, location: urlLocation, enabled = true, onExternalChange, replace: replaceOption, }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const router = useRouter();
-    const search = useSearch({ strict: false, shouldThrow: false });
-    const isHash = urlLocation === "hash";
-    const lastWrittenRef = useRef(undefined);
-    const pendingWriteRef = useRef(null);
-    const onExternalChangeRef = useRef(onExternalChange);
-    useEffect(() => {
-        onExternalChangeRef.current = onExternalChange;
-    }, [onExternalChange]);
-    const currentValue = useMemo(() => {
-        if (!enabled) {
-            return undefined;
-        }
-        return isHash ? readHashKey(location.hash, key) : readPrimitiveSearchParam(search, key);
-    }, [enabled, isHash, location.hash, search, key]);
-    useEffect(() => {
-        if (!enabled || currentValue === undefined) {
-            return;
-        }
-        if (currentValue === lastWrittenRef.current || lastWrittenRef.current === undefined) {
-            return;
-        }
-        // A caller may have primed `lastWrittenRef` via `updateSearchParam` while
-        // the URL still carries the previous value (queued rAF / router pending).
-        // Treating that stale URL as an external change would reload state from
-        // persistence before the write lands.
-        if (pendingWriteRef.current !== null) {
-            return;
-        }
-        requestAnimationFrame(() => {
-            onExternalChangeRef.current?.();
-        });
-    }, [currentValue, enabled]);
-    // Read through refs so the write path does not change identity on every
-    // navigation; it only needs the location and current value at the moment it
-    // flushes, which may be an animation frame after it was queued.
-    const locationRef = useRef(location);
-    const currentValueRef = useRef(currentValue);
-    useEffect(() => {
-        locationRef.current = location;
-        currentValueRef.current = currentValue;
-    }, [location, currentValue]);
-    const getUrlLengthWithSearchParam = useCallback((paramValue, params) => {
-        const { href, searchStr, hash } = locationRef.current;
-        const otherParamsLength = objectKeys(params)
-            .filter(k => k !== key)
-            .reduce((totalLength, k) => {
-            const kLen = encodeURIComponent(String(k)).length;
-            const v = params[k];
-            const vLen = v !== null && v !== undefined ? encodeURIComponent(String(v)).length : 0;
-            return totalLength + kLen + vLen + (totalLength > 0 ? 2 : 1);
-        }, 0);
-        const urlBase = href.length - (searchStr.length || 0) + (hash.length || 0);
-        return urlBase + otherParamsLength + 1 + key.length + 1 + paramValue.length;
-    }, [key]);
-    const flushPendingWrite = useCallback(() => {
-        const pending = pendingWriteRef.current;
-        if (pending === null) {
-            return;
-        }
-        if (router.state.status === "pending") {
-            // Keep the write queued; the status-watcher effect retries once idle.
-            return;
-        }
-        pendingWriteRef.current = null;
-        const { encodedValue } = pending;
-        const { hash } = locationRef.current;
-        const valueInUrl = currentValueRef.current;
-        const shouldReplace = replaceOption ?? !Boolean(valueInUrl);
-        if (!isHash) {
-            void navigate({
-                to: ".",
-                search: (prev) => getUrlLengthWithSearchParam(encodedValue ?? "", prev) <= MAX_URL_LENGTH
-                    ? { ...prev, [key]: encodedValue }
-                    : { ...prev, [key]: undefined },
-                hash,
-                replace: shouldReplace,
-            });
-            return;
-        }
-        let nextHash = writeHashKey(hash, key, encodedValue);
-        let removedOversizedValue = false;
-        if (nextHash.length > MAX_HASH_LENGTH) {
-            if (valueInUrl === undefined) {
-                return;
-            }
-            nextHash = writeHashKey(hash, key, undefined);
-            removedOversizedValue = true;
-        }
-        void navigate({
-            to: ".",
-            // Returning the same `prev` reference leaves the search params
-            // unchanged; `search` must still be passed for the router types.
-            search: (prev) => prev,
-            // The router adds the `#` itself; forwarding it would double it.
-            hash: nextHash.startsWith("#") ? nextHash.slice(1) : nextHash,
-            replace: removedOversizedValue ? true : shouldReplace,
-        });
-    }, [router.state.status, replaceOption, isHash, navigate, getUrlLengthWithSearchParam, key]);
-    useEffect(() => {
-        if (router.state.status === "pending" || pendingWriteRef.current === null) {
-            return;
-        }
-        flushPendingWrite();
-    }, [router.state.status, flushPendingWrite]);
-    useEffect(() => () => {
-        pendingWriteRef.current = null;
-    }, []);
-    const updateSearchParam = useCallback((encodedValue) => {
-        if (!enabled) {
-            return;
-        }
-        // Dedupe against the last committed write or the value already queued;
-        // both represent the caller's intent.
-        const inFlightOrLastWritten = pendingWriteRef.current?.encodedValue ?? lastWrittenRef.current;
-        if (encodedValue !== undefined && encodedValue === inFlightOrLastWritten) {
-            return;
-        }
-        // Prime here (not in the flush) so the external-change detector treats
-        // this value as the caller's state even when the flush is a no-op or
-        // stays queued during a pending router phase.
-        lastWrittenRef.current = encodedValue;
-        if (currentValueRef.current === encodedValue) {
-            return;
-        }
-        pendingWriteRef.current = { encodedValue };
-        requestAnimationFrame(() => {
-            flushPendingWrite();
-        });
-    }, [enabled, flushPendingWrite]);
-    return useMemo(() => ({ searchValue: currentValue, updateSearchParam }), [currentValue, updateSearchParam]);
-};
-
-/**
- * Raw localStorage access, kept in one place so this file's exemption from the
- * no-direct-storage-access rule is centralised rather than repeated at each call site.
- *
- * TODO: migrate to the useLocalStorage hook — this file was exempted when the
- * no-direct-storage-access rule was introduced.
- */
-/* eslint-disable no-restricted-globals */
-const rawLocalStorage = {
-    read: (key) => localStorage.getItem(key),
-    write: (key, value) => localStorage.setItem(key, value),
-    remove: (key) => localStorage.removeItem(key),
-};
-/**
- * Generic persistence hook that loads state from a URL slot (search param
- * or hash fragment, depending on `urlLocation`) with localStorage fallback,
- * and writes changes to both.
- *
- * On mount the hook resolves the initial state as follows:
- *  - If the URL slot holds a value, decode it and pass through `validate`.
- *  - If localStorage is enabled, read and validate its value.
- *  - When `mergeWithStorageOnRead` is `false` (default): URL state wins
- *    entirely when present, otherwise fall back to localStorage.
- *  - When `mergeWithStorageOnRead` is `true`: shallow-merge URL fields over
- *    localStorage so fields stripped by `toUrlValue` survive via storage.
- *
- * A value that comes only from localStorage is never written to the URL on
- * load. Copying it left a layout in history, bookmarks, and login redirects,
- * which then replayed an older layout over the saved one (GLU-2396). The URL
- * is written when the consumer persists a change.
- *
- * `persistState` writes to localStorage (`storageSerializer`) and to the URL
- * (via `toUrlValue` + encoding).
- * Each slot skips a value equal to its last write. The URL side compares what
- * would land in the URL (the `toUrlValue` projection and the identity stamp),
- * starting from the projection of the hydrated state and the stamp the URL
- * carries: echoing `initialState`, or changing only a field the projection
- * strips, writes no URL entry, while an equal state persisted after the
- * identity resolves rewrites the URL with its stamp. The storage side starts
- * from what localStorage held, so a consumer that persists `initialState`
- * after opening a link saves that link's state for the account that opened
- * it, and a reload of the account's own link writes nothing.
- * `persistToStorage` and `persistToUrl` are the same two halves exposed
- * separately for consumers that schedule them differently; passing `undefined`
- * removes the entry rather than writing an empty value.
- *
- * The snapshot is re-read when the storage key or the storage/merge options
- * change, in the same render, so a write in that commit already sees the
- * state for the new key.
- *
- * @param options - Configuration for the persisted state.
- * @param options.key - Unique identifier used for both the URL slot and the localStorage key.
- * @param options.validate - Called with the decoded/parsed value; must return `TState` or `undefined`.
- * @param options.toUrlValue - Transform applied before URL encoding (default: encode state as-is).
- * @param options.fromUrlValue - Transform applied after URL decoding, before validation (default: identity).
- * @param options.localStorageEnabled - When `false` localStorage is neither read nor written (default `true`).
- * @param options.replace - Forwarded to the underlying URL sync hook.
- * @param options.clientSideUserId - The user ID to use for the localStorage key.
- * @param options.mergeWithStorageOnRead - Merge URL state on top of localStorage
- *   state on read (URL wins on shared keys). Use when `toUrlValue` deliberately
- *   omits fields so they still survive via localStorage. Default `false`.
- * @param options.urlLocation - Which URL slot backs the value (`"search"` or `"hash"`). Default `"search"`.
- * @param options.stampUrlWithIdentity - Stamp URL writes with the current identity so the login
- *   redirect can drop entries left by another account on this browser. Default `false`.
- */
-const usePersistedState = ({ key, validate, toUrlValue, fromUrlValue, localStorageEnabled = true, replace, clientSideUserId, mergeWithStorageOnRead = false, urlLocation = "search", stampUrlWithIdentity = false, }) => {
-    const { encode, decode } = useCustomEncoding();
-    // Fingerprint of the identity this hook writes URL values for. `undefined`
-    // while the identity is unresolved (or when stamping is off): writes are
-    // then unstamped.
-    const currentUrlOwner = useMemo(() => (stampUrlWithIdentity && clientSideUserId !== undefined ? identityFingerprint(clientSideUserId) : undefined), [stampUrlWithIdentity, clientSideUserId]);
-    const { searchValue: urlValue, updateSearchParam: updateUrlValue } = useUrlParamSync({
-        key,
-        location: urlLocation,
-        replace,
-    });
-    const storageKey = useStorageKey(key, clientSideUserId);
-    // `toUrlValue` is read through a ref so the write callbacks stay stable
-    // when a consumer passes an inline function.
-    const toUrlValueRef = useRef(toUrlValue);
-    useEffect(() => {
-        toUrlValueRef.current = toUrlValue;
-    }, [toUrlValue]);
-    const readStoredState = useCallback((validateState) => {
-        if (!localStorageEnabled) {
-            return undefined;
-        }
-        try {
-            const raw = rawLocalStorage.read(storageKey);
-            if (!raw) {
-                return undefined;
-            }
-            return validateState(storageSerializer.deserialize(raw));
-        }
-        catch {
-            return undefined;
-        }
-    }, [localStorageEnabled, storageKey]);
-    const readPersistedState = useCallback(({ valueFromUrl, validateState, transformFromUrlValue, }) => {
-        let urlState;
-        let urlStamp;
-        if (valueFromUrl) {
-            try {
-                // The ownership stamp decides nothing on read (the login redirect
-                // does that, see `useStripForeignIdentityHash`); it is kept only to
-                // seed the URL dedupe with what the URL is currently stamped with.
-                const { value, owner } = unwrapUrlOwner(decode(valueFromUrl));
-                urlState = validateState(transformFromUrlValue ? transformFromUrlValue(value) : value);
-                urlStamp = urlState === undefined ? undefined : { owner };
-            }
-            catch {
-                urlState = undefined;
-            }
-        }
-        // Storage is read even when the URL wins outright: it seeds the storage
-        // dedupe, so persisting the hydrated state writes only when the URL
-        // changed something.
-        const stored = readStoredState(validateState);
-        let hydrated;
-        if (urlState === undefined) {
-            hydrated = stored;
-        }
-        else if (mergeWithStorageOnRead && stored !== undefined) {
-            // URL fields take precedence; storage fills in whatever the URL
-            // omits (e.g. fields stripped by `toUrlValue`).
-            hydrated = { ...stored, ...urlState };
-        }
-        else {
-            hydrated = urlState;
-        }
-        return { initialState: hydrated, storedState: stored, urlValue: urlStamp };
-    }, [decode, mergeWithStorageOnRead, readStoredState]);
-    // The shareable projection of `state`: what a URL write carries before
-    // encoding. The URL dedupe compares this, not the whole state, so a change
-    // confined to a field `toUrlValue` strips is not a URL change.
-    const projectForUrl = useCallback((state) => (toUrlValueRef.current ? toUrlValueRef.current(state) : state), []);
-    // Every URL write goes through here so the ownership stamp is applied uniformly.
-    const encodeUrlWrite = useCallback(({ projected, owner }) => encode(owner === undefined ? projected : wrapUrlOwner(projected, owner)), [encode]);
-    // `readPersistedState` changes identity exactly when an input that changes
-    // what a read returns does (storage key, storage/merge options), so the
-    // snapshot is re-read then and only then — synchronously, in the render
-    // where the input changed, by deriving state from the changed input. A URL
-    // change after mount or an inline `validate` deliberately does not
-    // re-hydrate `initialState`: `useUrlParamSync` owns URL changes.
-    const readSnapshot = () => ({
-        readWith: readPersistedState,
-        ...readPersistedState({ valueFromUrl: urlValue, validateState: validate, transformFromUrlValue: fromUrlValue }),
-    });
-    const [snapshot, setSnapshot] = useState(readSnapshot);
-    if (snapshot.readWith !== readPersistedState) {
-        setSnapshot(readSnapshot());
-    }
-    const { initialState, storedState } = snapshot;
-    // Last value written to each slot, for deduping. Two refs, not one, because
-    // a consumer may schedule the two writes differently (storage at once, URL
-    // debounced). Both are re-seeded whenever the snapshot is re-read so the
-    // first write to a newly scoped key is never skipped.
-    //
-    // The storage side starts as what storage held, so persisting the hydrated
-    // state after opening a link writes only when the URL changed something.
-    //
-    // The URL side holds what a write would put in the URL: the shareable
-    // projection plus the owner stamp. It starts as the projection of the
-    // hydrated value, so a consumer that echoes `initialState` on mount, or
-    // changes only a field the projection strips, writes nothing: a layout read
-    // from storage must not grow a URL entry (GLU-2396). Its owner starts as the
-    // stamp the URL carries (or the current owner when the URL is empty), so an
-    // equal state persisted after the identity resolves still rewrites the URL
-    // with its stamp.
-    const urlOwnerSeed = snapshot.urlValue ? snapshot.urlValue.owner : currentUrlOwner;
-    const seedUrlWrite = useCallback((project) => initialState === undefined ? undefined : { projected: project(initialState), owner: urlOwnerSeed }, [initialState, urlOwnerSeed]);
-    const lastStoredRef = useRef(storedState);
-    // The first seed is computed during render, so it projects with the
-    // `toUrlValue` prop rather than reading `toUrlValueRef` (refs are not read
-    // in render); the projection is cheap, and later seeds come from the effect.
-    const lastUrlRef = useRef(seedUrlWrite(state => (toUrlValue ? toUrlValue(state) : state)));
-    useEffect(() => {
-        lastStoredRef.current = storedState;
-        lastUrlRef.current = seedUrlWrite(projectForUrl);
-    }, [seedUrlWrite, projectForUrl, storedState]);
-    const persistToStorage = useCallback((state) => {
-        if (!localStorageEnabled) {
-            return;
-        }
-        if (state === undefined) {
-            lastStoredRef.current = undefined;
-            rawLocalStorage.remove(storageKey);
-            return;
-        }
-        if (dequal(lastStoredRef.current, state)) {
-            return;
-        }
-        try {
-            rawLocalStorage.write(storageKey, storageSerializer.serialize(state));
-            lastStoredRef.current = state;
-        }
-        catch {
-            // Quota or a disabled store: the next write retries; the URL is unaffected.
-        }
-    }, [localStorageEnabled, storageKey]);
-    const persistToUrl = useCallback((state) => {
-        if (state === undefined) {
-            lastUrlRef.current = undefined;
-            updateUrlValue(undefined);
-            return;
-        }
-        const write = { projected: projectForUrl(state), owner: currentUrlOwner };
-        const last = lastUrlRef.current;
-        // Same projection: write only to add or change a stamp. An unresolved
-        // identity never rewrites a stamped URL just to strip the stamp; it is
-        // re-stamped once the identity resolves.
-        if (last !== undefined &&
-            dequal(last.projected, write.projected) &&
-            (last.owner === write.owner || write.owner === undefined)) {
-            return;
-        }
-        lastUrlRef.current = write;
-        updateUrlValue(encodeUrlWrite(write));
-    }, [currentUrlOwner, encodeUrlWrite, projectForUrl, updateUrlValue]);
-    const persistState = useCallback((state) => {
-        persistToStorage(state);
-        persistToUrl(state);
-    }, [persistToStorage, persistToUrl]);
-    return useMemo(() => ({ initialState, persistState, persistToStorage, persistToUrl }), [initialState, persistState, persistToStorage, persistToUrl]);
-};
-
-/**
- * Syncs an encoded string value with a URL search parameter via Tanstack Router.
- *
- * Thin wrapper over {@link useUrlParamSync} with `location: "search"`; see it
- * for the write queue, the size guard (`MAX_URL_LENGTH`), and external-change
- * detection.
- *
- * @param options - Configuration for the search param sync.
- * @param options.key - The URL search parameter name.
- * @param options.enabled - Set to `false` to disable all URL interaction (default `true`).
- * @param options.onExternalChange - Called when the param changes externally.
- * @param options.replace - `true` to always use `replaceState`.
- */
-const useSearchParamSync = (options) => useUrlParamSync({ ...options, location: "search" });
-
 /**
  * Enumerates localStorage keys. Kept local so this file's exemption from the
  * no-direct-storage-access rule is centralised, as in `usePersistedState`.
@@ -14422,6 +13546,40 @@ const useClickOutside = (el, options) => {
     });
 };
 
+/**
+ * Maps size keys to their corresponding state property names.
+ */
+const breakpointPropsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for sizes, with all values set to false.
+ */
+const defaultBreakpointState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * Creates a breakpoint state object based on a width value
+ */
+const createBreakpointState = ({ width }) => {
+    return objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
+        ...acc,
+        [breakpointPropsMap[size]]: width >= minWidth,
+    }), { ...defaultBreakpointState });
+};
+
 /**
  * A custom React hook that provides real-time information about a container's size.
  *
@@ -14583,77 +13741,6 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries, }
     }), [startTimeouts, stopTimeouts, isRunning]);
 };
 
-const DEFAULT_PARAM_NAME = "c";
-const DEFAULT_DEBOUNCE_MS = 300;
-/**
- * Reads a cursor from the URL search params on mount and provides a debounced
- * updater for writing it back. Uses `replace: true` to avoid polluting browser
- * history with every scroll position change.
- *
- * Wire `initialCursor` into `usePaginationQuery` and `updateCursor` into
- * `useBidirectionalScroll`'s `onTopItemChange` callback (mapping index to cursor).
- *
- * A pending write is dropped whenever a path-changing navigation starts or the
- * location has moved on: the write targets `to: "."`, so landing it after the
- * user opened a row would replace their destination with the list they came
- * from.
- */
-const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT_DEBOUNCE_MS, } = {}) => {
-    const router = useRouter();
-    const navigate = useNavigate();
-    // Read the cursor off the router rather than `useSearch`, which would
-    // subscribe the table to its own writes and re-render every row mid-scroll.
-    const [initialCursor] = useState(() => {
-        const entry = Object.entries(router.latestLocation.search).find(([key]) => key === paramName);
-        return typeof entry?.[1] === "string" ? entry[1] : undefined;
-    });
-    const timerRef = useRef(undefined);
-    const cancelPendingUpdate = useCallback(() => {
-        if (timerRef.current !== undefined) {
-            clearTimeout(timerRef.current);
-            timerRef.current = undefined;
-        }
-    }, []);
-    const paramNameRef = useRef(paramName);
-    useEffect(() => {
-        paramNameRef.current = paramName;
-    }, [paramName]);
-    const updateCursor = useCallback((cursor) => {
-        cancelPendingUpdate();
-        const scheduledAtPathname = router.latestLocation.pathname;
-        timerRef.current = setTimeout(() => {
-            timerRef.current = undefined;
-            if (router.latestLocation.pathname !== scheduledAtPathname) {
-                return;
-            }
-            void navigate({
-                to: ".",
-                search: (prev) => ({
-                    ...prev,
-                    [paramNameRef.current]: cursor,
-                }),
-                // Without this the router drops the fragment, and with it the table layout.
-                hash: true,
-                replace: true,
-            });
-        }, debounceMs);
-    }, [cancelPendingUpdate, debounceMs, navigate, router]);
-    // Only path-changing navigations invalidate a pending write. Same-pathname
-    // navigations (filter bar, table persistence, map viewBox) share this URL and
-    // their writes must not cancel ours. Cancelling here rather than relying on
-    // the pathname check alone also covers navigating away and back within the
-    // debounce window, which would otherwise land a stale cursor on a fresh list.
-    useEffect(() => router.subscribe("onBeforeNavigate", event => {
-        if (event.pathChanged) {
-            cancelPendingUpdate();
-        }
-    }), [cancelPendingUpdate, router]);
-    useEffect(() => {
-        return cancelPendingUpdate;
-    }, [cancelPendingUpdate]);
-    return useMemo(() => ({ initialCursor, updateCursor }), [initialCursor, updateCursor]);
-};
-
 // Copied from https://github.com/rexxars/use-device-pixel-ratio
 /**
  * Get the device pixel ratio, potentially rounded and capped.
@@ -15468,6 +14555,69 @@ function useTextSearch(items, props) {
     return useMemo(() => [result, searchText, setSearchText], [result, searchText, setSearchText]);
 }
 
+const canUseMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const getViewportBreakpointState = () => {
+    if (!canUseMatchMedia())
+        return { ...defaultBreakpointState };
+    return objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
+        ...acc,
+        [breakpointPropsMap[size]]: window.matchMedia(`(min-width: ${minWidth}px)`).matches,
+    }), { ...defaultBreakpointState });
+};
+/**
+ * Returns real-time boolean flags for each design-token breakpoint based on viewport width.
+ *
+ * **When to use:**
+ * - Use `useViewportBreakpoints` when you need to respond to the **full viewport width**
+ *   — for example, toggling a mobile navigation drawer or switching a global layout shell.
+ * - **Prefer `useContainerBreakpoints`** for component-level responsiveness, as it
+ *   responds to the parent container's width and works correctly when a component appears
+ *   in different layout contexts (sidebar, main content, widget).
+ * - Pass `{ skip: true }` when you only need the initial value and don't want ongoing
+ *   `matchMedia` listeners.
+ *
+ * @param {object} [options] - Configuration options
+ * @param {boolean} [options.skip] - Whether to skip observing for viewport changes (default: false)
+ * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * const MyComponent = () => {
+ *   const viewportSize = useViewportBreakpoints();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   }
+ *
+ *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
+ * }
+ */
+const useViewportBreakpoints = (options = {}) => {
+    const { skip = false } = options;
+    const [viewportSize, setViewportSize] = useState(getViewportBreakpointState);
+    const updateViewportSize = useCallback(() => {
+        setViewportSize(getViewportBreakpointState());
+    }, []);
+    const updateViewportSizeRef = useRef(updateViewportSize);
+    useEffect(() => {
+        updateViewportSizeRef.current = updateViewportSize;
+    }, [updateViewportSize]);
+    useEffect(() => {
+        if (skip || !canUseMatchMedia()) {
+            return;
+        }
+        updateViewportSizeRef.current();
+        const mediaQueryLists = objectEntries(themeScreenSizeAsNumber).map(([_, minWidth]) => window.matchMedia(`(min-width: ${minWidth}px)`));
+        mediaQueryLists.forEach(mql => {
+            mql.addEventListener("change", updateViewportSizeRef.current);
+        });
+        return () => {
+            mediaQueryLists.forEach(mql => {
+                mql.removeEventListener("change", updateViewportSizeRef.current);
+            });
+        };
+    }, [skip]);
+    return viewportSize;
+};
+
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events
@@ -15510,4 +14660,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };