@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/contexts/mobile-theme.ts

@@ -0,0 +1,402 @@
+/**
+ * Forest MOBILE platform override for Nuxt UI.
+ *
+ * `forestPreset` is the canonical (web) theme; this is the DELTA that turns it into the bold mobile
+ * cut. Feed it to a root `<UTheme :ui="forestMobileTheme">` (or app.config) in a forest-mobile app —
+ * the same shape the showcase uses for its mobile lens. It carries the button deltas plus the
+ * rounder card/input cut; grow it as the mobile expression fills in.
+ *
+ * NOTE: the `ui` prop is slot-level (not per-variant), so `button.base` applies to ALL button variants
+ * in the wrapped subtree — mobile reads rounder across the board (on-brand); the deeper-lip vars
+ * (--btn-y…) only do anything on the keycap variant, which is the one that translates.
+ *
+ * Button cut: full pill, 2px edge (--btn-edge), deeper anchored lip (--btn-y*), Mohr-BlackIt display
+ * label (always italic + uppercase). NO hover states: touch has no hover (Tailwind v4 already gates
+ * `hover:` behind `@media (hover:hover)` on real devices) — and the lens preview on desktop must match,
+ * so the hover vars are pinned to their rest values: hover lift == rest lift (--btn-y-h/--btn-yhi) and
+ * hover face == rest face (--btn-hover; declared plain AND `dark:` — the PAD trap — because the colour
+ * PALs set `dark:[--btn-hover:…]`, which outranks a plain override in dark mode). Press (:active)
+ * feedback is kept — touch fires it. Focus is a POP, not a ring: with no hover to lean on, a focused
+ * keycap lifts past its rest height (-7px vs the -4px rest lip) and the inherited ::before focus ring is
+ * switched off (outline-0!) so the raise is the sole indicator. Mobile-only — the web preset's focus
+ * stays ring-on-::before with no lift. Mohr's caps are centred in their own box by the @font-face metric overrides in
+ * packages/fonts/forest-fonts.css, so the label needs no box-level treatment and button text may be passed
+ * either as the `label` prop or as default-slot children.
+ */
+import type { ContextManifest } from './contexts';
+
+/**
+ * The mobile field edge, shared by every control that can join a UFieldGroup — a mismatched ring
+ * along a joined seam is what this constant exists to prevent. `ring-2` matches the button's
+ * --btn-edge on this cut. The depth line is drawn from the top edge inward and the ring paints over
+ * its first pixels, so --forest-field-edge declares how much the ring exceeds the 1px the recipes
+ * assume; the field recipes add it to --forest-input-depth, which keeps the recess reading the same
+ * at every size rather than flattening the ramp. `cut-fixed` selects the baked touch rungs.
+ *
+ * `[&.ring]` scopes the edge to the ringed variants, the same guard the badge cut carries below. A
+ * borderless field — `variant="none"`, which is what a command palette renders its search box as —
+ * has no `ring` class to thicken, so an unscoped edge painted a 2px box around it and fed
+ * --forest-field-edge into the depth-line shadow, bending the seam under the search row around the
+ * field's own corners. `cut-fixed` stays unscoped: the touch ladder applies to every field.
+ */
+const FIELD_EDGE = 'cut-fixed [&.ring]:ring-2 [&.ring]:[--forest-field-edge:1px]';
+
+export const forestMobileTheme = {
+  button: {
+    // Focus is a POP, not a ring: a focused keycap/pad lifts past its rest lip (--btn-y-focus = -7px) and
+    // its ::before ring is switched off (--btn-ring-w = 0). All three are plain VARS the keycap recipe
+    // reads (PAD too) — NOT `before:`/`translate` utilities. That matters: the slot-level base hits every
+    // variant, and a `before:` utility here would auto-add `content:''` to the flat variants' ::before
+    // (which isn't absolute), turning it into a phantom leading flex item that `gap-1.5` shoves the label
+    // past. Vars touch only the variants that read them, so the flat variants stay put and gap-free.
+    // `cut-fixed` is the BAKED trigger for the shared touch ladder (styles/forest.css): the `touch:`
+    // rules in button.ts/input.ts fire either on a coarse pointer or on this marker, landing on the
+    // same rungs — 28/36/40/44/52 vs the fine-pointer 24/28/32/36/40. Baked, so the desktop mock and
+    // the native/Flutter export show true touch size with no pointer to query; and because both
+    // triggers name the same numbers, a real phone can't step twice. (Controls with no baked ladder of
+    // their own — badge, switch, checkbox, … — instead reach touch size via a bigger default `size`,
+    // so for THOSE this marker still means "opt out of the one-step `coarse:` bump".)
+    base: 'cut-fixed rounded-full [--btn-edge:2px] [--btn-y:-4px] [--btn-yi:4px] [--btn-y-h:-4px] [--btn-yhi:4px] [--btn-y-focus:-7px] [--btn-yi-focus:7px] [--btn-ring-w:0px] [--btn-hover:var(--btn-face)] dark:[--btn-hover:var(--btn-face)] [font-family:Mohr-BlackIt] italic font-black uppercase',
+    // Icon slots opt out of the coarse bump too — the preset hangs `coarse:size-*` on each icon slot
+    // (sm/lg), and the variant's `:not(.cut-fixed)` tests the element the utility sits on, so base
+    // alone would hold while the icon still grew a step. Same fix as the badge below.
+    leadingIcon: 'cut-fixed',
+    trailingIcon: 'cut-fixed',
+  },
+  // Card: one radius step up (2xl/32 over web's xl/24); --forest-card-radius follows so the nested
+  // concentric calc stays true (the 24→8 step becomes 32→16→8). Shape only — the mobile app keeps the
+  // readable normal title; the Mohr uppercase headline is marketing's voice, not the app's. Same
+  // radius as marketing (marketing adds the title on top).
+  card: {
+    // Roomier p-5 (20px) to carry the bigger title; --forest-card-pad follows so nested corners stay
+    // concentric (32→12→8). Radius one step up + the concentric var.
+    // The --fx-metric traits ride the ROOT, not a slot: a KPI figure sits in the card's body, so the
+    // var has to be declared above it. Mohr-BlackIt matches the title's cut.
+    root: 'rounded-2xl [--forest-card-radius:2rem] [--forest-card-pad:1.25rem] [--fx-metric-family:var(--font-display-italic)] [--fx-metric-transform:uppercase]',
+    body: 'sm:p-5',
+    header: 'sm:p-5',
+    footer: 'sm:p-5',
+    // Title: Mohr ITALIC (the Mohr-BlackIt cut, mobile's signature — the button uses the same face),
+    // uppercase (Mohr is ALWAYS uppercase), one size up. Family + transform via the --fx-title traits
+    // the preset's title slot reads; italic + weight as plain classes. Marketing uses the same face
+    // upright instead.
+    title: '[--fx-title-family:Mohr-BlackIt] [--fx-title-transform:uppercase] italic font-black text-xl',
+    // Description one size up for comfortable thumb reading; family stays GT Haptik (--font-sans).
+    description: 'text-base',
+  },
+  // Input: BAKES one size up (default md → lg, via forestMobileProps below) — the proportional touch
+  // step, same shape as button/badge. The native/Flutter surface is always touch but is prototyped on
+  // a fine-pointer desktop where a `coarse` media query never fires, so the step is baked via the size
+  // prop rather than the preset's adaptive `coarse:` promotion. `cut-fixed` opts this cut out of that
+  // promotion so a real coarse phone doesn't step AGAIN (lg→xl); it sits on base + the icon slots
+  // because those are the slots the preset bumps. Radius mirrors web — input.ts owns the ladder.
+  input: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  // Textarea: same touch step as input (a multiline input shares its identity). Bakes size lg via
+  // forestMobileProps + cut-fixed on the ladder slots, which selects the touch rungs.
+  textarea: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  // Field group: the overlap must equal the segment edge, or a joined seam paints both edges side by
+  // side. Stock's `-space-x-px` collapses two 1px rings to 1px; on this cut every segment carries a
+  // 2px edge, so the overlap steps to 2px (`-space-x-0.5`) to collapse them to one 2px line.
+  fieldGroup: { base: '-space-x-0.5' },
+  // Drawer: peach surface, matching mobile's default card variant — the same warm tint (light) /
+  // warm-950 (dark) fill and the aligned warm hairline ring, so a sheet and the cards inside it read
+  // as one family. Handle and edge share one solid mark colour (--forest-card-peach-mark: Bark Brown
+  // light, Acer Orange dark) instead of the stock neutral handle, which sat off-hue on peach. Radius stays with the preset (compoundVariants + the
+  // --forest-drawer-radius var re-pointed on the context marker class in styles/forest.css).
+  // TRAP: a local `:ui="{ content: '…' }"` on a UDrawer REPLACES this string (useComponentProps defus
+  // raw over theme, and defu overwrites strings rather than concatenating) — the surface silently
+  // reverts to bg-default. Pass one-off content classes via the `class` prop instead (it lands on
+  // content whenever the drawer has no trigger slot), which merges alongside the theme value.
+  drawer: {
+    // ring-2 over stock's 1px hairline, on --forest-card-peach-mark (Bark Brown light / Acer Orange
+    // dark) at /70 — matching what the handle actually paints, since vaul renders it at opacity .7
+    // at rest. A sheet floats over the page and needs an edge that holds its shape; the translucent
+    // peach CARD hairline is for something that sits IN the page.
+    content: 'bg-[var(--forest-card-peach-bg)] ring-2 ring-[var(--forest-card-peach-mark)]/70',
+    // Declared plain AND `dark:` — the PAD trap: the preset's handle sets `dark:bg-[var(--forest-700)]!`,
+    // which outranks a plain override in dark mode. The token is already mode-aware, so both point at it.
+    handle: 'bg-[var(--forest-card-peach-mark)]! dark:bg-[var(--forest-card-peach-mark)]!',
+    // Title in mobile's signature face — Mohr-BlackIt (the italic cut, licensed for this context
+    // only; web/marketing must not reach for it), ALWAYS uppercase, and stepped up from the preset's
+    // text-base to text-xl so a sheet header carries at arm's length. Same move as the mobile card
+    // title. Reaches the `title`-PROP path only; a free-form #header slot styles itself.
+    title: '[font-family:Mohr-BlackIt] italic font-black uppercase text-xl',
+  },
+  // Kbd: rounder corner (rounded-sm over web's rounded-xs); sm keeps rounded-xs (`[&.h-4]:`, stock
+  // sm height, (0,2,0) beats base) — at 16px tall rounded-sm reads as a pill. Padding is not touched
+  // here: the preset already runs px-2 (sm px-1), so this cut inherits it. Marketing matches.
+  kbd: { base: 'rounded-sm [&.h-4]:rounded-xs' },
+  // Alert: rounder banner (rounded-xl over web's rounded-lg) — the bold voice softens the corner a
+  // step further. Title weight comes from the preset, inherited. Marketing matches.
+  alert: { root: 'rounded-xl' },
+  // Calendar: rounder card frame (rounded-2xl over web's rounded-xl) — the bold voice softens the
+  // grid's containing card a step further, in step with the card cut. Shape only; the grid, date
+  // cells, heading weight and focus ring are all inherited from the preset.
+  calendar: { root: 'rounded-2xl' },
+  // Listbox: rounder shell (rounded-xl over the stock rounded-lg the standard cut leaves alone) —
+  // the bold voice takes the list from a field to a card. The corner has to be paid for: at 24px the
+  // arc cuts into the first and last rows, so the row inset steps 4px→12px and the rows sit inside
+  // the curve instead of under it.
+  //
+  // That inset lands on TWO slots because stock puts the padding in different places: a grouped list
+  // pads each `group` (and keeps the between-group rule full bleed on `content`), while a virtualised
+  // list renders rows straight into `content` and pads that instead. `[&.isolate]` scopes the content
+  // half to the virtualised cut — stock's own marker for it — so a grouped list is not double-padded.
+  // Coupled to that literal class; if it is ever renamed a virtualised list silently loses the inset.
+  // One flat value across xs→xl — a context delta cannot carry size variants. Marketing matches.
+  listbox: { root: 'rounded-xl', group: 'p-3', content: '[&.isolate]:p-3' },
+  // Badge: full pill (rounded-full over web's rounded-sm) — the bold voice rounds the chip all the
+  // way. Weight/case/tracking come from the preset, inherited here. The UTheme base merges after the
+  // preset's size variants, so a plain `rounded-full` wins the border-radius bucket at every size —
+  // no per-size override needed on this side. Marketing matches ON RADIUS.
+  //
+  // Touch increase, BAKED not adaptive: the default size steps up md→lg (forestMobileProps), and
+  // `cut-fixed` opts this cut out of the preset's `coarse:` bump (styles/forest.css) so it holds the
+  // baked size on a real coarse-pointer phone instead of promoting AGAIN. Same shape as the mobile
+  // button (props size + cut-fixed). Marketing does NOT do this — it has no cut-fixed, so it adapts
+  // via the preset coarse bump like standard.
+  // `cut-fixed` also on the icon slots, not just base: the preset hangs its `coarse:` bump on
+  // EACH slot (base carries text/padding/radius, leadingIcon/trailingIcon carry `coarse:size-*`),
+  // and the variant's `:not(.cut-fixed)` tests the element the utility sits on. Base alone would
+  // hold while the icon still promoted a step on a real coarse-pointer surface — so the opt-out has
+  // to land on every slot the preset bumps. Same shape needed on the button below.
+  // `[&.ring]` scopes the 2px edge to the ringed variants (outline/subtle) — a bare `ring-2` would
+  // paint a ring on solid/soft, which carry no ring classes at all. Coupled to stock's literal `ring`
+  // class from its colour×variant compounds; if that token is ever renamed the edge silently reverts.
+  badge: { base: 'rounded-full cut-fixed [&.ring]:ring-2', leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  // Tabs: bakes size lg (forestMobileProps) + cut-fixed on the slots the preset's coarse: ladder
+  // bumps (trigger + leadingIcon), so a real coarse phone holds lg instead of stepping to xl. Same
+  // shape as the input/badge mobile cut. Radius follows the size via the preset's pill ladder.
+  tabs: { trigger: 'cut-fixed', leadingIcon: 'cut-fixed' },
+  // Pin input: bakes size lg (forestMobileProps) + cut-fixed on the cell, which selects the touch rungs
+  // with no pointer to query. Same shape as the input mobile cut (a pin input is a split input).
+  pinInput: { base: FIELD_EDGE },
+  // Switch: bakes size lg + cut-fixed on every slot the preset's coarse: ladder bumps (track width,
+  // height, thumb, label) so a real phone holds lg instead of stepping to xl. The whole switch is the
+  // tap target, so the bigger size is a real touch win.
+  switch: { base: 'cut-fixed', container: 'cut-fixed', thumb: 'cut-fixed', wrapper: 'cut-fixed' },
+  // Checkbox / radio group: bake size lg + cut-fixed on the slots their coarse: ladders bump, so a
+  // real phone holds lg (taller tap rows) instead of stepping to xl.
+  checkbox: { base: 'cut-fixed', container: 'cut-fixed', wrapper: 'cut-fixed' },
+  radioGroup: { base: 'cut-fixed', item: 'cut-fixed', legend: 'cut-fixed', container: 'cut-fixed', fieldset: 'cut-fixed', indicator: 'cut-fixed' },
+  // Slider: bakes size lg + cut-fixed on the thumb — the only slot the preset's coarse: ladder bumps
+  // — so a real phone holds lg's bigger handle instead of stepping to xl.
+  slider: { thumb: 'cut-fixed' },
+  // Input date / time: field controls — same mobile cut as input. Bake size lg + cut-fixed on the
+  // ladder slots (base + the two icons), which selects the touch rungs on a fine-pointer mock.
+  inputDate: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  inputTime: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  // Input number: field control — same mobile cut as input. Bake size lg + cut-fixed on the base (its
+  // only ladder slot), which selects the touch rungs on a fine-pointer mock.
+  inputNumber: { base: FIELD_EDGE },
+  // Select: field control (trigger) — same mobile cut as input. Bake size lg + cut-fixed on the base
+  // and trigger icons (its ladder slots), which selects the touch rungs on a fine-pointer mock.
+  select: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  // Select menu / input menu: field controls (trigger + panel) — same mobile cut as input/select.
+  // Bake size lg + cut-fixed on base + trigger icons, selecting the touch rungs.
+  selectMenu: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  inputMenu: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+  // Input tags: field control (chips + input) — same mobile cut. Bake size lg + cut-fixed on base +
+  // icons, selecting the touch rungs.
+  inputTags: { base: FIELD_EDGE, leadingIcon: 'cut-fixed', trailingIcon: 'cut-fixed' },
+} as const;
+
+/**
+ * Default PROPS for the mobile subtree — UTheme's `ui` only carries slot classes (a
+ * `defaultVariants` key in there is silently ignored), so per-component prop defaults ride the
+ * separate `props` channel: `<UTheme :ui="forestMobileTheme" :props="forestMobileProps">`.
+ * Mobile default emphasis: framed (web defaults to solid in the preset). Default size lg — which on
+ * the mobile cut renders at 44px (the `cut-fixed:` baked ladder in button.ts/input.ts: 28/36/40/44/52
+ * for xs→xl, vs web's 24/28/32/36/40), hitting Apple's 44pt min tap target; explicit `size` still wins
+ * and steps the same ladder (xl → 52). Web/marketing keep the shorter shared ladder.
+ */
+export const forestMobileProps = {
+  button: { variant: 'framed', size: 'lg' },
+  // Cards default to the peach accent on mobile — warm tint + aligned warm border, matching the
+  // drawer surface. Explicit variant props still win.
+  card: { variant: 'peach' },
+  // Badge default steps up md→lg on mobile — the baked touch increase (paired with `cut-fixed` in
+  // the theme so the preset's coarse: bump doesn't stack on top). Explicit size props still win.
+  badge: { size: 'lg' },
+  // Chip defaults to INSET on mobile. Stock overflows the host boundary, which is right for a square
+  // icon button but wrong here: the mobile button cut is a full pill and the app's avatars are round,
+  // so an overflowing dot floats off a curved edge with a visible gap. Inset holds it at the inner
+  // edge the host's own shape defines. No theme entry needed — stock owns the geometry (the overflow
+  // translate lives in compoundVariants keyed on `inset: false`, so simply not matching it IS the
+  // inset render), which makes this a prop default and nothing else. Explicit `:inset="false"` wins.
+  chip: { inset: true },
+  // Input default steps up md→lg — the baked touch step, same shape as button/badge. `cut-fixed` in the
+  // theme selects the touch rungs, so the desktop mock shows the same size a real phone does. Explicit
+  // size props still win.
+  input: { size: 'lg' },
+  // Field group steps up md→lg like every other field control. It matters MORE here than elsewhere:
+  // UFieldGroup PROVIDES its size to its children (`useFieldGroup`: a child resolves
+  // `props.size ?? fieldGroup.size`), so without a default here a mobile group fell back to md and
+  // dragged every joined child down to md with it — overriding their own lg mobile defaults. Setting
+  // it on the group is what makes a joined bar read at mobile size. An explicit `size` on the group
+  // (as the docs demos use) still wins.
+  fieldGroup: { size: 'lg' },
+  // Textarea mirrors input — baked one step up (md→lg) for comfortable thumb input.
+  textarea: { size: 'lg' },
+  // Tabs step up md→lg for touch-sized tap targets — the baked touch increase paired with cut-fixed
+  // in the theme so the preset's coarse: ladder doesn't step it again on a real phone.
+  tabs: { size: 'lg' },
+  // Pin input steps up md→lg for thumb-sized OTP cells — same baked touch increase as input.
+  pinInput: { size: 'lg' },
+  // Switch steps up md→lg — the whole control is the tap target, so bigger reads as easier to hit.
+  switch: { size: 'lg' },
+  // Checkbox / radio group step up md→lg — a taller tap row for touch.
+  checkbox: { size: 'lg' },
+  radioGroup: { size: 'lg' },
+  // Slider steps up md→lg — a bigger thumb to grab on touch.
+  slider: { size: 'lg' },
+  // Date / time fields step up md→lg — same touch step as input.
+  inputDate: { size: 'lg' },
+  inputTime: { size: 'lg' },
+  inputNumber: { size: 'lg' },
+  select: { size: 'lg' },
+  selectMenu: { size: 'lg' },
+  inputMenu: { size: 'lg' },
+  inputTags: { size: 'lg' },
+} as const;
+
+/**
+ * Manifest — what the mobile context touches (CONTEXTS-SPEC.md §4). `moves` is the hand-written
+ * record; `channels` is derived from the exports above and test-asserted.
+ */
+export const forestMobileManifest: ContextManifest = {
+  name: 'mobile',
+  binding: 'utheme',
+  surfaces: ['ride app (native/Flutter export; prototyped on desktop web)'],
+  darkPolicy: 'follows OS',
+  // The ride app is a touch surface — inherently coarse. Docs force the coarse simulation on and lock
+  // the pointer toggle here (see ContextScope / ContextSwitch); a "simulate touch" control on a
+  // context that IS touch is a no-op. Ladder components (button/input/…) carry cut-fixed and are already
+  // on the touch rungs; the rest promote under the forced coarse, exactly as on a real phone.
+  coarse: true,
+  components: {
+    button: {
+      moves:
+        'Full-pill keycap cut: 2px edge, deep anchored lip, Mohr-BlackIt italic uppercase label, focus pop instead of ring; framed/lg by default. Sits on the shared touch ladder — height + type 28/36/40/44/52 via the touch: rules in button.ts, selected here by the baked cut-fixed marker rather than by a pointer query, so the desktop mock matches a real phone.',
+      channels: ['props', 'slot', 'var'],
+    },
+    input: {
+      moves:
+        'lg default plus the shared touch ladder — height + type 28/36/40/44/52 via the touch: rules in input.ts (height-locked to the button so a joined field group matches), selected here by the baked cut-fixed marker rather than by a pointer query. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    textarea: {
+      moves:
+        'Mirrors input — bakes one size up (md→lg default) for thumb input, opted out of the adaptive coarse promotion. Radius mirrors web. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    drawer: {
+      moves:
+        'Peach surface matching the default card variant, with a solid Bark Brown mark (Acer Orange in dark) on both the 2px edge and the drag handle, and a Mohr-italic title one size up. Edge radius rounds to 2xl/32 and the container gets roomier 24px horizontal padding — those two ride CSS on the context marker class, not this theme, so the channel here is slots only.',
+      channels: ['slot'],
+    },
+    kbd: {
+      moves: 'Rounder corner (rounded-sm); the sm size keeps the tight rounded-xs. Same as marketing.',
+      channels: ['slot'],
+    },
+    listbox: {
+      moves:
+        'Rounder shell (rounded-xl over the stock corner the standard cut leaves alone), with the row inset stepped 4px→12px so the first and last rows clear the arc instead of tucking under it. The inset lands on both group and content because stock pads a grouped list and a virtualised one in different slots. One flat value across every size — a context delta carries no size variants. Same as marketing.',
+      channels: ['slot'],
+    },
+    badge: {
+      moves:
+        'Full-pill corner (rounded-full over the standard rounded-sm tag). Touch increase baked in: default size steps md→lg and cut-fixed opts out of the coarse bump so it holds that size. Marketing matches the corner but stays adaptive (no baked increase).',
+      channels: ['props', 'slot'],
+    },
+    chip: {
+      moves:
+        'Defaults to inset — the dot sits inside the host boundary instead of overflowing it, because the mobile button is a full pill and the app\'s avatars are round, so an overflowing dot floats off a curved edge. Geometry is untouched stock (the overflow translate is a compound variant keyed on inset: false); this is a prop default and nothing more.',
+      channels: ['props'],
+    },
+    alert: {
+      moves: 'Rounder banner corner (rounded-xl over the standard rounded-lg). Same as marketing.',
+      channels: ['slot'],
+    },
+    calendar: {
+      moves:
+        'Rounder card frame (rounded-2xl over the standard rounded-xl) — shape only; grid, date cells, heading and focus ring are inherited.',
+      channels: ['slot'],
+    },
+    card: {
+      moves:
+        'Rounder cut: one radius step up (rounded-2xl/32 over the standard xl/24); --forest-card-radius follows so nested cards step 32→12→8 at the roomier p-5. Title is Mohr italic + uppercase (the Mohr-BlackIt cut), one size up; description one size up, still GT Haptik. Defaults to the peach accent variant. A KPI figure inside the card takes the same face through the --fx-metric traits. Same radius as marketing; marketing title is the same face upright.',
+      channels: ['props', 'slot', 'var'],
+    },
+    tabs: {
+      moves:
+        'Bakes size lg default (md→lg) for touch tap targets; cut-fixed opts the trigger/icon out of the preset coarse ladder so it holds instead of stepping to xl.',
+      channels: ['props', 'slot'],
+    },
+    pinInput: {
+      moves:
+        'Bakes size lg default (md→lg) for thumb-sized OTP cells; cut-fixed puts the cell on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    switch: {
+      moves:
+        'Bakes size lg default (md→lg) for a thumb-sized tap target; cut-fixed opts the track/thumb/label out of the preset coarse ladder so it holds instead of stepping to xl.',
+      channels: ['props', 'slot'],
+    },
+    checkbox: {
+      moves:
+        'Bakes size lg default (md→lg) for a taller tap row; cut-fixed opts the box/row/label out of the preset coarse ladder so it holds instead of stepping to xl.',
+      channels: ['props', 'slot'],
+    },
+    radioGroup: {
+      moves:
+        'Bakes size lg default (md→lg) for a taller tap row; cut-fixed opts the circle/row/text out of the preset coarse ladder so it holds instead of stepping to xl.',
+      channels: ['props', 'slot'],
+    },
+    slider: {
+      moves:
+        'Bakes size lg default (md→lg) for a bigger grab thumb; cut-fixed opts the thumb out of the preset coarse ladder so it holds instead of stepping to xl.',
+      channels: ['props', 'slot'],
+    },
+    inputDate: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the field/icons on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    inputTime: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the field/icons on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    inputNumber: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the field on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    select: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the trigger/icons on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    selectMenu: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the trigger/icons on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    inputMenu: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the field/icons on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    inputTags: {
+      moves:
+        'Bakes size lg default (md→lg) — the same touch step as input; cut-fixed puts the field/icons on the shared touch ladder (28/36/40/44/52) with no pointer to query — the same rungs a coarse pointer selects. Carries the shared 2px field edge (matching the button) with the depth line stepped to 5px so the recess still reads 3px under it.',
+      channels: ['props', 'slot', 'var'],
+    },
+    fieldGroup: {
+      moves:
+        'Bakes size lg default (md→lg). UFieldGroup provides its size to joined children, so setting it here makes a mobile group read at lg instead of dragging its children back down to md. Steps the overlap to 2px (-space-x-0.5) to match this cut\'s 2px segment edge, so a joined seam collapses to one line instead of painting both edges.',
+      channels: ['props', 'slot'],
+    },
+  },
+};

package/packages/ui/src/filter/FFilterBar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+// The filter row: a trigger, applied chips, and clear-all — the whole thing in one bar.
+//
+// This is the composition, not the implementation. <FFilterTrigger> is the add-filter control and
+// <FFilterClauses> is the row of chips; both are controlled by the same Clause[], so a page that
+// wants them in DIFFERENT bars writes the two directly and binds them to one v-model:
+//
+//   <FPageToolbar>
+//     <template #left><UNavigationMenu :items="views" /></template>
+//     <template #right><FFilterTrigger v-model="clauses" :schema="schema" /></template>
+//   </FPageToolbar>
+//
+//   <FPageToolbar v-if="clauses.length">
+//     <FFilterClauses v-model="clauses" :schema="schema" />
+//   </FPageToolbar>
+//
+// Nothing is teleported or injected to make that work — sharing a v-model is the whole mechanism.
+//
+// Controlled. The bar's data contract is a Clause[]: it never receives rows and never filters. A
+// consumer passes the clauses to applyClauses, or toColumnFilters' output to a table.
+import { computed, useTemplateRef } from 'vue';
+import FFilterClauses from './FFilterClauses.vue';
+import FFilterTrigger from './FFilterTrigger.vue';
+import type { FilterSlot } from './filter.theme';
+import type { FilterSchema } from './filterSchema';
+import type { Clause } from './filterClause';
+
+const props = defineProps<{
+  modelValue: Clause[];
+  schema: FilterSchema;
+  /** Text beside the trigger's icon. Off by default — see <FFilterTrigger>. */
+  label?: string;
+  ui?: Partial<Record<FilterSlot, string>>;
+}>();
+
+const emit = defineEmits<{ 'update:modelValue': [clauses: Clause[]] }>();
+
+const trigger = useTemplateRef<InstanceType<typeof FFilterTrigger>>('trigger');
+const clauses = useTemplateRef<InstanceType<typeof FFilterClauses>>('clauses');
+
+const update = (next: Clause[]) => emit('update:modelValue', next);
+
+const model = computed(() => props.modelValue);
+
+defineExpose({ open: () => trigger.value?.open() });
+</script>
+
+<template>
+  <!-- The trigger goes through the clause row's slot rather than beside it, so both halves share ONE
+       flex flow: the trigger holds its place at the head of the row and the chips wrap past it,
+       which is what they did when this was a single component. -->
+  <FFilterClauses
+    ref="clauses"
+    :model-value="model"
+    :schema="props.schema"
+    :trigger="trigger"
+    :ui="props.ui"
+    @update:model-value="update"
+  >
+    <template #trigger>
+      <FFilterTrigger
+        ref="trigger"
+        :model-value="model"
+        :schema="props.schema"
+        :clauses="clauses"
+        :label="props.label"
+        :ui="props.ui"
+        @update:model-value="update"
+      />
+    </template>
+  </FFilterClauses>
+</template>