@estiva-app/ui 0.1.0 → 0.3.0

package/src/Toast.mdx

@@ -0,0 +1,54 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ToastStories from './Toast.stories'
+
+<Meta of={ToastStories} />
+
+# Toast
+
+A pill that says what just happened — three types, an optional leading
+check, an optional action — and **ToastProvider**/**useToast**, which own
+the positioning (bottom-left), the portal, and the auto-dismiss.
+
+<Canvas of={ToastStories.AllTypes} />
+
+## When
+
+- Confirming an action's outcome, briefly: "Created", "Link copied",
+  "Changes saved".
+- `actionLabel` + `onAction` add the one follow-up worth offering — an
+  "Undo", a "View".
+- `neutral` states, `success` celebrates, `brand` speaks with the
+  accent's voice.
+
+<Canvas of={ToastStories.WithAction} />
+
+## When not
+
+- Something the person must read or act on → put it in the surface; a
+  toast dismisses itself.
+- A question before the action → **ConfirmDialog**.
+- Standing status → a Chip or your surface's own chrome.
+
+## How
+
+```tsx
+import { ToastProvider, useToast } from '@estiva-app/ui'
+
+// once, at the root
+<ToastProvider>{app}</ToastProvider>
+
+// anywhere below it
+const { showToast } = useToast()
+showToast({ label: 'Link copied', type: 'success' })
+```
+
+- **One toast at a time** — a new one replaces the standing one; nothing
+  queues.
+- Auto-dismiss is 5s; `durationMs: 0` keeps one up until replaced or
+  dismissed (`dismissToast`).
+- `useToast` outside a provider throws — mount the provider at the root,
+  once.
+
+## Props
+
+<Controls of={ToastStories.Neutral} />

package/src/Toast.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Button } from './Button'
+import { Toast, ToastProvider, useToast } from './Toast'
+
+/** The pill that confirms something happened. Positioning and auto-dismiss live in ToastProvider. */
+const meta = {
+  title: 'Feedback/Toast',
+  component: Toast,
+  args: {
+    label: 'Changes saved',
+    type: 'neutral',
+    leadingIcon: true,
+  },
+  argTypes: {
+    type: { control: 'inline-radio', options: ['success', 'brand', 'neutral'] },
+    onAction: { control: false },
+  },
+} satisfies Meta<typeof Toast>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Neutral: Story = {}
+
+export const Success: Story = {
+  args: { type: 'success', label: 'Upload complete' },
+}
+
+export const Brand: Story = {
+  args: { type: 'brand', label: 'Session started' },
+}
+
+/** With a right-side action. */
+export const WithAction: Story = {
+  args: {
+    type: 'neutral',
+    label: 'Item removed',
+    actionLabel: 'Undo',
+    onAction: () => {},
+  },
+}
+
+export const NoIcon: Story = {
+  args: { leadingIcon: false, label: 'Copied to clipboard' },
+}
+
+/** All three surfaces, with and without an action. */
+export const AllTypes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col items-start gap-2">
+      {(['success', 'brand', 'neutral'] as const).map((type) => (
+        <div key={type} className="flex items-center gap-2">
+          <Toast type={type} label="Changes saved" />
+          <Toast type={type} label="Changes saved" actionLabel="Undo" onAction={() => {}} />
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+function ProviderDemo() {
+  const { showToast } = useToast()
+  return (
+    <div className="flex items-center gap-2">
+      <Button variant="muted" onClick={() => showToast({ label: 'Changes saved' })}>
+        Show a toast
+      </Button>
+      <Button
+        variant="muted"
+        onClick={() => showToast({ label: 'Item removed', actionLabel: 'Undo', onAction: () => {} })}
+      >
+        With an action
+      </Button>
+    </div>
+  )
+}
+
+/** The provider in motion: bottom-left, gone after 5 s, a new toast replaces the standing one. */
+export const FromTheProvider: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ToastProvider>
+      <ProviderDemo />
+    </ToastProvider>
+  ),
+}

package/src/Toast.tsx

@@ -0,0 +1,169 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { IconCircleCheck } from '@tabler/icons-react'
+import { cn } from './cn'
+
+/**
+ * Peek's Toast (Figma: Alert) and its provider (2026-09-01), verbatim.
+ *
+ * The pill: three types — `success`, `brand`, `neutral` — an optional leading
+ * circle-check, an optional action on the right. Under Signal every toast is
+ * the same dark overlay pill; the type lives in the icon's colour and glow,
+ * not the surface.
+ *
+ * The provider owns positioning (bottom-left), the portal, and auto-dismiss
+ * (5 s; pass `durationMs: 0` to keep one up). One toast at a time — a new
+ * one replaces the standing one, it does not queue.
+ */
+export type ToastType = 'success' | 'brand' | 'neutral'
+
+export interface ToastProps {
+  label: string
+  /** Visual variant per Figma (Alert component): success, brand, or neutral. */
+  type?: ToastType
+  /** Show the leading circle-check icon. Defaults to true. */
+  leadingIcon?: boolean
+  /** When set together with onAction, renders a clickable action on the right side. */
+  actionLabel?: string
+  onAction?: () => void
+  className?: string
+}
+
+// Signal: every toast is the same dark overlay pill (v3) — the type lives in
+// the icon color + glow, not the surface.
+const SURFACE_BY_TYPE: Record<ToastType, string> = {
+  success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+  brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+  neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+}
+
+const ICON_BY_TYPE: Record<ToastType, string> = {
+  success: 'signal:text-success-default signal:drop-shadow-[0_0_5px_rgba(63,222,140,0.7)]',
+  brand: 'signal:text-text-interactive signal:drop-shadow-[0_0_5px_rgba(86,200,255,0.6)]',
+  neutral: 'signal:text-text-secondary',
+}
+
+const ACTION_BORDER_BY_TYPE: Record<ToastType, string> = {
+  success: 'signal:border signal:border-border-default signal:hover:border-border-strong',
+  brand: 'signal:border signal:border-border-default signal:hover:border-border-strong',
+  neutral: 'border border-border-default',
+}
+
+export function Toast({ label, type = 'neutral', leadingIcon = true, actionLabel, onAction, className }: ToastProps) {
+  const hasAction = !!(actionLabel && onAction)
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center min-h-[32px] pl-2 py-1 rounded-lg shadow-lg',
+        // Without an action the label needs real right padding; the action
+        // button brings its own edge, so the tight pr-1 only applies there.
+        hasAction ? 'pr-1 gap-[46px]' : 'pr-3',
+        SURFACE_BY_TYPE[type],
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2 shrink-0">
+        {leadingIcon && (
+          <IconCircleCheck size={16} stroke={1.5} className={cn('text-text-primary shrink-0', ICON_BY_TYPE[type])} />
+        )}
+        <span className="font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap">{label}</span>
+      </div>
+      {hasAction && (
+        <button
+          type="button"
+          onClick={onAction}
+          className={cn(
+            'h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors',
+            ACTION_BORDER_BY_TYPE[type],
+            type === 'neutral' ? 'hover:border-border-strong' : 'hover:opacity-80',
+          )}
+        >
+          <span className="font-medium text-[12px] leading-[12px] text-text-primary whitespace-nowrap">{actionLabel}</span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+export interface ToastOptions {
+  label: string
+  /** Visual variant per Figma (Alert component). Defaults to 'neutral'. */
+  type?: ToastType
+  /** When set, renders a clickable action on the right side. */
+  actionLabel?: string
+  onAction?: () => void
+  /** Show the leading circle-check icon. Defaults to true. */
+  leadingIcon?: boolean
+  /** Auto-dismiss after this many ms. Defaults to 5000. Pass 0 to disable. */
+  durationMs?: number
+}
+
+interface ActiveToast extends ToastOptions {
+  id: number
+}
+
+interface ToastValue {
+  showToast: (opts: ToastOptions) => void
+  dismissToast: () => void
+}
+
+const ToastContext = createContext<ToastValue | null>(null)
+
+let toastSeq = 0
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toast, setToast] = useState<ActiveToast | null>(null)
+
+  const showToast = useCallback((opts: ToastOptions) => {
+    setToast({ ...opts, id: ++toastSeq })
+  }, [])
+
+  const dismissToast = useCallback(() => {
+    setToast(null)
+  }, [])
+
+  useEffect(() => {
+    if (!toast) return
+    const duration = toast.durationMs ?? 5000
+    if (duration <= 0) return
+    const timer = setTimeout(() => {
+      setToast((current) => (current?.id === toast.id ? null : current))
+    }, duration)
+    return () => clearTimeout(timer)
+  }, [toast])
+
+  const value = useMemo<ToastValue>(() => ({ showToast, dismissToast }), [showToast, dismissToast])
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {toast &&
+        createPortal(
+          <div className="fixed bottom-4 left-4 z-[100] pointer-events-none">
+            <Toast
+              className="pointer-events-auto"
+              label={toast.label}
+              type={toast.type ?? 'neutral'}
+              leadingIcon={toast.leadingIcon ?? true}
+              actionLabel={toast.actionLabel}
+              onAction={
+                toast.onAction
+                  ? () => {
+                      toast.onAction?.()
+                      dismissToast()
+                    }
+                  : undefined
+              }
+            />
+          </div>,
+          document.body,
+        )}
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast(): ToastValue {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used within ToastProvider')
+  return ctx
+}

package/src/Tooltip.mdx

@@ -0,0 +1,51 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as TooltipStories from './Tooltip.stories'
+
+<Meta of={TooltipStories} />
+
+# Tooltip
+
+A 30px elevated pill with a caption, and **WithTooltip**, the wrapper that
+shows it above or below a trigger on hover — portalled, fixed to the
+viewport, kept 8px inside its edges.
+
+<Canvas of={TooltipStories.OnHoverTop} />
+
+## When
+
+- The reason a control is disabled — a disabled control explains itself
+  ("Available after sign-in"); this is the rule that an action appears
+  only where it can succeed.
+- The word for an icon-only control — alongside its `aria-label`, never
+  instead of it (IconButton wires this for you via its `tooltip` prop).
+- The full text behind a truncation.
+
+<Canvas of={TooltipStories.OnADisabledControl} />
+
+## When not
+
+- Anything the person must read to proceed → put it in the surface, not
+  behind a hover.
+- Anything interactive inside → **Menu** or **DialogShell**; a tooltip is
+  `pointer-events: none` by design.
+
+## How
+
+```tsx
+import { WithTooltip } from '@estiva-app/ui'
+
+<WithTooltip label="Available after sign-in">
+  <Button disabled>Publish</Button>
+</WithTooltip>
+```
+
+- Wrap a **control, never a block** — the wrapper is `inline-flex` and
+  shrinks nothing, so a wrapped block collapses to its content width.
+- A truncating label keeps truncating if you pass
+  `wrapperClassName="min-w-0 shrink"`.
+- It shows on **hover only** — there is no focus or touch trigger. Don't
+  put anything behind it that a keyboard user must reach.
+
+## Props
+
+<Controls of={TooltipStories.Default} />

package/src/Tooltip.tsx

@@ -27,13 +27,15 @@ export function Tooltip({ label, className }: TooltipProps) {
 export interface WithTooltipProps {
   label: string
   placement?: 'top' | 'bottom'
+  /** Extra classes on the wrapper — e.g. `min-w-0 shrink` so a truncating label keeps truncating inside it. */
+  wrapperClassName?: string
   children: ReactNode
 }
 
 const GAP = 6
 const VIEWPORT_PAD = 8
 
-export function WithTooltip({ label, placement = 'top', children }: WithTooltipProps) {
+export function WithTooltip({ label, placement = 'top', wrapperClassName, children }: WithTooltipProps) {
   const [show, setShow] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)
@@ -56,7 +58,7 @@ export function WithTooltip({ label, placement = 'top', children }: WithTooltipP
   }, [show, reposition])
 
   return (
-    <div ref={ref} className="inline-flex shrink-0" onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
+    <div ref={ref} className={cn('inline-flex shrink-0', wrapperClassName)} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
       {children}
       {show &&
         createPortal(

package/src/TopBar.mdx

@@ -0,0 +1,62 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as TopBarStories from './TopBar.stories'
+
+<Meta of={TopBarStories} />
+
+# TopBar
+
+The 52px top bar: `menu` and `logo` on the left, a `search` slot in the
+centre, the identity cluster on the right. Two manners — **`solid`**, in
+flow with a hairline and a surface, and **`floating`**, an overlay with
+neither, whose bar ignores the pointer so the content underneath stays
+reachable.
+
+<Canvas of={TopBarStories.Solid} />
+
+<Canvas of={TopBarStories.Floating} />
+
+## When
+
+- **`solid`** — the structured frame's first row, above the sidebar
+  (AppShell's `solid` variant wires exactly this).
+- **`floating`** — an app whose content runs to the top edge; the bar
+  floats over it and only its clusters catch clicks (AppShell's
+  `floating` variant).
+- `menu` is the menu button, in an app whose navigation collapses — the
+  collapsing itself stays the caller's. `logo` sits beside it: the app's
+  name as text, or a mark.
+- The `search` slot holds its place even while empty, so a search field
+  drops in later without moving anything.
+
+<Canvas of={TopBarStories.FloatingNoSearch} />
+
+## When not
+
+- Page-level headers inside the content → not this; this is the frame's
+  bar, once per app.
+- Anything the bar would need to know — who you are, what is searched —
+  stays outside: pass composed slots.
+
+## How
+
+```tsx
+import { TopBar, IdentityMenu, SearchInput } from '@estiva-app/ui'
+
+<TopBar
+  logo="Estiva"
+  search={<SearchInput shortcut="⌘ K" className="w-[290px]" />}
+  right={<IdentityMenu me={me} signedIn={signedIn} />}
+/>
+```
+
+- Geometry is fixed: 52px, `pl-5 pr-[26px]`, right cluster `gap-[6px]` —
+  don't restyle it per app.
+- In `floating`, a launcher-affordance search is the caller's trick: keep
+  the input `pointer-events-none` and open the launcher from a wrapper's
+  `mousedown` (see SearchInput's page).
+- The frame is desktop-only for now — there is no narrow-screen
+  behaviour; the menu button collapses panels, it does not open a drawer.
+
+## Props
+
+<Controls of={TopBarStories.Solid} />

package/src/TopBar.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconMenu2 } from '@tabler/icons-react'
+import type { ReactNode } from 'react'
+import { IconButton } from './IconButton'
+import { PersonTrigger } from './PersonTrigger'
+import { SearchInput } from './SearchInput'
+import { TopBar } from './TopBar'
+
+/**
+ * The bar needs its full width, and it needs content to stand against:
+ * the solid manner sits above its content, the floating manner floats
+ * over it — no border, no background, clicks passing through.
+ */
+const meta = {
+  title: 'Frame/TopBar',
+  component: TopBar,
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['solid', 'floating'] },
+    menu: { control: false },
+    logo: { control: false },
+    search: { control: false },
+    right: { control: false },
+  },
+} satisfies Meta<typeof TopBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const face = <PersonTrigger name="Ana Duarte" />
+const menuButton = (
+  <IconButton tooltip="Toggle menu" tooltipPlacement="bottom" aria-label="Toggle menu">
+    <IconMenu2 size={16} stroke={1.5} />
+  </IconButton>
+)
+
+/** Solid sits above its content: bar first, page below. */
+const Below = ({ children }: { children: ReactNode }) => (
+  <div className="flex h-40 flex-col overflow-hidden bg-bg-base">
+    {children}
+    <div className="flex flex-1 items-center justify-center text-body-2 text-text-muted">content below the bar</div>
+  </div>
+)
+
+/** Floating stands over its content: the page runs to the top edge underneath. */
+const Behind = ({ children }: { children: ReactNode }) => (
+  <div className="relative h-40 overflow-hidden bg-bg-base">
+    {children}
+    <div className="flex h-full items-center justify-center pt-6 text-body-2 text-text-muted">content under the bar</div>
+  </div>
+)
+
+/** The in-flow manner: hairline, surface, the name on the left. */
+export const Solid: Story = {
+  render: (args) => (
+    <Below>
+      <TopBar {...args} logo="Estiva" search={<SearchInput shortcut="⌘ K" className="w-[290px]" />} right={face} />
+    </Below>
+  ),
+}
+
+/** No search yet: the centre slot holds its place, so it drops in later without moving anything. */
+export const SolidNoSearch: Story = {
+  render: (args) => (
+    <Below>
+      <TopBar {...args} logo="Estiva" right={face} />
+    </Below>
+  ),
+}
+
+/** The overlay manner: no border, no background, and only the clusters catch the pointer. */
+export const Floating: Story = {
+  render: (args) => (
+    <Behind>
+      <TopBar {...args} variant="floating" menu={menuButton} search={<SearchInput shortcut="⌘ K" className="w-[290px]" />} right={face} />
+    </Behind>
+  ),
+}
+
+/** Floating without a search — menu button and identity alone. */
+export const FloatingNoSearch: Story = {
+  render: (args) => (
+    <Behind>
+      <TopBar {...args} variant="floating" menu={menuButton} right={face} />
+    </Behind>
+  ),
+}
+
+/** The menu button and the logo side by side — an app whose rail collapses keeps its name next to the way to collapse it. */
+export const MenuAndLogo: Story = {
+  render: (args) => (
+    <Behind>
+      <TopBar {...args} variant="floating" menu={menuButton} logo="Estiva" right={face} />
+    </Behind>
+  ),
+}

package/src/TopBar.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react'
+import { cn } from './cn'
+
+/**
+ * The 52px top bar, in two manners:
+ *
+ * - `solid` — in flow: a hairline under it, the surface behind it, the
+ *   frame's first row (2026-09-02, verbatim from the structured app; its
+ *   product title moved to the caller).
+ * - `floating` — an overlay: absolute over the content, no border and no
+ *   background, and the bar itself ignores the pointer — only its clusters
+ *   catch clicks, so the content underneath stays reachable (2026-09-02,
+ *   verbatim from the floating app).
+ *
+ * Geometry both apps agreed on before extraction: 52px tall, `pl-5
+ * pr-[26px]`, right cluster `gap-[6px]`. The left region is two slots
+ * side by side — `menu` (the menu button, in an app whose navigation
+ * collapses) and `logo` (the mark or name beside it; Katerina,
+ * 2026-09-02). This component does not know who you are or what is being
+ * searched; it only knows where those go.
+ */
+export interface TopBarProps {
+  variant?: 'solid' | 'floating'
+  /** Far left: the menu button, in an app whose navigation collapses. Stays the caller's — the bar only places it. */
+  menu?: ReactNode
+  /** Beside the menu button: the app's logo mark, or its name as text. */
+  logo?: ReactNode
+  /** The centre: a search field, or a launcher affordance — or nothing; the slot holds its place. */
+  search?: ReactNode
+  /** The right cluster — an `IdentityMenu` and its neighbours. */
+  right?: ReactNode
+  className?: string
+}
+
+export function TopBar({ variant = 'solid', menu, logo, search, right, className }: TopBarProps) {
+  const floating = variant === 'floating'
+  return (
+    <header
+      className={cn(
+        'flex h-[52px] items-center pl-5 pr-[26px]',
+        floating
+          ? 'pointer-events-none absolute left-0 right-0 top-0 z-10'
+          : 'shrink-0 gap-4 border-b border-border-default bg-bg-surface',
+        className,
+      )}
+    >
+      {(menu || logo) && (
+        <div className={cn('flex shrink-0 items-center gap-2', floating && 'pointer-events-auto')}>
+          {menu}
+          {logo && <div className="flex items-center text-body-2-strong text-text-primary">{logo}</div>}
+        </div>
+      )}
+      <div className={cn('flex min-w-0 flex-1 items-center justify-center', floating && 'pointer-events-auto')}>{search}</div>
+      <div className={cn('flex shrink-0 items-center gap-[6px]', floating && 'pointer-events-auto')}>{right}</div>
+    </header>
+  )
+}

package/src/cn.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import preset from '../tailwind-preset.js'
+import { cn, _fontSizeTokens } from './cn'
+
+describe('cn knows the type ramp', () => {
+  it('lists exactly the preset fontSize keys', () => {
+    const presetKeys = Object.keys((preset as { theme: { extend: { fontSize: Record<string, unknown> } } }).theme.extend.fontSize)
+    expect([..._fontSizeTokens].sort()).toEqual([...presetKeys].sort())
+  })
+
+  it('keeps a token size beside a colour — the trap this fix retires', () => {
+    for (const token of _fontSizeTokens) {
+      expect(cn(`text-${token} text-text-primary`)).toBe(`text-${token} text-text-primary`)
+    }
+  })
+
+  it('still resolves conflicts, last one wins', () => {
+    expect(cn('text-body-2', 'text-[12px]')).toBe('text-[12px]')
+    expect(cn('text-[14px]', 'text-caption')).toBe('text-caption')
+    expect(cn('text-body-2', 'text-caption')).toBe('text-caption')
+    expect(cn('text-text-secondary', 'text-text-primary')).toBe('text-text-primary')
+  })
+
+  it('leaves non-ramp text utilities alone', () => {
+    expect(cn('text-left text-body-2 text-text-primary')).toBe('text-left text-body-2 text-text-primary')
+  })
+})

package/src/cn.ts

@@ -1,13 +1,33 @@
 import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
 
 /**
- * Peek's `cn`: clsx for the conditionals, tailwind-merge for the conflicts.
+ * The preset's type ramp, by name, so tailwind-merge can classify the token
+ * classes as sizes. Stock tailwind-merge has never heard of `text-body-2`,
+ * files it under text-COLOUR, and lets `text-text-primary` in the same
+ * merged list knock it out — the trap Katerina's Tabs review confirmed by
+ * measurement (2026-09-01), and the reason shared components used to spell
+ * sizes as arbitrary values. Naming the ramp here retires that rule for
+ * everything using this cn — the package and, since the 2026-09-01 dedupe,
+ * both apps.
  *
- * Remember the pitfall the README records: a custom text-size class in a
- * merged list is dropped when a `text-{colour}` follows it. Inside this
- * package, sizes are arbitrary values (`text-[12px]`), never the token class.
+ * Must match `tailwind-preset.js` `fontSize` key for key; `cn.test.ts`
+ * asserts it (the preset imports node-only modules, so it cannot be
+ * imported here without dragging them into the browser bundle).
  */
+const FONT_SIZE_TOKENS = [
+  'h1', 'h2', 'h3', 'h4', 'h5',
+  'body-1', 'body-2', 'body-2-strong', 'caption', 'menu',
+  'btn-default', 'btn-small', 'input-label', 'input-value', 'input-helper', 'chip',
+]
+
+const twMerge = extendTailwindMerge({
+  extend: { classGroups: { 'font-size': [{ text: FONT_SIZE_TOKENS }] } },
+})
+
+/** Merge class names, last-one-wins on conflicting Tailwind utilities. */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export { FONT_SIZE_TOKENS as _fontSizeTokens }