@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/canvas/index.ts

@@ -0,0 +1,17 @@
+// Forest's canvas HUD — one entry, matching ./map.
+//
+//   <FCanvasHud>            occluding overlay rails that compose with a shell, reflowing on container query
+//   <FCanvasControl>        one control on the canvas — the chrome surface and its pressed cut, owned
+//   <FCanvasControlGroup>   a merged cluster of them: one surface, hairlines inside, outer radius
+//   <FCanvasCard>           a surface on the canvas — readout, legend, stat panel. Not interactive.
+//   <FCanvasFlyout>         one control that opens into a cluster of them, in place
+//   CANVAS_RAIL_BOTTOM_MAX  the bottom rail's ceiling before it starts to crowd the canvas
+//   CANVAS_CARD_MAX         a card's ceiling — half the canvas per band, then it scrolls
+//   CanvasSurface           which surface a rail is anchored to
+export { default as FCanvasHud } from './FCanvasHud.vue';
+export { default as FCanvasControl } from './FCanvasControl.vue';
+export { default as FCanvasControlGroup } from './FCanvasControlGroup.vue';
+export { default as FCanvasCard } from './FCanvasCard.vue';
+export { default as FCanvasFlyout } from './FCanvasFlyout.vue';
+export { CANVAS_RAIL_BOTTOM_MAX, CANVAS_CARD_MAX } from './canvasSurface';
+export type { CanvasSurface } from './canvasSurface';

package/packages/ui/src/contexts/ForestContext.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// The single consumption primitive for Forest contexts (CONTEXTS-SPEC.md §2):
+// no tag = product web; one tag = the bold voice at that scale.
+//
+//   <ForestContext name="mobile"> … </ForestContext>
+//
+// Resolves theme + props from the contexts barrel (manifest-driven — a new utheme context appears
+// here with zero wrapper changes) and renders <UTheme> around the slot. UTheme is provide/inject,
+// so slot-class values survive teleports for components fired inside the subtree (select panels,
+// modals). Toasts do NOT — they render at the host's UApp Toaster; an app-root tag must sit
+// OUTSIDE <UApp> if toasts are to speak the context's voice.
+//
+// data-context is DIAGNOSTIC ONLY — the bleed check reads it; no CSS may target it (test-asserted).
+// The wrapper ALSO carries a `forest-context` / `forest-context-<name>` MARKER CLASS — that is the
+// sanctioned CSS hook for the few context-scoped rules the UTheme slot route can't express (the
+// drawer edge radius, which stock pins in compoundVariants, and the roomier drawer padding shared by
+// two contexts — both in styles/forest.css). It sits on the very same element as data-context, so its cascade reach is
+// identical — but it is a real marker class, not the diagnostic attribute the hygiene test forbids.
+//
+// Nesting guard: one context per subtree (defu merges same-slot strings by WHOLESALE replace — a
+// nested context would silently strip the outer cut). Dev = hard error; prod = the inner tag
+// renders as a pass-through and the OUTER voice wins, predictably.
+//
+// <UTheme> resolves at runtime via the Nuxt UI plugin's global registration — no import needed.
+import { computed, inject, provide, type InjectionKey } from 'vue';
+import { forestContexts, type ForestContextName } from './contexts';
+
+const props = defineProps<{ name: ForestContextName }>();
+
+// Symbol.for: a single key even if two copies of the package end up in one app.
+const KEY = Symbol.for('forest.context') as InjectionKey<string>;
+const parent = inject(KEY, undefined);
+const nested = parent !== undefined;
+
+if (nested) {
+  const msg = `[ForestContext] "${props.name}" is nested inside "${parent}" — one context per subtree (CONTEXTS-SPEC.md §2). The inner tag is a pass-through; the outer voice wins.`;
+  if (import.meta.env.DEV) throw new Error(msg);
+  console.warn(msg);
+} else {
+  provide(KEY, props.name);
+}
+
+const ctx = computed(() => forestContexts[props.name]);
+</script>
+
+<template>
+  <slot v-if="nested" />
+  <div v-else :data-context="name" :class="`forest-context forest-context-${name}`" style="display: contents">
+    <UTheme :ui="ctx.theme" :props="ctx.props">
+      <slot />
+    </UTheme>
+  </div>
+</template>

package/packages/ui/src/contexts/contexts.ts

@@ -0,0 +1,153 @@
+/**
+ * Forest contexts — the barrel the tag, the docs register, and the tests all consume.
+ * Spec: CONTEXTS-SPEC.md (§3 barrel, §4 manifest, §5 checks).
+ *
+ * A context = a UTheme delta + prop defaults + a manifest recording what it touches. The manifest's
+ * `moves` sentence is the only hand-trusted field; `channels` is derived from the theme/props
+ * exports by `deriveChannels` and test-asserted, so it cannot rot.
+ */
+import * as themes from '../themes';
+import { forestMobileTheme, forestMobileProps, forestMobileManifest } from './mobile-theme';
+import { forestMarketingTheme, forestMarketingProps, forestMarketingManifest } from './marketing-theme';
+
+export type ContextChannel = 'var' | 'slot' | 'props' | 'marker';
+
+export interface ContextManifest {
+  /** Context name — shared with the type.ts contexts. */
+  name: string;
+  /** 'utheme' = Vue subtree via <ForestContext>; 'css' = framework-free artefact (email, deferred). */
+  binding: 'utheme' | 'css';
+  /** Intended real surfaces. */
+  surfaces: string[];
+  /** Display prose for the register — the normative policy table lives in CONTEXTS-SPEC.md §2. */
+  darkPolicy: string;
+  /**
+   * Structured counterpart to darkPolicy for machinery to read (the prose is for humans). `true` =
+   * this context's canonical surface is locked light and never follows OS/host dark — so a docs
+   * specimen rendered in this context must force light even on a dark page. Marketing standalone is
+   * the case; mobile follows OS, so it is absent (falsy). Parse code reads THIS, never the sentence.
+   */
+  lockLight?: boolean;
+  /**
+   * `true` = this context's canonical surface is a COARSE (touch) pointer, so it is inherently
+   * coarse — the `coarse:` size step-up always applies there and a "simulate coarse pointer" control
+   * is meaningless (you cannot have a mobile app that is not a touch surface). Docs read THIS to force
+   * the coarse simulation on and lock the pointer toggle in this context. Mobile is the case;
+   * marketing is pointer-agnostic (viewable on desktop or mobile web), so it is absent (falsy).
+   */
+  coarse?: boolean;
+  components: Record<
+    string,
+    {
+      /** ONE human sentence describing what this context changes on the component. */
+      moves: string;
+      /** Derived by deriveChannels() and test-asserted — do not hand-tune. */
+      channels: ContextChannel[];
+    }
+  >;
+}
+
+/**
+ * Bare hook classes that look marker-shaped but are deliberately outside the marker taxonomy.
+ * `cut-fixed` = the coarse-ergonomics opt-out (consumed by the `coarse:` variant's
+ * `:not(.cut-fixed)` in styles/forest.css); classified as channel `slot`.
+ */
+export const HOOK_CLASSES = ['cut-fixed'] as const;
+
+/**
+ * Register rows: every REVIEWED component — one per themes/ fragment (an empty fragment records a
+ * component whose stock recipe is correct as-is). Single source for ContextRegister.vue and the
+ * static tests.
+ */
+export const CONTEXT_REGISTER_ROWS = [...Object.keys(themes)].sort() as string[];
+
+/** All theme-string leaf values of a component's theme entry (skips defaultVariants — those are
+ *  variant NAMES, not classes). */
+const collectStrings = (node: unknown, out: string[] = []): string[] => {
+  if (typeof node === 'string') out.push(node);
+  else if (Array.isArray(node)) node.forEach((n) => collectStrings(n, out));
+  else if (node && typeof node === 'object')
+    Object.entries(node).forEach(([k, v]) => {
+      if (k !== 'defaultVariants') collectStrings(v, out);
+    });
+  return out;
+};
+
+/** Split a utility token into variant prefixes + leaf, bracket-aware (a ':' inside [...] is not a
+ *  variant separator: `[--btn-edge:2px]`, `[&.forest-keycap]:rounded-lg`). */
+const splitToken = (token: string): { prefixes: string[]; leaf: string } => {
+  const parts: string[] = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of token) {
+    if (ch === '[') depth++;
+    if (ch === ']') depth--;
+    if (ch === ':' && depth === 0) {
+      parts.push(cur);
+      cur = '';
+    } else cur += ch;
+  }
+  parts.push(cur);
+  return { prefixes: parts.slice(0, -1), leaf: parts[parts.length - 1] };
+};
+
+const MARKER_RE = /^forest-[\w-]+$/;
+
+/** Tokenise every string of a theme entry into { prefixes, leaf } records. */
+export const themeTokens = (themeEntry: unknown) =>
+  collectStrings(themeEntry)
+    .flatMap((s) => s.split(/\s+/))
+    .filter(Boolean)
+    .map(splitToken);
+
+/** Bare `forest-*` marker classes STAMPED by a theme entry (hook classes excluded). */
+export const stampedMarkers = (themeEntry: unknown): string[] => [
+  ...new Set(
+    themeTokens(themeEntry)
+      .filter(({ leaf }) => MARKER_RE.test(leaf) && !(HOOK_CLASSES as readonly string[]).includes(leaf))
+      .map(({ leaf }) => leaf),
+  ),
+];
+
+/** Marker names CONSUMED by `[&.forest-…]` variant prefixes in a theme entry. */
+export const consumedMarkers = (themeEntry: unknown): string[] => [
+  ...new Set(
+    themeTokens(themeEntry)
+      .flatMap(({ prefixes }) => prefixes)
+      .map((p) => /\[&\.(forest-[\w-]+)\]/.exec(p)?.[1])
+      .filter((m): m is string => !!m),
+  ),
+];
+
+/**
+ * Derive the delivery channels for one component of one context (CONTEXTS-SPEC.md §5.4):
+ * `[--foo:…]` custom-property class → var; stamped or `[&.forest-…]`-scoped marker → marker;
+ * presence in the props export → props; any other utility → slot.
+ */
+export const deriveChannels = (themeEntry: unknown, hasProps: boolean): ContextChannel[] => {
+  const channels = new Set<ContextChannel>();
+  for (const { prefixes, leaf } of themeTokens(themeEntry)) {
+    if (prefixes.some((p) => /\[&\.forest-[\w-]+\]/.test(p))) channels.add('marker');
+    if (leaf.startsWith('[--')) channels.add('var');
+    else if (MARKER_RE.test(leaf) && !(HOOK_CLASSES as readonly string[]).includes(leaf)) channels.add('marker');
+    else channels.add('slot');
+  }
+  if (hasProps) channels.add('props');
+  return [...channels].sort() as ContextChannel[];
+};
+
+/** The contexts. The tag's `name` union and the register both derive from this object. */
+export const forestContexts = {
+  mobile: {
+    theme: forestMobileTheme,
+    props: forestMobileProps,
+    manifest: forestMobileManifest,
+  },
+  marketing: {
+    theme: forestMarketingTheme,
+    props: forestMarketingProps,
+    manifest: forestMarketingManifest,
+  },
+} as const;
+
+export type ForestContextName = keyof typeof forestContexts;

package/packages/ui/src/contexts/index.ts

@@ -0,0 +1,23 @@
+// Forest's expressiveness contexts — one entry, matching ./map.
+//
+//   <ForestContext>       wraps a subtree in a context (restrained or bold voice). One per subtree,
+//                         never nested, and it sits OUTSIDE UApp so toasts inherit the right voice
+//   forestContexts        the registry: which theme deltas and hook classes each context applies
+//   themeTokens()         the tokens a context changes, for the docs' context panels
+//   forestMobileTheme     the mobile context's theme delta, prop defaults and manifest
+//   forestMarketingTheme  the marketing context's theme delta, prop defaults and manifest
+export { default as ForestContext } from './ForestContext.vue';
+
+export {
+  forestContexts,
+  CONTEXT_REGISTER_ROWS,
+  HOOK_CLASSES,
+  deriveChannels,
+  themeTokens,
+  stampedMarkers,
+  consumedMarkers,
+} from './contexts';
+export type { ContextManifest, ContextChannel, ForestContextName } from './contexts';
+
+export { forestMobileTheme, forestMobileProps, forestMobileManifest } from './mobile-theme';
+export { forestMarketingTheme, forestMarketingProps, forestMarketingManifest } from './marketing-theme';

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

@@ -0,0 +1,214 @@
+/**
+ * Forest MARKETING context override for Nuxt UI.
+ *
+ * `forestPreset` is the canonical (web) theme; this is the DELTA for marketing surfaces — promo
+ * cards, hero panels, upsell bands ("in-app bands") and, at page scope, standalone marketing pages.
+ * Feed it to `<UTheme :ui="forestMarketingTheme" :props="forestMarketingProps">` around the subtree
+ * (the docs wrap this in <MarketingVariant>). Sibling of ./mobile-theme.ts — same channel, different
+ * voice; both are documented in EXPRESSIVENESS-MODES-RESEARCH.md.
+ *
+ * Voice: rounder, heavier, Mohr where it counts — but a FINE-pointer surface, so unlike mobile it
+ * keeps hover states, keeps the web focus ring, and does NOT stamp `cut-fixed`: on a touch device a
+ * marketing button still promotes one size via the preset's `coarse:` bump (marketing pages are web
+ * pages — adaptive, not baked like the native cut). Under coarse the preset's per-size lip vars
+ * outrank the base-level ones here (`coarse:` compiles to `:not(.cut-fixed)` — higher specificity);
+ * ergonomics beating voice is the intended order.
+ *
+ * Card: one radius step up (2xl/32 vs web xl/24) — --forest-card-radius follows so the nested-card
+ * concentric calc (forest.css § card nesting) stays true. The accent tint is untouched — the soft
+ * tint IS the accents' character; card boldness comes from shape + the Mohr title alone, both modes.
+ * Title: the --fx-title-* traits flip to Mohr + uppercase (the preset's title slot reads them);
+ * font-black rides along as a plain class (Mohr's only weight — not a trait, see the preset note).
+ *
+ * Button: keycap voice — rounder (lg), 2px edge, deeper lip with a bigger hover lift (rest −3px,
+ * hover −5px; web md is −2/−3). Labels stay GT Haptik: Mohr is for headlines — the italic-Mohr
+ * button label is the MOBILE voice, not marketing's. The base classes below re-voice the
+ * edge/lip-bearing rungs (keycap, pad, framed, gloss, subtle, outline — they read --btn-edge /
+ * --btn-y*); the flat rungs (solid, soft, ghost, link) read neither and share the restrained web
+ * rendering — bold delivery rides on the keycap/lg prop default (CONTEXTS-SPEC.md §6).
+ *
+ * NOT composable with the mobile delta: <UTheme> configs defu-merge and same-slot strings REPLACE
+ * wholesale, so nesting this inside the mobile cut would strip cut-fixed/pill/Mohr-label from the
+ * inner subtree. One context per subtree; an in-app promo inside the MOBILE app uses mobile's own
+ * emphasis ladder (or a dedicated hybrid delta, if that surface ever becomes real).
+ */
+import type { ContextManifest } from './contexts';
+
+/**
+ * The marketing field edge, shared by every control that can join a UFieldGroup. `ring-2` matches the
+ * 2px --btn-edge the button already carries on this cut. --forest-field-edge declares how far the ring
+ * exceeds the 1px the field recipes assume; they add it to --forest-input-depth, so the recess holds
+ * its reading at every size instead of the ramp flattening. No `cut-fixed`: this is a fine-pointer
+ * surface and keeps the preset's adaptive coarse promotion.
+ *
+ * `[&.ring]` scopes both to the ringed variants, the same guard the badge cut carries. 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.
+ */
+const FIELD_EDGE = '[&.ring]:ring-2 [&.ring]:[--forest-field-edge:1px]';
+
+export const forestMarketingTheme = {
+  card: {
+    // Traits re-pointed on SLOT classes (they ride the component through teleports; a wrapper-scoped
+    // var would not). Root: one radius step up + the concentric var + roomier p-5 (--forest-card-pad
+    // follows so nested corners stay concentric, 32→12→8) to carry the bigger title.
+    // 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. Upright Mohr, matching the title's cut.
+    root: 'rounded-2xl [--forest-card-radius:2rem] [--forest-card-pad:1.25rem] [--fx-metric-family:var(--font-display)] [--fx-metric-transform:uppercase]',
+    body: 'sm:p-5',
+    header: 'sm:p-5',
+    footer: 'sm:p-5',
+    // Title: Mohr UPPERCASE (upright — not italic; italic is mobile's cut) via the traits the preset's
+    // title slot reads, one size up; weight/tracking as plain classes.
+    title: '[--fx-title-family:var(--font-display)] [--fx-title-transform:uppercase] font-black tracking-[0.01em] text-xl',
+    // Description one size up for the louder voice; family stays GT Haptik (--font-sans, unchanged).
+    description: 'text-base',
+  },
+  button: {
+    // Deeper lip declared at base — under a coarse pointer the preset's per-size `coarse:` lip vars
+    // win (intended; see header note). No hover pinning: marketing is a hover surface.
+    base: 'rounded-lg [--btn-edge:2px] [--btn-y:-3px] [--btn-yi:3px] [--btn-y-h:-5px] [--btn-yhi:5px]',
+  },
+  // Field family: RADIUS is still untouched — the per-size ladder (8/8/12/12/12) comes from the
+  // preset, because a context cannot express a per-size radius override (no variants.size, and sm↔md
+  // are not hook-separable). The EDGE is a context matter and is set here: every segment takes the
+  // same 2px the button carries, so a joined bar reads as one slab instead of a 2px control welded to
+  // a 1px field. No `cut-fixed` — marketing is a fine-pointer surface and keeps the preset's adaptive
+  // coarse promotion, unlike the mobile cut's baked ladder.
+  input: { base: FIELD_EDGE },
+  textarea: { base: FIELD_EDGE },
+  select: { base: FIELD_EDGE },
+  selectMenu: { base: FIELD_EDGE },
+  inputMenu: { base: FIELD_EDGE },
+  inputNumber: { base: FIELD_EDGE },
+  inputTags: { base: FIELD_EDGE },
+  pinInput: { base: FIELD_EDGE },
+  inputDate: { base: FIELD_EDGE },
+  inputTime: { base: FIELD_EDGE },
+  // 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, this cut's 2px edge needs 2px.
+  fieldGroup: { base: '-space-x-0.5' },
+  // 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 rounded-sm reads as a pill. Padding untouched: the
+  // preset already runs px-2 (sm px-1), inherited here. Same override as the mobile cut.
+  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. Same as the mobile cut.
+  alert: { root: 'rounded-xl' },
+  // 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. It lands on two slots
+  // because stock pads a grouped list on `group` but a virtualised one on `content`; `[&.isolate]`
+  // scopes the content half to the virtualised cut so a grouped list is not double-padded. Same
+  // override as the mobile cut.
+  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. Radius matches the mobile cut,
+  // but the touch behaviour does NOT: marketing stamps no cut-fixed and sets no size default, so a
+  // touched marketing badge adapts via the preset's coarse: bump (marketing pages are web pages),
+  // rather than the mobile cut's baked fixed increase.
+  // `[&.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 [&.ring]:ring-2' },
+} as const;
+
+/**
+ * Default PROPS for a marketing subtree (the `props` channel — `ui` only carries slot classes).
+ * Hero CTAs default to the signature keycap at lg; explicit props on a component still win.
+ */
+export const forestMarketingProps = {
+  button: { variant: 'keycap', size: 'lg' },
+} as const;
+
+/**
+ * Manifest — what the marketing context touches (CONTEXTS-SPEC.md §4). `moves` is the hand-written
+ * record; `channels` is derived from the exports above and test-asserted.
+ */
+export const forestMarketingManifest: ContextManifest = {
+  name: 'marketing',
+  binding: 'utheme',
+  surfaces: ['standalone marketing/landing pages', 'in-app promo bands (product app)'],
+  darkPolicy: 'standalone: locked light · in-app band: follows host',
+  // Standalone marketing never goes dark (the app mounts no colour-mode code); a docs specimen in
+  // this context forces light even on a dark page. The in-app band does follow host, but the
+  // canonical surface a specimen represents is the standalone page. See ContextScope/ContextSpread.
+  lockLight: true,
+  components: {
+    input: {
+      moves:
+        'Takes the shared 2px field edge, matching the --btn-edge the button carries on this cut, and declares --forest-field-edge so the depth line grows with it and the recess holds its reading at every size. Radius is left to the preset ladder. No cut-fixed — this cut stays adaptive on touch.',
+      channels: ['slot', 'var'],
+    },
+    textarea: {
+      moves: 'Mirrors input — the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    select: {
+      moves: 'Trigger takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    selectMenu: {
+      moves: 'Trigger takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    inputMenu: {
+      moves: 'Takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    inputNumber: {
+      moves: 'Takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    inputTags: {
+      moves: 'Takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    pinInput: {
+      moves: 'Each cell takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    inputDate: {
+      moves: 'Takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    inputTime: {
+      moves: 'Takes the shared 2px field edge and the matching depth compensation.',
+      channels: ['slot', 'var'],
+    },
+    fieldGroup: {
+      moves:
+        '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: ['slot'],
+    },
+    card: {
+      moves:
+        'One radius step up (2xl/32; the concentric nesting var follows); title flips to Mohr uppercase (upright) via the --fx-title traits, one size up; description one size up, still GT Haptik. A KPI figure inside the card takes the same face through the --fx-metric traits. Mobile uses the same face italic instead.',
+      channels: ['slot', 'var'],
+    },
+    button: {
+      moves:
+        'Keycap voice at billboard scale: rounded-lg, 2px edge, deeper lip with a bigger hover lift; keycap/lg by default; labels stay GT Haptik. Flat rungs (solid/soft/ghost/link) share the restrained rendering.',
+      channels: ['props', 'slot', 'var'],
+    },
+    kbd: {
+      moves: 'Rounder corner (rounded-sm); the sm size keeps the tight rounded-xs. Same as mobile.',
+      channels: ['slot'],
+    },
+    badge: {
+      moves:
+        'Full-pill corner (rounded-full over the standard rounded-sm tag). Stays adaptive on touch — no cut-fixed, so it inherits the preset coarse bump like standard (unlike the mobile cut, which bakes a fixed increase).',
+      channels: ['slot'],
+    },
+    alert: {
+      moves: 'Rounder banner corner (rounded-xl over the standard rounded-lg). Same as mobile.',
+      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. Same as mobile.',
+      channels: ['slot'],
+    },
+  },
+};