basalt-ui 1.28.0 → 1.29.1

package/src/dashboard/delta-badge.tsx

@@ -1,10 +1,77 @@
 /**
- * `DeltaBadge` moved to `src/widget-header/` (docs/CONTROLS-SPEC.md §2.2) so `WidgetHeader` can
- * compose it Mantine-free. Re-exported here unchanged so this deep import path — and `StatCard`'s
- * own `./delta-badge` import — keep working without a wave-3 edit.
+ * DeltaBadge — the KPI trend chip (docs/DESIGN-SPEC.md §5): mono 11.5px weight 600, status-color
+ * text on a status-13% tint, control radius, 2px/7px padding, optional ▲/▼ glyph at 9px.
+ * `polarity` decides the TONE the sign maps to — `'up-good'` (default) reads a rise as success and
+ * a fall as danger; `'up-bad'` inverts that for a metric where a rise is the worse reading (a
+ * cycle-top index, latency, error rate); `'neutral'` renders every sign in a faint, non-verdict
+ * tint. Zero is always faint with no glyph, under every polarity. The label never carries a
+ * leading "+"; pass `format` to control the magnitude string (defaults to a one-decimal percentage
+ * of the absolute value). The ▲/▼ glyph is DIRECTION, not verdict, and stays polarity-independent —
+ * governed only by `withGlyph` and the sign.
  *
- * `basalt-ui/widget-header` is canonical — this alias exists only so `basalt-ui/dashboard`-style
- * deep imports keep resolving; the root barrel (`src/index.ts`) sources `DeltaBadge` from
- * `../widget-header`, not from here.
+ * Mantine-free (plain `<span>` + this folder's CSS module, docs/CONTROLS-SPEC.md §2.2) so
+ * `WidgetHeader` can compose it from inside `charts/` without tripping `basalt/token-layer-
+ * boundary` or `check-dist-layering.mjs`.
+ *
+ * @example
+ * import { DeltaBadge } from 'basalt-ui'
+ *
+ * <DeltaBadge value={12.4} />                          // ▲ 12.4%, success tint
+ * <DeltaBadge value={-3.1} />                           // ▼ 3.1%, danger tint
+ * <DeltaBadge value={0} />                              // 0.0%, neutral faint tint, no glyph
+ * <DeltaBadge value={182} format={(v) => `${Math.abs(v)}ms`} withGlyph={false} />
+ * <DeltaBadge value={35.9} polarity="up-bad" />         // ▲ 35.9%, danger tint — a rise is bad here
  */
-export { DeltaBadge, type DeltaBadgeProps, type DeltaPolarity } from '../widget-header/delta-badge'
+import { alpha, VX } from '../tokens'
+import classes from './widget-header.module.css'
+
+export type DeltaPolarity = 'up-good' | 'up-bad' | 'neutral'
+
+export type DeltaBadgeProps = {
+  /** Signed delta driving tone (positive/negative/zero) and, by default, the label magnitude. */
+  value: number
+  /** Which sign reads as the good verdict. `'up-good'` (default) is today's behaviour — positive
+   * success, negative danger. `'up-bad'` inverts it for a metric where a rise is the worse reading.
+   * `'neutral'` renders every sign in the faint tint — a change with no verdict attached. Zero is
+   * always faint regardless. */
+  polarity?: DeltaPolarity
+  /** Formats the value into the label text. Defaults to `${Math.abs(value).toFixed(1)}%`. */
+  format?: (value: number) => string
+  /** Render the ▲/▼ direction glyph. Defaults to `true`; a zero value never shows a glyph. */
+  withGlyph?: boolean
+  /** Optional comparison timeframe rendered directly after the value in a dimmer shade of the same
+   * tone (e.g. `MoM`, `WoW`, `YTD`) — states what the delta is measured against without a hover. */
+  period?: string | undefined
+}
+
+const defaultFormat = (value: number): string => `${Math.abs(value).toFixed(1)}%`
+
+function resolveTone(value: number, polarity: DeltaPolarity): string {
+  if (value === 0 || polarity === 'neutral') return VX.faint
+  const rose = value > 0
+  const good = polarity === 'up-good' ? rose : !rose
+  return good ? VX.status.good : VX.status.bad
+}
+
+export function DeltaBadge({
+  value,
+  polarity = 'up-good',
+  format = defaultFormat,
+  withGlyph = true,
+  period,
+}: DeltaBadgeProps) {
+  const tone = resolveTone(value, polarity)
+  const glyph = value > 0 ? '▲' : value < 0 ? '▼' : undefined
+  const showGlyph = withGlyph && glyph !== undefined
+
+  return (
+    <span
+      className={classes.deltaBadge}
+      style={{ backgroundColor: alpha(tone, 0.13), color: tone }}
+    >
+      {showGlyph && <span className={classes.deltaGlyph}>{glyph}</span>}
+      {format(value)}
+      {period !== undefined && <span className={classes.deltaPeriod}>{period}</span>}
+    </span>
+  )
+}

package/src/dashboard/empty-state.tsx

@@ -2,7 +2,7 @@
  * EmptyState — a centered icon/title/description/action stack for empty data regions (no shipped
  * illustration assets — `icon` is a plain, faint-rendered `ReactNode` slot). `tier="page"` uses
  * generous vertical padding for a full-page empty state; `tier="section"` is compact, for an
- * empty card/panel region (`variant` is the deprecated spelling of the same prop — audit B #19).
+ * empty card/panel region.
  *
  * @example
  * import { EmptyState } from 'basalt-ui'
@@ -41,9 +41,6 @@ export type EmptyStateProps = BasaltProps &
     /** How loud this state is: `'page'` (default) = generous padding for a full-page state;
      * `'section'` = compact. */
     tier?: 'page' | 'section'
-    /** @deprecated Renamed to `tier` (audit B #19) — `tier` is the package's word for "how loud is
-     * this". Still honoured; `tier` wins when both are passed. */
-    variant?: 'page' | 'section'
   }
 
 // The finest density-tracking rhythm step (`--vx-space-stack-xs`, 4px at level 0) scaled by an
@@ -63,12 +60,11 @@ export function EmptyState({
   description,
   action,
   tier,
-  variant,
   className,
   style,
   classNames,
 }: EmptyStateProps) {
-  const resolved = tier ?? variant ?? 'page'
+  const resolved = tier ?? 'page'
   return (
     <Stack
       align="center"

package/src/dashboard/index.ts

@@ -1,4 +1,14 @@
-export { DeltaBadge, type DeltaBadgeProps } from './delta-badge'
+export {
+  WidgetHeader,
+  type WidgetHeaderDeltaProps,
+  type WidgetHeaderMetricProps,
+  type WidgetHeaderProps,
+  type WidgetHeaderSlot,
+  type WidgetHeaderTier,
+  type WidgetHeaderTitleProps,
+} from './widget-header'
+export { DeltaBadge, type DeltaBadgeProps, type DeltaPolarity } from './delta-badge'
+export { Section, type SectionProps, type SectionSlot } from './section'
 export {
   StatCard,
   type StatCardBreakdownRow,
@@ -30,7 +40,6 @@ export {
   type QueryStateLike,
   type QueryStateSlot,
   type QueryStateTier,
-  type QueryStateVariant,
   type QueryEmptyCopy,
   LoadingState,
   type LoadingStateProps,

package/src/dashboard/query-state.tsx

@@ -16,7 +16,7 @@
  */
 import { Alert, Button, Center, Group, Loader, Stack, Text } from '@mantine/core'
 import type { CSSProperties, ReactNode } from 'react'
-import { toErrorMessage } from '../query/error-message'
+import { toErrorMessage } from '../common/errors'
 import { cx } from '../common/props'
 import type { BasaltProps, SlotStylesProps } from '../common/props'
 import { EmptyState } from './empty-state'
@@ -29,14 +29,10 @@ import type { QueryStateLike } from '../common/query-state-like'
  *
  * Named `tier`, not `variant` (audit B #19): `tier` is already the package's word for "how loud is
  * this" on `WidgetHeader` and `CtlSlot`, and `'section'` meant two different things across the two
- * spellings. {@link QueryStateVariant} stays exported as an alias — nothing is renamed out from
- * under a consumer.
+ * spellings.
  */
 export type QueryStateTier = 'page' | 'section'
 
-/** The former name of {@link QueryStateTier}. Kept as an alias; prefer `QueryStateTier`. */
-export type QueryStateVariant = QueryStateTier
-
 /**
  * The structural subset of a TanStack `UseQueryResult` these components read — defined in
  * `common/query-state-like.ts` and re-exported here, where consumers have always imported it from.
@@ -61,8 +57,6 @@ export type QueryEmptyCopy = {
 export type LoadingStateProps = BasaltProps & {
   /** How loud this state is. Default `'page'`. */
   tier?: QueryStateTier
-  /** @deprecated Renamed to `tier` — see {@link QueryStateTier}. Still honoured; `tier` wins. */
-  variant?: QueryStateTier
   /** Accessible name for the spinner. Say what is loading. */
   label?: string
 }
@@ -70,12 +64,11 @@ export type LoadingStateProps = BasaltProps & {
 /** A spinner on its own — `tier="page"` centres it in a generous block, `'section'` is bare. */
 export function LoadingState({
   tier,
-  variant,
   label = 'Loading',
   className,
   style,
 }: LoadingStateProps): ReactNode {
-  const resolved = tier ?? variant ?? 'page'
+  const resolved = tier ?? 'page'
   if (resolved === 'section') {
     return (
       <Loader
@@ -113,8 +106,6 @@ export type ErrorStateProps = BasaltProps & {
   retrying?: boolean
   /** How loud this state is. Default `'page'`. */
   tier?: QueryStateTier
-  /** @deprecated Renamed to `tier` — see {@link QueryStateTier}. Still honoured; `tier` wins. */
-  variant?: QueryStateTier
   /** Extra controls beside Retry (e.g. a "Back to shares" link). */
   action?: ReactNode
 }
@@ -130,12 +121,11 @@ export function ErrorState({
   onRetry,
   retrying = false,
   tier,
-  variant,
   action,
   className,
   style,
 }: ErrorStateProps): ReactNode {
-  const resolved = tier ?? variant ?? 'page'
+  const resolved = tier ?? 'page'
   const alert = (
     <Alert
       color="red"
@@ -212,8 +202,6 @@ export type QueryStateProps<TData> = BasaltProps &
     errorAction?: ReactNode
     /** How loud every branch is. Default `'page'`. */
     tier?: QueryStateTier
-    /** @deprecated Renamed to `tier` — see {@link QueryStateTier}. Still honoured; `tier` wins. */
-    variant?: QueryStateTier
     /** Replace the default spinner (e.g. with a skeleton grid). */
     loading?: ReactNode
   }
@@ -246,14 +234,13 @@ export function QueryState<TData>({
   errorFallback = 'The request failed.',
   errorAction,
   tier,
-  variant,
   loading,
   className,
   style,
   classNames,
 }: QueryStateProps<TData>): ReactNode {
   assertQueryStateLike('QueryState', query)
-  const resolvedTier = tier ?? variant ?? 'page'
+  const resolvedTier = tier ?? 'page'
   // One class for every branch — see {@link QueryStateSlot}. `cx` returns `''` when both are
   // absent, and an empty `className` on a branch that previously carried none would be a DOM diff,
   // so it collapses back to `undefined`.

package/src/{section → dashboard}/section.tsx

@@ -56,11 +56,11 @@ import { CtlSlot } from '../theme'
 import { BarActionSlot, isBarActionList } from '../controls/actions'
 import type { SlotActions } from '../controls/actions'
 import { useFilterSurface } from '../controls/filter-context'
-import { QueryState } from '../dashboard/query-state'
-import type { QueryEmptyCopy, QueryStateLike } from '../dashboard/query-state'
+import { QueryState } from './query-state'
+import type { QueryEmptyCopy, QueryStateLike } from './query-state'
 import { usePersistedOrLocal } from '../state/persisted-or-local'
-import { WidgetHeader } from '../widget-header'
-import type { WidgetHeaderProps } from '../widget-header'
+import { WidgetHeader } from './widget-header'
+import type { WidgetHeaderProps } from './widget-header'
 import classes from './section.module.css'
 
 /**

package/src/dashboard/settings-section.tsx

@@ -30,8 +30,8 @@
  */
 import { Card, Stack } from '@mantine/core'
 import type { ReactNode } from 'react'
-import { WidgetHeader } from '../widget-header'
-import type { WidgetHeaderTitleProps } from '../widget-header'
+import { WidgetHeader } from './widget-header'
+import type { WidgetHeaderTitleProps } from './widget-header'
 import { CtlSlot } from '../theme'
 import { alpha, VX } from '../tokens'
 import { cx } from '../common/props'

package/src/dashboard/stat-card.tsx

@@ -95,12 +95,12 @@
 import { Box, Card, VisuallyHidden } from '@mantine/core'
 import { useEffect, useRef, useState } from 'react'
 import type { CSSProperties, ReactNode } from 'react'
-import { WidgetHeader } from '../widget-header'
+import { WidgetHeader } from './widget-header'
 import type {
   WidgetHeaderDeltaProps,
   WidgetHeaderMetricProps,
   WidgetHeaderTitleProps,
-} from '../widget-header'
+} from './widget-header'
 import { CtlSlot } from '../theme'
 import { VX } from '../tokens'
 import { cx } from '../common/props'

package/src/data/data-table.tsx

@@ -9,7 +9,7 @@
  * exactly as before.
  *
  * @example
- * import { BasaltDataTable } from 'basalt-ui/data'
+ * import { BasaltDataTable } from 'basalt-ui/data/table'
  * import { createColumnHelper } from '@tanstack/react-table'
  *
  * type Row = { name: string; age: number }
@@ -88,11 +88,11 @@ import { MultiSelectFilter } from '../controls/multi-select-filter'
 import { CtlSlot } from '../theme'
 import { alpha, VX } from '../tokens'
 import type { EnumField, FieldHandle, MultiField } from '../state'
-import { WidgetHeader } from '../widget-header'
+import { WidgetHeader } from '../dashboard'
 import { ErrorState } from '../dashboard/query-state'
 import type { QueryStateLike } from '../dashboard/query-state'
 import { dataQueryBranch } from './query-branch'
-import { isDev } from '../utils/is-dev'
+import { isDev } from '../common/is-dev'
 import classes from './data-table.module.css'
 
 // ── Column alignment ──────────────────────────────────────────────────────────

package/src/data/table.ts

@@ -31,28 +31,9 @@ export type {
   DataTableFacetOption,
 } from './data-table'
 
-// ── @tanstack/react-table convenience re-exports ──────────────────────────────
-// These are the handful of table primitives a consumer needs at the call site;
-// importing them from basalt-ui/data/table avoids a separate @tanstack/react-table import.
-// useReactTable + flexRender + the row-model builders (getCoreRowModel/getSortedRowModel/
-// getFilteredRowModel/getPaginationRowModel) are the raw escape hatch: a bespoke, fully custom
-// table can be built from this subpath alone, with no direct @tanstack/react-table import in
-// consumer code.
-export {
-  createColumnHelper,
-  useReactTable,
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  type ColumnDef,
-  type SortingState,
-  type ColumnHelper,
-  type PaginationState,
-  type ColumnPinningState,
-  // The selection map `rowSelection`/`onRowSelectionChange` speak — `Record<rowId, boolean>`.
-  type RowSelectionState,
-  // The type `onColumnFiltersChange` hands back — needed at the call site for server-side faceting.
-  type ColumnFiltersState,
-} from '@tanstack/react-table'
+// ── @tanstack/react-table convenience re-export ───────────────────────────────
+// `createColumnHelper` is the one raw TanStack symbol every `BasaltDataTable` call site needs to
+// build its `columns` array (C1 consolidation: every OTHER pass-through — `useReactTable`,
+// `flexRender`, the row-model builders, and the type re-exports — was unused by any consumer;
+// import TanStack directly for those).
+export { createColumnHelper } from '@tanstack/react-table'

package/src/data/virtual-list.tsx

@@ -5,7 +5,7 @@
  * set by ./agent-chat's virtualize mode (see ./data/index.ts), so do not lower it.
  *
  * @example
- * import { BasaltVirtualList } from 'basalt-ui/data'
+ * import { BasaltVirtualList } from 'basalt-ui/data/virtual'
  *
  * const items = Array.from({ length: 10_000 }, (_, i) => ({ id: i, label: `Row ${i}` }))
  * <BasaltVirtualList

package/src/data/virtual.ts

@@ -3,10 +3,10 @@
  * rendered with a Mantine Box scroll container.
  *
  * Optional peer: @tanstack/react-virtual >=3.13.26 <4. This list works on any 3.x — the floor is
- * set by ./agent-chat's virtualize mode (see ./data/index.ts), so do not lower it.
+ * set by ./agent-chat's virtualize mode, so do not lower it.
  *
- * Use this fine subpath instead of the `./data` barrel when your app only needs the virtual list
- * — it does NOT value-import @tanstack/react-table, so the data-table peer is never required.
+ * This subpath does NOT value-import @tanstack/react-table, so the data-table peer is never
+ * required — use `./data/table` when your app only needs the table.
  *
  * Install with:
  *   bun add @tanstack/react-virtual

package/src/dev-dock.tsx

@@ -0,0 +1,162 @@
+/**
+ * `BasaltDevDock` — a fixed, dev-only bottom drawer hosting the in-app tooling: TanStack Router
+ * devtools, TanStack Query devtools (the embeddable `ReactQueryDevtoolsPanel` — NOT
+ * `BasaltQueryDevtools`, which wraps the floating-button `ReactQueryDevtools` and would duplicate
+ * this dock's own chrome), and the theme lab (`basalt-ui/theme-lab`'s `ThemeLabControls`). Ported
+ * from argo's `components/dev-dock.tsx` (91 lines) — same three-tool shape, same "only renders the
+ * ACTIVE panel" contract: the launcher (which tool is open) lives wherever the consumer puts it —
+ * a `SettingsMenuItem` per tool with `active` set to the currently-open one (C5's
+ * `SettingsMenuItem.active`) is the seeded pattern — this component owns only the render.
+ *
+ * Every dependency is an OPTIONAL peer, loaded lazily so importing (or even rendering, with
+ * `tool={null}`) this module never requires `@tanstack/react-router-devtools`,
+ * `@tanstack/react-query-devtools` or `@tanstack/react-router` unless a consumer actually opens
+ * that tool — same discipline as `BasaltQueryDevtools` (`query-devtools.tsx`) and
+ * `ThemeLabControls`'s own `React.lazy` wrapper here. In production this returns `null`
+ * immediately, before any dynamic import fires.
+ *
+ * @example
+ * import { BasaltDevDock, type BasaltDevDockTool } from 'basalt-ui'
+ * import { useState } from 'react'
+ * import { useRouter } from '@tanstack/react-router'
+ *
+ * function DevTools() {
+ *   const [tool, setTool] = useState<BasaltDevDockTool | null>(null)
+ *   const router = useRouter()
+ *   return <BasaltDevDock tool={tool} onClose={() => setTool(null)} router={router} />
+ * }
+ * // wire the launchers as settings-menu entries with `active: tool === 'router'` etc.
+ */
+import { lazy, Suspense } from 'react'
+import type { ReactNode } from 'react'
+import { Box, CloseButton, Flex, Group, Text } from '@mantine/core'
+import type { BasaltProps } from './common/props'
+import type { ThemeLabControlsProps } from './theme-lab'
+
+/** Which panel is open. `null` renders nothing (the dock is unmounted, not hidden). */
+export type BasaltDevDockTool = 'router' | 'query' | 'theme'
+
+const TOOL_TITLE: Record<BasaltDevDockTool, string> = {
+  router: 'Router Devtools',
+  query: 'Query Devtools',
+  theme: 'Theme Lab',
+}
+
+// Any non-null object — avoids a hard, eager type dependency on `@tanstack/react-router` for a
+// consumer who never renders the `'router'` tool, while still accepting a REAL `Router` class
+// instance with no cast. A narrower structural type (matching a `Router` field, or falling back
+// to `Record<string, unknown>`) used to reject that instance under TS weak-type detection: a
+// class instance declares no index signature, so it has no excess-property overlap with either
+// branch. `TanStackRouterDevtoolsPanel` itself takes the real (much wider) `AnyRouter` type; the
+// devtools panel is the only reader of this prop, so `object` is exactly as wide as it needs to be.
+type DevDockRouter = object
+
+const LazyRouterDevtoolsPanel = lazy(() =>
+  import('@tanstack/react-router-devtools').then((m) => ({
+    default: m.TanStackRouterDevtoolsPanel,
+  })),
+)
+Object.assign(LazyRouterDevtoolsPanel, { displayName: 'LazyRouterDevtoolsPanel' })
+
+// The embeddable PANEL, not `ReactQueryDevtools` (`BasaltQueryDevtools`'s own wrapped export) —
+// that one renders its own floating trigger button + auto-popup shell, which would duplicate the
+// dock's own chrome. `query-devtools.tsx`'s `BasaltQueryDevtools` stays the answer for a consumer
+// who wants the traditional floating-button devtools instead of a dock tab.
+const LazyQueryDevtoolsPanel = lazy(() =>
+  import('@tanstack/react-query-devtools').then((m) => ({ default: m.ReactQueryDevtoolsPanel })),
+)
+Object.assign(LazyQueryDevtoolsPanel, { displayName: 'LazyQueryDevtoolsPanel' })
+
+const LazyThemeLabControls = lazy(() =>
+  import('./theme-lab').then((m) => ({ default: m.ThemeLabControls })),
+)
+Object.assign(LazyThemeLabControls, { displayName: 'LazyThemeLabControls' })
+
+export type BasaltDevDockProps = BasaltProps & {
+  /** Which panel to show. `null` renders nothing. */
+  tool: BasaltDevDockTool | null
+  /** Called when the dock's own close button fires, or a hosted panel asks to close itself
+   * (the router devtools' own `setIsOpen`, the query devtools' own `onClose`). */
+  onClose: () => void
+  /** The active TanStack `Router` instance — required only to render the `'router'` tool; a
+   * consumer that never opens it may omit this entirely. */
+  router?: DevDockRouter
+  /** Forwarded to the hosted `ThemeLabControls` (icons, the copy callback — see its own props). */
+  themeLab?: ThemeLabControlsProps
+}
+
+/**
+ * Lazy, production-excluded dock. Safe to mount unconditionally with `tool={null}` — the dynamic
+ * imports for whichever peer a tool needs only fire once that tool is actually selected, and
+ * never at all in production.
+ */
+export function BasaltDevDock({
+  tool,
+  onClose,
+  router,
+  themeLab,
+  className,
+  style,
+}: BasaltDevDockProps): ReactNode {
+  if (process.env['NODE_ENV'] === 'production') return null
+  if (tool === null) return null
+
+  return (
+    <Flex
+      direction="column"
+      {...(className !== undefined && { className })}
+      style={{
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: '42vh',
+        zIndex: 400,
+        background: 'var(--mantine-color-body)',
+        borderTop: '1px solid var(--mantine-color-default-border)',
+        // Floating tier: a fixed dock sits above the page like a menu/drawer, so it takes
+        // basalt's overlay depth token rather than Mantine's raw shadow ramp.
+        boxShadow: 'var(--vx-shadow-overlay)',
+        ...style,
+      }}
+    >
+      <Group
+        justify="space-between"
+        px="sm"
+        py={6}
+        style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}
+      >
+        <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+          {TOOL_TITLE[tool]}
+        </Text>
+        <CloseButton size="sm" onClick={onClose} aria-label="Close devtools" />
+      </Group>
+      {/* theme-allow raw-scroll-container — hosts third-party devtools panels sized to
+          height: 100%; they need a real overflow ancestor, not ScrollArea's custom viewport. */}
+      <Box style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
+        <Suspense fallback={null}>
+          {tool === 'router' && router !== undefined && (
+            <LazyRouterDevtoolsPanel
+              // The devtools panel's own `router` prop takes the real `AnyRouter` type;
+              // `DevDockRouter` is deliberately the widest structural stand-in (`object`) so this
+              // module never eagerly imports the router's types.
+              // oxlint-disable-next-line typescript/no-explicit-any -- see above
+              router={router as any}
+              isOpen
+              setIsOpen={onClose}
+              style={{ height: '100%' }}
+            />
+          )}
+          {tool === 'query' && (
+            <LazyQueryDevtoolsPanel onClose={onClose} style={{ height: '100%' }} />
+          )}
+          {tool === 'theme' && (
+            <Box p="md">
+              <LazyThemeLabControls {...themeLab} />
+            </Box>
+          )}
+        </Suspense>
+      </Box>
+    </Flex>
+  )
+}