@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/themes/table.ts

@@ -0,0 +1,34 @@
+/**
+ * Forest theme fragment — UTable (data table, sticky header, loading bar).
+ *
+ * Forest opinions applied:
+ *   - `th`: font-semibold is already stock — we bump it to `font-bold` so column headings read with
+ *     the same confident weight as the rest of the Forest type system, and switch the text role from
+ *     `text-highlighted` to `text-default` to sit one step quieter than page headings while still
+ *     reading clearly. Slight uppercase + tracking gives the table header a structured ops-dashboard
+ *     feel consistent with the Forest label vocabulary.
+ *   - `td`: `text-default` instead of the stock `text-muted` — data cells carry primary content and
+ *     should read at full default weight rather than the slightly dimmed muted role.
+ *   - `tbody`: the selectable-row hover bg is already `bg-elevated/50`; no changes needed.
+ *   - `empty`: align with `text-dimmed` (one step quieter than stock `text-muted`) to visually
+ *     distinguish placeholder copy from real cell content.
+ *
+ * Slots touched: th, td, empty.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/table.ts
+ *
+ * The loading bar colour is driven by the `loadingColor` compoundVariants in the generated theme —
+ * no override needed here; `primary` defaults to the forest ramp via the semantic colour wiring
+ * in docs.css / forest-preset.ts.
+ */
+
+export const tableTheme = {
+  slots: {
+    // font-bold + uppercase tracking — gives column headings a confident, ops-dashboard weight.
+    // text-default sits one step quieter than text-highlighted (stock) without losing legibility.
+    th: 'text-xs font-bold uppercase tracking-wider text-default',
+    // text-default — data is primary content; stock text-muted reads too low for ops data cells.
+    td: 'text-default',
+    // text-dimmed — visually distinct from real data; subtler than stock text-muted placeholder.
+    empty: 'text-dimmed',
+  },
+} as const;

package/packages/ui/src/themes/tabs.ts

@@ -0,0 +1,74 @@
+/**
+ * Forest theme fragment — UTabs (tabbed panels). Deltas only; everything else is inherited from
+ * stock Nuxt UI.
+ *
+ * Forest opinions applied:
+ *   - `trigger`: font-bold (stock font-medium) — one stable weight in every state, so the active tab
+ *     is signalled by the coloured indicator alone, never a weight shift (which would relayout).
+ *     Under a coarse (touch) pointer the trigger grows one size up per the size-variant ladder below.
+ *   - `indicator`: the Forest motion tokens (stock is a flat duration-200).
+ *   - Pill radius (compoundVariants): a CONCENTRIC per-size ladder — the sliding indicator sits on
+ *     the input field's radius (xs/sm 8px, md/lg/xl 12px) and the tray rounds one step past it, so
+ *     the pill nests as outer = inner + the 4px pad. Same relationship stock uses; only the small
+ *     sizes are new. sm promotes to md's pair under coarse.
+ *
+ * Slots touched: trigger, indicator, list (pill radius + pill tray bg/border).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/tabs.ts
+ */
+
+export const tabsTheme = {
+  slots: {
+    // indicator — Forest motion tokens over stock's flat duration-200 (applies to both variants).
+    // Stock's `absolute transition-[translate,width]` is inherited. Radius is NOT set here — it's
+    // per-size and pill-scoped, so it lives in compoundVariants below (a base value would lose the
+    // ordering race to stock's `variant.pill` radius anyway).
+    indicator: 'duration-(--motion-base) ease-(--motion-ease-in-out)',
+    // trigger — font-bold over stock's font-medium: one stable weight in every state (legible at
+    // xs–sm, no active/inactive layout shift; colour carries the hierarchy, not weight). Stock's
+    // layout/state/rounded/transition classes are inherited, not restated.
+    trigger: 'font-bold',
+  },
+  // Touch: tab triggers are tap targets, so under a coarse (finger) primary pointer each size grows
+  // one size UP — the full trigger geometry (padding, gap, text, icon), same proportional step as the
+  // input field. Tabs is simpler than input here: no responsive `md:text-*` shrink to fight, and the
+  // leading icon is gap-spaced (no absolute `ps-9`), so horizontal `px` is safe to bump too — the step
+  // is the true next-size trigger. xl is the ceiling. Each size lists only its deltas up. `coarse:`
+  // carries the `:not(.cut-fixed)` escape, so the mobile cut (which bakes size lg) opts out below.
+  variants: {
+    size: {
+      // → sm: wider padding + gap (text/icon same)
+      xs: { trigger: 'coarse:px-2.5 coarse:py-1.5 coarse:gap-1.5' },
+      // → md: wider padding, larger text + icon (py/gap same)
+      sm: { trigger: 'coarse:px-3 coarse:text-sm', leadingIcon: 'coarse:size-5' },
+      // → lg: taller padding + gap (px/text/icon same)
+      md: { trigger: 'coarse:py-2 coarse:gap-2' },
+      // → xl: larger text + icon (padding/gap same)
+      lg: { trigger: 'coarse:text-base', leadingIcon: 'coarse:size-6' },
+      // xl: ceiling — no bump
+    },
+  },
+  // Pill radius is CONCENTRIC, the way stock builds it: the tray (`list`) has a p-1 (4px) inset, so
+  // the sliding `indicator` (the inner, filled pill) rounds one step TIGHTER than the tray — outer =
+  // inner + padding — and the active pill nests cleanly in the tray corner. The inner value is the
+  // input field's per-size ladder (xs/sm rounded-sm 8px, md/lg/xl rounded-md 12px), so the active tab
+  // reads at the same radius as a field; the tray is one step up (12 / 16). (md/lg/xl land back on
+  // stock's own values — tray rounded-lg, indicator rounded-md; only xs/sm add the smaller concentric
+  // pair.) Under coarse, sm promotes to md's pair (indicator 8→12, tray 12→16), tracking its size-up.
+  //
+  // Why compoundVariants: the radius must (a) beat stock's `variant.pill` values — compounds apply
+  // last, so they win — and (b) apply ONLY to the pill. A size-variant `indicator` would also hit the
+  // LINK variant and clobber its rounded-full underline ends; scoping to `variant: 'pill'` leaves link
+  // alone.
+  compoundVariants: [
+    // Pill tray as an outlined field, not a raised grey slab: bg-default (the base neutral-0 surface,
+    // mode-aware) over stock's bg-elevated, plus a 1px inset accented ring for the border. Scoped to
+    // `variant: 'pill'` (no size) so it hits every pill size and leaves LINK untouched; a compound
+    // applies last, so bg-default wins the tailwind-merge over the base variant's bg-elevated.
+    { variant: 'pill', class: { list: 'bg-default ring ring-inset ring-accented' } },
+    { variant: 'pill', size: 'xs', class: { list: 'rounded-md', indicator: 'rounded-sm' } },
+    { variant: 'pill', size: 'sm', class: { list: 'rounded-md coarse:rounded-lg', indicator: 'rounded-sm coarse:rounded-md' } },
+    { variant: 'pill', size: 'md', class: { list: 'rounded-lg', indicator: 'rounded-md' } },
+    { variant: 'pill', size: 'lg', class: { list: 'rounded-lg', indicator: 'rounded-md' } },
+    { variant: 'pill', size: 'xl', class: { list: 'rounded-lg', indicator: 'rounded-md' } },
+  ],
+} as const;

package/packages/ui/src/themes/textarea.ts

@@ -0,0 +1,77 @@
+/**
+ * Forest theme fragment — UTextarea (multiline input, autoresize).
+ *
+ * Textarea is a multiline UInput, so it wears the SAME Forest identity — this fragment mirrors
+ * themes/input.ts: the recessed depth line, the colour-tracking focus halo, the per-size radius
+ * ladder, and the touch ladder. Stock UTextarea shares UInput's size architecture verbatim
+ * (same px/py/text/gap/icon per size, same responsive `md:text-*` shrink), so the deltas are the same.
+ * Keeping the two in lockstep is deliberate — a note field and a single-line field on the same form
+ * must read as one control family. See input.ts for the full rationale on each opinion; the notes
+ * here are the textarea-specific deltas only.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/textarea.ts
+ */
+
+export const textareaTheme = {
+  slots: {
+    // Same base as UInput: the solid inset depth line at rest (stacks UNDER the ring via separate
+    // shadow vars), a box-shadow transition so focus eases, and the depth line + soft halo on focus.
+    // The old `focus:outline-none` is dropped ON PURPOSE — it was suppressing the very focus outline
+    // UInput keeps, so the two fields disagreed on focus; parity restores the shared treatment.
+    base: 'transition-[color,box-shadow] duration-(--motion-fast) shadow-[inset_0_calc(var(--forest-input-depth)_+_var(--forest-field-edge,0px))_0_0_var(--forest-input-recess)] focus-visible:shadow-[inset_0_var(--forest-input-depth)_0_0_var(--forest-input-recess),0_0_0_3px_var(--forest-input-halo,var(--forest-halo-primary))]',
+  },
+  // Touch ladder + per-size radius/depth — identical to input.ts. Under a coarse primary
+  // pointer each size grows PROPORTIONALLY to the next size up (height via py or type, gap, radius,
+  // icon, recess), reading as a bigger version of itself. Two things it does NOT bump: horizontal
+  // `px` (a `touch:px-*` emitted after the icon's inline padding would clobber it) and the naive
+  // base type (stock's responsive `md:text-*` shrink means the type bump must target the next size's
+  // EFFECTIVE value — sm→`text-sm`, lg→`text-base` — or the ladder inverts). sm also rounds up: its
+  // type-driven height gain earns the rounded-md step, same as md→lg. xl has a touch rung of
+  // its own (52). See input.ts.
+  // PER-SIZE RADIUS: xs/sm rounded-sm (8px); md/lg/xl keep stock's base rounded-md (12px) — only
+  // xs/sm are overridden, md+ not restated. Depth line scales per size.
+  // `touch:` = the shared TOUCH ladder (styles/forest.css) — height+type twin of button.ts/input.ts
+  // so a joined <UFieldGroup> matches. Fired by a coarse pointer or by the mobile cut's
+  // baked marker — same numbers either way, so a real phone can't step twice.
+  variants: {
+    size: {
+      // touch 28: taller padding + gap
+      xs: { base: 'rounded-sm [--forest-input-depth:2px] touch:min-h-7 touch:gap-1.5' },
+      // touch 36: larger type (md's effective 14/20) + icon + deeper recess, and rounder (type-driven
+      //   height gain earns the rounded-md step)
+      sm: { base: 'rounded-sm [--forest-input-depth:2px] touch:min-h-9 touch:text-sm touch:rounded-md touch:[--forest-input-depth:3px]', leadingIcon: 'touch:size-5', trailingIcon: 'touch:size-5' },
+      // touch 40: taller padding + gap (radius inherits stock base rounded-md — not restated)
+      md: { base: '[--forest-input-depth:3px] touch:min-h-10 touch:text-sm touch:gap-2' },
+      // touch 44: larger type (xl's 16/24) + icon + deepest recess
+      lg: { base: '[--forest-input-depth:3px] touch:min-h-11 touch:text-base touch:rounded-lg touch:[--forest-input-depth:4px]', leadingIcon: 'touch:size-6', trailingIcon: 'touch:size-6' },
+      // touch 52
+      xl: { base: '[--forest-input-depth:4px] touch:min-h-13 touch:text-lg touch:rounded-lg touch:[--forest-input-depth:4px]', leadingIcon: 'touch:size-7', trailingIcon: 'touch:size-7' },
+    },
+    // Focus halo tracks `color` — FLAT strings (stock's colour variant is flat; a `{ base: … }` shape
+    // would be dropped by the merge). Each colour re-points --forest-input-halo at its own 200 step.
+    color: {
+      primary:   '[--forest-input-halo:var(--forest-halo-primary)]',
+      secondary: '[--forest-input-halo:var(--forest-halo-secondary)]',
+      success:   '[--forest-input-halo:var(--forest-halo-success)]',
+      info:      '[--forest-input-halo:var(--forest-halo-info)]',
+      warning:   '[--forest-input-halo:var(--forest-halo-warning)]',
+      error:     '[--forest-input-halo:var(--forest-halo-error)]',
+      forest:    '[--forest-input-halo:var(--forest-halo-forest)]',
+      maple:     '[--forest-input-halo:var(--forest-halo-maple)]',
+      river:     '[--forest-input-halo:var(--forest-halo-river)]',
+      warm:      '[--forest-input-halo:var(--forest-halo-warm)]',
+      acid:      '[--forest-input-halo:var(--forest-halo-acid)]',
+      neutral:   '[--forest-input-halo:var(--forest-halo-neutral)]',
+    },
+  },
+  // Ghost drops the resting depth line (no fill/ring = nothing to recess into); it takes the line on
+  // hover/focus with the elevated fill. Same as input.
+  compoundVariants: [
+    {
+      variant: 'ghost',
+      class: {
+        base: 'shadow-none hover:shadow-[inset_0_calc(var(--forest-input-depth)_+_var(--forest-field-edge,0px))_0_0_var(--forest-input-recess)]',
+      },
+    },
+  ],
+} as const;

package/packages/ui/src/themes/timeline.ts

@@ -0,0 +1,25 @@
+/**
+ * Forest theme fragment — UTimeline (vertical / horizontal event track).
+ *
+ * Forest opinions applied:
+ *   - `title`: steps up from stock `font-medium` to `font-bold` — gives the event name a
+ *     clear hierarchy above the dimmed date and muted description without reaching for a display
+ *     heading or extra font-size.
+ *   - `date`: kept minimal; `text-xs/5` and `text-dimmed` are already stock, no opinion needed.
+ *   - `description`: stock `text-muted text-sm` is correct — no override required.
+ *   - `separator`: stock `rounded-full` matches Forest's pill language (chips, badges); no
+ *     override needed. Background colours are handled by the colour + reverse compound variants
+ *     already in the generated theme.
+ *   - `indicator`: stock `text-muted` rest state is intentionally kept — the indicator picks up
+ *     brand colour from the `color` variant when `state="active"` or `state="completed"`. No
+ *     override needed here.
+ *
+ * Slots touched: title.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/timeline.ts
+ */
+
+export const timelineTheme = {
+  slots: {
+    title: 'font-bold',
+  },
+} as const

package/packages/ui/src/themes/toast.ts

@@ -0,0 +1,29 @@
+/**
+ * Forest theme fragment — UToast (transient notification).
+ *
+ * Forest opinions applied:
+ *   - `root`: radius bumped to rounded-xl (matches the Forest card/alert language — 16 px, softer
+ *     than the stock rounded-lg); the gap is comfortable at gap-3 for breathing room between
+ *     icon/content/actions. Shadow, ring, and padding are unchanged from stock.
+ *   - `title`: steps up from stock `font-medium` to `font-bold` — gives the notification
+ *     headline a clear hierarchy above the description, matching the alert/banner convention.
+ *   - `description`: text-sm text-muted is unchanged — the muted colour already reads as
+ *     secondary copy, matching the Forest hierarchy. No override needed.
+ *
+ * Deliberately untouched (stock is already correct for Forest):
+ *   - `wrapper`, `icon`, `avatar`, `actions`, `progress`, `close` — stock layout and sizing are
+ *     appropriate; brand colour intent flows in automatically through the semantic colour map.
+ *   - All `color` variants — the focus-visible ring and icon colour already resolve through the
+ *     semantic wiring (primary→forest, error→maple, info→river, warning→amber, secondary→warm).
+ *   - Orientation variants — stock horizontal/vertical layout is correct as-is.
+ *
+ * Slots touched: root, title.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/toast.ts
+ */
+
+export const toastTheme = {
+  slots: {
+    root: 'rounded-xl gap-3 focus:outline-none',
+    title: 'font-bold',
+  },
+} as const;

package/packages/ui/src/themes/toaster.ts

@@ -0,0 +1,66 @@
+/**
+ * Forest theme fragment — UToaster (the toast STACK: viewport, entry/exit, swipe, collapse).
+ *
+ * Distinct from the `toast` fragment, which styles a single notification's surface. Everything the
+ * stack moves lives here, and all of it was stock — this fragment exists only to bring that motion
+ * onto the shared tokens. Nothing else about the toaster needs a Forest opinion: the viewport
+ * position matrix, the stacking transforms and the swipe translate maths are structure.
+ *
+ * Timing, by what each thing is:
+ *   - entry (`toast-slide-in-from-*`) — an overlay arriving, so --motion-base
+ *   - exit (`toast-closed`, `toast-collapsed-closed`) and swipe-dismiss — --motion-fast, the
+ *     overlay-exit bucket; a dismissal the user already committed to should get out of the way
+ *   - the stack reflow (`transition-[transform,translate,height]`, running whenever a sibling
+ *     enters or leaves) — --motion-base, since it is what visually carries the entry
+ *   - `pulse-a` / `pulse-b`, the attention nudge on a repeat toast — --motion-base
+ *   - the front-card opacity fade at duration-100 — --motion-instant
+ *
+ * Every curve becomes --motion-ease-out. Stock eases the entry and both exits with `ease-in-out`,
+ * which the doctrine reserves for movement that starts AND settles on screen; a toast slides in
+ * from outside the viewport and leaves it again.
+ *
+ * Slots touched: base (and its position compounds + the swipeDirection variant).
+ * Stock recipe: apps/docs/node_modules/.nuxt-ui/ui/toaster.ts
+ */
+
+export const toasterTheme = {
+  slots: {
+    // Exits, the attention pulse, the front-card fade, and the stack reflow. Same keyframes and same
+    // property list as stock — only the durations and curves are restated, and tailwind-merge takes
+    // the last of each pair in the concat.
+    base: [
+      'data-[front=false]:*:duration-(--motion-instant)',
+      'data-[state=closed]:animate-[toast-closed_var(--motion-fast)_var(--motion-ease-out)]',
+      'data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_var(--motion-fast)_var(--motion-ease-out)]',
+      'data-[state=open]:data-[pulsing=odd]:animate-[toast-pulse-a_var(--motion-base)_var(--motion-ease-out)]',
+      'data-[state=open]:data-[pulsing=even]:animate-[toast-pulse-b_var(--motion-base)_var(--motion-ease-out)]',
+      'duration-(--motion-base) ease-(--motion-ease-out)',
+    ].join(' '),
+  },
+  variants: {
+    // Swipe-to-dismiss — the fling that completes a gesture the user is already making, so it runs
+    // at the exit duration rather than the entry one.
+    swipeDirection: {
+      up: 'data-[swipe=end]:animate-[toast-slide-up_var(--motion-fast)_var(--motion-ease-out)]',
+      right: 'data-[swipe=end]:animate-[toast-slide-right_var(--motion-fast)_var(--motion-ease-out)]',
+      down: 'data-[swipe=end]:animate-[toast-slide-down_var(--motion-fast)_var(--motion-ease-out)]',
+      left: 'data-[swipe=end]:animate-[toast-slide-left_var(--motion-fast)_var(--motion-ease-out)]',
+    },
+  },
+  // Entry, which stock scopes to the position group (a top toast slides down, a bottom one up). The
+  // discriminator arrays mirror stock's exactly so these land as the same compound, applied last.
+  compoundVariants: [
+    {
+      position: ['top-left', 'top-center', 'top-right'],
+      class: {
+        base: 'data-[state=open]:animate-[toast-slide-in-from-top_var(--motion-base)_var(--motion-ease-out)]',
+      },
+    },
+    {
+      position: ['bottom-left', 'bottom-center', 'bottom-right'],
+      class: {
+        base: 'data-[state=open]:animate-[toast-slide-in-from-bottom_var(--motion-base)_var(--motion-ease-out)]',
+      },
+    },
+  ],
+} as const;

package/packages/ui/src/themes/tooltip.ts

@@ -0,0 +1,31 @@
+/**
+ * Forest theme fragment — UTooltip (hover/focus hint).
+ *
+ * Deltas only (the preset APPENDS to stock Nuxt UI):
+ *   content — flips stock's surface look (`bg-default text-highlighted rounded-sm`) to a floating
+ *             inverted bubble (`bg-inverted text-inverted`) at the brand radius (`rounded-lg`,
+ *             0.5 rem / --ui-radius), and swaps stock's raw `100ms ease` open/close animation for
+ *             the Forest motion tokens (fast enter, instant exit). Shadow, ring, height, padding,
+ *             origin and pointer-events are inherited from stock and not restated.
+ *   arrow   — must follow the inverted bubble: stock fills the caret with `fill-bg` (the light
+ *             surface), which reads as a white pointer on our dark bubble. Re-point it at the
+ *             inverted bg so the caret matches the content. Stock's `stroke-default` is kept (it
+ *             aligns with the bubble's inherited ring).
+ *
+ * Stock slots left untouched: text, kbds (kbds inherit the Forest UKbd theme).
+ *
+ * Slots sourced from: apps/docs/node_modules/.nuxt-ui/ui/tooltip.ts
+ * Slots touched: `content`
+ */
+
+export const tooltipTheme = {
+  slots: {
+    // Both open states animate. Stock only ever reaches `delayed-open` through its own hover timer,
+    // but a tooltip whose `open` is controlled — the chart components drive theirs from their own
+    // hit-testing — reports `instant-open` instead, and matching only the delayed state left those
+    // appearing with no transition at all.
+    content: 'bg-inverted text-inverted rounded-lg data-[state=delayed-open]:animate-[scale-in_var(--motion-fast)_var(--motion-ease-out)] data-[state=instant-open]:animate-[scale-in_var(--motion-fast)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-instant)_var(--motion-ease-out)]',
+    // Caret follows the inverted bubble (stock fills it with the light `fill-bg`). stroke-default kept.
+    arrow: 'fill-[var(--ui-bg-inverted)]',
+  },
+} as const;

package/packages/ui/src/themes/tree.ts

@@ -0,0 +1,41 @@
+/**
+ * Forest theme fragment — UTree (hierarchical disclosure list).
+ *
+ * Deltas over stock (the preset appends to Nuxt UI):
+ *   - `link`: a focused row draws an inset focus-visible ring on the before: pseudo that already
+ *     carries the selection / hover pill.
+ *   - `linkTrailingIcon`: the expand chevron rotates on --motion-fast / --motion-ease-out rather
+ *     than stock's hard-coded duration-200 — a small near element, same bucket as the accordion
+ *     and collapsible chevrons.
+ *
+ * The pill keeps its stock before:rounded-md (12px) — a tree node is a row, the same shape a sidebar
+ * nav row and a command-palette result carry.
+ *
+ * Everything else is stock: the indent guide (border-s border-default), the folder / chevron icons,
+ * the per-colour selected-label and focus colours, and the size ladder all read on the Forest ramps
+ * and semantic tokens without an override.
+ *
+ * Slots touched: link, linkTrailingIcon.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/tree.ts
+ */
+
+export const treeTheme = {
+  slots: {
+    link: 'focus-visible:before:ring-inset focus-visible:before:ring-2',
+    linkTrailingIcon: 'duration-(--motion-fast) ease-(--motion-ease-out)',
+  },
+
+  // Touch: each node promotes ONE size up under a coarse pointer (borrows the next size's padding /
+  // gap / type / icon) — same ladder as the menu/input family. Unlike the input field, tree links
+  // position their icons with flex `gap` (not an absolute ps-*/pe-* inset), so bumping horizontal
+  // padding here is safe. xl is the ceiling; deltas only. `coarse:` carries the :not(.cut-fixed)
+  // escape so a baked mobile cut opts out.
+  variants: {
+    size: {
+      xs: { link: 'coarse:px-2.5 coarse:py-1.5 coarse:gap-1.5' },
+      sm: { link: 'coarse:text-sm', linkLeadingIcon: 'coarse:size-5', linkTrailingIcon: 'coarse:size-5' },
+      md: { link: 'coarse:px-3 coarse:py-2 coarse:gap-2' },
+      lg: { link: 'coarse:text-base', linkLeadingIcon: 'coarse:size-6', linkTrailingIcon: 'coarse:size-6' },
+    },
+  },
+} as const;

package/packages/ui/src/themes/user.ts

@@ -0,0 +1,28 @@
+/**
+ * Forest theme fragment — UUser (name + avatar + description row)
+ *
+ * Deltas only (stock in apps/docs/node_modules/.nuxt-ui/ui/user.ts):
+ *   - `name`: `font-bold` (stock base is `font-medium`) so the rider/operator name reads with
+ *     clear hierarchy above the description at every size. Colour is left to stock: the `to:false`
+ *     variant already sets `text-highlighted` on the non-link name, so restating it here would be
+ *     dead weight; the `to:true` link state keeps its own `text-default → highlighted` transition.
+ *   - `wrapper`: `min-w-0` guard so name + description truncate when the row sits inside a flex
+ *     parent (table cell, narrow sidebar item, list row). Stock wrapper base is empty.
+ *   - `to.true.avatar`: the hover scale runs on --motion-fast / --motion-ease-out instead of stock's
+ *     hard-coded duration-200 (bare `ease`). A hover affordance on a small near element is the
+ *     textbook --motion-fast case.
+ *
+ * Untouched (all stock): `description` (`text-muted`), `avatar` (`shrink-0`), the 3xs–3xl gap +
+ * text size ladder, orientation, chip, and the `to` hover/focus colour transitions.
+ */
+export const userTheme = {
+  slots: {
+    name: 'font-bold',
+    wrapper: 'min-w-0',
+  },
+  variants: {
+    to: {
+      true: { avatar: 'duration-(--motion-fast) ease-(--motion-ease-out)' },
+    },
+  },
+} as const;