@tanstack/query-devtools 5.0.0-alpha.34 → 5.0.0-alpha.42

package/build/source/Devtools.jsx

@@ -0,0 +1,1484 @@
+import { createEffect, createMemo, createSignal, on, onCleanup, onMount, For, Show, } from 'solid-js';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { css, cx } from '@emotion/css';
+import { tokens } from './theme';
+import { getQueryStatusLabel, getQueryStatusColor, displayValue, getQueryStatusColorByLabel, sortFns, convertRemToPixels, } from './utils';
+import { ArrowDown, ArrowUp, ChevronDown, Offline, Search, Settings, TanstackLogo, Wifi, } from './icons';
+import Explorer from './Explorer';
+import { QueryDevtoolsContext, useQueryDevtoolsContext } from './Context';
+import { TransitionGroup } from 'solid-transition-group';
+import { loadFonts } from './fonts';
+import { Key } from '@solid-primitives/keyed';
+import { createLocalStorage } from '@solid-primitives/storage';
+import { createResizeObserver } from '@solid-primitives/resize-observer';
+const firstBreakpoint = 1024;
+const secondBreakpoint = 796;
+const thirdBreakpoint = 700;
+const BUTTON_POSITION = 'bottom-right';
+const POSITION = 'bottom';
+const INITIAL_IS_OPEN = false;
+const DEFAULT_HEIGHT = 500;
+const DEFAULT_WIDTH = 500;
+const DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
+const DEFAULT_SORT_ORDER = 1;
+const [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
+const [panelWidth, setPanelWidth] = createSignal(0);
+export const DevtoolsComponent = (props) => {
+    return (<QueryDevtoolsContext.Provider value={props}>
+      <Devtools />
+    </QueryDevtoolsContext.Provider>);
+};
+export const Devtools = () => {
+    loadFonts();
+    const styles = getStyles();
+    const [localStore, setLocalStore] = createLocalStorage({
+        prefix: 'TanstackQueryDevtools',
+    });
+    const buttonPosition = createMemo(() => {
+        return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
+    });
+    const isOpen = createMemo(() => {
+        return localStore.open === 'true'
+            ? true
+            : localStore.open === 'false'
+                ? false
+                : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
+    });
+    const position = createMemo(() => {
+        return localStore.position || useQueryDevtoolsContext().position || POSITION;
+    });
+    return (<div 
+    // styles for animating the panel in and out
+    class={css `
+        & .TSQD-panel-exit-active,
+        & .TSQD-panel-enter-active {
+          transition: opacity 0.3s, transform 0.3s;
+        }
+
+        & .TSQD-panel-exit-to,
+        & .TSQD-panel-enter {
+          ${position() === 'top'
+            ? `transform: translateY(-${Number(localStore.height || DEFAULT_HEIGHT)}px);`
+            : position() === 'left'
+                ? `transform: translateX(-${Number(localStore.width || DEFAULT_WIDTH)}px);`
+                : position() === 'right'
+                    ? `transform: translateX(${Number(localStore.width || DEFAULT_WIDTH)}px);`
+                    : `transform: translateY(${Number(localStore.height || DEFAULT_HEIGHT)}px);`}
+        }
+
+        & .TSQD-button-exit-active,
+        & .TSQD-button-enter-active {
+          transition: opacity 0.3s, transform 0.3s;
+        }
+
+        & .TSQD-button-exit-to,
+        & .TSQD-button-enter {
+          transform: ${buttonPosition() === 'top-left'
+            ? `translateX(-72px);`
+            : buttonPosition() === 'top-right'
+                ? `translateX(72px);`
+                : `translateY(72px);`};
+        }
+      `}>
+      <TransitionGroup name="TSQD-panel">
+        <Show when={isOpen()}>
+          <DevtoolsPanel localStore={localStore} setLocalStore={setLocalStore}/>
+        </Show>
+      </TransitionGroup>
+      <TransitionGroup name="TSQD-button">
+        <Show when={!isOpen()}>
+          <div class={cx(styles.devtoolsBtn, styles[`devtoolsBtn-position-${buttonPosition()}`])}>
+            <div aria-hidden="true">
+              <TanstackLogo />
+            </div>
+            <button aria-label="Open Tanstack query devtools" onClick={() => setLocalStore('open', 'true')}>
+              <TanstackLogo />
+            </button>
+          </div>
+        </Show>
+      </TransitionGroup>
+    </div>);
+};
+export const DevtoolsPanel = (props) => {
+    const styles = getStyles();
+    const [isResizing, setIsResizing] = createSignal(false);
+    const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
+    const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
+    const [offline, setOffline] = createSignal(false);
+    const [settingsOpen, setSettingsOpen] = createSignal(false);
+    const position = createMemo(() => (props.localStore.position ||
+        useQueryDevtoolsContext().position ||
+        POSITION));
+    const sortFn = createMemo(() => sortFns[sort()]);
+    const onlineManager = createMemo(() => useQueryDevtoolsContext().onlineManager);
+    const cache = createMemo(() => {
+        return useQueryDevtoolsContext().client.getQueryCache();
+    });
+    const queryCount = createSubscribeToQueryCacheBatcher((queryCache) => {
+        return queryCache().getAll().length;
+    }, false);
+    const queries = createMemo(on(() => [queryCount(), props.localStore.filter, sort(), sortOrder()], () => {
+        const curr = cache().getAll();
+        const filtered = props.localStore.filter
+            ? curr.filter((item) => rankItem(item.queryHash, props.localStore.filter || '').passed)
+            : [...curr];
+        const sorted = sortFn()
+            ? filtered.sort((a, b) => sortFn()(a, b) * sortOrder())
+            : filtered;
+        return sorted;
+    }));
+    const handleDragStart = (event) => {
+        const panelElement = event.currentTarget.parentElement;
+        if (!panelElement)
+            return;
+        setIsResizing(true);
+        const { height, width } = panelElement.getBoundingClientRect();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        let newSize = 0;
+        const minHeight = convertRemToPixels(3.5);
+        const minWidth = convertRemToPixels(12);
+        const runDrag = (moveEvent) => {
+            moveEvent.preventDefault();
+            if (position() === 'left' || position() === 'right') {
+                const valToAdd = position() === 'right'
+                    ? startX - moveEvent.clientX
+                    : moveEvent.clientX - startX;
+                newSize = Math.round(width + valToAdd);
+                if (newSize < minWidth) {
+                    newSize = minWidth;
+                }
+                props.setLocalStore('width', String(Math.round(newSize)));
+                const newWidth = panelElement.getBoundingClientRect().width;
+                // If the panel size didn't decrease, this means we have reached the minimum width
+                // of the panel so we restore the original width in local storage
+                // Restoring the width helps in smooth open/close transitions
+                if (Number(props.localStore.width) < newWidth) {
+                    props.setLocalStore('width', String(newWidth));
+                }
+            }
+            else {
+                const valToAdd = position() === 'bottom'
+                    ? startY - moveEvent.clientY
+                    : moveEvent.clientY - startY;
+                newSize = Math.round(height + valToAdd);
+                // If the panel size is less than the minimum height,
+                // we set the size to the minimum height
+                if (newSize < minHeight) {
+                    newSize = minHeight;
+                    setSelectedQueryHash(null);
+                }
+                props.setLocalStore('height', String(Math.round(newSize)));
+            }
+        };
+        const unsub = () => {
+            if (isResizing()) {
+                setIsResizing(false);
+            }
+            document.removeEventListener('mousemove', runDrag, false);
+            document.removeEventListener('mouseUp', unsub, false);
+        };
+        document.addEventListener('mousemove', runDrag, false);
+        document.addEventListener('mouseup', unsub, false);
+    };
+    setupQueryCacheSubscription();
+    let queriesContainerRef;
+    let panelRef;
+    onMount(() => {
+        createResizeObserver(panelRef, ({ width }, el) => {
+            if (el === panelRef) {
+                setPanelWidth(width);
+            }
+        });
+    });
+    const setDevtoolsPosition = (pos) => {
+        props.setLocalStore('position', pos);
+        setSettingsOpen(false);
+    };
+    return (<aside 
+    // Some context for styles here
+    // background-color - Changes to a lighter color create a harder contrast
+    // between the queries and query detail panel
+    // -
+    // min-width - When the panel is in the left or right position, the panel
+    // width is set to min-content to allow the panel to shrink to the lowest possible width
+    class={`${styles.panel} ${styles[`panel-position-${position()}`]} ${css `
+        flex-direction: ${panelWidth() < secondBreakpoint ? 'column' : 'row'};
+        background-color: ${panelWidth() < secondBreakpoint
+            ? tokens.colors.gray[600]
+            : tokens.colors.darkGray[900]};
+        ${panelWidth() < thirdBreakpoint &&
+            (position() === 'right' || position() === 'left')
+            ? `
+            min-width: min-content;
+          `
+            : ''}
+      `}`} style={{
+            height: position() === 'bottom' || position() === 'top'
+                ? `${props.localStore.height || DEFAULT_HEIGHT}px`
+                : 'auto',
+            width: position() === 'right' || position() === 'left'
+                ? `${props.localStore.width || DEFAULT_WIDTH}px`
+                : 'auto',
+        }} ref={panelRef} aria-label="Tanstack query devtools">
+      <div class={cx(styles.dragHandle, styles[`dragHandle-position-${position()}`])} onMouseDown={handleDragStart}></div>
+      <button aria-label="Close tanstack query devtools" class={cx(styles.closeBtn, styles[`closeBtn-position-${position()}`])} onClick={() => props.setLocalStore('open', 'false')}>
+        <ChevronDown />
+      </button>
+      <div ref={queriesContainerRef} 
+    // When the panels are stacked we use the height style
+    // to divide the panels into two equal parts
+    class={`${styles.queriesContainer} ${css `
+          ${panelWidth() < secondBreakpoint && selectedQueryHash()
+            ? `
+          height: 50%;
+          max-height: 50%;
+          `
+            : ''}
+        `}`}>
+        <div class={cx(styles.row)}>
+          <button class={styles.logo} onClick={() => props.setLocalStore('open', 'false')} aria-label="Close Tanstack query devtools">
+            <span class={styles.tanstackLogo}>TANSTACK</span>
+            <span class={styles.queryFlavorLogo}>
+              {useQueryDevtoolsContext().queryFlavor} v
+              {useQueryDevtoolsContext().version}
+            </span>
+          </button>
+          <QueryStatusCount />
+        </div>
+        <div class={cx(styles.row, css `
+              gap: ${tokens.size[2.5]};
+            `)}>
+          <div class={styles.filtersContainer}>
+            <div class={styles.filterInput}>
+              <Search />
+              <input aria-label="Filter queries by query key" type="text" placeholder="Filter" onInput={(e) => props.setLocalStore('filter', e.currentTarget.value)} value={props.localStore.filter || ''}/>
+            </div>
+            <div class={styles.filterSelect}>
+              <select value={sort()} onChange={(e) => props.setLocalStore('sort', e.currentTarget.value)}>
+                {Object.keys(sortFns).map((key) => (<option value={key}>Sort by {key}</option>))}
+              </select>
+              <ChevronDown />
+            </div>
+            <button onClick={() => {
+            props.setLocalStore('sortOrder', String(sortOrder() * -1));
+        }} aria-label={`Sort order ${sortOrder() === -1 ? 'descending' : 'ascending'}`} aria-pressed={sortOrder() === -1}>
+              <Show when={sortOrder() === 1}>
+                <span>Asc</span>
+                <ArrowUp />
+              </Show>
+              <Show when={sortOrder() === -1}>
+                <span>Desc</span>
+                <ArrowDown />
+              </Show>
+            </button>
+          </div>
+
+          <div class={styles.actionsContainer}>
+            <button onClick={() => {
+            if (offline()) {
+                onlineManager().setOnline(undefined);
+                setOffline(false);
+                window.dispatchEvent(new Event('online'));
+            }
+            else {
+                onlineManager().setOnline(false);
+                setOffline(true);
+            }
+        }} class={styles.actionsBtn} aria-label={`${offline()
+            ? 'Unset offline mocking behavior'
+            : 'Mock offline behavior'}`} aria-pressed={offline()}>
+              {offline() ? <Offline /> : <Wifi />}
+            </button>
+            <div style={{ position: 'relative' }}>
+              <button onClick={() => setSettingsOpen((prev) => !prev)} class={styles.actionsBtn} id="TSQD-settings-menu-btn" aria-label={`${settingsOpen() ? 'Close' : 'Open'} settings menu`} aria-haspopup="true" aria-controls="TSQD-settings-menu">
+                <Settings />
+              </button>
+              <Show when={settingsOpen()}>
+                <div role="menu" tabindex="-1" aria-labelledby="TSQD-settings-menu-btn" id="TSQD-settings-menu" class={styles.settingsMenu}>
+                  <div class={styles.settingsMenuHeader}>Position</div>
+                  <div class={styles.settingsMenuSection}>
+                    <button onClick={() => {
+            setDevtoolsPosition('top');
+        }} aria-label="Position top">
+                      <ArrowUp />
+                      <span>Top</span>
+                    </button>
+                    <button onClick={() => {
+            setDevtoolsPosition('bottom');
+        }} aria-label="Position bottom">
+                      <ArrowDown />
+                      <span>Bottom</span>
+                    </button>
+                    <button onClick={() => {
+            setDevtoolsPosition('left');
+        }} aria-label="Position left">
+                      <ArrowDown />
+                      <span>Left</span>
+                    </button>
+                    <button onClick={() => {
+            setDevtoolsPosition('right');
+        }} aria-label="Position right">
+                      <ArrowDown />
+                      <span>Right</span>
+                    </button>
+                  </div>
+                </div>
+              </Show>
+            </div>
+          </div>
+        </div>
+        <div class={styles.overflowQueryContainer}>
+          <div>
+            <Key by={(q) => q.queryHash} each={queries()}>
+              {(query) => <QueryRow query={query()}/>}
+            </Key>
+          </div>
+        </div>
+      </div>
+      <Show when={selectedQueryHash()}>
+        <QueryDetails />
+      </Show>
+    </aside>);
+};
+export const QueryRow = (props) => {
+    const styles = getStyles();
+    const queryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
+        queryKey: props.query.queryKey,
+    })?.state);
+    const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .find({
+        queryKey: props.query.queryKey,
+    })
+        ?.isDisabled() ?? false);
+    const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .find({
+        queryKey: props.query.queryKey,
+    })
+        ?.isStale() ?? false);
+    const observers = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .find({
+        queryKey: props.query.queryKey,
+    })
+        ?.getObserversCount() ?? 0);
+    const color = createMemo(() => getQueryStatusColor({
+        queryState: queryState(),
+        observerCount: observers(),
+        isStale: isStale(),
+    }));
+    return (<Show when={queryState()}>
+      <button onClick={() => setSelectedQueryHash(props.query.queryHash === selectedQueryHash()
+            ? null
+            : props.query.queryHash)} class={cx(styles.queryRow, selectedQueryHash() === props.query.queryHash &&
+            styles.selectedQueryRow)} aria-label={`Query key ${props.query.queryHash}`}>
+        <div class={cx('TSQDObserverCount', color() === 'gray'
+            ? css `
+                  background-color: ${tokens.colors[color()][700]};
+                  color: ${tokens.colors[color()][300]};
+                `
+            : css `
+                  background-color: ${tokens.colors[color()][900]};
+                  color: ${tokens.colors[color()][300]} !important;
+                `)}>
+          {observers()}
+        </div>
+        <code class="TSQDQueryHash">{props.query.queryHash}</code>
+        <Show when={isDisabled()}>
+          <div class="TSQDQueryDisabled">disabled</div>
+        </Show>
+      </button>
+    </Show>);
+};
+export const QueryStatusCount = () => {
+    const stale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .filter((q) => getQueryStatusLabel(q) === 'stale').length);
+    const fresh = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .filter((q) => getQueryStatusLabel(q) === 'fresh').length);
+    const fetching = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .filter((q) => getQueryStatusLabel(q) === 'fetching').length);
+    const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .filter((q) => getQueryStatusLabel(q) === 'paused').length);
+    const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .filter((q) => getQueryStatusLabel(q) === 'inactive').length);
+    const styles = getStyles();
+    return (<div class={styles.queryStatusContainer}>
+      <QueryStatus label="Fresh" color="green" count={fresh()}/>
+      <QueryStatus label="Fetching" color="blue" count={fetching()}/>
+      <QueryStatus label="Paused" color="purple" count={paused()}/>
+      <QueryStatus label="Stale" color="yellow" count={stale()}/>
+      <QueryStatus label="Inactive" color="gray" count={inactive()}/>
+    </div>);
+};
+export const QueryStatus = (props) => {
+    const styles = getStyles();
+    let tagRef;
+    const [mouseOver, setMouseOver] = createSignal(false);
+    const [focused, setFocused] = createSignal(false);
+    const showLabel = createMemo(() => {
+        if (selectedQueryHash()) {
+            if (panelWidth() < firstBreakpoint && panelWidth() > secondBreakpoint) {
+                return false;
+            }
+        }
+        if (panelWidth() < thirdBreakpoint) {
+            return false;
+        }
+        return true;
+    });
+    return (<button onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} onMouseEnter={() => setMouseOver(true)} onMouseLeave={() => {
+            setMouseOver(false);
+            setFocused(false);
+        }} disabled={showLabel()} ref={tagRef} class={cx(styles.queryStatusTag, !showLabel()
+            ? css `
+              cursor: pointer;
+              &:hover {
+                background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
+              }
+            `
+            : null)} {...(mouseOver() || focused()
+        ? {
+            'aria-describedby': 'TSQD-status-tooltip',
+        }
+        : {})}>
+      <Show when={!showLabel() && (mouseOver() || focused())}>
+        <div role="tooltip" id="TSQD-status-tooltip" class={cx(styles.statusTooltip)}>
+          {props.label}
+        </div>
+      </Show>
+      <span class={css `
+          width: ${tokens.size[2]};
+          height: ${tokens.size[2]};
+          border-radius: ${tokens.border.radius.full};
+          background-color: ${tokens.colors[props.color][500]};
+        `}/>
+      <Show when={showLabel()}>
+        <span>{props.label}</span>
+      </Show>
+      <span class={cx(styles.queryStatusCount, props.count > 0 && props.color !== 'gray'
+            ? css `
+                background-color: ${tokens.colors[props.color][900]};
+                color: ${tokens.colors[props.color][300]} !important;
+              `
+            : css `
+                color: ${tokens.colors['gray'][400]} !important;
+              `)}>
+        {props.count}
+      </span>
+    </button>);
+};
+const QueryDetails = () => {
+    const styles = getStyles();
+    const queryClient = useQueryDevtoolsContext().client;
+    const [restoringLoading, setRestoringLoading] = createSignal(false);
+    const errorTypes = createMemo(() => {
+        return useQueryDevtoolsContext().errorTypes || [];
+    });
+    const activeQuery = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .find((query) => query.queryHash === selectedQueryHash()), false);
+    const activeQueryFresh = createSubscribeToQueryCacheBatcher((queryCache) => {
+        return queryCache()
+            .getAll()
+            .find((query) => query.queryHash === selectedQueryHash());
+    }, false);
+    const activeQueryState = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .find((query) => query.queryHash === selectedQueryHash())?.state, false);
+    const activeQueryStateData = createSubscribeToQueryCacheBatcher((queryCache) => {
+        return queryCache()
+            .getAll()
+            .find((query) => query.queryHash === selectedQueryHash())?.state.data;
+    }, false);
+    const statusLabel = createSubscribeToQueryCacheBatcher((queryCache) => {
+        const query = queryCache()
+            .getAll()
+            .find((q) => q.queryHash === selectedQueryHash());
+        if (!query)
+            return 'inactive';
+        return getQueryStatusLabel(query);
+    });
+    const queryStatus = createSubscribeToQueryCacheBatcher((queryCache) => {
+        const query = queryCache()
+            .getAll()
+            .find((q) => q.queryHash === selectedQueryHash());
+        if (!query)
+            return 'pending';
+        return query.state.status;
+    });
+    const observerCount = createSubscribeToQueryCacheBatcher((queryCache) => queryCache()
+        .getAll()
+        .find((query) => query.queryHash === selectedQueryHash())
+        ?.getObserversCount() ?? 0);
+    const color = createMemo(() => getQueryStatusColorByLabel(statusLabel()));
+    const handleRefetch = () => {
+        const promise = activeQuery()?.fetch();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        promise?.catch(() => { });
+    };
+    const triggerError = (errorType) => {
+        const error = errorType?.initializer(activeQuery()) ??
+            new Error('Unknown error from devtools');
+        const __previousQueryOptions = activeQuery().options;
+        activeQuery().setState({
+            status: 'error',
+            error,
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            fetchMeta: {
+                ...activeQuery().state.fetchMeta,
+                __previousQueryOptions,
+            },
+        });
+    };
+    const restoreQueryAfterLoadingOrError = () => {
+        activeQuery()?.fetch((activeQuery()?.state.fetchMeta).__previousQueryOptions, {
+            // Make sure this fetch will cancel the previous one
+            cancelRefetch: true,
+        });
+    };
+    createEffect(() => {
+        if (statusLabel() !== 'fetching') {
+            setRestoringLoading(false);
+        }
+    });
+    return (<Show when={activeQuery() && activeQueryState()}>
+      <div class={styles.detailsContainer}>
+        <div class={styles.detailsHeader}>Query Details</div>
+        <div class={styles.detailsBody}>
+          <div>
+            <pre>
+              <code>{displayValue(activeQuery().queryKey, true)}</code>
+            </pre>
+            <span class={cx(styles.queryDetailsStatus, color() === 'gray'
+            ? css `
+                      background-color: ${tokens.colors[color()][700]};
+                      color: ${tokens.colors[color()][300]};
+                      border-color: ${tokens.colors[color()][600]};
+                    `
+            : css `
+                      background-color: ${tokens.colors[color()][900]};
+                      color: ${tokens.colors[color()][300]};
+                      border-color: ${tokens.colors[color()][600]};
+                    `)}>
+              {statusLabel()}
+            </span>
+          </div>
+          <div>
+            <span>Observers:</span>
+            <span>{observerCount()}</span>
+          </div>
+          <div>
+            <span>Last Updated:</span>
+            <span>
+              {new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString()}
+            </span>
+          </div>
+        </div>
+        <div class={styles.detailsHeader}>Actions</div>
+        <div class={styles.actionsBody}>
+          <button class={css `
+              color: ${tokens.colors.blue[400]};
+            `} onClick={handleRefetch} disabled={statusLabel() === 'fetching'}>
+            <span class={css `
+                background-color: ${tokens.colors.blue[400]};
+              `}></span>
+            Refetch
+          </button>
+          <button class={css `
+              color: ${tokens.colors.yellow[400]};
+            `} onClick={() => queryClient.invalidateQueries(activeQuery())}>
+            <span class={css `
+                background-color: ${tokens.colors.yellow[400]};
+              `}></span>
+            Invalidate
+          </button>
+          <button class={css `
+              color: ${tokens.colors.gray[300]};
+            `} onClick={() => queryClient.resetQueries(activeQuery())}>
+            <span class={css `
+                background-color: ${tokens.colors.gray[400]};
+              `}></span>
+            Reset
+          </button>
+          <button class={css `
+              color: ${tokens.colors.cyan[400]};
+            `} disabled={restoringLoading()} onClick={() => {
+            if (activeQuery()?.state.data === undefined) {
+                setRestoringLoading(true);
+                restoreQueryAfterLoadingOrError();
+            }
+            else {
+                const activeQueryVal = activeQuery();
+                if (!activeQueryVal)
+                    return;
+                const __previousQueryOptions = activeQueryVal.options;
+                // Trigger a fetch in order to trigger suspense as well.
+                activeQueryVal.fetch({
+                    ...__previousQueryOptions,
+                    queryFn: () => {
+                        return new Promise(() => {
+                            // Never resolve
+                        });
+                    },
+                    gcTime: -1,
+                });
+                activeQueryVal.setState({
+                    data: undefined,
+                    status: 'pending',
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+                    fetchMeta: {
+                        ...activeQueryVal.state.fetchMeta,
+                        __previousQueryOptions,
+                    },
+                });
+            }
+        }}>
+            <span class={css `
+                background-color: ${tokens.colors.cyan[400]};
+              `}></span>
+            {statusLabel() === 'fetching' ? 'Restore' : 'Trigger'} Loading
+          </button>
+          <Show when={errorTypes().length === 0 || queryStatus() === 'error'}>
+            <button class={css `
+                color: ${tokens.colors.red[400]};
+              `} onClick={() => {
+            if (!activeQuery().state.error) {
+                triggerError();
+            }
+            else {
+                queryClient.resetQueries(activeQuery());
+            }
+        }}>
+              <span class={css `
+                  background-color: ${tokens.colors.red[400]};
+                `}></span>
+              {queryStatus() === 'error' ? 'Restore' : 'Trigger'} Error
+            </button>
+          </Show>
+          <Show when={!(errorTypes().length === 0 || queryStatus() === 'error')}>
+            <div class={styles.actionsSelect}>
+              <span class={css `
+                  background-color: ${tokens.colors.red[400]};
+                `}></span>
+              Trigger Error
+              <select disabled={queryStatus() === 'pending'} onChange={(e) => {
+            const errorType = errorTypes().find((t) => t.name === e.currentTarget.value);
+            triggerError(errorType);
+        }}>
+                <option value="" disabled selected></option>
+                <For each={errorTypes()}>
+                  {(errorType) => (<option value={errorType.name}>{errorType.name}</option>)}
+                </For>
+              </select>
+              <ChevronDown />
+            </div>
+          </Show>
+        </div>
+        <div class={styles.detailsHeader}>Data Explorer</div>
+        <div style={{
+            padding: '0.5rem',
+        }}>
+          <Explorer label="Data" defaultExpanded={['Data']} value={activeQueryStateData()} copyable={true}/>
+        </div>
+        <div class={styles.detailsHeader}>Query Explorer</div>
+        <div style={{
+            padding: '0.5rem',
+        }}>
+          <Explorer label="Query" defaultExpanded={['Query', 'queryKey']} value={activeQueryFresh()}/>
+        </div>
+      </div>
+    </Show>);
+};
+const signalsMap = new Map();
+const setupQueryCacheSubscription = () => {
+    const queryCache = createMemo(() => {
+        const client = useQueryDevtoolsContext().client;
+        return client.getQueryCache();
+    });
+    const unsub = queryCache().subscribe(() => {
+        for (const [callback, setter] of signalsMap.entries()) {
+            queueMicrotask(() => {
+                setter(callback(queryCache));
+            });
+        }
+    });
+    onCleanup(() => {
+        signalsMap.clear();
+        unsub();
+    });
+    return unsub;
+};
+const createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
+    const queryCache = createMemo(() => {
+        const client = useQueryDevtoolsContext().client;
+        return client.getQueryCache();
+    });
+    const [value, setValue] = createSignal(callback(queryCache), !equalityCheck ? { equals: false } : undefined);
+    createEffect(() => {
+        setValue(callback(queryCache));
+    });
+    // @ts-ignore
+    signalsMap.set(callback, setValue);
+    onCleanup(() => {
+        // @ts-ignore
+        signalsMap.delete(callback);
+    });
+    return value;
+};
+const getStyles = () => {
+    const { colors, font, size, alpha, shadow, border } = tokens;
+    return {
+        devtoolsBtn: css `
+      z-index: 100000;
+      position: fixed;
+      padding: 4px;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 9999px;
+      box-shadow: ${shadow.md()};
+      overflow: hidden;
+
+      & div {
+        position: absolute;
+        top: -8px;
+        left: -8px;
+        right: -8px;
+        bottom: -8px;
+        border-radius: 9999px;
+
+        & svg {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+        filter: blur(6px) saturate(1.2) contrast(1.1);
+      }
+
+      &:focus-within {
+        outline-offset: 2px;
+        outline: 3px solid ${colors.green[600]};
+      }
+
+      & button {
+        position: relative;
+        z-index: 1;
+        padding: 0;
+        border-radius: 9999px;
+        background-color: transparent;
+        border: none;
+        height: 40px;
+        display: flex;
+        width: 40px;
+        overflow: hidden;
+        cursor: pointer;
+        outline: none;
+        & svg {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    `,
+        panel: css `
+      position: fixed;
+      z-index: 9999;
+      display: flex;
+      gap: ${tokens.size[0.5]};
+      & * {
+        font-family: 'Inter', sans-serif;
+        color: ${colors.gray[300]};
+        box-sizing: border-box;
+      }
+    `,
+        'devtoolsBtn-position-bottom-right': css `
+      bottom: 12px;
+      right: 12px;
+    `,
+        'devtoolsBtn-position-bottom-left': css `
+      bottom: 12px;
+      left: 12px;
+    `,
+        'devtoolsBtn-position-top-left': css `
+      top: 12px;
+      left: 12px;
+    `,
+        'devtoolsBtn-position-top-right': css `
+      top: 12px;
+      right: 12px;
+    `,
+        'panel-position-top': css `
+      top: 0;
+      right: 0;
+      left: 0;
+      max-height: 90%;
+      min-height: 3.5rem;
+      border-bottom: ${colors.darkGray[300]} 1px solid;
+    `,
+        'panel-position-bottom': css `
+      bottom: 0;
+      right: 0;
+      left: 0;
+      max-height: 90%;
+      min-height: 3.5rem;
+      border-top: ${colors.darkGray[300]} 1px solid;
+    `,
+        'panel-position-right': css `
+      bottom: 0;
+      right: 0;
+      top: 0;
+      border-left: ${colors.darkGray[300]} 1px solid;
+      max-width: 90%;
+    `,
+        'panel-position-left': css `
+      bottom: 0;
+      left: 0;
+      top: 0;
+      border-right: ${colors.darkGray[300]} 1px solid;
+      max-width: 90%;
+    `,
+        closeBtn: css `
+      position: absolute;
+      cursor: pointer;
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      outline: none;
+      &:hover {
+        background-color: ${colors.darkGray[500]};
+      }
+      &:focus-visible {
+        outline: 2px solid ${colors.blue[600]};
+      }
+    `,
+        'closeBtn-position-top': css `
+      bottom: 0;
+      right: ${size[3]};
+      transform: translate(0, 100%);
+      background-color: ${colors.darkGray[700]};
+      border-right: ${colors.darkGray[300]} 1px solid;
+      border-left: ${colors.darkGray[300]} 1px solid;
+      border-top: none;
+      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
+      padding: ${size[1.5]} ${size[2.5]} ${size[2]} ${size[2.5]};
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        bottom: 100%;
+        left: -${size[2.5]};
+        height: ${size[1.5]};
+        width: calc(100% + ${size[5]});
+      }
+
+      & svg {
+        transform: rotate(180deg);
+      }
+    `,
+        'closeBtn-position-bottom': css `
+      top: 0;
+      right: ${size[3]};
+      transform: translate(0, -100%);
+      background-color: ${colors.darkGray[700]};
+      border-right: ${colors.darkGray[300]} 1px solid;
+      border-left: ${colors.darkGray[300]} 1px solid;
+      border-top: ${colors.darkGray[300]} 1px solid;
+      border-bottom: none;
+      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
+      padding: ${size[2]} ${size[2.5]} ${size[1.5]} ${size[2.5]};
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 100%;
+        left: -${size[2.5]};
+        height: ${size[1.5]};
+        width: calc(100% + ${size[5]});
+      }
+    `,
+        'closeBtn-position-right': css `
+      bottom: ${size[3]};
+      left: 0;
+      transform: translate(-100%, 0);
+      background-color: ${colors.darkGray[700]};
+      border-right: none;
+      border-left: ${colors.darkGray[300]} 1px solid;
+      border-top: ${colors.darkGray[300]} 1px solid;
+      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
+      padding: ${size[2.5]} ${size[1]} ${size[2.5]} ${size[1.5]};
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        left: 100%;
+        height: calc(100% + ${size[5]});
+        width: ${size[1.5]};
+      }
+
+      & svg {
+        transform: rotate(-90deg);
+      }
+    `,
+        'closeBtn-position-left': css `
+      bottom: ${size[3]};
+      right: 0;
+      transform: translate(100%, 0);
+      background-color: ${colors.darkGray[700]};
+      border-left: none;
+      border-right: ${colors.darkGray[300]} 1px solid;
+      border-top: ${colors.darkGray[300]} 1px solid;
+      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
+      padding: ${size[2.5]} ${size[1.5]} ${size[2.5]} ${size[1]};
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        right: 100%;
+        height: calc(100% + ${size[5]});
+        width: ${size[1.5]};
+      }
+
+      & svg {
+        transform: rotate(90deg);
+      }
+    `,
+        queriesContainer: css `
+      flex: 1 1 700px;
+      background-color: ${colors.darkGray[700]};
+      display: flex;
+      flex-direction: column;
+    `,
+        dragHandle: css `
+      position: absolute;
+      transition: background-color 0.125s ease;
+      &:hover {
+        background-color: ${colors.gray[400]}${alpha[90]};
+      }
+      z-index: 4;
+    `,
+        'dragHandle-position-top': css `
+      bottom: 0;
+      width: 100%;
+      height: ${tokens.size[1]};
+      cursor: ns-resize;
+    `,
+        'dragHandle-position-bottom': css `
+      top: 0;
+      width: 100%;
+      height: ${tokens.size[1]};
+      cursor: ns-resize;
+    `,
+        'dragHandle-position-right': css `
+      left: 0;
+      width: ${tokens.size[1]};
+      height: 100%;
+      cursor: ew-resize;
+    `,
+        'dragHandle-position-left': css `
+      right: 0;
+      width: ${tokens.size[1]};
+      height: 100%;
+      cursor: ew-resize;
+    `,
+        row: css `
+      display: flex;
+      justify-content: space-between;
+      padding: ${tokens.size[2.5]} ${tokens.size[3]};
+      gap: ${tokens.size[4]};
+      border-bottom: ${colors.darkGray[500]} 1px solid;
+      align-items: center;
+      & > button {
+        padding: 0;
+        background: transparent;
+        border: none;
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+        logo: css `
+      cursor: pointer;
+      &:hover {
+        opacity: 0.7;
+      }
+      &:focus-visible {
+        outline-offset: 4px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+        tanstackLogo: css `
+      font-size: ${font.size.lg};
+      font-weight: ${font.weight.extrabold};
+      line-height: ${font.lineHeight.sm};
+      white-space: nowrap;
+    `,
+        queryFlavorLogo: css `
+      font-weight: ${font.weight.semibold};
+      font-size: ${font.size.sm};
+      background: linear-gradient(to right, #dd524b, #e9a03b);
+      background-clip: text;
+      line-height: ${font.lineHeight.xs};
+      -webkit-text-fill-color: transparent;
+      white-space: nowrap;
+    `,
+        queryStatusContainer: css `
+      display: flex;
+      gap: ${tokens.size[2]};
+      height: min-content;
+    `,
+        queryStatusTag: css `
+      display: flex;
+      gap: ${tokens.size[1.5]};
+      background: ${colors.darkGray[500]};
+      border-radius: ${tokens.border.radius.md};
+      font-size: ${font.size.sm};
+      padding: ${tokens.size[1]};
+      padding-left: ${tokens.size[2.5]};
+      align-items: center;
+      line-height: ${font.lineHeight.md};
+      font-weight: ${font.weight.medium};
+      border: none;
+      user-select: none;
+      position: relative;
+      &:focus-visible {
+        outline-offset: 2px;
+        outline: 2px solid ${colors.blue[800]};
+      }
+      & span:nth-child(2) {
+        color: ${colors.gray[300]}${alpha[80]};
+      }
+    `,
+        statusTooltip: css `
+      position: absolute;
+      z-index: 1;
+      background-color: ${colors.darkGray[500]};
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, calc(${tokens.size[2]}));
+      padding: ${tokens.size[0.5]} ${tokens.size[3]};
+      border-radius: ${tokens.border.radius.md};
+      font-size: ${font.size.sm};
+      border: 2px solid ${colors.gray[600]};
+      color: ${tokens.colors['gray'][300]};
+
+      &::before {
+        top: 0px;
+        content: ' ';
+        display: block;
+        left: 50%;
+        transform: translate(-50%, -100%);
+        position: absolute;
+        border-color: transparent transparent ${colors.gray[600]} transparent;
+        border-style: solid;
+        border-width: 7px;
+        /* transform: rotate(180deg); */
+      }
+
+      &::after {
+        top: 0px;
+        content: ' ';
+        display: block;
+        left: 50%;
+        transform: translate(-50%, calc(-100% + 2.5px));
+        position: absolute;
+        border-color: transparent transparent ${colors.darkGray[500]}
+          transparent;
+        border-style: solid;
+        border-width: 7px;
+      }
+    `,
+        selectedQueryRow: css `
+      background-color: ${colors.darkGray[500]};
+    `,
+        queryStatusCount: css `
+      padding: 0 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${colors.gray[400]};
+      background-color: ${colors.darkGray[300]};
+      border-radius: 3px;
+      font-variant-numeric: tabular-nums;
+    `,
+        filtersContainer: css `
+      display: flex;
+      gap: ${tokens.size[2.5]};
+      & > button {
+        cursor: pointer;
+        padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
+        padding-right: ${tokens.size[1.5]};
+        border-radius: ${tokens.border.radius.md};
+        background-color: ${colors.darkGray[400]};
+        font-size: ${font.size.sm};
+        display: flex;
+        align-items: center;
+        line-height: ${font.lineHeight.sm};
+        gap: ${tokens.size[1.5]};
+        max-width: 160px;
+        border: 1px solid ${colors.darkGray[200]};
+        &:focus-visible {
+          outline-offset: 2px;
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+        }
+      }
+    `,
+        filterInput: css `
+      padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
+      border-radius: ${tokens.border.radius.md};
+      background-color: ${colors.darkGray[400]};
+      display: flex;
+      box-sizing: content-box;
+      align-items: center;
+      gap: ${tokens.size[1.5]};
+      max-width: 160px;
+      min-width: 100px;
+      border: 1px solid ${colors.darkGray[200]};
+      height: min-content;
+      & > svg {
+        width: ${tokens.size[3.5]};
+        height: ${tokens.size[3.5]};
+      }
+      & input {
+        font-size: ${font.size.sm};
+        width: 100%;
+        background-color: ${colors.darkGray[400]};
+        border: none;
+        padding: 0;
+        line-height: ${font.lineHeight.sm};
+        color: ${colors.gray[300]};
+        &::placeholder {
+          color: ${colors.gray[300]};
+        }
+        &:focus {
+          outline: none;
+        }
+      }
+
+      &:focus-within {
+        outline-offset: 2px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+        filterSelect: css `
+      padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
+      border-radius: ${tokens.border.radius.md};
+      background-color: ${colors.darkGray[400]};
+      display: flex;
+      align-items: center;
+      gap: ${tokens.size[1.5]};
+      box-sizing: content-box;
+      max-width: 160px;
+      border: 1px solid ${colors.darkGray[200]};
+      height: min-content;
+      & > svg {
+        width: ${tokens.size[3]};
+        height: ${tokens.size[3]};
+      }
+      & > select {
+        appearance: none;
+        min-width: 100px;
+        line-height: ${font.lineHeight.sm};
+        font-size: ${font.size.sm};
+        background-color: ${colors.darkGray[400]};
+        border: none;
+        &:focus {
+          outline: none;
+        }
+      }
+      &:focus-within {
+        outline-offset: 2px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+        actionsContainer: css `
+      display: flex;
+      gap: ${tokens.size[2.5]};
+    `,
+        actionsBtn: css `
+      border-radius: ${tokens.border.radius.md};
+      background-color: ${colors.darkGray[400]};
+      width: 2.125rem; // 34px
+      height: 2.125rem; // 34px
+      justify-content: center;
+      display: flex;
+      align-items: center;
+      gap: ${tokens.size[1.5]};
+      max-width: 160px;
+      border: 1px solid ${colors.darkGray[200]};
+      cursor: pointer;
+      &:hover {
+        background-color: ${colors.darkGray[500]};
+      }
+      & svg {
+        width: ${tokens.size[4]};
+        height: ${tokens.size[4]};
+      }
+      &:focus-visible {
+        outline-offset: 2px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+        overflowQueryContainer: css `
+      flex: 1;
+      overflow-y: auto;
+      & > div {
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+        queryRow: css `
+      display: flex;
+      align-items: center;
+      padding: 0;
+      background-color: inherit;
+      border: none;
+      cursor: pointer;
+      &:focus-visible {
+        outline-offset: -2px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+      &:hover .TSQDQueryHash {
+        background-color: ${colors.darkGray[600]};
+      }
+
+      & .TSQDObserverCount {
+        padding: 0 ${tokens.size[1]};
+        user-select: none;
+        min-width: ${tokens.size[8]};
+        align-self: stretch !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: ${font.size.sm};
+        font-weight: ${font.weight.medium};
+        border-bottom: 1px solid ${colors.darkGray[700]};
+      }
+      & .TSQDQueryHash {
+        user-select: text;
+        font-size: ${font.size.sm};
+        display: flex;
+        align-items: center;
+        min-height: ${tokens.size[8]};
+        flex: 1;
+        padding: ${tokens.size[1]} ${tokens.size[2]};
+        font-family: 'Menlo', 'Fira Code', monospace !important;
+        border-bottom: 1px solid ${colors.darkGray[400]};
+        text-align: left;
+        text-overflow: clip;
+        word-break: break-word;
+      }
+
+      & .TSQDQueryDisabled {
+        align-self: stretch;
+        align-self: stretch !important;
+        display: flex;
+        align-items: center;
+        padding: 0 ${tokens.size[3]};
+        color: ${colors.gray[300]};
+        background-color: ${colors.darkGray[600]};
+        border-bottom: 1px solid ${colors.darkGray[400]};
+        font-size: ${font.size.sm};
+      }
+    `,
+        detailsContainer: css `
+      flex: 1 1 700px;
+      background-color: ${colors.darkGray[700]};
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      display: flex;
+    `,
+        detailsHeader: css `
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background-color: ${colors.darkGray[600]};
+      padding: ${tokens.size[2]} ${tokens.size[2]};
+      font-weight: ${font.weight.medium};
+      font-size: ${font.size.sm};
+    `,
+        detailsBody: css `
+      margin: ${tokens.size[2]} 0px ${tokens.size[3]} 0px;
+      & > div {
+        display: flex;
+        align-items: stretch;
+        padding: 0 ${tokens.size[2]};
+        line-height: ${font.lineHeight.sm};
+        justify-content: space-between;
+        & > span {
+          font-size: ${font.size.sm};
+        }
+        & > span:nth-child(2) {
+          font-variant-numeric: tabular-nums;
+        }
+      }
+
+      & > div:first-child {
+        margin-bottom: ${tokens.size[2]};
+      }
+
+      & code {
+        font-family: 'Menlo', 'Fira Code', monospace !important;
+        margin: 0;
+        font-size: ${font.size.sm};
+        line-height: ${font.lineHeight.sm};
+      }
+    `,
+        queryDetailsStatus: css `
+      border: 1px solid ${colors.darkGray[200]};
+      border-radius: ${tokens.border.radius.md};
+      font-weight: ${font.weight.medium};
+      padding: ${tokens.size[1]} ${tokens.size[2.5]};
+    `,
+        actionsBody: css `
+      flex-wrap: wrap;
+      margin: ${tokens.size[3]} 0px ${tokens.size[3]} 0px;
+      display: flex;
+      gap: ${tokens.size[2]};
+      padding: 0px ${tokens.size[2]};
+      & > button {
+        font-size: ${font.size.sm};
+        padding: ${tokens.size[2]} ${tokens.size[2]};
+        display: flex;
+        border-radius: ${tokens.border.radius.md};
+        border: 1px solid ${colors.darkGray[400]};
+        background-color: ${colors.darkGray[600]};
+        align-items: center;
+        gap: ${tokens.size[2]};
+        font-weight: ${font.weight.medium};
+        line-height: ${font.lineHeight.sm};
+        cursor: pointer;
+        &:focus-visible {
+          outline-offset: 2px;
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+        }
+        &:hover {
+          background-color: ${colors.darkGray[500]};
+        }
+
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        & > span {
+          width: ${size[2]};
+          height: ${size[2]};
+          border-radius: ${tokens.border.radius.full};
+        }
+      }
+    `,
+        actionsSelect: css `
+      font-size: ${font.size.sm};
+      padding: ${tokens.size[2]} ${tokens.size[2]};
+      display: flex;
+      border-radius: ${tokens.border.radius.md};
+      overflow: hidden;
+      border: 1px solid ${colors.darkGray[400]};
+      background-color: ${colors.darkGray[600]};
+      align-items: center;
+      gap: ${tokens.size[2]};
+      font-weight: ${font.weight.medium};
+      line-height: ${font.lineHeight.sm};
+      color: ${tokens.colors.red[400]};
+      cursor: pointer;
+      position: relative;
+      &:hover {
+        background-color: ${colors.darkGray[500]};
+      }
+      & > span {
+        width: ${size[2]};
+        height: ${size[2]};
+        border-radius: ${tokens.border.radius.full};
+      }
+      &:focus-within {
+        outline-offset: 2px;
+        border-radius: ${border.radius.xs};
+        outline: 2px solid ${colors.blue[800]};
+      }
+      & select {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        appearance: none;
+        background-color: transparent;
+        border: none;
+        color: transparent;
+        outline: none;
+      }
+
+      & svg path {
+        stroke: ${tokens.colors.red[400]} !important;
+      }
+    `,
+        settingsMenu: css `
+      position: absolute;
+      top: calc(100% + ${tokens.size[2]});
+      border-radius: ${tokens.border.radius.lg};
+      border: 1px solid ${colors.gray[600]};
+      right: 0;
+      min-width: ${tokens.size[44]};
+      background-color: ${colors.darkGray[400]};
+      font-size: ${font.size.sm};
+      color: ${colors.gray[500]};
+      z-index: 7;
+    `,
+        settingsMenuHeader: css `
+      padding: ${tokens.size[1.5]} ${tokens.size[2.5]};
+      color: ${colors.gray[300]};
+      font-weight: ${font.weight.medium};
+    `,
+        settingsMenuSection: css `
+      border-top: 1px solid ${colors.gray[600]};
+      display: flex;
+      flex-direction: column;
+      padding: ${tokens.size[1]} ${tokens.size[1]};
+
+      & > button {
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        padding: ${tokens.size[2]} ${tokens.size[1.5]};
+        font-size: ${font.size.sm};
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: ${tokens.size[2]};
+        border-radius: ${tokens.border.radius.md};
+        &:hover {
+          background-color: ${colors.darkGray[500]};
+        }
+
+        &:focus-visible {
+          outline-offset: 2px;
+          outline: 2px solid ${colors.blue[800]};
+        }
+      }
+
+      & button:nth-child(4) svg {
+        transform: rotate(-90deg);
+      }
+
+      & button:nth-child(3) svg {
+        transform: rotate(90deg);
+      }
+    `,
+    };
+};