@olwiba/ui 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/app/DataView.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { cn } from '@olwiba/cn';
+import { AppGrid, type AppGridColumns } from '../layout/AppGrid';
+import { DataTable } from '../components/DataTable';
+import type { ViewMode } from '../hooks/use-view-mode';
+
+export interface DataViewProps<TData> {
+  items: TData[];
+  /** Stable key per item. */
+  getRowId: (item: TData) => string;
+  /** Card renderer for the grid view. */
+  renderCard: (item: TData) => React.ReactNode;
+  /** Columns for the list view. */
+  columns: ColumnDef<TData>[];
+  view: ViewMode;
+  /**
+   * False while a persisted preference is still being read. The whole view is
+   * withheld until true — see the note on the component.
+   */
+  ready?: boolean;
+  /** Grid density at the widest breakpoint. Default 3. */
+  gridColumns?: AppGridColumns;
+  gap?: 'none' | 'sm' | 'md' | 'lg';
+  /** Rendered instead of either view when there is nothing to show. */
+  empty?: React.ReactNode;
+  /** Shown while `ready` is false. Defaults to nothing. */
+  placeholder?: React.ReactNode;
+  searchKey?: string;
+  searchPlaceholder?: string;
+  pageSize?: number;
+  emptyMessage?: string;
+  onRowClick?: (row: TData) => void;
+  className?: string;
+}
+
+/**
+ * A collection rendered either as a grid of cards or as a table, from one set
+ * of data.
+ *
+ * Knows nothing about what it is listing: callers supply a card renderer and
+ * table columns. Cards are for "what arrived recently", the table for
+ * comparing many rows at once, and switching between them should not mean two
+ * page implementations that drift apart.
+ *
+ * The `ready` gate is the subtle part, and the reason this is a component
+ * rather than a snippet to copy. A persisted preference cannot be read during
+ * SSR or the first client render, so a page that renders its default
+ * immediately will either mismatch on hydration or visibly flash the wrong
+ * view at anyone who chose the other one. Holding the section until the
+ * preference resolves avoids both, and putting that here means no consumer
+ * has to work it out again.
+ */
+export function DataView<TData>({
+  items,
+  getRowId,
+  renderCard,
+  columns,
+  view,
+  ready = true,
+  gridColumns = 3,
+  gap = 'sm',
+  empty,
+  placeholder = null,
+  searchKey,
+  searchPlaceholder,
+  pageSize = 25,
+  emptyMessage,
+  onRowClick,
+  className,
+}: DataViewProps<TData>) {
+  if (!ready) return <>{placeholder}</>;
+  if (items.length === 0 && empty) return <>{empty}</>;
+
+  if (view === 'list') {
+    return (
+      <DataTable
+        columns={columns}
+        data={items}
+        searchKey={searchKey}
+        searchPlaceholder={searchPlaceholder}
+        pageSize={pageSize}
+        emptyMessage={emptyMessage}
+        onRowClick={onRowClick}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <AppGrid columns={gridColumns} gap={gap} className={cn(className)}>
+      {items.map((item) => (
+        <React.Fragment key={getRowId(item)}>{renderCard(item)}</React.Fragment>
+      ))}
+    </AppGrid>
+  );
+}

package/src/components/MediaCard.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import * as React from 'react';
+import { Card, cn } from '@olwiba/cn';
+
+const bannerAspectClass = {
+  wide: 'aspect-[3/1]',
+  video: 'aspect-video',
+  square: 'aspect-square',
+};
+
+export interface MediaCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Banner rendered above the content, clipped to the card's rounded corners.
+   * A ReactNode rather than a src, so a brand fallback, an inline SVG, a map,
+   * or a plain <img> all work — this is the difference from ImageCard, which
+   * takes a URL and is the right choice when you actually have one.
+   */
+  banner?: React.ReactNode;
+  /** Banner proportions. Default 'wide' (3:1), which suits a header strip. */
+  bannerAspect?: keyof typeof bannerAspectClass;
+  /**
+   * Pinned to the bottom of the card. In a grid this is what keeps the
+   * primary action on a shared baseline across a row, however unevenly the
+   * titles above it wrap.
+   */
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+/**
+ * A Card with an optional banner and a bottom-pinned footer.
+ *
+ * Deliberately knows nothing about what it is showing — the domain-shaped
+ * cards (a property, a monitor, an article) compose this and supply their own
+ * content. It exists because "banner, then content, then an action pinned to
+ * the bottom, all the same height across a row" was being hand-rolled per
+ * product, and the equal-height part in particular is easy to get subtly
+ * wrong.
+ *
+ * `h-full` is on the card itself so a bare `<MediaCard>` inside a grid cell
+ * fills that cell without every caller remembering to ask.
+ */
+export function MediaCard({
+  banner,
+  bannerAspect = 'wide',
+  footer,
+  children,
+  className,
+  ...props
+}: MediaCardProps) {
+  return (
+    <Card
+      className={cn('flex h-full w-full flex-col overflow-hidden', banner && 'pt-0', className)}
+      {...props}
+    >
+      {banner && (
+        <div className={cn('w-full shrink-0 overflow-hidden', bannerAspectClass[bannerAspect])}>
+          {banner}
+        </div>
+      )}
+      <div className="flex flex-1 flex-col gap-3 p-4">
+        {children}
+        {footer && <div className="mt-auto pt-1">{footer}</div>}
+      </div>
+    </Card>
+  );
+}

package/src/components/ViewToggle.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { Button, cn } from '@olwiba/cn';
+import { LayoutGrid, List } from 'lucide-react';
+import type { ViewMode } from '../hooks/use-view-mode';
+
+export interface ViewToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  view: ViewMode;
+  onChange: (view: ViewMode) => void;
+  labels?: { cards?: string; list?: string };
+}
+
+/**
+ * Two-state segmented control for switching a collection between cards and a
+ * list. Controlled — pair it with useViewMode to persist the choice.
+ */
+export function ViewToggle({ view, onChange, labels, className, ...props }: ViewToggleProps) {
+  const options = [
+    { mode: 'cards' as const, label: labels?.cards ?? 'Card view', Icon: LayoutGrid },
+    { mode: 'list' as const, label: labels?.list ?? 'List view', Icon: List },
+  ];
+
+  return (
+    <div
+      className={cn('inline-flex items-center rounded-md border p-0.5', className)}
+      role="group"
+      aria-label="View mode"
+      {...props}
+    >
+      {options.map(({ mode, label, Icon }) => (
+        <Button
+          key={mode}
+          type="button"
+          size="sm"
+          variant={view === mode ? 'secondary' : 'ghost'}
+          className="h-7 px-2"
+          aria-label={label}
+          aria-pressed={view === mode}
+          onClick={() => onChange(mode)}
+        >
+          <Icon className="size-4" />
+        </Button>
+      ))}
+    </div>
+  );
+}

package/src/hooks/use-view-mode.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { useLocalStorage } from './use-local-storage';
+import { useMounted } from './use-mounted';
+
+export type ViewMode = 'cards' | 'list';
+
+export interface UseViewModeReturn {
+  view: ViewMode;
+  setView: (view: ViewMode) => void;
+  /**
+   * False until the stored preference is readable. Render a skeleton or hold
+   * the section until this is true — see the note below on why.
+   */
+  ready: boolean;
+}
+
+/**
+ * Remembered cards/list preference.
+ *
+ * Returns the fallback on the server and on the first client render, then
+ * settles to the stored value once mounted. Returning the stored value
+ * immediately would have the server emit card markup while the client builds
+ * a table — a hydration mismatch — and painting the fallback first flashes
+ * the wrong view at someone who chose the other one. `ready` lets callers
+ * wait for the real answer instead of doing either.
+ *
+ * The key is shared by default so the choice reads as one product-wide
+ * preference: pick list on one page and every page follows. Pass a distinct
+ * key where a page genuinely wants its own.
+ */
+export function useViewMode(key = 'view-mode', fallback: ViewMode = 'cards'): UseViewModeReturn {
+  const [stored, setStored] = useLocalStorage<ViewMode>(key, fallback);
+  const mounted = useMounted();
+  return { view: mounted ? stored : fallback, setView: setStored, ready: mounted };
+}

package/src/index.ts

@@ -128,6 +128,7 @@ export { CommandMenu, type CommandMenuProps, type CommandMenuGroup, type Command
 
 // ─── Components — data ───────────────────────────────────────────────────────
 export { DataTable, type DataTableProps, type DataTableColumn } from './components/DataTable';
+export { DataView, type DataViewProps } from './app/DataView';
 export { Chart, type ChartProps, type ChartSeries } from './components/Chart';
 export { FileUpload, type FileUploadProps, type FileUploadEntry } from './components/FileUpload';
 
@@ -147,6 +148,8 @@ export { StatCard, type StatCardProps } from './components/StatCard';
 export { TestimonialCard, type TestimonialCardProps } from './components/TestimonialCard';
 export { PricingCard, type PricingCardProps, type PricingFeature } from './components/PricingCard';
 export { ImageCard, type ImageCardProps } from './components/ImageCard';
+export { MediaCard, type MediaCardProps } from './components/MediaCard';
+export { ViewToggle, type ViewToggleProps } from './components/ViewToggle';
 
 // ─── Components — diagram ────────────────────────────────────────────────────
 export { FlowConnector, type FlowConnectorProps } from './components/FlowConnector';
@@ -183,5 +186,6 @@ export { useCopyToClipboard } from './hooks/use-copy-to-clipboard';
 export { useDebounce } from './hooks/use-debounce';
 export { useIntersectionObserver } from './hooks/use-intersection-observer';
 export { useLocalStorage } from './hooks/use-local-storage';
+export { useViewMode, type ViewMode, type UseViewModeReturn } from './hooks/use-view-mode';
 export { useMediaQuery } from './hooks/use-media-query';
 export { usePagination, type UsePaginationReturn } from './hooks/use-pagination';

package/src/layout/AppGrid.tsx

@@ -1,29 +1,48 @@
 import React from 'react'
 import { cn } from '../lib/utils'
 
+/**
+ * Responsive ramps per column count. Every ramp starts at a single column —
+ * a card grid that stays multi-column on a phone is unreadable — and adds
+ * columns at breakpoints wide enough to keep each card legible.
+ *
+ * Written out in full rather than composed, because Tailwind scans source for
+ * complete class strings; a template literal like `xl:grid-cols-${n}` produces
+ * nothing at build time.
+ */
 const columnsMap = {
   1: 'grid-cols-1',
-  2: 'grid-cols-1 md:grid-cols-2',
-  3: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3',
-  4: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4',
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
+  6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6',
 }
 
 const gapMap = {
+  none: 'gap-0',
   sm: 'gap-3',
   md: 'gap-4',
   lg: 'gap-6',
 }
 
 const spanMap = {
-  1: 'md:col-span-1',
-  2: 'md:col-span-2',
-  3: 'xl:col-span-3',
+  1: 'sm:col-span-1',
+  2: 'sm:col-span-2',
+  3: 'lg:col-span-3',
   4: 'xl:col-span-4',
   full: 'col-span-full',
 }
 
+export type AppGridColumns = keyof typeof columnsMap
+
 export interface AppGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  columns?: keyof typeof columnsMap
+  /**
+   * Columns at the widest breakpoint. Narrower screens step down through the
+   * ramp automatically, so this is "how dense at full width", not a fixed
+   * count. Default 3.
+   */
+  columns?: AppGridColumns
   gap?: keyof typeof gapMap
 }
 

package/src/layout/index.ts

@@ -7,6 +7,6 @@ export type { SectionProps } from './Section'
 export { AppContent } from './AppContent'
 export type { AppContentProps } from './AppContent'
 export { AppGrid, AppGridCell } from './AppGrid'
-export type { AppGridProps, AppGridCellProps } from './AppGrid'
+export type { AppGridProps, AppGridCellProps, AppGridColumns } from './AppGrid'
 export { PublicPageFrame } from './PublicPageFrame'
 export type { PublicPageFrameProps } from './PublicPageFrame'

package/src/marketing/Navbar.tsx

@@ -31,6 +31,7 @@ export function Navbar({
   const [open, setOpen] = React.useState(false);
   const brandHref = brand.href ?? '/';
   const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
+  const closeMobileMenu = React.useCallback(() => setOpen(false), []);
 
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
@@ -92,7 +93,7 @@ export function Navbar({
           <SheetContent side="left" className="w-72">
             {/* Brand row alone at the top — leaves the top-right corner to the built-in close */}
             <div className="flex items-center pb-4">
-              <span onClick={() => setOpen(false)} className="cursor-pointer">
+              <span onClickCapture={closeMobileMenu} className="cursor-pointer">
                 {renderLink({
                   href: brandHref,
                   children: (
@@ -114,7 +115,7 @@ export function Navbar({
             <Separator />
             <nav className="mt-4 flex flex-col gap-1">
               {navLinks.map((link) => (
-                <span key={link.label} onClick={() => setOpen(false)}>
+                <span key={link.label} onClickCapture={closeMobileMenu}>
                   {renderLink({
                     href: link.href,
                     className: 'block rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
@@ -124,16 +125,22 @@ export function Navbar({
               ))}
             </nav>
             <div className="mt-6 flex flex-col gap-2">
-              {cta?.secondary &&
-                renderLink({
-                  href: cta.secondary.href,
-                  children: <Button variant="outline" className="w-full">{cta.secondary.label}</Button>,
-                })}
-              {cta?.primary &&
-                renderLink({
-                  href: cta.primary.href,
-                  children: <Button className="w-full">{cta.primary.label}</Button>,
-                })}
+              {cta?.secondary && (
+                <span onClickCapture={closeMobileMenu}>
+                  {renderLink({
+                    href: cta.secondary.href,
+                    children: <Button variant="outline" className="w-full">{cta.secondary.label}</Button>,
+                  })}
+                </span>
+              )}
+              {cta?.primary && (
+                <span onClickCapture={closeMobileMenu}>
+                  {renderLink({
+                    href: cta.primary.href,
+                    children: <Button className="w-full">{cta.primary.label}</Button>,
+                  })}
+                </span>
+              )}
             </div>
           </SheetContent>
         </Sheet>

package/src/marketing/PricingSection.tsx

@@ -7,10 +7,37 @@ import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountdownTimer } from '../motion/CountdownTimer';
 import type { AppShellRenderLink } from '../app/AppShell';
 
+/**
+ * One billing period a plan can be bought at.
+ *
+ * Products are not all sold monthly-or-annually: weekly, quarterly, and
+ * one-off all exist. Pass `cadences` to describe whatever this product
+ * actually sells and the section renders a tab per entry, rather than the
+ * fixed Monthly/Annual pair it assumes otherwise.
+ */
+export interface PricingCadence {
+  /** Matches the keys of `PricingPlan.prices`. */
+  key: string;
+  label: string;
+  /**
+   * Billing periods in a year — 52 weekly, 12 monthly, 1 annual. Used only to
+   * compare cadences for the savings badge; omit it and no badge is computed
+   * for this cadence.
+   */
+  periodsPerYear?: number;
+  /** Price suffix, e.g. "/ week". Falls back to `PricingPlan.periodDisplay`. */
+  suffix?: string;
+}
+
 export interface PricingPlan {
   name: string;
   monthly: number;
   annual: number;
+  /**
+   * Price per cadence key, for products using `cadences`. The `monthly` and
+   * `annual` fields above stay as the fallback for callers that don't.
+   */
+  prices?: Record<string, number>;
   description: string;
   cta: string;
   highlighted?: boolean;
@@ -24,6 +51,61 @@ export interface PricingPlan {
   periodDisplay?: string;
 }
 
+/**
+ * Cheapest-per-year wins: annualise every cadence across all plans and return
+ * a `Save N%` label for each one that costs less than the default.
+ *
+ * Computed rather than configured because a hand-written "Save 34%" silently
+ * stops being true the first time a price changes.
+ */
+function computeSaveBadges(
+  plans: PricingPlan[],
+  cadences: PricingCadence[],
+  defaultKey: string,
+): Record<string, string> {
+  const annualised = (key: string) => {
+    const cadence = cadences.find((c) => c.key === key);
+    if (!cadence?.periodsPerYear) return null;
+    // Plans priced by `priceDisplay` (pay-what-you-can, "contact us") carry no
+    // comparable number, so they're left out of the comparison entirely.
+    const totals = plans
+      .filter((plan) => plan.priceDisplay === undefined && plan.prices?.[key] !== undefined)
+      .map((plan) => plan.prices![key]! * cadence.periodsPerYear!);
+    return totals.length > 0 ? totals.reduce((sum, n) => sum + n, 0) : null;
+  };
+
+  const baseline = annualised(defaultKey);
+  if (!baseline) return {};
+
+  const badges: Record<string, string> = {};
+  for (const cadence of cadences) {
+    if (cadence.key === defaultKey) continue;
+    const total = annualised(cadence.key);
+    if (!total || total >= baseline) continue;
+    const percent = Math.round(((baseline - total) / baseline) * 100);
+    if (percent > 0) badges[cadence.key] = `Save ${percent}%`;
+  }
+  return badges;
+}
+
+/**
+ * Column layout for the number of plans actually being shown.
+ *
+ * A fixed three-column grid leaves one or two plans hugging the left edge with
+ * dead space beside them, which reads as a rendering fault rather than a
+ * deliberate layout. Width is capped per count so cards keep a sensible size
+ * instead of stretching to fill.
+ */
+function gridClassesFor(count: number): string {
+  if (count <= 1) return 'mx-auto max-w-sm';
+  if (count === 2) return 'mx-auto max-w-3xl sm:grid-cols-2';
+  if (count === 3) return 'mx-auto max-w-5xl lg:grid-cols-3';
+  if (count === 4) return 'mx-auto max-w-6xl sm:grid-cols-2 lg:grid-cols-4';
+  // Beyond four, wrapping at three keeps each card readable. A carousel is the
+  // answer if a catalogue ever genuinely needs it.
+  return 'mx-auto max-w-5xl sm:grid-cols-2 lg:grid-cols-3';
+}
+
 export interface PricingSectionProps {
   title?: string;
   description?: string;
@@ -41,6 +123,14 @@ export interface PricingSectionProps {
   highlightedBadgeLabel?: string;
   /** Rendered below each plan's CTA button (e.g. a "Get notified" link). */
   renderPlanFooter?: (plan: PricingPlan) => React.ReactNode;
+  /**
+   * Billing periods this product sells at. One entry renders no toggle at all;
+   * two or more render a tab each, with savings badges computed from
+   * `periodsPerYear`. Omit to keep the built-in Monthly/Annual pair.
+   */
+  cadences?: PricingCadence[];
+  /** Which cadence opens selected. Defaults to the first in `cadences`. */
+  defaultCadence?: string;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -61,9 +151,26 @@ export function PricingSection({
   currency = '$',
   highlightedBadgeLabel = 'Founding member',
   renderPlanFooter,
+  cadences,
+  defaultCadence,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
   const isOneTime = mode === 'one-time';
+
+  // Explicit cadences replace the built-in Monthly/Annual pair entirely.
+  const useCadences = !!cadences?.length;
+  const initialCadence =
+    (defaultCadence && cadences?.some((c) => c.key === defaultCadence) ? defaultCadence : null) ??
+    cadences?.[0]?.key ??
+    '';
+  const [activeCadence, setActiveCadence] = React.useState(initialCadence);
+  const cadence = cadences?.find((c) => c.key === activeCadence);
+  const saveBadges = React.useMemo(
+    () => (useCadences ? computeSaveBadges(plans, cadences!, initialCadence) : {}),
+    [useCadences, plans, cadences, initialCadence],
+  );
+  // A single cadence is just a label for the price — nothing to switch between.
+  const showToggle = useCadences ? cadences!.length > 1 : !isOneTime;
   const uiMode = useUIVariant();
   const sectionClasses = cn(
     'overflow-hidden bg-card',
@@ -92,44 +199,80 @@ export function PricingSection({
               </p>
             )}
 
-            {/* Billing toggle — subscription mode only */}
-            {!isOneTime && (
+            {/* Billing toggle: one tab per cadence, or the legacy Monthly/Annual pair */}
+            {showToggle && (
               <div className="mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setAnnual(false)}
-                  className={cn(
-                    'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
-                    !annual ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
-                  )}
-                >
-                  Monthly
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setAnnual(true)}
-                  className={cn(
-                    'flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
-                    annual ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
-                  )}
-                >
-                  Annual
-                  {saveBadge && (
-                    <Badge variant="secondary" className="text-xs">{saveBadge}</Badge>
+                {useCadences
+                  ? cadences!.map((entry) => (
+                      <Button
+                        key={entry.key}
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setActiveCadence(entry.key)}
+                        className={cn(
+                          'flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+                          entry.key === activeCadence
+                            ? 'bg-background text-foreground shadow-sm'
+                            : 'text-muted-foreground hover:text-foreground',
+                        )}
+                      >
+                        {entry.label}
+                        {saveBadges[entry.key] && (
+                          <Badge variant="secondary" className="text-xs">
+                            {saveBadges[entry.key]}
+                          </Badge>
+                        )}
+                      </Button>
+                    ))
+                  : (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setAnnual(false)}
+                        className={cn(
+                          'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+                          !annual ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+                        )}
+                      >
+                        Monthly
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setAnnual(true)}
+                        className={cn(
+                          'flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+                          annual ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+                        )}
+                      >
+                        Annual
+                        {saveBadge && (
+                          <Badge variant="secondary" className="text-xs">{saveBadge}</Badge>
+                        )}
+                      </Button>
+                    </>
                   )}
-                </Button>
               </div>
             )}
           </div>
 
           {/* Plan cards */}
-          <StaggerChildren className="mt-10 grid gap-4 lg:grid-cols-3">
+          <StaggerChildren className={cn('mt-10 grid gap-4', gridClassesFor(plans.length))}>
             {plans.map((plan) => {
-              const rawPrice = isOneTime ? plan.monthly : (annual ? plan.annual : plan.monthly);
+              const rawPrice = useCadences
+                ? (plan.prices?.[activeCadence] ?? plan.monthly)
+                : isOneTime
+                  ? plan.monthly
+                  : annual
+                    ? plan.annual
+                    : plan.monthly;
               const price = plan.priceDisplay ?? `${currency}${rawPrice}`;
-              const period = plan.periodDisplay ?? (isOneTime ? 'one-time' : (rawPrice > 0 ? '/mo' : ''));
+              // With cadences the suffix follows the selected tab, so a plan's
+              // own periodDisplay would pin it to whichever it was written for.
+              const period = useCadences
+                ? (cadence?.suffix ?? plan.periodDisplay ?? '')
+                : (plan.periodDisplay ?? (isOneTime ? 'one-time' : rawPrice > 0 ? '/mo' : ''));
               const badge = plan.highlighted && foundingDeadline
                 ? (
                   <span className="inline-flex items-center rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground">