@olwiba/ui 0.2.23 → 0.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -41,7 +41,6 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@olwiba/dx": "0.0.23",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -65,6 +64,7 @@
     "@content-collections/mdx": "^0.2.2",
     "@olwiba/cn": "0.1.35",
     "@olwiba/docs": "0.1.40",
+    "@olwiba/dx": "0.0.23",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AppFooter.tsx

@@ -17,15 +17,16 @@ export interface AppFooterProps extends HTMLAttributes<HTMLElement> {
  * the page outlet rather than inside a page pattern. Public marketing pages use
  * the full `Footer` instead — this exists so long app pages do not end abruptly.
  *
- * The row owns geometry only. What the slots contain — live status, version,
- * links, product copy — stays with the product.
+ * The row owns its solid chrome surface and geometry so page ambience cannot
+ * bleed through it. What the slots contain — live status, version, links,
+ * product copy — stays with the product.
  */
 export function AppFooter({ start, end, children, className, ...props }: AppFooterProps) {
   return (
     <footer
       {...props}
       className={cn(
-        'border-t px-4 py-3 text-xs text-muted-foreground sm:px-6',
+        'border-t bg-background px-4 py-3 text-xs text-muted-foreground sm:px-6',
         className,
       )}
     >

package/src/app/AppShell.tsx

@@ -8,7 +8,6 @@ import {
   CreditCardIcon,
   LogOutIcon,
   MoreVerticalIcon,
-  PlusCircleIcon,
   SettingsIcon,
 } from 'lucide-react';
 import {
@@ -60,6 +59,8 @@ export interface AppShellUser {
   email: string;
   name?: string;
   avatar?: string;
+  /** Product-owned artwork shown when no avatar image exists. Defaults to the Olwiba bird. */
+  avatarFallback?: ReactNode;
   /** Displayed as a sub-label (e.g. plan tier). */
   plan?: string;
   onSignOut?: () => void;
@@ -91,6 +92,13 @@ export type AppShellRenderLink = (props: {
  */
 export type AppShellBreadcrumb = string | { label: string; href?: string };
 
+export interface AppShellHeaderControls {
+  /** Expands the desktop sidebar or opens its native mobile presentation. */
+  expandSidebar: () => void;
+}
+
+export type AppShellHeaderStart = ReactNode | ((controls: AppShellHeaderControls) => ReactNode);
+
 export interface AppShellProps {
   brand?: AppShellBrand;
   navItems?: AppNavItem[];
@@ -109,10 +117,16 @@ export interface AppShellProps {
    * and preferred over `pageTitle` when supplied.
    */
   breadcrumbs?: AppShellBreadcrumb[];
-  /** Slot rendered at the start of the top header bar, after the sidebar trigger. */
-  headerStart?: ReactNode;
+  /**
+   * Slot rendered at the start of the top header bar, after the sidebar trigger.
+   * Use the render form when a custom control needs to expand the shell's own
+   * sidebar without importing its private provider context.
+   */
+  headerStart?: AppShellHeaderStart;
   /** Slot rendered at the end of the top header bar. */
   headerEnd?: ReactNode;
+  /** Product chrome rendered above the user menu in the sidebar footer. */
+  sidebarFooterStart?: ReactNode;
   /**
    * App chrome rendered after the page outlet — normally an `AppFooter`. This
    * belongs to the shell, not to a page pattern: otherwise every route
@@ -135,6 +149,10 @@ export interface AppShellProps {
    * - `"contained"` — fills its parent container; use in docs sandboxes, modals, or embedded previews.
    */
   sidebarPosition?: 'viewport' | 'contained';
+  /** Remount key for an animated sidebar identity or navigation-mode change. */
+  sidebarContentKey?: string;
+  /** Classes applied to the sidebar header, content, and footer. */
+  sidebarContentClassName?: string;
   /** Which side the sidebar sits on. @default "left" */
   side?: 'left' | 'right';
   /**
@@ -227,10 +245,12 @@ function NavUser({ user }: { user: AppShellUser }) {
               <Avatar mode={avatarMode} size="sm">
                 {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
                 <AvatarFallback className="text-white" style={identityTint}>
-                  <BirdIcon
-                    aria-hidden
-                    className="size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
-                  />
+                  {user.avatarFallback ?? (
+                    <BirdIcon
+                      aria-hidden
+                      className="size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                    />
+                  )}
                 </AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
@@ -253,10 +273,12 @@ function NavUser({ user }: { user: AppShellUser }) {
                 <Avatar mode={avatarMode} size="sm">
                   {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
                   <AvatarFallback className="text-white" style={identityTint}>
-                    <BirdIcon
-                      aria-hidden
-                      className="size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
-                    />
+                    {user.avatarFallback ?? (
+                      <BirdIcon
+                        aria-hidden
+                        className="size-5 drop-shadow-[0_1px_1px_rgb(0_0_0/0.3)]"
+                      />
+                    )}
                   </AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
@@ -315,6 +337,9 @@ function ShellSidebar({
   collapsible,
   side,
   sidebarPosition,
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
 }: {
   brand: AppShellBrand;
   navItems: AppNavItem[];
@@ -324,6 +349,9 @@ function ShellSidebar({
   collapsible: 'icon' | 'offcanvas' | 'none';
   side: 'left' | 'right';
   sidebarPosition: 'viewport' | 'contained';
+  sidebarContentKey?: string;
+  sidebarContentClassName?: string;
+  sidebarFooterStart?: ReactNode;
 }) {
   const fallbackLogo = typeof brand.name === 'string' ? brand.name.slice(0, 1).toUpperCase() : null;
   const { isMobile, setOpenMobile } = useSidebar();
@@ -333,7 +361,10 @@ function ShellSidebar({
 
   return (
     <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
-      <SidebarHeader className="py-3">
+      <SidebarHeader
+        key={`${sidebarContentKey ?? 'default'}-header`}
+        className={cn('py-3', sidebarContentClassName)}
+      >
         <SidebarMenu>
           <SidebarMenuItem onClickCapture={closeMobileMenu}>
             {/* Not a link, and not a button.
@@ -388,7 +419,10 @@ function ShellSidebar({
         </SidebarMenu>
       </SidebarHeader>
 
-      <SidebarContent>
+      <SidebarContent
+        key={`${sidebarContentKey ?? 'default'}-content`}
+        className={sidebarContentClassName}
+      >
         <SidebarGroup>
           <SidebarGroupContent className="flex flex-col gap-2">
             {action && (
@@ -445,7 +479,11 @@ function ShellSidebar({
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter>
+      <SidebarFooter
+        key={`${sidebarContentKey ?? 'default'}-footer`}
+        className={sidebarContentClassName}
+      >
+        {sidebarFooterStart}
         <NavUser user={user} />
       </SidebarFooter>
     </Sidebar>
@@ -461,10 +499,18 @@ function ShellHeader({
 }: {
   pageTitle?: string;
   breadcrumbs?: AppShellBreadcrumb[];
-  headerStart?: ReactNode;
+  headerStart?: AppShellHeaderStart;
   headerEnd?: ReactNode;
   renderLink: AppShellRenderLink;
 }) {
+  const { isMobile, setOpen, setOpenMobile } = useSidebar();
+  const expandSidebar = useCallback(() => {
+    if (isMobile) setOpenMobile(true);
+    else setOpen(true);
+  }, [isMobile, setOpen, setOpenMobile]);
+  const headerStartContent =
+    typeof headerStart === 'function' ? headerStart({ expandSidebar }) : headerStart;
+
   // App chrome states location, the page states its own name. This used to be
   // an <h1>, which meant every page rendering its own heading shipped two of
   // them and printed the same words twice.
@@ -481,11 +527,7 @@ function ShellHeader({
     <header className="flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <SidebarTrigger className="-ml-1" />
-        {headerStart && (
-          <div className="flex items-center gap-1">
-            {headerStart}
-          </div>
-        )}
+        {headerStartContent && <div className="flex items-center gap-1">{headerStartContent}</div>}
         {trail.length > 0 && (
           <>
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
@@ -530,11 +572,7 @@ function ShellHeader({
             </nav>
           </>
         )}
-        {headerEnd && (
-          <div className="ml-auto flex items-center gap-1">
-            {headerEnd}
-          </div>
-        )}
+        {headerEnd && <div className="ml-auto flex items-center gap-1">{headerEnd}</div>}
       </div>
     </header>
   );
@@ -553,7 +591,9 @@ const defaultUser: AppShellUser = {
 };
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
-  <a href={href} className={className}>{children}</a>
+  <a href={href} className={className}>
+    {children}
+  </a>
 );
 
 // ─── Main export ──────────────────────────────────────────────────────────────
@@ -571,6 +611,9 @@ export function AppShell({
   renderLink = defaultRenderLink,
   collapsible = 'icon',
   sidebarPosition = 'viewport',
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
   side = 'left',
   contentClassName = 'p-6',
   children,
@@ -591,6 +634,9 @@ export function AppShell({
         collapsible={collapsible}
         side={side}
         sidebarPosition={sidebarPosition}
+        sidebarContentKey={sidebarContentKey}
+        sidebarContentClassName={sidebarContentClassName}
+        sidebarFooterStart={sidebarFooterStart}
       />
       <SidebarInset className="overflow-y-auto">
         <ShellHeader

package/src/app/EmptyState.tsx

@@ -7,28 +7,79 @@ import { cn } from '@olwiba/cn';
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   icon?: LucideIcon;
   title: string;
-  description?: string;
+  description?: React.ReactNode;
+  eyebrow?: React.ReactNode;
   action?: React.ReactNode;
+  secondaryAction?: React.ReactNode;
+  /** Adds the application-card surface used for route-level empty states. */
+  variant?: 'plain' | 'card';
+  /** Reduces the card presentation's minimum height and padding. */
+  compact?: boolean;
+  /** Fills a flex-sized parent rather than using a fixed minimum height. */
+  fill?: boolean;
 }
 
-export function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps) {
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  eyebrow,
+  action,
+  secondaryAction,
+  variant = 'plain',
+  compact = false,
+  fill = false,
+  className,
+  ...props
+}: EmptyStateProps) {
+  const card = variant === 'card';
+
   return (
     <div
-      className={cn('flex flex-col items-center justify-center gap-3 py-12 text-center', className)}
+      className={cn(
+        'relative flex flex-col items-center justify-center overflow-hidden text-center',
+        !card && 'gap-3 py-12',
+        card && 'min-h-72 rounded-xl border border-dashed bg-card/80 p-8 shadow-sm sm:p-10',
+        card && compact && 'min-h-0 p-5 sm:p-6',
+        fill && 'min-h-0 w-full flex-1',
+        className,
+      )}
       {...props}
     >
-      {Icon && (
-        <div className="flex h-12 w-12 items-center justify-center rounded-2xl border bg-muted">
-          <Icon className="size-6 text-muted-foreground" />
-        </div>
+      {card && (
+        <div className="pointer-events-none absolute inset-x-10 top-0 h-24 rounded-full bg-primary/10 blur-3xl" />
       )}
-      <div className="space-y-1">
-        <h3 className="font-semibold">{title}</h3>
-        {description && (
-          <p className="max-w-xs text-sm text-muted-foreground">{description}</p>
+      <div className={cn('relative flex flex-col items-center', card ? 'gap-4' : 'gap-3')}>
+        {Icon && (
+          <div
+            className={cn(
+              'flex size-12 items-center justify-center rounded-2xl border',
+              card ? 'bg-background text-primary shadow-sm' : 'bg-muted text-muted-foreground',
+            )}
+          >
+            <Icon className={card ? 'size-5' : 'size-6'} />
+          </div>
+        )}
+        <div className={cn(card ? 'max-w-md space-y-2' : 'max-w-xs space-y-1')}>
+          {eyebrow && (
+            <p className="text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
+              {eyebrow}
+            </p>
+          )}
+          <h3 className={cn('font-semibold', card && 'text-xl tracking-tight')}>{title}</h3>
+          {description && (
+            <div className={cn('text-sm text-muted-foreground', card && 'leading-6')}>
+              {description}
+            </div>
+          )}
+        </div>
+        {(action || secondaryAction) && (
+          <div className="flex flex-col items-center gap-3 sm:flex-row">
+            {action}
+            {secondaryAction}
+          </div>
         )}
       </div>
-      {action}
     </div>
   );
 }

package/src/blog/PostList.tsx

@@ -9,7 +9,11 @@ export interface PostListProps {
   posts: PostCardProps[];
   renderLink?: AppShellRenderLink;
   emptyMessage?: string;
-  /** Max columns at the widest breakpoint. */
+  /**
+   * Max columns at the widest breakpoint. When omitted, one- and two-post
+   * collections are balanced automatically instead of leaving an empty third
+   * column.
+   */
   columns?: 2 | 3;
   className?: string;
 }
@@ -18,20 +22,29 @@ export function PostList({
   posts,
   renderLink,
   emptyMessage = 'No posts published yet.',
-  columns = 3,
+  columns,
   className,
 }: PostListProps) {
   if (posts.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground italic">{emptyMessage}</p>
-    );
+    return <p className="text-sm text-muted-foreground italic">{emptyMessage}</p>;
   }
 
+  const resolvedColumns = columns ?? (posts.length < 3 ? 2 : 3);
+  const balancedShortListClassName =
+    columns === undefined
+      ? posts.length === 1
+        ? 'mx-auto w-full max-w-md sm:grid-cols-1'
+        : posts.length === 2
+          ? 'mx-auto w-full max-w-3xl'
+          : undefined
+      : undefined;
+
   return (
     <div
       className={cn(
         'grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2',
-        columns === 3 && 'lg:grid-cols-3',
+        resolvedColumns === 3 && 'lg:grid-cols-3',
+        balancedShortListClassName,
         className,
       )}
     >

package/src/components/Chart.tsx

@@ -42,6 +42,27 @@ export interface ChartProps {
   grid?: boolean;
   /** Legend. @default true for multiple series or donut, false for one series */
   legend?: boolean;
+  /**
+   * Stack series instead of overlaying them. Area and bar only — a stacked
+   * line is a shape people misread as absolute values.
+   *
+   * Off by default: stacking answers "what does the total split into", and
+   * silently switching a two-series comparison to it would change what an
+   * existing chart claims.
+   */
+  stacked?: boolean;
+  /**
+   * Formats x-axis ticks. Separate from `valueFormatter`, which formats the
+   * measured value — an axis of ISO dates wants shortening without changing
+   * what the tooltip reports.
+   */
+  xTickFormatter?: (value: string) => string;
+  /**
+   * Fixes the y-axis range. Without it recharts scales to the data, which for
+   * a percentage series makes a 98-100%% band fill the plot and read as
+   * volatility.
+   */
+  yDomain?: [number, number];
   /** Formats values in tooltips and the y-axis, e.g. `(v) => \`$${v}\``. */
   valueFormatter?: (value: number) => string;
   className?: string;
@@ -121,6 +142,9 @@ export function Chart({
   height = 300,
   grid = true,
   legend,
+  stacked = false,
+  xTickFormatter,
+  yDomain,
   valueFormatter = (v) => String(v),
   className,
 }: ChartProps) {
@@ -170,11 +194,12 @@ export function Chart({
       chart = (
         <BarChart data={data} barCategoryGap="25%">
           {gridEl}
-          <XAxis dataKey={xKey} {...axisProps} />
-          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          <XAxis dataKey={xKey} {...axisProps} tickFormatter={xTickFormatter} />
+          <YAxis {...axisProps} width={48} domain={yDomain} tickFormatter={valueFormatter} />
           {tooltip}
           {series.map((s, i) => (
             <Bar
+              stackId={stacked ? 'stack' : undefined}
               key={s.key}
               dataKey={s.key}
               name={s.label ?? s.key}
@@ -189,8 +214,8 @@ export function Chart({
       chart = (
         <AreaChart data={data}>
           {gridEl}
-          <XAxis dataKey={xKey} {...axisProps} />
-          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          <XAxis dataKey={xKey} {...axisProps} tickFormatter={xTickFormatter} />
+          <YAxis {...axisProps} width={48} domain={yDomain} tickFormatter={valueFormatter} />
           {tooltip}
           {series.map((s, i) => (
             <Area
@@ -198,10 +223,16 @@ export function Chart({
               type="monotone"
               dataKey={s.key}
               name={s.label ?? s.key}
+              // One shared id is what makes recharts stack rather than
+              // overlay; undefined leaves the existing behaviour untouched.
+              stackId={stacked ? 'stack' : undefined}
               stroke={seriesColor(s, i)}
               strokeWidth={2}
               fill={seriesColor(s, i)}
-              fillOpacity={0.12}
+              // Overlaid areas must stay translucent so the ones behind show
+              // through. Stacked bands never overlap, and at 0.12 they are too
+              // faint to tell apart.
+              fillOpacity={stacked ? 0.35 : 0.12}
               dot={false}
               activeDot={{ r: 4 }}
             />
@@ -212,8 +243,8 @@ export function Chart({
       chart = (
         <LineChart data={data}>
           {gridEl}
-          <XAxis dataKey={xKey} {...axisProps} />
-          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          <XAxis dataKey={xKey} {...axisProps} tickFormatter={xTickFormatter} />
+          <YAxis {...axisProps} width={48} domain={yDomain} tickFormatter={valueFormatter} />
           {tooltip}
           {series.map((s, i) => (
             <Line

package/src/components/DataTable.tsx

@@ -26,6 +26,23 @@ export interface DataTableProps<TData> {
   onSelectionChange?: (rows: TData[]) => void;
   /** Rows per page. Set to `0` to disable pagination entirely. @default 10 */
   pageSize?: number;
+  /**
+   * Hands pagination to the caller, for data the client does not hold all of.
+   *
+   * With this set, `data` is treated as the current page rather than the whole
+   * set: the table stops slicing, and the footer reports and drives the
+   * caller's page instead of its own. Without it nothing changes — a table
+   * given every row keeps paginating locally, which is right for the common
+   * case and avoids making every consumer implement paging to get a table.
+   */
+  pagination?: {
+    pageIndex: number;
+    /** Total pages. Omit when unknown — the footer then relies on `hasNext`. */
+    pageCount?: number;
+    hasNext?: boolean;
+    hasPrevious?: boolean;
+    onPageChange: (pageIndex: number) => void;
+  };
   /** Slot rendered top-right of the toolbar — e.g. an "Add" button. */
   toolbar?: React.ReactNode;
   onRowClick?: (row: TData) => void;
@@ -66,6 +83,7 @@ export function DataTable<TData>({
   selectable = false,
   onSelectionChange,
   pageSize = 10,
+  pagination,
   toolbar,
   onRowClick,
   emptyMessage = 'No results.',
@@ -94,8 +112,13 @@ export function DataTable<TData>({
     },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    ...(pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {}),
-    initialState: pageSize > 0 ? { pagination: { pageSize } } : undefined,
+    // Server-paginated tables must not slice: `data` is already the page, and
+    // running the client model over it would paginate a single page again.
+    ...(pageSize > 0 && !pagination
+      ? { getPaginationRowModel: getPaginationRowModel() }
+      : {}),
+    ...(pagination ? { manualPagination: true } : {}),
+    initialState: pageSize > 0 && !pagination ? { pagination: { pageSize } } : undefined,
     enableRowSelection: selectable,
   });
 
@@ -107,6 +130,31 @@ export function DataTable<TData>({
 
   const rows = table.getRowModel().rows;
 
+  // One set of derivations so the footer does not branch on `pagination`
+  // three separate times and drift between them.
+  const canPrevious = pagination
+    ? (pagination.hasPrevious ?? pagination.pageIndex > 0)
+    : table.getCanPreviousPage();
+  const canNext = pagination
+    ? (pagination.hasNext ??
+      (pagination.pageCount !== undefined && pagination.pageIndex < pagination.pageCount - 1))
+    : table.getCanNextPage();
+  const goPrevious = () =>
+    pagination ? pagination.onPageChange(pagination.pageIndex - 1) : table.previousPage();
+  const goNext = () =>
+    pagination ? pagination.onPageChange(pagination.pageIndex + 1) : table.nextPage();
+  // A server-paginated table shows its pager whenever paging is possible.
+  // Total pages are often unknown, so "more than one page" is not a question
+  // it can answer up front the way the local model can.
+  const showPager = pagination
+    ? canPrevious || canNext
+    : pageSize > 0 && table.getPageCount() > 1;
+  const pageLabel = pagination
+    ? pagination.pageCount !== undefined
+      ? `Page ${pagination.pageIndex + 1} of ${pagination.pageCount}`
+      : `Page ${pagination.pageIndex + 1}`
+    : `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`;
+
   return (
     <div className={cn('space-y-4', className)}>
       {(searchKey || toolbar) && (
@@ -186,19 +234,19 @@ export function DataTable<TData>({
         </Table>
       </div>
 
-      {(selectable || (pageSize > 0 && table.getPageCount() > 1)) && (
+      {(selectable || showPager) && (
         <div className="flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
             {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`}
-            {selectable && pageSize > 0 && table.getPageCount() > 1 && ' · '}
-            {pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
+            {selectable && showPager && ' · '}
+            {showPager && pageLabel}
           </p>
-          {pageSize > 0 && table.getPageCount() > 1 && (
+          {showPager && (
             <div className="flex gap-2">
-              <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+              <Button variant="outline" size="sm" onClick={goPrevious} disabled={!canPrevious}>
                 <ChevronLeft className="size-4" /> Previous
               </Button>
-              <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+              <Button variant="outline" size="sm" onClick={goNext} disabled={!canNext}>
                 Next <ChevronRight className="size-4" />
               </Button>
             </div>