The dashboard stat band as real components: each card counts its headline up on mount, carries a signed delta, and sits on a full-bleed area chart that runs flush to both card edges — hover anywhere on it and a chip reads that sample's amount with the date it landed on. Metrics, their series, formatters, tints and the date labels are all props, and the chart is memoized so the ~60fps count-up never restarts its line draw.

The markets sidebar card: one big price over a full-bleed line that runs flush to both card edges, an index switcher whose underline walks to the new tab, and the one-paragraph read below — switching index swaps price, line and story together. Scrubbing the line magnets a crosshair to the nearest real sample, floats the session time above it, recomputes the headline off that point, and drops everything to the right of the cursor to 30% so the eye stops where the pointer is. Indices, eyebrow, opening tab and the session bounds behind the clock are props; the SVG gradient, clip and underline ids are per-instance, so two cards can sit on one page.

Focus + context time navigation as one component: a detail chart sitting over a compressed mini-map of the whole series. Grab the window anywhere to pan, pull either edge to zoom, and the detail chart re-windows live while the right-hand price ticks and the two end labels recompute off the current selection — so nothing on screen is decoration. Hovering the plot drops a dashed crosshair that magnets to the nearest real sample, marks it with a dot, and floats a card reading its price and date, with the year appearing only when the window straddles one. Series, anchor date, opening window, minimum window, hue and number formatting are props, an onWindowChange callback reports the range, and the SVG gradient id is per-instance so two navigators can share a page.

The dual-denomination amount field: type in fiat or in units and the toggle underneath carries the value through the rate, with the counter-value popping only the digits that actually changed. An invisible sizer span makes the field exactly text-width so the unit suffix always flows after the last decimal instead of overlapping the number, and the headline steps down through font-size tiers (46 → 27 → 22 → 18 → 14px) as the amount grows.

The comparison radar: two series on one factor web — the subject as a filled brand polygon, its peer group as a dashed outline behind it — where hovering a spoke swaps the caption for both values at once and the legend mutes either series so the other can be read alone. Axes, both series, labels and hues are props, so the same web serves factor scores, vendor scoring, or any 0–100 profile.

The hovered cover's inner panel now fills from the background token instead of a fixed black, so the light theme stops showing a black rectangle inside the cover, and the row hairline, tag and year moved onto the border / muted-foreground tokens the lab source uses — the same ink in dark, properly legible in light.

The centre of the ring is no longer a fixed symbol: hovering or keyboard-focusing a legend row (or an arc) swaps it for that sector's weight, set in the arc's own colour, with the sector name underneath — so the number lands where the eye already is instead of across the legend. Leaving the ring settles back to the symbol and its caption, and the swap is skipped under prefers-reduced-motion.

The composed trade card: an editable pay amount with balance + Max, a flip button on the seam that really swaps the two cards and recomputes the quote through the rate, a receive card derived from it, a token-select overlay that covers the whole ticket (4px past every edge, matched radius), and a footer rate line + slippage chip. The CTA's label is the validation state — empty, insufficient balance, or a pressable Buy / Sell toggle that flips the pair.

The stack now defaults to the bundled gradient profile orbs (the same set the Inbox uses) instead of initial coins, and the overflow chip floats the hidden names in a tooltip above it rather than fanning extra circles out — hovering never changes the width of the row. Initials remain the fallback when an image is missing, tinted off the chart ramp so both themes read.

The magnifying command dock (icon springs, click bounce, reflections, running-app dots, ⌘K menu) replaces the original macOS Dock under its slug; the old implementation is retired.

The money-formatting family: Fiat (symbol first, grouped, sub-cent values widening to 4dp, optional K/M/B/T), Crypto (ticker last, dust decimals collapsed) and Percent (signed, coloured off the sign) — plus the bare formatters behind them, so numbers agree across a screen.

Monthly-returns heat grid: years × months tinted up/down by magnitude, a compounded year-total column derived from its own months, a hover read-out that names the month and dims every unrelated cell, and a diagonal settle-in on mount.

macOS-style magnifying dock: cursor distance drives per-icon raised-cosine springs, icons bounce on click and cast a floor reflection, active tools carry the running-app dot, and a ⌘K slot opens a small command menu.

Four shipped components re-aligned with their refined lab sources: Alert Stack regains the raised row surface, News Card and Alert Stack settle on rounded-lg, Sectors Donut's default ramp moves to chart theme variables, and Market Watchlist gains the staggered row entrance, gliding hover highlight, and area-fill sparklines.

Price snapshot card: animated headline price, a period-sliced line chart with crosshair scrubbing and a date-stamp tooltip, and a period switcher whose underline glides between buttons.

Moving-average chart: price line with fast and slow SMA overlays, right-edge price ticks, crosshair scrubbing with a three-series tooltip, and a signed change chip.

Sortable quote register with trend sparklines, signed day changes, and an accent spine on the selected row.

Analyst-targets chart: history walks to now, three dashed projections fan to High / Mean / Low with a scrub-following KPI card.

Data components, charts, and the library chrome now adapt to both themes. Device frames and code surfaces stay dark by design.

Financial data-viz built on the same ink language: forecast bars, allocation ring, analyst radar, activity grid.

Dense read surfaces for dashboards: a fund table, a request log, an inbox, a project index, a news module, and a stacked alert deck.

The connective tissue of a product surface: an onboarding checklist, a preferences card, an empty state, a segmented control, and an avatar stack.

Two premium motion moments: a card shuffle and a mouse-trail signal CTA.

The foundation shipped: layout and window chrome, the card family, the button group, and the accordion.