@olwiba/ui 0.2.22 → 0.2.24

package/package.json

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

package/src/app/AppFooter.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../lib/utils';
+
+export interface AppFooterProps extends HTMLAttributes<HTMLElement> {
+  /** Leading content — a product line, build info, a rotating message. */
+  start?: ReactNode;
+  /** Trailing content — a status pill, version, or a short link row. */
+  end?: ReactNode;
+}
+
+/**
+ * Quiet utility row for signed-in chrome.
+ *
+ * Pass it to `AppShell`'s `footer` slot: it is app chrome, so it lives beside
+ * 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 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 bg-background px-4 py-3 text-xs text-muted-foreground sm:px-6',
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center justify-between gap-3">
+        <div className="min-w-0 font-medium text-foreground">{start ?? children}</div>
+        {end && <div className="flex shrink-0 items-center gap-2">{end}</div>}
+      </div>
+    </footer>
+  );
+}

package/src/app/AppPageHero.tsx

@@ -12,6 +12,15 @@ export interface AppPageHeroProps {
   action?: ReactNode;
   children?: ReactNode;
   compact?: boolean;
+  /**
+   * How the address is drawn.
+   * - `"card"` (default) — a bordered surface that introduces the route.
+   * - `"plain"` — type only. Use when the page content is itself made of
+   *   surfaces: a second card at the top competes with them instead of
+   *   introducing them, and pushes the region that actually does something
+   *   further down the page.
+   */
+  surface?: 'card' | 'plain';
   className?: string;
 }
 
@@ -29,52 +38,96 @@ export function AppPageHero({
   action,
   children,
   compact = false,
+  surface = 'card',
   className,
 }: AppPageHeroProps) {
+  const isPlain = surface === 'plain';
+
   return (
     <section
       className={cn(
-        'relative overflow-hidden rounded-3xl border bg-card/80 p-5 shadow-sm sm:p-6',
-        // The glow blobs are decoration, and `::after` is the section's last
-        // child — so with everything on `z-index: auto` it paints above the
-        // header content and swallows clicks on whatever sits under it. At
-        // narrow widths the action row stacks below the copy, right into the
-        // bottom-left blob, which is how a visible button stops responding.
-        // pointer-events-none keeps them purely visual.
-        'before:pointer-events-none before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl',
-        'after:pointer-events-none after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl',
+        'relative',
+        !isPlain && [
+          'overflow-hidden border bg-card/80 shadow-sm',
+          // Compact is the page-pattern header: same surface and glow, less
+          // bulk, so it introduces a route without eating the fold above dense
+          // content.
+          compact ? 'rounded-2xl p-4 sm:p-5' : 'rounded-3xl p-5 sm:p-6',
+          // The glow blobs are decoration, and `::after` is the section's last
+          // child — so with everything on `z-index: auto` it paints above the
+          // header content and swallows clicks on whatever sits under it. At
+          // narrow widths the action row stacks below the copy, right into the
+          // bottom-left blob, which is how a visible button stops responding.
+          // pointer-events-none keeps them purely visual.
+          'before:pointer-events-none before:absolute before:-right-16 before:-top-16 before:rounded-full before:bg-primary/15 before:blur-3xl',
+          'after:pointer-events-none after:absolute after:left-10 after:rounded-full after:bg-primary/10 after:blur-3xl',
+          compact
+            ? 'before:size-32 after:-bottom-16 after:size-40'
+            : 'before:size-44 after:-bottom-20 after:size-52',
+        ],
         className,
       )}
     >
-      <div className="relative flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex min-w-0 gap-4">
+      <div
+        className={cn(
+          'relative flex flex-col sm:flex-row sm:items-start sm:justify-between',
+          compact ? 'gap-3' : 'gap-5',
+        )}
+      >
+        <div className={cn('flex min-w-0 items-start', compact ? 'gap-3' : 'gap-4')}>
           {Icon && (
-            <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl border bg-background/70 text-primary shadow-sm">
-              <Icon className="size-5" />
+            <div
+              className={cn(
+                'flex shrink-0 items-center justify-center border bg-background/70 text-primary shadow-sm',
+                compact ? 'size-10 rounded-xl' : 'size-12 rounded-2xl',
+              )}
+            >
+              <Icon className={compact ? 'size-4' : 'size-5'} />
             </div>
           )}
-          <div className="min-w-0 space-y-2">
+          <div className={cn('min-w-0', compact ? 'space-y-1' : 'space-y-2')}>
             {eyebrow && (
-              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
+              <p
+                className={cn(
+                  'font-semibold uppercase text-primary/80',
+                  compact
+                    ? 'text-[11px] tracking-[0.18em]'
+                    : 'text-xs tracking-[0.24em]',
+                )}
+              >
                 {eyebrow}
               </p>
             )}
             <h1
               className={cn(
-                'font-semibold tracking-tight',
-                compact ? 'text-2xl' : 'text-3xl sm:text-4xl',
+                // Default leading puts ~4px of half-leading above the cap, so
+                // the title reads as sitting low against a top-aligned icon.
+                'font-semibold leading-tight tracking-tight',
+                compact ? 'text-xl sm:text-2xl' : 'text-3xl sm:text-4xl',
               )}
             >
               {title}
             </h1>
             {description && (
-              <p className="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>
+              // A div, not a p: `description` is a ReactNode, and callers pass
+              // multiple paragraphs. Nesting <p> inside <p> is invalid HTML and
+              // the parser silently unnests it, which breaks hydration.
+              <div
+                className={cn(
+                  'max-w-2xl text-muted-foreground',
+                  compact ? 'text-sm leading-5' : 'text-sm leading-6',
+                )}
+              >
+                {description}
+              </div>
             )}
           </div>
         </div>
-        {action && <div className="relative shrink-0 sm:pt-1">{action}</div>}
+        {action && (
+          <div className={cn('relative shrink-0', !compact && 'sm:pt-1')}>{action}</div>
+        )}
       </div>
-      {children && <div className="relative mt-5">{children}</div>}
+      {children && <div className={cn('relative', compact ? 'mt-4' : 'mt-5')}>{children}</div>}
     </section>
   );
 }

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;
@@ -84,18 +85,54 @@ export type AppShellRenderLink = (props: {
   className?: string;
 }) => ReactNode;
 
+/**
+ * One step in the header location trail. A bare string is a plain label; give
+ * it an `href` to make it walkable. The final crumb is the current route and is
+ * never rendered as a link.
+ */
+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[];
   /** Primary CTA rendered above nav (e.g. "New project", "Quick create") */
   action?: AppShellAction;
   user?: AppShellUser;
-  /** Text shown in the top header bar */
+  /**
+   * Location context shown in the top header bar. This is app chrome, not the
+   * page address — the page (or its page pattern) owns the `<h1>`. Repeating
+   * the page title here prints the same words twice on every route.
+   */
   pageTitle?: string;
-  /** Slot rendered at the start of the top header bar, after the sidebar trigger. */
-  headerStart?: ReactNode;
+  /**
+   * Where the current route sits in the app, e.g.
+   * `[{ label: "Admin", href: "/admin" }, "Users"]`. Rendered as a muted trail
+   * and preferred over `pageTitle` when supplied.
+   */
+  breadcrumbs?: AppShellBreadcrumb[];
+  /**
+   * 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
+   * re-declares it and height-filling pages fight it for the remaining space.
+   */
+  footer?: ReactNode;
   /** Override link rendering for SPA navigation. Defaults to a native <a>. */
   renderLink?: AppShellRenderLink;
   children?: ReactNode;
@@ -112,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';
   /**
@@ -204,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">
@@ -230,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">
@@ -292,6 +337,9 @@ function ShellSidebar({
   collapsible,
   side,
   sidebarPosition,
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
 }: {
   brand: AppShellBrand;
   navItems: AppNavItem[];
@@ -301,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();
@@ -310,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.
@@ -365,7 +419,10 @@ function ShellSidebar({
         </SidebarMenu>
       </SidebarHeader>
 
-      <SidebarContent>
+      <SidebarContent
+        key={`${sidebarContentKey ?? 'default'}-content`}
+        className={sidebarContentClassName}
+      >
         <SidebarGroup>
           <SidebarGroupContent className="flex flex-col gap-2">
             {action && (
@@ -422,7 +479,11 @@ function ShellSidebar({
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter>
+      <SidebarFooter
+        key={`${sidebarContentKey ?? 'default'}-footer`}
+        className={sidebarContentClassName}
+      >
+        {sidebarFooterStart}
         <NavUser user={user} />
       </SidebarFooter>
     </Sidebar>
@@ -431,29 +492,87 @@ function ShellSidebar({
 
 function ShellHeader({
   pageTitle,
+  breadcrumbs,
   headerStart,
   headerEnd,
+  renderLink,
 }: {
-  pageTitle: string;
-  headerStart?: ReactNode;
+  pageTitle?: string;
+  breadcrumbs?: AppShellBreadcrumb[];
+  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.
+  const source: AppShellBreadcrumb[] = breadcrumbs?.length
+    ? breadcrumbs
+    : pageTitle
+      ? [pageTitle]
+      : [];
+  const trail = source.map((crumb) =>
+    typeof crumb === 'string' ? { label: crumb, href: undefined } : crumb,
+  );
+
   return (
     <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>
-        )}
-        <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
-        <h1 className="text-base font-medium">{pageTitle}</h1>
-        {headerEnd && (
-          <div className="ml-auto flex items-center gap-1">
-            {headerEnd}
-          </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" />
+            <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
+              {trail.map((crumb, index) => {
+                const isCurrent = index === trail.length - 1;
+                // The last crumb is where you already are, so it stays inert
+                // even when the consumer hands it an href.
+                const isLink = !isCurrent && Boolean(crumb.href);
+
+                return (
+                  <span
+                    className="flex min-w-0 items-center gap-1.5"
+                    key={`${crumb.label}-${index}`}
+                  >
+                    {index > 0 && (
+                      <span aria-hidden="true" className="text-muted-foreground/60">
+                        /
+                      </span>
+                    )}
+                    {isLink ? (
+                      renderLink({
+                        href: crumb.href as string,
+                        className:
+                          'truncate rounded-sm text-muted-foreground transition-colors hover:text-foreground hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                        children: crumb.label,
+                      })
+                    ) : (
+                      <span
+                        aria-current={isCurrent ? 'page' : undefined}
+                        className={cn(
+                          'truncate',
+                          isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',
+                        )}
+                      >
+                        {crumb.label}
+                      </span>
+                    )}
+                  </span>
+                );
+              })}
+            </nav>
+          </>
         )}
+        {headerEnd && <div className="ml-auto flex items-center gap-1">{headerEnd}</div>}
       </div>
     </header>
   );
@@ -472,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 ──────────────────────────────────────────────────────────────
@@ -482,12 +603,17 @@ export function AppShell({
   navItems = [],
   action,
   user = defaultUser,
-  pageTitle = 'Dashboard',
+  pageTitle,
+  breadcrumbs,
+  footer,
   headerStart,
   headerEnd,
   renderLink = defaultRenderLink,
   collapsible = 'icon',
   sidebarPosition = 'viewport',
+  sidebarContentKey,
+  sidebarContentClassName,
+  sidebarFooterStart,
   side = 'left',
   contentClassName = 'p-6',
   children,
@@ -508,10 +634,31 @@ export function AppShell({
         collapsible={collapsible}
         side={side}
         sidebarPosition={sidebarPosition}
+        sidebarContentKey={sidebarContentKey}
+        sidebarContentClassName={sidebarContentClassName}
+        sidebarFooterStart={sidebarFooterStart}
       />
       <SidebarInset className="overflow-y-auto">
-        <ShellHeader pageTitle={pageTitle} headerStart={headerStart} headerEnd={headerEnd} />
-        <div className={contentClassName}>{children}</div>
+        <ShellHeader
+          pageTitle={pageTitle}
+          breadcrumbs={breadcrumbs}
+          headerStart={headerStart}
+          headerEnd={headerEnd}
+          renderLink={renderLink}
+        />
+        {/* The shell owns the height chain so routes never have to reconstruct
+            it. `grow` fills the shell on a short page, which settles the footer
+            at the bottom; `shrink-0` with an auto basis means a long page keeps
+            its intrinsic height and scrolls instead of spilling over the
+            footer. `flex flex-col` + `min-h-0` is what lets a route opt into
+            filling the leftover height with `flex-1` on its own root.
+
+            This cannot be left to the consumer: a route passing `flex-1` here
+            gets basis 0, which ignores content height entirely. */}
+        <div className={cn('flex min-h-0 grow shrink-0 flex-col', contentClassName)}>
+          {children}
+        </div>
+        {footer && <div className="shrink-0">{footer}</div>}
       </SidebarInset>
     </SidebarProvider>
   );

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>
   );
 }