@evinvest/uikit 0.29.4 → 0.31.0

package/README.md

@@ -1,10 +1,11 @@
 # @evinvest/uikit
 
 A **dep-light** React UI kit with shadcn-style semantics — the TypeScript mirror
-of the `uikit` feature of the [`ev_lib`](https://github.com/EV-invest/lib) Rust crate
-(`ev_lib::uikit`, Dioxus). Both ports are driven from the same canonical class
-strings and the same design tokens, so a component looks and behaves the same
-whether it is rendered by React or by Dioxus.
+of the UI kit of the [`ev_lib`](https://github.com/EV-invest/lib) Rust crate,
+which ships it for Dioxus (`ev_lib::uikit_dioxus`) and Leptos
+(`ev_lib::uikit_leptos`) over one framework-free core. All three are driven from
+the same canonical class strings and the same design tokens, so a component
+looks and behaves the same whether it is rendered by React, Dioxus or Leptos.
 
 "Dep-light" means: **no `@radix-ui/*`, no `class-variance-authority`, no
 `lucide-react`, no charting / carousel / date-picker / OTP / toast libraries.**
@@ -59,14 +60,23 @@ your Tailwind v4 entrypoint — this is the load-bearing part of the kit:
 
 | group | names |
 |---|---|
-| scope | `:root` · `[data-brand="…"]` — a theme root; `.light` · `.dark` — a polarity beneath it |
-| surfaces | `background` `card` `popover` `muted` `hover` |
-| ink | `ink` `ink-mid` `ink-soft` — hierarchy, loudest first |
-| lines | `border` `input` `ring` |
-| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface (`#128377` fill under a white `on-primary`, `#2a9d8f` ink); `accent-error-ink` — the error role as text on its own tint (derived, a palette may pin it) |
-| scalars | `radius` `control-radius` `control-py` `display-scale` `band-py` `page-max` `page-px` `shell-rail-w` `shell-tab-bar-h` `shadow-*` `font-*` |
+| scope | `:root` · `[data-brand="…"]` — a theme root; `.light` · `.dark` — a polarity beneath it; `[data-theme="oldschool"]` — EV's navy look |
+| surfaces | `background` (page) · `card` (surface) · `secondary` (raised) · `popover` (overlay) · `muted` (inset, input fill) |
+| states | `hover` · `active` · `selected` — translucent tints; `scrim` — behind a modal |
+| ink | `ink` · `ink-mid` · `ink-soft` — hierarchy, loudest first; `ink-faint` — disabled only |
+| lines | `border-subtle` (row rule) · `border` (hairline, 14 %) · `border-strong` (state and overlay edges) · `input` (control edge, ≥ 3:1) · `ring` |
+| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface; `primary-hover` · `primary-border` — the primary button's states |
+| status inks | `positive-ink` · `accent-info-ink` — a quiet status role as text on a surface (derived, a palette may pin them); warn and error text wears `accent-warn` · `accent-error` itself, held to 3:1 |
+| faces | `button-danger-*` (`bg` `hover` `border` `ink`) — the destructive `Button`; `chip-{neutral,primary,positive,info,warn,error}-{bg,border}` — the `Badge`; `button-primary-*` — no kit component paints it; derived for a brand, pinned per theme by EV |
+| type | `text-caption` 11/14 · `body-s` 12/16 · `body` 13/18 · `body-l` 14/20 · `h3` 14/20 · `h2` 24/30 · `h1` 32/38 · `figure-m` 20/24 · `figure-l` 28/32 (size and line height each) |
+| scalars | `radius` (panel, 6 px) · `control-radius` (4 px) · `chip-radius` (4 px) · `depth-card` `depth-elevated` `depth-overlay` · `control-py` `display-scale` `band-py` `page-max` `page-px` `shell-rail-w` `shell-tab-bar-h` · `font-*` |
 | motion | `ev-ease-out` `ev-ease-in-out` `ev-dur-fast` `ev-dur-base` `ev-dur-slow` `ev-rise` `ev-stagger` `ev-stagger-section` |
-| charts | `chart-1` … `chart-5` |
+| charts | `chart-1` … `chart-6` |
+
+A palette owes **29 names**: the colours that are not derived, which is every
+role and surface above plus `chart-1` … `chart-6`. The states, lines, inks,
+status inks, faces and chips are derived from them with formulas, so a brand
+file that pins none of them still renders.
 
 Custom properties inherit, so a scope class on a `<section>` re-themes its
 subtree — `bg-card text-ink` is correct on both polarities with no prop. That is
@@ -80,14 +90,38 @@ polarity — so `on-{role}` exists exactly there.
 
 A fill and an ink are different jobs, and `primary` is the one role that
 names them separately: `primary` is the fill (`bg-primary text-on-primary` on
-a button, a checked switch or checkbox — `#128377`, white reads on it at
-4.63:1 and it clears 3:1 against `background`, `secondary`, `card` and
-`popover`) and `primary-ink` is the same hue as ink (`text-primary-ink` on a
-link or eyebrow, a radio dot, a slider range, `border-primary-ink` on a checked
-outline, the focus `ring` — `#2a9d8f`, 5.85:1 on `background`, 4.72:1 on
-`card`). Every other role holds its own label and reads as ink with one value.
-A consumer sheet must define `--primary-ink`; see
-[`docs/spec/accents.md`](../../docs/spec/accents.md).
+a primary button, a checked switch or checkbox — `#138377`, white reads on it at
+4.62:1 and it clears 3:1 against every plane) and `primary-ink` is the same hue
+as ink (`text-primary-ink` on a link or eyebrow, a radio dot, a slider range,
+the focus `ring` — `#35a395` in Dark, `#116f65` in Light). The status roles
+follow the same rule with their `-ink` values. A consumer sheet must define
+`--primary-ink`; see [`docs/spec/accents.md`](../../docs/spec/accents.md).
+
+### Themes
+
+EV ships three, each a zero-specificity rule that pins every EV token:
+
+| theme | how to switch | look |
+|---|---|---|
+| **Dark** (default) | nothing: no class, no attribute | near-black neutrals, warm ink, one teal accent, flat |
+| **Light** | `class="light"` on `<html>` or on any wrapper | warm paper planes, same shapes |
+| **Oldschool** | `data-theme="oldschool"` on `<html>` or on any wrapper | the navy look: radius 8 / control 6 / pill chips, tinted chips, real shadows |
+
+Dark and Light are flat: depth is surface steps and hairlines, and the
+`--depth-*` tiers behind `shadow-card`, `shadow-elevated` and `shadow-overlay`
+are a zero shadow. Oldschool gives them back.
+
+Scoping works the way the polarity classes always did. A `.light` or
+`[data-theme="oldschool"]` wrapper inside a Dark page takes its own full token
+set; a `.light` or `.dark` inside an Oldschool region also takes Oldschool.
+EV's rules do not match inside a `[data-brand]` scope or on its element, so a
+brand's own `.light` and `.dark` never pick EV's values up. Keep `data-theme`
+and `data-brand` on separate elements. For a side-by-side view give each scoped
+wrapper its own `PortalProvider` container so overlays stay inside the scope.
+
+The planes sit only 1.04–1.14:1 apart on purpose, so what separates them is the
+`--border` hairline (measured 1.37–1.46:1 on Dark, 1.35:1 on Light). Do not lift
+a plane to chase the ratio; see [`docs/spec/accents.md`](../../docs/spec/accents.md).
 
 Accents are decorative and **ordered by significance**, quiet to loud. Pick a
 rung by how loud the thing should be, never by what it means; see
@@ -105,29 +139,29 @@ It has two halves, each also shipped as a flat sheet of its own —
 `styles/theme.css` (the contract) and `styles/ev.css` (EV's palette):
 
 - **the contract** — the `@theme inline` mapping, the geometry, and the tokens
-  *derived* from a palette (`hover`, `ink-mid`, `ink-soft`, `border`, `input`
-  from `ink`; `ring` from `primary-ink`; `accent-error-ink` from `accent-error`
-  and `ink`). The derived ones are redeclared on
-  `:root`, `[data-brand]`, `.light` and `.dark` at zero specificity, so a brand
-  scope gets its own borders, hover and focus ring rather than inheriting the
-  root's, and a palette may still pin any of them outright. The geometry
-  (`radius`, `page-px`, `band-py`, …) and its responsive scale-ups restart on
-  every `[data-brand]` the same way.
-- **EV's palette** — a single dark palette on `:where(:root, [data-brand="ev"])`.
-  It binds neither polarity class, so a `.dark` section inside another brand
-  never picks EV's values up, and `<Section polarity="light">` under EV is a
-  no-op (EV is single-polarity).
+  *derived* from a palette (`hover` `active` `selected` `border-*` `ink-mid`
+  `ink-soft` `ink-faint` `input` from `ink`; `scrim`; `ring` from `primary-ink`;
+  `primary-hover` `primary-border`; the status inks; the button faces and
+  chips). The derived ones are redeclared on `:root`, `[data-brand]`, `.light`,
+  `.dark` and `[data-theme]` at zero specificity, so a brand scope gets its own
+  borders, hover and focus ring rather than inheriting the root's, and a
+  palette may still pin any of them outright. The geometry (`radius`,
+  `page-px`, `band-py`, …) and its responsive scale-ups restart on every
+  `[data-brand]` the same way.
+- **EV's palette** — Dark on `:root`, `[data-brand="ev"]` and `.dark`; Light on
+  `.light`; Oldschool on `[data-theme="oldschool"]`. None of them matches inside
+  another brand's scope.
 
 ### Brand palettes
 
-A second brand is a palette against the same names, scoped to
+A second brand is a palette against the same names (29 of them, `chart-6` among them), scoped to
 `[data-brand="<slug>"]`; light is its default and `.light` / `.dark` beneath it
 pick a polarity, so a `<Section polarity="dark">` inside the brand takes the
 brand's dark values. The package ships a generator for it, reading the
 `brand.toml` shape (`[colors.light]` and `[colors.dark]`, keyed by token name;
 optional top-level `mark` and `mark-aspect` become `--brand-mark` and
 `--brand-aspect`; the family names in `[fonts]` — `sans` (or aquafix's `text`),
-`display`, `mono` — become the [font parameters](#fonts); other keys and tables
+`serif`, `mono` — become the [font parameters](#fonts); other keys and tables
 are ignored). Each polarity block also declares `--scheme: light | dark`, which
 the platform-drawn parts of the kit read (a `NativeSelect`'s popup):
 
@@ -192,13 +226,16 @@ under a brand under another brand may match either.
 
 ### Fonts
 
-The families are parameters, one per role; unset, each is EV's:
+The families are parameters, one per role, and not part of the 29 colour names:
+a palette is complete without them, and the generator only carries what a
+brand file's `[fonts]` declares. Unset, each is EV's, and Oldschool carries the
+families the navy look shipped with:
 
-| parameter | utilities | default (EV) |
-|---|---|---|
-| `--brand-font-sans` | `font-sans`, the page's base family | `--font-inter`, else `"Inter"` |
-| `--brand-font-display` | `font-display`, `font-serif` | `--font-playfair`, else `"Playfair Display"` |
-| `--brand-font-mono` | `font-mono` | `--font-inter`, else `"Inter"` |
+| parameter | utilities | default (EV) | Oldschool |
+|---|---|---|---|
+| `--brand-font-sans` | `font-sans`, the page's base family | `--font-inter`, else `"Inter"` | same |
+| `--brand-font-serif` | `font-serif` | `--font-inter-tight`, else `"Inter Tight"` | `--font-playfair`, else `"Playfair Display"` |
+| `--brand-font-mono` | `font-mono` | `--font-jetbrains-mono`, else `"JetBrains Mono"` | `--font-inter`, else `"Inter"` |
 
 Declare them on the brand scope (the palette generator writes them from
 `[fonts]`) and load the files yourself — `next/font`, or your own `@font-face`;
@@ -206,10 +243,13 @@ the kit ships no font files:
 
 ```css
 [data-brand="aquafix"] {
-  --brand-font-display: "Archivo";
+  --brand-font-serif: "Archivo";
 }
 ```
 
+The serif role is the second face, for headings, figures, wordmarks, italic
+accents and the avatar initial; it need not have serifs.
+
 The utilities resolve the chain on the element, so a scope re-fonts everything
 under it that carries one. The page's base family resolves once, on `<html>`: a
 brand scoped lower than `<html>` puts `font-sans` on its own element so plain
@@ -305,12 +345,12 @@ through hydration. Three parts of the kit make that hold:
 ```
 
 **Focus.** A control that paints a fill — `Button` `primary` / `secondary` /
-`destructive` or any accent fill, a filled `Badge`, `Switch`, `Checkbox` —
-shows focus as the solid `ring` standing 2px off it, so both edges of the
-indicator are against the surface: the ring reads on every surface at ≥ 3:1
-and so does the fill, on every palette and polarity `test/tokens.test.ts`
+`destructive` or any accent fill, a `Badge` link, `Switch`, `Checkbox`,
+`Toggle` — shows focus as the solid `ring` standing 2px off it, so both edges of
+the indicator are against the surface: the ring reads on every surface at
+≥ 3:1 and so does the fill, on every palette and polarity `test/tokens.test.ts`
 measures. Controls that sit on the surface (`outline`, `ghost`, inputs) keep
-the `ring` border plus its halo.
+the `ring` border plus its halo; list rows draw an inset ring.
 
 ## App shell
 
@@ -318,7 +358,8 @@ The frame a signed-in app sits in — a rail beside the page on a wide screen, a
 tab bar under it on a phone, one page inset and title scale, and the motion
 between screens. It knows nothing about routes, roles or data: the nav is a
 list you build, visibility is a list you filter, and the router comes in as two
-props. TS-only (see [Limitations](#limitations)).
+props. TS-only (see [Limitations](#limitations)), except `TopBar`,
+`SystemBanner` and `SectionLabel`, which have Dioxus twins.
 
 ```tsx
 // app/(app)/layout.tsx — the layout stays a Server Component; the nav is a client leaf
@@ -393,6 +434,15 @@ export function Nav() {
   middle click does not. One marker per group slides between rows on a CSS
   `transform` transition — it is placed by measurement, so until hydration the
   marked row carries the fill itself.
+  *Collapsible sections* are opt-in: set `collapsible` on a group (or on
+  `ShellNav` for every labelled group; a group's own value wins) and its label
+  becomes a header with a chevron. `defaultOpen`, controlled `open` /
+  `onOpenChange`, and `href` (the label links to a landing page, only the
+  chevron toggles) go on the group; the group holding the current route opens
+  when the route moves into it. Height runs on a `0fr → 1fr` grid track with a
+  180 ms fade and chevron turn (`--ev-dur-fast`, `--ev-ease-in-out`), none under
+  reduced motion; closed rows are `inert`. `labels` also takes `expand` /
+  `collapse` (the chevron reads "Expand Guides"). `SectionNav` takes the same.
 - **`BottomTabBar`** — `items` (five fit a phone), the same router props,
   callbacks and optimistic mark, `labels` `{ nav, badge(n) }`. One rule slides by
   whole tab widths and fades on a route no tab claims; a numeric `badge` sits
@@ -415,8 +465,8 @@ export function Nav() {
   onValueChange?, linkComponent?, labels: { nav } }` — a page's own section
   rail (settings panes); items are buttons, or links when they have an `href`.
 - **`ResourceError`** `{ message, variant: "inline" (onRetry?, retrying?) |
-  "alert" (title?), labels: { retry } }` and **`SystemBanner`** `{ tone: "warn" |
-  "info", title?, icon?, onDismiss?, labels: { dismiss } }` — presentation
+  "alert" (title?), labels: { retry } }` and **`SystemBanner`** `{ tone: "neutral" |
+  "primary" | "info" | "warn", title?, icon?, onDismiss?, labels: { dismiss } }` — presentation
   only; what failed and whether a dismissal sticks are yours.
 - **`Settled`** `{ loading, skeleton, children }` — the skeleton → content
   handover: the content fades and rises in after a skeleton was shown, and cuts
@@ -463,6 +513,57 @@ The timing is tokens on every theme root, for your own transitions too
 `--ev-rise` (8px), `--ev-stagger` (35ms), `--ev-stagger-section` (50ms). The
 shell's geometry is `--shell-rail-w` (248px) and `--shell-tab-bar-h` (64px).
 
+
+### Animated numbers
+
+`AnimatedNumber` shows a number that moves to its new value. It needs no
+animation library: the digits are CSS transforms and transitions, and the
+count-up is `requestAnimationFrame`.
+
+```tsx
+<AnimatedNumber value={balance} format={{ style: "currency", currency: "USD" }} />
+<AnimatedNumber value={change} format={{ style: "percent", signDisplay: "exceptZero" }} />
+<AnimatedNumber value={volume} format={{ notation: "compact" }} mode="count" animateOnMount />
+```
+
+| prop | |
+|---|---|
+| `value` | the number |
+| `format`, `locales` | passed to `Intl.NumberFormat` |
+| `mode` | `roll` (default): digit columns spin. `count`: the number is tweened and re-formatted each frame |
+| `trend` | roll only. `1` every column spins up, `-1` down, `0` each column takes its shorter way. Default: the way the value moved |
+| `duration` | ms per change: spin 750 (roll), whole tween 800 (count) |
+| `prefix`, `suffix` | React nodes beside the figure, not animated |
+| `live` | announce each new value politely; off by default |
+| `animateOnMount`, `from` | animate the first render from `from` (default 0) |
+
+It inherits font, size and colour, so it fits `text-figure-l font-serif
+font-light` as well as a `text-body` table cell. `tabular-nums` is on.
+`useCountTween(value, { duration, easing, from, animateOnMount })` returns the
+in-flight number for a chart or a label of your own. `HeaderBalance` takes
+`amount` (USD unless `format` says otherwise); any `figure`, `value` or other
+`ReactNode` slot takes an `<AnimatedNumber />` as is.
+
+**How roll works.** `formatToParts` splits the value. Integer digits are keyed
+by place value from the right, fraction digits by position, so `9 -> 10` keeps
+the existing column and only a new one enters. Symbols (currency, sign, group,
+decimal, percent, compact suffix) are keyed by type. A digit is a clipped
+one-line window over a strip moved with `translateY` on a spring-shaped
+`linear()` easing (~4 % overshoot), with soft top and bottom edges. The strip
+is unbounded, so a forced direction wraps (9 to 0 going up). Entering and leaving
+parts animate width (`0fr` to `1fr`) and opacity in 350 ms, so their neighbours
+slide.
+
+**Accessibility.** The final formatted value is in the DOM once, as
+visually hidden text; the moving glyphs are `aria-hidden` and not selectable,
+so a copy gives the formatted text.
+
+**Reduced motion.** Under `prefers-reduced-motion: reduce` a new value swaps in
+at once: no spin, no width animation, no tween frames.
+
+**SSR.** The server prints the final formatted value, also with `animateOnMount`,
+so hydration does not jump; the count-up starts after hydration.
+
 ## Usage
 
 ```tsx
@@ -473,7 +574,7 @@ export function Example() {
     <Card>
       <CardHeader>
         <CardTitle>Portfolio</CardTitle>
-        <Badge variant="success">+12.4%</Badge>
+        <Badge variant="positive">+12.4%</Badge>
       </CardHeader>
       <CardContent>
         <Button onClick={() => {}}>Invest</Button>
@@ -584,9 +685,11 @@ hold focus, so a bare list is pointer-only. The live demo is `CommandDemo` in
 
 The Rust crate is the source of truth; this package preserves its _semantics_
 while reading like idiomatic React. Canonical class strings are identical per
-element across the two ports.
+element across all ports. The two Rust ports render the same HTML (pinned by
+`rust/tests/parity.rs`) and share every row below; where Leptos idiom differs
+the cell says so.
 
-| Concept | Rust (`ev_lib::uikit`) | TS (`@evinvest/uikit`) |
+| Concept | Rust (`ev_lib::uikit_dioxus` / `ev_lib::uikit_leptos`) | TS (`@evinvest/uikit`) |
 | --- | --- | --- |
 | class fusion | `cn!` macro (`tailwind_fuse`) | `cn` (`clsx` + `tailwind-merge`) |
 | variants | `enum` + `fn class()` match | `as const` map keyed by variant |
@@ -595,8 +698,17 @@ element across the two ports.
 | keyboard nav | `use_roving_focus` | `useRovingFocus` |
 | overlay placement | inline `position:fixed` + `data-side` | `Portal` + `useFloating` |
 | dismiss / focus trap | full-screen backdrop / native order | `useDismissableLayer` / `useFocusScope` |
-
-### Component inventory (all 75 bricks)
+| brand webfonts | `Fonts`: Dioxus bundles the faces through `asset!`; Leptos has no asset pipeline, so `Fonts base="/fonts"` points the same `@font-face` rules at `base` and the consumer serves `FONT_FILES` there | none — load the files yourself ([Fonts](#fonts)) |
+| optional slot present | an explicit prop, never read off `children`: `FieldSeparator { content: true, "or" }` renders the copy pill; `FormMessage { error, .. }` renders only while `error` (the same flag as `FormControl`'s) | `!!children` / `if (!children) return null` |
+| option label | `SelectItem { value, text_value, .. }`: the text type-ahead matches, an explicit prop in both ports — never read off `children` | `SelectItem`'s `textValue`, else the text of its children |
+| toasts | `ToasterProvider` + `use_toaster()` → `ToasterHandle` (`.toast` `.positive` `.error` `.info` `.warn` `.show` `.dismiss`), same in both ports | global `toast(...)` / `toast.dismiss` |
+| children present | `SettingsSection` and `SystemBanner`: Dioxus checks that the children render something, Leptos that children were passed | `children !== undefined` |
+| `SystemBanner` glyph | `icon` replaces the tone's glyph; Dioxus drops it with an empty `icon: rsx! {}`, Leptos with `icon=None` | `icon={null}` |
+| `KeyValue` label | Dioxus: an `Element`; Leptos: `KeyValueLabel::{Text, View}` (`.into()` from a string), since only text names the copy button | `label` (`ReactNode`) |
+| time-varying props | Dioxus: plain values; Leptos: signals — `HeaderBalance`, `NotificationBell`, `ModelChip`, `ChatComposer` `streaming` / `disabled`, `ConfirmDialog` `pending` / `error`, `ChatAttachment` `progress`, `AsidePanel` `open` | props |
+| Ctrl+K hook | `use_command_palette_shortcut(on_trigger, enabled)`: `enabled` is a `bool` in Dioxus, a `Signal<bool>` in Leptos | `useCommandPaletteShortcut` |
+
+### Component inventory (all bricks)
 
 - **Tier A — static (23):** badge, button, button-group, card, input, textarea,
   label, field, separator, skeleton, spinner, kbd, table, container, alert,
@@ -614,27 +726,99 @@ element across the two ports.
   / `Forbidden` / `ServerError` presets (404 / 403 / 500). The kit ships no
   artwork: `Logo` masks whatever `--brand-mark` / `--brand-aspect` the consumer
   declares beside the palette, and the status pages use it for their mark.
-- **App shell — TS-only (12):** app-shell, shell-nav, bottom-tab-bar,
-  nav-badge (`NavBadge` / `NavDot`), top-bar, account-menu, mobile-app-bar, page-frame (`PageFrame` /
-  `PageHeading` / `SectionLabel`), section-nav, resource-error, system-banner,
-  settled — see [App shell](#app-shell).
-- **Features — composed screens (1):** terminal — a trading terminal over an
-  investment product's shares (`Terminal` grid placing each `TerminalPane` by
-  `TerminalArea`; `TerminalTicker` / `TickerStat`; `OrderBook` with
-  `OrderBookHead` / `OrderBookRow` / `OrderBookSpread`; `TradesTapeRow`;
-  `OrderForm` / `OrderFormRow` / `OrderFormSubmit`; `OpenOrdersEmpty`). Column
-  captions and every figure are the consumer's strings — the kit knows no
-  locale and no number format.
+- **App shell — TS-only (10):** app-shell, shell-nav, bottom-tab-bar,
+  nav-badge (`NavBadge` / `NavDot`), account-menu, mobile-app-bar, page-frame
+  (`PageFrame` / `PageHeading`), section-nav, resource-error, settled — see
+  [App shell](#app-shell). `TopBar`, `SystemBanner` and `SectionLabel` have
+  Dioxus twins (next item).
+- **Composed parts — Rust and TS:** the class strings live once in
+  `rust/classes/src/<name>.rs`, and `nix run .#gen` writes them to
+  `ts/uikit/src/generated/<name>.ts`.
+  - *elements:* `IconButton` (required `aria-label`), `StatusItem` / `StatusDot`,
+    `WorkspaceTabs` / `WorkspaceTab`, `KeyValue` (copy button), `FormRow`,
+    `SystemBanner`, `SectionLabel`;
+  - *settings:* `SettingsLayout` / `SettingsSection` / `SettingsRow`,
+    `AccountSettingsDialog`, `ConfirmDialog` (async confirm), `AccountList` /
+    `AccountListItem`, `PopoverForm`, `CommandPalette` and
+    `useCommandPaletteShortcut` (Rust: `use_command_palette_shortcut`);
+  - *header and asides:* `TopBar`, `SmartHeader` (`default`, `collapsed`,
+    `banner`, `search`), `HeaderBalance`, `HeaderSearch`, `NotificationBell`,
+    `AsideHeader`, `AsideRail`, `AsidePanel` (`docked` or `overlay`);
+  - *AI chat:* `ChatMessage`, `ChatBubble` (`streaming` shows a caret),
+    `ChatMarker`, `ChatAttachment`, `ChatComposer`, `ModelChip` and `ChatTyping`
+    (the "thinking" indicator).
+- **Composed parts — TS-only:** `AnimatedNumber` / `useCountTween`,
+  `ChatPanel`, `ChatDock`, `ChatStreamText` (pass the whole growing string; only
+  the new words fade in), the `AppShell` `aside` slot, and the profile form on
+  `AccountMenu`. How the Rust twins differ is in [Limitations](#limitations).
+
+### Variant vocabulary
+
+A variant names the state ([`docs/spec/variants.md`](../../docs/spec/variants.md)).
+
+| component | values |
+|---|---|
+| `Button` | `primary` (the filled call to action, default) · `secondary` · `outline` · `ghost` · `destructive` · `link` |
+| `Badge` | `neutral` (default) · `primary` · `positive` · `info` · `warn` · `error` |
+| `Alert` | `neutral` (default) · `destructive` · `success` · `info` |
+| menu item (`DropdownMenuItem`, `ContextMenuItem`, `MenubarItem`) | `neutral` · `destructive` |
+| `SystemBanner` | `neutral` · `primary` · `info` (default) · `warn` |
 
 The canonical variant set is the **superset** of the original cabinet (Rust) and
-landing (TS) sources — e.g. `Badge` keeps cabinet's `success` variant, and
-`Button` keeps landing's square icon shape at every size, as the separate `icon`
-boolean it always was in Rust (see [docs/spec/variants.md](../../docs/spec/variants.md)).
+landing (TS) sources: `Button` keeps landing's square icon shape at every size,
+as the separate `icon` boolean it always was in Rust. A `destructive` button
+wears the `button-danger-*` face: an outline in Dark and Light, a fill in
+Oldschool.
 
 `size="touch"` is the 44 px pointer-target floor (WCAG 2.5.5) for touch-first
 screens: `min-h-11` with `lg`'s padding, and a 44 × 44 square with `icon`. It is
 a button step only — `Input` and `SelectTrigger` already clear it at `lg`.
 
+## Upgrading from 0.30
+
+**Renames and removals**
+
+| 0.30 | now |
+|---|---|
+| `Badge variant="outline"` · `"secondary"` | `neutral` |
+| `Badge variant="destructive"` · `"success"` | `error` · `positive` (new: `primary`, `info`, `warn`) |
+| `SystemBanner` tones `warn`, `info` | the same, plus `neutral` and `primary`; `info` draws its icon in `accent-info-ink` |
+| `accent-error-ink` (`text-accent-error-ink`, a brand file's `accent-error-ink`) | `accent-error`; destructive menu rows read in it, and `evinvest-palette` refuses the key |
+| `Terminal`, `TerminalPane*`, `TerminalChart`, `TerminalTicker`, `TickerStat`, `OrderBook*`, `TradesTapeRow`, `OrderForm*`, `OpenOrdersEmpty` and their types | removed from the TS kit (the Rust terminal stays) |
+
+**Silent changes: the compiler does not flag these.**
+
+- A `Badge` with no `variant` was filled `primary` and is now `neutral`:
+  `rg -n '<Badge(\s|>)' --glob '*.tsx' | rg -v 'variant='`.
+- A `destructive` `Button` wears the theme's `button-danger-*` face, an outline
+  in Dark and Light; an `outline` one is raised (`secondary` fill and a hairline).
+
+**Tokens and themes**
+
+- EV's navy palette is opt-in: `data-theme="oldschool"`. Dark is the default
+  and is a different colour set; `.light` is Light.
+- Font defaults are Inter (sans), Inter Tight (serif role) and JetBrains Mono
+  (mono). `data-theme="oldschool"` sets Playfair Display and Inter for the serif
+  and mono roles, as the navy look shipped. Load the families a theme uses
+  (`--font-inter-tight`, `--font-jetbrains-mono`, or `--font-playfair` for
+  Oldschool); the kit ships no font files.
+- The font role `display` is `serif`: `--brand-font-display` / `font-display`
+  become `--brand-font-serif` / `font-serif` (see [Fonts](#fonts)).
+- A brand file must add `chart-6` (29 names now); `evinvest-palette` names it.
+- Panel radius is 6 px at every width (the `sm` bump to 8 px is gone), controls
+  and chips 4 px, and the depth tiers are flat. **Aquafix, vifnet and any other
+  brand take these and lose their card shadow** unless their scope overrides
+  `--radius`, `--control-radius`, `--chip-radius` and `--depth-card`,
+  `--depth-elevated`, `--depth-overlay`. Check each brand before releasing.
+
+**Layers across bundles**
+
+- The shared layer stack (Escape order, outside clicks, the one shared scrim)
+  keeps its global key `@1`, so a micro-frontend bundling uikit 0.30 and a newer
+  host still share one stack. A 0.30 copy never notifies, so a newer modal's
+  shared scrim may not update when a 0.30 layer opens or closes under it; move
+  hosts and the MFEs they mount together to get the full behaviour.
+
 ## Limitations
 
 Reproducing everything dep-light means some behaviour is intentionally reduced,
@@ -668,18 +852,15 @@ measuring needs host-only `web-sys`). Known gaps:
   (`modal`, `pointerOutside`) and `DismissableLayerScope`; mark a floating
   region that should dismiss nothing with `LAYER_IGNORE_ATTR`.
 - **overlay layers (Rust):** `Select`, `Popover`, `Dialog` and `DropdownMenu`
-  share one dismissable-layer stack per `VirtualDom`
-  (`primitives::use_dismissable_layer`): Escape and a click on a backdrop act
+  share one dismissable-layer stack per `VirtualDom` in Dioxus, per root owner
+  (each island its own) in Leptos (`primitives::use_dismissable_layer`). The
+  stack follows renders, not handlers: a layer that closes itself stays on top
+  until it re-renders closed. Escape and a click on a backdrop act
   on the top layer only, so a `Select` inside a `Dialog` closes first. There is
   no document listener — an Escape counts only once it reaches an open layer's
   `onkeydown` — and `AlertDialog`, `Sheet`, `Drawer`, `ContextMenu`, `Menubar`,
   `NavigationMenu`, `HoverCard`, `Tooltip`, `InfoTip`, `DateTimePicker`,
   `CommandDialog` and `DropdownMenuSub` are not on the stack yet.
-- **terminal:** no plotting engine and no state. `TerminalChart` is a sized
-  `relative` host that hands its element out (`ref` in TS, `id` in Rust) for a
-  consumer-chosen charting library to mount into; `OrderForm` only prevents the
-  submit's default — inputs, validation and the order itself are the
-  consumer's. The open-orders pane reuses `Table` and `Tabs`.
 - **calendar:** single month, single-date selection (no range/multi-month, no
   dropdown captions). The grid is always six fixed weeks of 36px cells, so its
   size never changes with the month or the locale's weekday labels, and it
@@ -691,7 +872,7 @@ measuring needs host-only `web-sys`). Known gaps:
   locale whose short form contains whitespace (vi's "Thứ 2" → "T2", he's
   "יום ב׳" → "ב׳") as long as narrow still yields seven distinct labels. Rust has no `Intl`, so its captions
   stay English. Rust does manual date math; TS uses the built-in `Date`.
-- **date-time-picker:** the kit's own bricks only — an outline trigger, a
+- **date-time-picker:** the kit's own bricks only — a raised trigger, a
   `Popover` with the `Calendar` and two numeric 24-hour hours/minutes fields (no
   native `datetime-local` / `time` input, so the browser's locale popup never
   appears). Its ARIA and button strings are `labels` overrides with English
@@ -707,19 +888,19 @@ measuring needs host-only `web-sys`). Known gaps:
   focus, via the shared `data-stack` CSS in `tokens.css`. The enter is a CSS
   keyframe (plays on insertion), the exit slides out on `data-state="closed"` and
   unmounts on `transitionend` (no host timer). React measures each toast's height
-  for exact expanded spacing; Dioxus can't (layout measuring needs host-only
-  `web-sys`), so it assumes a constant height — collapsed pile exact, expanded
-  list uniform. Both **auto-dismiss** (default 4000ms) and **pause while the stack
+  for exact expanded spacing; Rust measures nothing, so it assumes a constant
+  height — collapsed pile exact, expanded list uniform. Both **auto-dismiss** (default 4000ms) and **pause while the stack
   is hovered/focused**, and support **persistent** toasts; React does it with a
-  `setTimeout` (`duration: Infinity` to persist), Dioxus with a host-timer-free
+  `setTimeout` (`duration: Infinity` to persist), both Rust ports with a host-timer-free
   CSS "life" animation whose `animationend` closes the toast (`use_toaster().show(
   msg, variant, None)` to persist). Swipe-to-dismiss (horizontal drag, past 45px
   or a fast flick) is TS-only pointer physics.
 - **form:** react-hook-form is dropped — these are presentational + ARIA-id
   wiring; consumers own validation/state. Rust `FormControl` can't inject ids
   onto an arbitrary child (no `Slot`), so it publishes them as a
-  `FormControlContext` that `Input`/`Textarea` consume; wrap a bare element and
-  you wire them yourself.
+  `FormControlContext` signal that `Input`/`Textarea` consume; wrap a bare
+  element and you wire them yourself. Rust `FormMessage` renders on its `error`
+  flag, not on having children.
 - **carousel:** pointer-drag physics are TS-only (prev/next + keyboard in
   Rust). Embla momentum is not reproduced.
 - **drawer:** the Vaul-style enter/exit motion is shared by both ports via
@@ -739,12 +920,34 @@ measuring needs host-only `web-sys`). Known gaps:
   The lock-up is composed from `mark` + `brand` (display family) + `tagline`,
   or passed whole as `lockup`. Brand-coloured text reads `primary-ink`.
 - **TS-only for now:** `NativeSelect`, the `Field` id hand-off,
-  `SelectValue` labels, `ListRows` / `ListRow` (a table's phone form), and the whole [app shell](#app-shell) (`AppShell`,
-  `ShellNav`, `BottomTabBar`, `NavBadge` / `NavDot`, `TopBar`, `AccountMenu`, `MobileAppBar`, `PageFrame` /
-  `PageHeading` / `SectionLabel`, `SectionNav`, `ResourceError`, `SystemBanner`,
-  `Settled`) — no Dioxus twin. Its CSS (the entrances, the markers, the motion
-  and shell tokens) ships in the shared sheet, so a Rust app can use the
-  `data-enter` contract today.
+  `SelectValue` labels, `ListRows` / `ListRow` (a table's phone form), the
+  rest of the [app shell](#app-shell) (`AppShell`, `ShellNav`, `BottomTabBar`,
+  `NavBadge` / `NavDot`, `AccountMenu` and its profile form, `MobileAppBar`,
+  `PageFrame` / `PageHeading`, `SectionNav`, `ResourceError`, `Settled`) and
+  the parts that need a browser API Rust does not wrap: `AnimatedNumber` /
+  `useCountTween` (a frame loop and `Intl`), `ChatStreamText` (word diffing and
+  timers), and `ChatPanel` / `ChatDock` (`ResizeObserver`, scroll pinning).
+  Collapsible `ShellNav` / `SectionNav` groups are TS-only too. Their CSS (the
+  entrances, the markers, the motion and shell tokens) ships in the shared
+  sheet, so a Rust app can use the `data-enter` contract today.
+- **Rust twins of the composed parts:** they keep the TS markup and class strings, with
+  these differences. Overlays keep the limits of the older Rust overlays (inline
+  `position: fixed`, no portal, no focus trap, not on the layer stack).
+  `HeaderBalance` takes a formatted `String` (no rolling digits, no `Settled`).
+  `ConfirmDialog` has `pending` and `error` props in place of a promise, and a
+  `pending` dialog ignores Esc, the scrim and the buttons. `KeyValue` takes a
+  `copy` callback; with the `wasm` feature and no callback it writes through
+  `web-sys`. `CommandPalette` is controllable (`open`, `default_open`,
+  `on_open_change`), and `use_command_palette_shortcut` listens for Ctrl or Cmd
+  K by key code on the `wasm` feature only, so it does nothing in an SSR build.
+  `AsidePanel` has no `matchMedia`: with `AsideCollapse::Md` it renders the
+  docked or sheet form and the drawer form together, and breakpoint classes show
+  one, so its children mount twice. Dialogs, popovers and menus do not name
+  themselves: pass `aria_labelledby` and the title `id`, or `aria_label`. The
+  TS tests that stub `matchMedia`, or that need `SectionNav` or `AppShell`, are
+  ported as markup checks or not at all. `dioxus-ssr` runs no effects, so the
+  clipboard write, the Ctrl+K listener and focus moves are checked in the
+  gallery only.
 - **app shell:** `ShellNav`'s marker is measured (one forced layout read per
   navigation); the tab bar's rule is arithmetic and assumes equal tabs. A
   `data-enter` nested inside another still entering composes both rises (the
@@ -769,7 +972,8 @@ npm run build       # tsup → dist/ (ESM + d.ts)
 The Rust counterpart is verified from the repo root:
 
 ```sh
-cargo test  -p ev_lib --features uikit
-cargo clippy -p ev_lib --features uikit --all-targets -- -D warnings
-cargo check -p ev_lib --features "uikit wasm" --target wasm32-unknown-unknown
+cargo test  -p ev_lib --features "uikit_dioxus uikit_leptos"
+cargo clippy -p ev_lib --features "uikit_dioxus uikit_leptos" --all-targets -- -D warnings
+cargo check -p ev_lib --features "uikit_dioxus wasm" --target wasm32-unknown-unknown
+cargo check -p ev_lib --features "uikit_leptos wasm" --target wasm32-unknown-unknown
 ```

package/dist/{chunk-3IPB4QQJ.js → chunk-35SPIU4U.js}

@@ -2,7 +2,8 @@
 function references(value) {
   return [...value.matchAll(/var\(--([A-Za-z0-9-]+)/g)].flatMap((m) => m[1] ? [m[1]] : []);
 }
-var DERIVED_SCOPE = ":where(:root, .dark, .light, [data-brand])";
+var DERIVED_SCOPE = ":where(:root, .dark, .light, [data-brand], [data-theme])";
+var FACES_SCOPE = ":where([data-theme], [data-brand], .light, .dark, :root)";
 function readRules(css) {
   const rules = [];
   const src = css.replace(/\/\*[\s\S]*?\*\//g, "");
@@ -48,10 +49,12 @@ function readContract(css) {
   }
   const derivedRule = rules.find((r) => r.selector === DERIVED_SCOPE);
   if (!derivedRule) throw new Error(`token sheet has no \`${DERIVED_SCOPE}\` rule \u2014 not the kit's contract`);
-  const derived = [...derivedRule.declarations.keys()];
+  const facesRule = rules.find((r) => r.selector === FACES_SCOPE);
+  const formulas = new Map([...derivedRule.declarations, ...facesRule?.declarations ?? []]);
+  const derived = [...formulas.keys()];
   const stray = derived.filter((d) => !painted.includes(d));
   if (stray.length > 0) throw new Error(`derived tokens with no @theme mapping: ${stray.join(", ")}`);
-  const derivedFrom = Object.fromEntries([...derivedRule.declarations].map(([name, value]) => [name, references(value)]));
+  const derivedFrom = Object.fromEntries([...formulas].map(([name, value]) => [name, references(value)]));
   return { required: painted.filter((p) => !derived.includes(p)), derived, derivedFrom };
 }
 
@@ -144,8 +147,8 @@ function splitTopLevel(inner) {
 
 // src/palette/brand.ts
 var POLARITIES = ["light", "dark"];
-var FONT_ROLES = ["sans", "display", "mono"];
-var FONT_KEYS = { sans: "sans", text: "sans", display: "display", mono: "mono" };
+var FONT_ROLES = ["sans", "serif", "mono"];
+var FONT_KEYS = { sans: "sans", text: "sans", serif: "serif", mono: "mono" };
 var PaletteError = class extends Error {
   constructor(problems) {
     super(`invalid brand palette:
@@ -293,6 +296,7 @@ ${extras.join("")}}
 
 export {
   DERIVED_SCOPE,
+  FACES_SCOPE,
   readRules,
   readContract,
   parseToml,
@@ -303,4 +307,4 @@ export {
   validateBrand,
   renderPalette
 };
-//# sourceMappingURL=chunk-3IPB4QQJ.js.map
+//# sourceMappingURL=chunk-35SPIU4U.js.map