@humanforest/nuxt-layer 0.1.0

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

@@ -0,0 +1,27 @@
+/**
+ * Forest theme fragment for UKbd (flat component, single `base` slot).
+ *
+ * Deltas only — the preset APPENDS to stock's base, so restating its layout classes would invite
+ * drift. Tokens:
+ *   rounded-xs  from stock rounded-sm — a tight corner so the cap reads as a physical key, not a
+ *               pill/chip. Stock keeps the corner in `base` (not per size), so overriding it in base
+ *               is clean. Contexts round it up (mobile/marketing).
+ *   font-mono   from stock font-sans — labels sit alongside code/token surfaces.
+ *   px-2        from stock px-1 — a little breathing room, except sm keeps px-1: at 16px tall px-2
+ *               is cramped.
+ *
+ * The sm padding exception lives in the SIZE VARIANT, not a `[&.h-4]` base hook — a preset/theme
+ * fragment can carry `variants` (tv deep-merges them; the size variant is applied after base, so
+ * `size.sm: 'px-1'` overrides base `px-2` at sm only). Stock's size variant holds no padding, so
+ * this ADDS one. (A CONTEXT can't do this — `<UTheme :ui>` carries slot/base classes only and
+ * silently ignores `variants` — which is why mobile/marketing keep an `[&.h-4]:` hook for their own
+ * per-size radius exception.)
+ *
+ * `font-medium`/`uppercase` and the colour/variant compounds are stock (already on the Forest
+ * ramps) — not Forest's to restate.
+ */
+
+export const kbdTheme = {
+  base: 'rounded-xs font-mono px-2',
+  variants: { size: { sm: 'px-1' } },
+} as const

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

@@ -0,0 +1,27 @@
+/**
+ * Forest theme fragment — ULink (styled router/anchor link, active states).
+ *
+ * Forest opinions applied:
+ *   - `base` (the single root slot): the stock `focus-visible:outline-primary` is replaced with a
+ *     ramp-pinned focus outline anchored to var(--color-forest-500) — 2px, 2px offset — so the
+ *     focus ring tracks the brand scale in both light and dark mode exactly as keycap buttons do.
+ *   - Active state: text-primary (maps to forest-500 via the semantic colour wiring) is retained from
+ *     the generated default — it reads correctly against Forest surfaces. No override needed.
+ *   - Inactive rest: text-muted is the Forest semantic level for navigation links at rest (softer
+ *     than text-default, never as dim as text-dimmed). Stock default is text-muted so this is kept.
+ *   - Disabled: the generated cursor-not-allowed + opacity-75 is correct; no override needed.
+ *   - Hover (non-disabled, non-active): text-default is the stock value and matches Forest's reading
+ *     hierarchy (link darkens on hover but doesn't jump to active/brand colour). Kept as-is.
+ *   - transition-colors: stock, retained for smooth colour transitions on hover and active change.
+ *
+ * Only the focus ring is a genuine Forest override (pinning the outline to the ramp var rather than
+ * relying on the semantic `outline-primary` token, for determinism across every Forest surface).
+ * Everything else is in harmony with stock and intentionally left unchanged.
+ *
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/link.ts
+ * Slots touched: base (root element).
+ */
+
+export const linkTheme = {
+  base: 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-forest-500)]',
+} as const;

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

@@ -0,0 +1,48 @@
+/**
+ * Forest theme fragment — UListbox (standalone selectable list, optional filter input).
+ *
+ * Deltas only (the preset appends to stock Nuxt UI):
+ *   - label — font-bold + tracking-wide: group headings read with brand confidence; stock is
+ *             font-semibold, a weight the two-weight type system does not carry.
+ *
+ * The shell radius runs STOCK (rounded-lg). The standard voice states no opinion on it: a listbox
+ * is sized by its own options rather than by a surface it belongs to, so there is no tier to pin it
+ * against. The expressive contexts do have an opinion — mobile and marketing round the shell to
+ * 24px and inset the rows to clear the arc (contexts/{mobile,marketing}-theme.ts).
+ *
+ * The `item` hover/select slab keeps the stock before:rounded-md (12px) — the standalone-row shape
+ * a sidebar nav row, a palette result and a tree node all carry. The 8px slab belongs to rows inside
+ * an anchored 12px menu panel (dropdown-menu, select-menu), which this is not.
+ *
+ * The filter `input` is a UInput carrying the listbox's own size, so it takes its touch rungs from
+ * themes/input.ts and needs nothing here. The avatar and chip sizes ride prop-valued slots
+ * (itemLeadingAvatarSize / itemLeadingChipSize), which a class variant cannot reach — they hold
+ * their fine-pointer step under the bump below.
+ *
+ * Everything else (density ladder, colour ring, virtualize/divider split, selected check, empty and
+ * loading states, transitions) is stock on the Forest ramps.
+ *
+ * Slots touched: root · label; size variant (touch).
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/listbox.ts
+ */
+
+export const listboxTheme = {
+  slots: {
+    // Group headings: bold weight + wide tracking — confident, readable at small size.
+    label: 'font-bold tracking-wide',
+  },
+
+  // Touch: under a coarse pointer each row promotes ONE size up — it borrows the next size's
+  // padding / gap / type / icon, so the tap slab scales as a unit (mirrors the menu family). xl is
+  // the ceiling. Deltas only: each size lists just the tokens that differ from its next step up
+  // (e.g. md→lg changes only padding + gap, so no type delta). `coarse:` carries the
+  // :not(.cut-fixed) escape, so a baked mobile cut opts out instead of promoting again.
+  variants: {
+    size: {
+      xs: { item: 'coarse:p-1.5 coarse:gap-1.5', label: 'coarse:p-1.5 coarse:gap-1.5' },
+      sm: { item: 'coarse:text-sm', label: 'coarse:text-xs', itemLeadingIcon: 'coarse:size-5', itemTrailingIcon: 'coarse:size-5' },
+      md: { item: 'coarse:p-2 coarse:gap-2', label: 'coarse:p-2 coarse:gap-2' },
+      lg: { item: 'coarse:text-base', label: 'coarse:text-sm', itemDescription: 'coarse:text-sm', itemLeadingIcon: 'coarse:size-6', itemTrailingIcon: 'coarse:size-6' },
+    },
+  },
+} as const;

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

@@ -0,0 +1,6 @@
+/**
+ * Reviewed, no delta. UMain is a single flex-1 wrapper with min-height derived from
+ * --ui-header-height. It sets no width, so it composes with the well rather than competing.
+ */
+
+export const mainTheme = {};

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

@@ -0,0 +1,45 @@
+/**
+ * Forest theme fragment — UMarquee (infinite scrolling strip).
+ *
+ * Forest opinions applied:
+ *
+ *   root — the default `[--duration:20s]` is preserved (Nuxt UI default). We extend the root
+ *     with a subtle `rounded-xl` so that when a Marquee is placed inside a bordered card or on a
+ *     clipped surface the overflow boundary matches the Forest --ui-radius soft-corner vocabulary
+ *     (0.5 rem base, rounded-xl ≈ 0.75 rem for container-level trim). This prevents the infinite
+ *     strip from bleeding hard corners out of a soft-radius container.
+ *
+ *   content — we set `gap-6` (both axes) so items (badges, cards, avatars) always have a tactile,
+ *     tighter separation than the stock `--gap` (--spacing(16) ≈ 64px, too airy — especially for a
+ *     vertical feed, where 64px reads as broken spacing). `gap-6` = 24px on row AND column, so a
+ *     horizontal strip and a vertical feed are both comfortably dense. Note this overrides the
+ *     `gap-(--gap)` shorthand, so a per-instance `--gap` override no longer applies — pass a `gap-*`
+ *     utility via `ui.content` to retune. The `items-center` alignment (stock) keeps mixed-height
+ *     children centred — Forest preserves this.
+ *
+ * The overlay gradient blends into `from-default` (the semantic surface token), which adapts
+ * automatically in dark mode — no Forest override needed; the stock `before:from-default /
+ * after:from-default` is already semantically correct.
+ *
+ * Slots NOT overridden:
+ *   - Orientation variants — the flex-row / flex-col layout is correct as-is.
+ *   - `pauseOnHover` variant — stock `group-hover:[animation-play-state:paused]` is correct.
+ *   - `reverse` variant — stock `![animation-direction:reverse]` is correct.
+ *   - overlay compoundVariants — gradient geometry does not need a Forest delta.
+ *
+ * Slots touched: `root`, `content`.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/marquee.ts
+ */
+
+export const marqueeTheme = {
+  slots: {
+    // Soft-corner clip so the strip trims flush with Forest card/surface containers, paired with a
+    // small vertical inset (py-1.5): the rounded clip would otherwise shave the top/bottom of any
+    // item sitting flush to the strip edge (rounded-full pills read as flat-topped). The clip and its
+    // inset are one opinion. Override via `ui.root`/`class` for a deliberately full-bleed strip.
+    root: 'rounded-xl py-1.5',
+    // Tighter, tactile spacing on both axes (24px) vs the airy stock --gap (64px) — matters most
+    // for a vertical feed. Overrides gap-(--gap): retune via a gap-* utility on ui.content.
+    content: 'gap-6',
+  },
+} as const;

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

@@ -0,0 +1,46 @@
+/**
+ * Forest theme fragment — UModal (centred dialog on Reka UI's Dialog primitive).
+ *
+ * Deltas only (the preset APPENDS to stock Nuxt UI):
+ *   - `title`: font-display (MohrAlt Black, uppercase) at text-xl — the dialog heading is a moment
+ *     of clear hierarchy; the display face makes it unmistakable. Stock sets `font-semibold`.
+ *   - radius: rounded-xl (0.75 rem) on the non-fullscreen panel — one step softer than stock's
+ *     rounded-lg. It rides `variants.fullscreen.false.content`, NOT the base `content` slot: stock
+ *     puts the radius on that same size variant, so a base override loses the tailwind-merge race
+ *     (the per-size seam — see the badge fragment). Overriding the variant is also what keeps the
+ *     fullscreen panel square (its `inset-0` content carries no radius).
+ *   - `transition`: the open/close keyframes move onto the shared motion tokens. Stock runs a flat
+ *     200 ms both ways and eases the EXIT with `ease-in`, which the doctrine bans — it starts slow at
+ *     the exact moment the user has already decided to dismiss. Forest enters on --motion-base (the
+ *     scale-in bucket the popover/menu family sits in) and exits on --motion-fast, both --motion-ease-out.
+ *
+ * Everything else — overlay tint, header/body/footer padding, divide rules, close button — is stock
+ * and needs no Forest opinion.
+ *
+ * Slot names + variants sourced from: apps/docs/node_modules/.nuxt-ui/ui/modal.ts
+ */
+
+export const modalTheme = {
+  slots: {
+    // Display face for the dialog title — MohrAlt Black, uppercase (via .font-display).
+    title: 'font-display text-xl',
+  },
+  variants: {
+    // Same keyframes as stock, retimed and re-eased onto the tokens. Only the animate-* utilities are
+    // restated (tailwind-merge takes the last one in the concat); the variant carries nothing else.
+    transition: {
+      true: {
+        overlay:
+          'data-[state=open]:animate-[fade-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[fade-out_var(--motion-fast)_var(--motion-ease-out)]',
+        content:
+          'data-[state=open]:animate-[scale-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-fast)_var(--motion-ease-out)]',
+      },
+    },
+    fullscreen: {
+      // Softer brand radius on the standard centred panel; stock ring + shadow are retained.
+      false: {
+        content: 'rounded-xl',
+      },
+    },
+  },
+} as const;

package/packages/ui/src/themes/navigation-menu.ts

@@ -0,0 +1,80 @@
+/**
+ * Forest theme fragment — NavigationMenu
+ *
+ * Forest opinion:
+ *  - `viewport`   no Forest radius override (rounded-md matches stock already); motion-timing
+ *                 classes (duration/easing) are retained on this slot.
+ *  - `arrow`      rounded-sm to keep the caret consistent with the viewport
+ *  - `label`      text-xs uppercase tracking-wider text-dimmed — Forest's
+ *                 standard section-label treatment (same as docs headings, sidebar groups)
+ *  - `childLink`  before:rounded-sm (8 px) — concentric one step inside the 12 px viewport panel.
+ *
+ * Active treatment — the house nav look (mirrors AppSidebar's active link:
+ * `!bg-primary/10 !text-primary font-bold`): the active item is a soft primary-tint slab with
+ * primary text, bold. Inactive items stay neutral (stock text-muted). Colour intent still tints the
+ * active *text* per ramp (stock colour compounds untouched); only the slab wash + weight are set here.
+ *   - pill active link: stock paints a grey before:bg-elevated slab, unweighted — retint to the soft
+ *     primary wash and bold it. Matches for both highlight on/off (no highlight key ⇒ both).
+ *   - link variant: no slab, just bold the active text (colour still from the ramp).
+ *   - childLink active: stock sets before:bg-elevated + text-highlighted (NOT colour-driven) — give the
+ *     vertical/flyout child items the same brand accent so they read like the sidebar's active row.
+ *
+ * Slots touched: viewport, arrow, label, childLink
+ * All other slots inherit Nuxt UI defaults; default colour stays primary (forest accent for a bare menu).
+ */
+export const navigationMenuTheme = {
+  slots: {
+    // Panel: rounded-md matches stock already; motion-timing (duration/ease) retained below.
+    viewport: 'duration-(--motion-slow) ease-(--motion-ease-in-out) data-[state=open]:animate-[scale-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-fast)_var(--motion-ease-out)]',
+    // Arrow caret rounded-sm — consistent with the viewport
+    arrow: 'rounded-sm',
+    // Group labels: Forest section-header treatment — uppercase, wider tracking, dimmed weight
+    label: 'text-xs uppercase tracking-wider text-dimmed',
+    // Child link hover slab: before:rounded-sm (8 px) — concentric inside the 12 px viewport panel.
+    childLink: 'before:rounded-sm dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+  },
+  variants: {
+    active: {
+      true: {
+        // Vertical/flyout child active row → the house accent (stock: before:bg-elevated + text-highlighted).
+        childLink: 'before:bg-primary/10 text-primary font-bold',
+      },
+    },
+  },
+  compoundVariants: [
+    // Top-level active pill: swap the grey slab for the soft primary wash + bold. text-primary already
+    // comes from the colour=primary active compound; no highlight key ⇒ applies with highlight on or off.
+    {
+      variant: 'pill',
+      active: true,
+      class: { link: 'before:bg-primary/10 font-bold' },
+    },
+    // link variant carries no slab — just bold the active text (colour stays from the ramp).
+    {
+      variant: 'link',
+      active: true,
+      class: { link: 'font-bold' },
+    },
+    // A VERTICAL menu is a sidebar's nav, and Forest groups it. Stock leaves consecutive sections
+    // touching, so the uppercase label alone has to carry the boundary; give it the group's own
+    // air instead. The reset is scoped to the first LI, not to `:first-child` — the label is always
+    // the first child of ITS li, so `[&:first-child]` would match every group and reset them all.
+    {
+      orientation: 'vertical',
+      collapsed: false,
+      class: { label: 'mt-6 [li:first-child>&]:mt-0' },
+    },
+    // Collapsed to the icon rail. Stock keeps the row full-width, so the active state reads as a
+    // wide pill in a narrow column rather than a button; square it and centre it on the rail.
+    // The separator is the only thing marking a group once the labels are hidden, so it is kept but
+    // shortened — a tick between groups, not a cut across the rail.
+    {
+      orientation: 'vertical',
+      collapsed: true,
+      class: {
+        link: 'size-8 p-0 justify-center mx-auto',
+        separator: 'w-5 mx-auto my-1.5 px-0',
+      },
+    },
+  ],
+} as const

package/packages/ui/src/themes/page-anchors.ts

@@ -0,0 +1,7 @@
+/**
+ * Reviewed, no delta. UPageAnchors is link-list layout: `text-sm` on the link matches the ladder's
+ * small step, and the active `font-semibold` resolves to 700 through the @theme weight remap in
+ * styles/forest.css rather than to a cut the brand fonts lack.
+ */
+
+export const pageAnchorsTheme = {};

package/packages/ui/src/themes/page-aside.ts

@@ -0,0 +1,7 @@
+/**
+ * Reviewed, no delta. The `from-default` scroll-fade gradients read correctly on Forest's surfaces
+ * in both modes — `default` is the warm neutral-0 in light and Nuxt's neutral-900 card in dark, which
+ * is exactly what the aside sits on. Sticky offsets track --ui-header-height, which Forest owns.
+ */
+
+export const pageAsideTheme = {};

package/packages/ui/src/themes/page-card.ts

@@ -0,0 +1,22 @@
+/**
+ * Forest theme fragment for UPageCard.
+ *
+ * ★ Forest's UCard delta does NOT reach this component — different DOM, different recipe, and the
+ * `forest-card` marker that drives the nested-surface and concentric-corner CSS is set by the UCard
+ * theme alone. So a UPageCard beside a UCard reads as a different system unless corrected here.
+ *
+ * Two deltas: the corner moves from `rounded-lg` to the card corner (xl / 24px, per the radius
+ * contract), and the title and description come off Tailwind's default scale onto the ladder.
+ * `text-[15px]` on the description is an arbitrary value with no token behind it at all.
+ *
+ * The nesting CSS is deliberately NOT extended to this component. It is coupled to UCard's DOM by
+ * design, and a second consumer would make it a shared contract that neither component states.
+ */
+
+export const pageCardTheme = {
+  slots: {
+    root: 'rounded-xl',
+    title: 'type-heading-xs',
+    description: 'type-body',
+  },
+};

package/packages/ui/src/themes/page-cta.ts

@@ -0,0 +1,18 @@
+/**
+ * Forest theme fragment for UPageCTA (ui key `pageCta`).
+ *
+ * Type only. Note what is NOT changed: `rounded-xl` on the root is already on-contract — the
+ * rounded-* utilities inline calc(var(--ui-radius) * N), so xl resolves to Forest's 24px card corner
+ * rather than a Tailwind literal. It looked like a bypass and is not.
+ *
+ * ★ It caps its own width (embedded UContainer), which matters most here: a CTA normally sits inside
+ * page content already, so nesting it in a well double-applies the gutters. Registered on
+ * /layout/well.
+ */
+
+export const pageCtaTheme = {
+  slots: {
+    title: 'type-headline',
+    description: 'type-body',
+  },
+};

package/packages/ui/src/themes/page-feature.ts

@@ -0,0 +1,13 @@
+/**
+ * Forest theme fragment for UPageFeature.
+ *
+ * `text-[15px]` on the description is an arbitrary value — not a step on any scale, Tailwind's or
+ * Forest's. Both slots move onto the ladder.
+ */
+
+export const pageFeatureTheme = {
+  slots: {
+    title: 'type-heading-xs',
+    description: 'type-body',
+  },
+};

package/packages/ui/src/themes/page-header.ts

@@ -0,0 +1,16 @@
+/**
+ * Forest theme fragment for UPageHeader.
+ *
+ * Stock builds a whole type ladder of its own — `text-3xl sm:text-4xl` for the title, `text-lg` for
+ * the description, `text-sm font-semibold` for the headline. Forest already has those three steps
+ * named, and a second ladder drifts the moment the real one moves. Retyped onto the ladder; the
+ * responsive step is dropped with it, because `.type-display` owns its own scaling.
+ */
+
+export const pageHeaderTheme = {
+  slots: {
+    headline: 'type-overline',
+    title: 'type-display',
+    description: 'type-body',
+  },
+};

package/packages/ui/src/themes/page-hero.ts

@@ -0,0 +1,15 @@
+/**
+ * Forest theme fragment for UPageHero.
+ *
+ * `text-5xl sm:text-7xl` is the largest of stock's off-ladder sizes and the one most likely to be
+ * noticed — a hero title two steps above anything Forest publishes. `.type-display` is the top of the
+ * ladder and is where a hero belongs; a louder treatment is the marketing context's job, not a
+ * bigger literal.
+ */
+
+export const pageHeroTheme = {
+  slots: {
+    title: 'type-display',
+    description: 'type-subtitle',
+  },
+};

package/packages/ui/src/themes/page-links.ts

@@ -0,0 +1,12 @@
+/**
+ * Forest theme fragment for UPageLinks.
+ *
+ * One delta: the group title is `text-sm font-semibold`, off-ladder. `.type-label` is the step for a
+ * small heading over a list of controls.
+ */
+
+export const pageLinksTheme = {
+  slots: {
+    title: 'type-label',
+  },
+};

package/packages/ui/src/themes/page-section.ts

@@ -0,0 +1,14 @@
+/**
+ * Forest theme fragment for UPageSection.
+ *
+ * Stock steps `text-3xl sm:text-4xl lg:text-5xl` across three breakpoints. Forest's ladder handles
+ * its own scaling, so the section title takes `.type-headline` — one step below the page title, which
+ * is the relationship a section heading should have to the page it sits in.
+ */
+
+export const pageSectionTheme = {
+  slots: {
+    title: 'type-headline',
+    description: 'type-body',
+  },
+};

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

@@ -0,0 +1,7 @@
+/**
+ * Reviewed, no delta. UPage and its structural children (body, grid, columns, list) are flex/grid and
+ * spacing only — no type, colour or radius. They also set no width of their own, so unlike the
+ * page-CHROME family they nest inside a well safely.
+ */
+
+export const pageTheme = {};

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

@@ -0,0 +1,17 @@
+/**
+ * Forest theme fragment — UPagination. Deltas over stock (stock `label: min-w-5 text-center`,
+ * `item: ''`). The page controls render as UButton, so their colour, size, radius and focus ring
+ * ride the button theme — nothing needed here for those, or for the touch (coarse) size step-up.
+ */
+
+export const paginationTheme = {
+  slots: {
+    // Bold page numbers so the active page reads clearly on its solid face.
+    label: 'font-bold',
+    // Softer rounded-lg face on each page item.
+    item: 'rounded-lg',
+    // Ellipsis renders as an outline UButton (inherits the item variant); drop its ring so the
+    // gap marker reads as a plain glyph, not a bordered button. `as-child` lands this on the button.
+    ellipsis: 'ring-0',
+  },
+} as const

package/packages/ui/src/themes/pin-input.ts

@@ -0,0 +1,73 @@
+/**
+ * Forest theme fragment — UPinInput (OTP / code entry). Deltas only; everything else inherited from
+ * stock Nuxt UI.
+ *
+ * A pin input is an input split into square cells, so it wears the SAME Forest identity as UInput
+ * (themes/input.ts): the recessed depth line, the colour-tracking focus halo, the per-size radius
+ * ladder, and the touch ladder. Stock UPinInput shares UInput's variant/colour/highlight
+ * set and the same responsive `md:text-*` shrink, so the deltas match — only the size axis differs
+ * (a square `size-*` cell rather than px/py), so the coarse step bumps the cell size + type.
+ *
+ * Slots touched: root, base.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/pin-input.ts
+ */
+
+export const pinInputTheme = {
+  slots: {
+    // gap-2 → 8px between cells (stock gap-1.5) — a warmer, less grid-like row cadence.
+    root: 'gap-2',
+    // font-bold so a single digit fills the cell; plus the input identity: the box-shadow transition
+    // and the recessed depth line at rest + the depth line & soft colour halo on focus (same shared
+    // --forest-input-* / --forest-halo-* tokens as UInput). The old `focus:outline-none` is dropped —
+    // it suppressed the very focus outline UInput keeps; parity restores the shared treatment.
+    base: 'font-bold 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 — mirrors input.ts. Under a coarse pointer each
+  // cell grows one size up (a bigger square + type), so OTP entry gets a real tap target. The type
+  // bump targets the next size's RESPONSIVE-EFFECTIVE value (stock's `md:text-*` shrink, else the
+  // ladder inverts): sm→md `touch:text-sm`, lg→xl `touch:text-base`. sm also rounds up to rounded-md
+  // tracking its size-up. xl has a touch rung of its own (52). Depth line scales per size
+  // (2/2/3/3/4). PER-SIZE RADIUS:
+  // xs/sm rounded-sm (8px), md/lg/xl rounded-md (12px, inherited from stock base — not restated).
+  // The mobile cut needs no escape — it lands on the same rung a coarse pointer would.
+  variants: {
+    size: {
+      // touch 28: bigger cell (text/radius/depth unchanged)
+      xs: { base: 'rounded-sm [--forest-input-depth:2px] touch:size-7' },
+      // touch 36: bigger cell, larger type (md's effective 14), rounder, deeper recess
+      sm: { base: 'rounded-sm [--forest-input-depth:2px] touch:size-9 touch:text-sm touch:rounded-md touch:[--forest-input-depth:3px]' },
+      // touch 40: bigger cell
+      md: { base: '[--forest-input-depth:3px] touch:size-10 touch:text-sm' },
+      // touch 44: bigger cell, larger type (16), deepest recess
+      lg: { base: '[--forest-input-depth:3px] touch:size-11 touch:text-base touch:rounded-lg touch:[--forest-input-depth:4px]' },
+      // touch 52
+      xl: { base: '[--forest-input-depth:4px] touch:size-13 touch:text-lg touch:rounded-lg touch:[--forest-input-depth:4px]' },
+    },
+    // 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/popover.ts

@@ -0,0 +1,30 @@
+/**
+ * Forest theme fragment — UPopover (floating contextual panel).
+ *
+ * Forest opinions applied:
+ *
+ *   content — radius bumped from stock `rounded-md` to `rounded-xl` (the brand's warm, soft
+ *             register — one step above the tooltip's `rounded-lg` since a popover carries richer
+ *             content and warrants the extra breathing room). The shadow is stepped up from
+ *             `shadow-lg` to `shadow-xl` to give the floating panel appropriate depth against the
+ *             page surface.
+ *
+ *   arrow  — fill-bg already tracks the content background token; no Forest opinion needed beyond
+ *             confirming stroke-default resolves correctly in both modes. Class unchanged.
+ *
+ * Result: a warmer, more tactile popover that sits confidently above the canvas without competing
+ * with deeper modals.
+ *
+ * Slots sourced from: apps/docs/node_modules/.nuxt-ui/ui/popover.ts
+ * Slots touched: content
+ * Slots NOT touched: arrow — stock values are semantically correct; no Forest override required.
+ */
+
+export const popoverTheme = {
+  slots: {
+    // Softer brand radius + deeper shadow for comfortable floating-panel presence.
+    // All other classes (animation, origin, focus outline, pointer-events, ring) are inherited
+    // from the Nuxt UI base and are not restated here.
+    content: 'shadow-xl rounded-xl data-[state=open]:animate-[scale-in_var(--motion-base)_var(--motion-ease-out)] data-[state=closed]:animate-[scale-out_var(--motion-fast)_var(--motion-ease-out)]',
+  },
+} as const;

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

@@ -0,0 +1,29 @@
+/**
+ * Forest theme fragment — UProgress (linear progress bar).
+ *
+ * Forest opinions applied:
+ *
+ *   indicator — adds `will-change-transform` so the translate transition composites on the GPU
+ *     across all browsers, giving a smooth scrub during rapid model-value updates (e.g. live
+ *     telemetry feeds from the fleet API).
+ *
+ * Slots touched: `indicator`.
+ * Slot names sourced from: apps/docs/node_modules/.nuxt-ui/ui/progress.ts
+ *
+ * We do NOT override:
+ *   - `base` (track) — stock `bg-accented` fill carries the groove; the coloured indicator is the
+ *     signal. No border token reads consistently against the track in both modes, so no ring.
+ *   - Colour variants — `bg-primary`, `bg-error`, etc. are already wired to the Forest OKLCH ramps
+ *     via docs.css / forest-preset.ts; no per-slot colour class needed.
+ *   - Size compound variants — the 2xs–2xl height/width ladder is suitable; Forest has no density
+ *     opinion here beyond what `--ui-radius` (0.5 rem) already gives.
+ *   - `status`, `steps`, `step` slots — stock text-dimmed + transition-[width] treatment is correct.
+ *   - `root` — flex layout is correct for both orientations; no override needed.
+ */
+
+export const progressTheme = {
+  slots: {
+    // Indicator: GPU-composited translate for smooth live-telemetry scrubbing.
+    indicator: 'duration-(--motion-slow) ease-(--motion-ease-out) will-change-transform',
+  },
+} as const;

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

@@ -0,0 +1,45 @@
+/**
+ * Prose components (`ui.prose.*`) — the ones a docs surface actually renders.
+ *
+ * These run stock: `border-muted` around every code surface, `bg-default` on a filename header,
+ * `bg-muted` in the code body, `my-5` for rhythm. Only a measurable defect warrants an entry here.
+ *
+ * TWO CONSTRAINTS ON ANY ENTRY:
+ *
+ *   1. THE RAMP COLLAPSES A DIFFERENT PAIR IN EACH MODE. Light: `border-default` == `border-muted`
+ *      (p3 0.903) == `bg-accented`. Dark: `border-muted` == `border-accented` (0.255), and
+ *      `border-default` equals `bg-muted` — the code fill, which leaves a block no edge. A `dark:`
+ *      split therefore holds in one mode and loses the edge in the other. Frame tokens take one
+ *      token across both modes; never split them.
+ *
+ *   2. `codeIcon` STAYS STOCK. It maps a file to `i-vscode-icons-file-type-<ext>`, the brand marks an
+ *      editor shows, which is what makes a file tree readable at a glance. They live in
+ *      `@iconify-json/vscode-icons`, a devDependency alongside lucide; without that collection a tab
+ *      with a filename renders an EMPTY slot. Lucide cannot tell a .ts from a .vue, so it is not a
+ *      substitute. A file rendering blank means the extension is missing from stock's map
+ *      (`UCodeIcon` resolves the FULL FILENAME first, then the extension) — add that one key.
+ */
+export const proseTheme = {
+  // `ed-demo` is a marker, not styling. The docs editorial grid opens a new section whenever a block
+  // contains a heading, and a specimen renders headings of its own (a UEmpty title, a dialog title).
+  // The marker excludes them, so section rhythm does not depend on which state a demo is showing.
+  codePreview: {
+    slots: {
+      preview: 'ed-demo',
+    },
+  },
+
+  // Stock's collapsed root is `rounded-b-md` over an opaque `bg-muted` fill, so its square top
+  // corners paint into the 12px corners a filename header rounds — a hard right angle at each top
+  // corner, visible in dark where the fill clears the page. Rounding the closed root clips the
+  // children correctly: the root already carries `overflow-hidden`.
+  codeCollapse: {
+    variants: {
+      open: {
+        false: {
+          root: 'rounded-md',
+        },
+      },
+    },
+  },
+};