One handle. Toggle "Snap to whole numbers" to compare a continuous value against one snapped to a `step` grid — then cycle the accent and container controls to see the fill hold up against every page accent and every real background context.
With no step, the value is an exact float, not snapped to a grid — the same control the "Ticks & format" subpage demos with a fixed step instead of this toggle.
<Configurator> accent picker is set to, live — because sciui's Slider reads the page --ac directly (its default is --sci-accent: var(--ac, …)). accentVars() sets only --ac on the wrapper, and the canvas picks it up with no per-Space override. The old cv question — whether the .cv-slider specificity override was still needed — is resolved: it was DELETED 2026-07-16, sciui reads --ac for everyone.<Configurator> (Phase 5 pilot) — accent + container switching is now free chrome instead of something each subpage would have to hand-build; the demo-specific control (the snap toggle) is the only bespoke part.A whole Beta distribution shaped by its 90% credible interval. Drag the interval's ends to set how sure you are (narrow = many draws, wide = few); slide the band to move the success rate. α and β are solved from the two bounds and stay continuous.
The interval's width is the number of draws: pinch the ends together and the curve pulls tall and narrow; pull them apart and it flattens toward the flat prior (α=β=1). All the Beta math runs in log-space Lanczos log-Γ, so α+β stays exact into the billions.
<Configurator>, so the "side gauges span the full panel height" requirement can be checked directly inside every real container (card/disclosure/tabs panel), not just the plain page — flagging for a browser check across all four, at a couple of the height slider's extremes.The default mode: one value selected at a time, a sliding pill tracking the active option along a horizontal track.
Clicking an option, or moving focus with the arrow keys, both drive the same controlled value/onValueChange pair — the pill's position is derived, not stored.
<Configurator> exercises, and the compact-density toggle re-measured the pill correctly too.The prev/next buttons live in the container's own flex track, never in the scroll flow, so they never move when the active slide changes or the component reflows. controlsPosition only changes where that track sits: above the scroller, below it, or split to the scroller's sides.
controls="top" (default)
controls="bottom"
controls="split"
carousel.tsx's own header comment, 'split' is a deliberate, documented exception to the "controls never move" rule: on mobile widths its buttons detach from the flex track and travel with the page scroll, parked at mid-viewport (see the media block in carousel.css). That's an intentional design, not a regression — but flagging it here so the exception reads as obviously intentional rather than like a broken anchor, since at desktop width this page can't tell the two apart (the split buttons look statically pinned like the other two modes until the viewport narrows).<Configurator> (Phase 5 step 6): this subpage's whole point is a fixed three-way side-by-side comparison ofcontrolsPosition values, not one configurable instance — collapsing it into a single picker would hide exactly the simultaneous "top vs bottom vs split" contrast a reader needs to see. Flagging this call explicitly rather than forcing it.A plain tab strip with three panels — the active indicator is a single flared-tab shape that welds into the panel below it, so the active tab reads as part of the panel rather than a separate chip.
Light, medium or dark — the roast level sets the base flavour profile before origin or processing come into play.
Used on its own as a plain settings toggle — deliberately paired with two labels of very different length ("Off" vs "Enabled") so the no-layout-shift behaviour is visible: the button's width is fixed by the wider label from the start, since both labels are always in the DOM (one just invisible).
Toggling the switch flips between "Off" and "Enabled" — watch the button's own width as the label changes: it should not resize or reflow anything around it.
A single expand/collapse panel — click the header to reveal its content. Unlike an accordion, one <Disclosure> is exactly one region; a consumer wanting several independent panels composes multiple instances (there is no built-in exclusive-open group behaviour).
This is the panel content. It's revealed by a pure-CSS height transition (grid-template-rows: 0fr → 1fr) — no JavaScript measures the content's height, so there's nothing to keep in sync when the content itself changes shape (e.g. on a language switch elsewhere in the app).
Opening this one has no effect on the panel above — each instance owns its own state.
nested prop.A bottom-anchored chat surface: a scrolling history, a status plate of live metrics, and a composer whose input and send button are visually identical to a Selector track and pill.
Content rendering is external: every child is opaque to the Dialog. DialogMessage is the default text bubble. The status plate takes a segments array — each entry is either a template dict (title, value, optional max → bar, optional message → caption) or any custom node. The plate above shows every combination side by side, ending with a fully custom segment. Turn History off to see the landing state — just the composer, centred — then send a message and watch it glide to the bottom.
The three standalone heading elements, then FHeading — the canonical icon/title/kicker block used to build a page's rich rail menu item.
FHeading combines an optional icon, a title and a kicker into one canonical block:
A Space never places this itself any more — export subtitle from a page's first subpage and the site loader (create-site.ts) builds this exact block for the rail's menu item automatically: title = the page's resolved kicker label, kicker = the subpage's subtitle, icon = the subpage's icon export. No placement flag — subtitle's mere presence is the trigger (the "subtitle-set" menu mode). This very Page does exactly that (see this subpage's own subtitle export) — check the rail: "Typography" now reads as a two-line block, not the plain pill every other Page here uses.
heading/menu={false} export + placement-flag mechanism this subpage used to demo is GONE (2026-07-15 header/menu rework) — replaced by the inferred kicker/subtitle/icon resolution described above, and this Page's own menu item now demonstrates the subtitle-set case live (see Squircle for the icon slot, Cards & Stats for a fully custom menu export — between the three, every menu-item mode this template supports has a real, end-to-end example somewhere on this Space).<Configurator> (Phase 5 step 6): these are structural markup elements (kicker/title/subhead/heading), not components with tunable props — there's no real "knob" to expose beyond the text content itself, and this Page's own menu item is a live subtitle-set example that shouldn't be disturbed by wrapping its subpage content in unrelated demo chrome. Flagging this call explicitly rather than forcing it.FButton — a soft pill: accent fill, crust-dark label. Like every kit element it takes an optional size step (xs·sm·md·lg·xl) via data-fsize.
Every step is the same component and the same markup — only the size prop changes, which rescales the button (and its label) proportionally via the shared --gt/--g scaling unit.
FButton has no dedicated variant prop in content.tsx — only the generic size (from the shared Sized type) plus whatever className/native button props are passed through. So the "couple of use cases" the spec asks for are shown here purely as size steps and differing labels/context, not as invented variant props.FCard is a surface-toned, soft-cornered block — plain, or in a media chip layout, or broken out to full panel width with wide. The two are independent boolean modifiers, so toggle them together to see whether the media chip layout and the full-width breakout actually compose.
A default FCard with an FCardBody inside — the baseline shape, no modifiers.
content.tsx documents media and wide as independent boolean props applied as separate class modifiers (fish-card--media and fish-wide), with nothing in the source suggesting they're mutually exclusive — so combining both should just stack the classes. Now on the shared <Configurator> with both as independent toggles, so "media + wide together" is directly reachable (it wasn't in the old three-fixed-card layout) — worth a live check that the full-width breakout and the fixed-width media chip actually compose cleanly rather than assuming it from the source alone.menu export (a hand-rolled metric badge) is this Space's only live demo of fully custom menu content — see this file's own comment above it. "3" counts the card variants the two boolean toggles can reach (plain/media/wide, not counting the media+wide combination as a distinct "style") — a hand-typed number that would silently go stale if a variant is ever added or removed here.A full-width, fluid, self-balancing grid of <Card>s. Children with no expand stay a zero-cost static grid; any child carrying expand turns the whole grid into a hover/tap/focus-activated reveal — the exact mechanism cv's Home focus tiles and Portfolio hub run on.
No expand on any card — no state, no listeners, no measurement.
A card is a shape: an optional title band, a body slot, up to four corner decorators.
An href card gets the built-in "go" chevron bottom-right FOR FREE — no decorator prop, no <CardDecorator> child, tinted by this card's own accent automatically, drawn via the built-in <Icon id="arrow" />.
Each card's own accent sets --ac on its root — everything inside inherits it. The expand block below lives OUTSIDE the card in the DOM, so the grid forwards the same card's accent onto its own reveal set. The THIRD card sets no accent at all — open it and its chips take the page's own ambient accent instead, proving the fallback holds.
maxColsLong, multi-paragraph card bodies read too narrow once a wide screen fits 4 columns — the fix is a column CAP the author names directly, not a min-width to guess at. maxCols={2} below never lets more than two columns form, at any viewport width, so these long bodies keep a readable measure instead of squeezing into a fourth of the row.
A durable data platform earns trust in stages: first by being correct, then by being fast, and only then by being convenient. Skipping ahead to convenience — nice dashboards over ungoverned, unvalidated pipelines — is the most common way teams end up re-litigating "which number is right" in every planning meeting.
The unglamorous work is schema contracts, tested transformations, and a single source of truth for each metric's definition, published somewhere every stakeholder can actually find it before they build their own spreadsheet version.
Running more A/B tests is not the same as learning faster. A team that ships ten underpowered tests a quarter and calls every marginal p-value a win is optimizing for the appearance of rigor, not for decisions that would have gone differently without the data.
The higher-leverage habit is pre-registering what would change your mind, sizing the test to actually detect that effect, and being willing to report a clean null result as a genuine, useful outcome rather than a failure to be quietly shelved.
The fastest ramp isn't a wiki page, it's a first real ticket paired with someone who already knows where the landmines are — which tables are deprecated but still queried by legacy dashboards, which metric names mean two different things in two different teams, which joins silently fan out rows.
Write that landmine list down as you go, even informally; the second new hire should never have to rediscover the same trap the first one just fell into.
maxCols is pure CSS — it sets --card-grid-maxcols inline, no JS layout logic, so the mobile single-column mode below the container breakpoint is completely untouched; the cap only ever governs the WIDE-mode column count.
A <CardDecorator corner="tl|tr|bl|br" icon={…} background={…} /> is a slot CHILD — declared inside a card's own children but never itself rendered; the card reads it off the tree and positions it, radius concentric with its own corner in every case, symmetric at all four. The icon is sized as a FRACTION of the decorator's own box (60%, bold on purpose — never a fixed em/px), and each one below is sciui's own <Icon id="arrow" /> — a Phosphor glyph resolved against the generated registry (see NOTES.md § Icon system); it paints currentColor, so it inherits the decorator's own accent automatically. An href card shows the built-in "go" chevron bottom-right automatically (see the Pipelines card above) — an explicit decorator prop or a corner="br" child, like below, overrides it; none of these four cards has an href, so nothing here is a default, every decorator below was asked for.
Inset one gap from the card's own top-left corner.
Top-right.
Bottom-left.
Bottom-right — where the built-in nav default and the legacy decorator prop both land.
bare renders NO squircle plate at all — icon only, same position, same size box, just no fill at rest or on hover (cv's Home tiles use this for their six meaning-icons). hoverFx picks the hover motion, author-selectable, default 'grow': 'grow' transitions the ICON's own width/height inside its fixed, centred box; 'shift-right' is a ± margin pair sliding the icon rightward (the box itself never resizes); 'none' is static. Both motion variants are compositor-legal — never transform/filter — gated to real pointer hover with prefers-reduced-motion: no-preference. Hover each card below to feel the difference (mouse only — try each on a real pointer device).
No plate — just the icon, tinted by background even though nothing is painted.
The icon slides rightward on hover, margin-only — cv's Portfolio uses this for its linked cards.
The built-in <Icon id="lock" />, static — cv's locked Portfolio cards use exactly this.
A plain <ul>/<li> in a card body needs no classes — compact spacing, a marker in the same muted tone as the body text.
<p> gets, so it aligns identically.disabled renders a plain, non-interactive element regardless of href/onClick — no hover lift, no cursor affordance, and no automatic nav chevron either. cv's Portfolio uses this for demos that exist but aren't public, wearing a static <Icon id="lock" /> decorator instead (see "No motion" above).
This card fronts nothing reachable — it never lifts, never gets a pointer cursor.
corner-shape path can't stand in as a proxy for the clip-path polyfill.href and disabled (cv's Portfolio never combines them) should show no chevron at all — Card's default-nav check is gated on !disabled, but worth a live confirmation since it's an easy corner to miss.<Configurator> — this page is several distinct fixed illustrations (plain / expand / decorators / disabled), not one configurable instance, the same call the Chips & Stats page made for its own multi-accent chip row.A self-contained segmented switcher — pass options, a controlled value, and onValueChange; the sliding pill and its settle-recoil come for free.
Under the hood FSegmented mounts its own Tabs.Root and hands the bare SegmentedList the activeValue it needs for the recoil — see the "Bare list & shadows" subpage for the same visual composed manually.
options/value/onValueChange is a small, ordinary controlled-component surface, and the pill's settle-recoil direction is derived internally from the value change, so there's nothing for a consumer to get wrong here.FSquircle renders any element (as) with superellipse corners — native corner-shape where supported, a Lamé clip-path polyfill elsewhere. Each box below is filled so the corner curve is visible.
Corner shape depends only on border-radius plus squircle — the polyfill traces the identical curve from those two inputs, so it works on any element the as prop names.
as/squircle are a clean, small surface, and forwarding a ref plus spreading the rest of the props means any native element attribute (like the button's implicit type or the anchor's href) just works without special-casing in FSquircle itself. To check: the exact corner curve at squircle=3 vs 1.5 in real Firefox, per the workspace rule that Chrome's fallback path isn't a reliable proxy for the clip-path polyfill.icon export (a tiny FSquircle swatch) is this Space's only live demo of the menu-item icon slot (default rendering) — check the rail: "Squircle" shows the mark instead of its padded page number.<Configurator> (Phase 5 step 6): the point is four DIFFERENT host elements (div/button/a) shown together to prove as genuinely works on any of them — a single-instance picker would still need to render one element at a time, losing the simultaneous cross-element comparison. The "Superellipse support" subpage covers the single-instance, tunable-exponent case instead. Flagging this call explicitly rather than forcing it.Pick the page's own accent — including "None," the template's real accent-less mode — then a container and an inner element (each independently accented) to check any nesting/coloring combination the template can produce. "Nested container" as the element reveals a second, inner container + element pair — exactly two levels, no further nesting.
Every container is a real, reusable primitive (FCard, sciui Disclosure, sciui Tabs) — none of this composition logic is a new component; it only decides which existing one to render and how to accent it. The page accent above is the real thing (useFPageAccent()), so "None (plain page)" as the container reads exactly as it would on any real page of that accent.
--ac accent on their own (they read their own --sci-accent) — this lab's CONTAINER/ELEMENT accent pickers set both together per subtree (`accentVars()`), but the page-accent change above only sets the real `--ac` (matching what a real Page does) and does not also drive `--sci-accent` — so any bare sciui control on this page outside `ContainerLab` (e.g. these picker rows themselves) won't visibly track the page accent. Consistent with how every other Space's sciui usage already works, but worth flagging since this page makes accent-tracking gaps very visible by design.Kit prose owns no block margins; the CONTAINER spaces its children by one step (--flow), with a few tight exceptions (kicker→title, title→lead, text→note). The same mixed document below reads with identical rhythm in every container — the reading column, a card, a disclosure, a tabs panel — because the container, not the element, owns it.
.fish-flow wrapper needed; every content container is a rhythm owner.A short standfirst, sized as a lead paragraph — the intro line under the title.
First body paragraph. Prose primitives (FText) and sciui components interleave below so the vertical rhythm between unlike neighbours is directly visible.
A second paragraph, so paragraph-to-paragraph spacing is on show too.
Body copy sitting between two sciui controls — each gets the same gap a paragraph would.
The identical document, dropped into each surface — the rhythm does not change with the container.
A short standfirst, sized as a lead paragraph — the intro line under the title.
First body paragraph. Prose primitives (FText) and sciui components interleave below so the vertical rhythm between unlike neighbours is directly visible.
A second paragraph, so paragraph-to-paragraph spacing is on show too.
Body copy sitting between two sciui controls — each gets the same gap a paragraph would.
A short standfirst, sized as a lead paragraph — the intro line under the title.
First body paragraph. Prose primitives (FText) and sciui components interleave below so the vertical rhythm between unlike neighbours is directly visible.
A second paragraph, so paragraph-to-paragraph spacing is on show too.
Body copy sitting between two sciui controls — each gets the same gap a paragraph would.
A short standfirst, sized as a lead paragraph — the intro line under the title.
First body paragraph. Prose primitives (FText) and sciui components interleave below so the vertical rhythm between unlike neighbours is directly visible.
A second paragraph, so paragraph-to-paragraph spacing is on show too.
Body copy sitting between two sciui controls — each gets the same gap a paragraph would.
An outer card paragraph.
A short standfirst, sized as a lead paragraph — the intro line under the title.
First body paragraph. Prose primitives (FText) and sciui components interleave below so the vertical rhythm between unlike neighbours is directly visible.
A second paragraph, so paragraph-to-paragraph spacing is on show too.
Body copy sitting between two sciui controls — each gets the same gap a paragraph would.
.fish-flow is an explicit rhythm scope: set --flow on it to retune. Below, the same document runs at a looser step (1.4·--gt) — the tight pairs open up proportionally, because --flow-tight is derived from --flow.
A short standfirst, sized as a lead paragraph — the intro line under the title.
First body paragraph. Prose primitives (FText) and sciui components interleave below so the vertical rhythm between unlike neighbours is directly visible.
A second paragraph, so paragraph-to-paragraph spacing is on show too.
Body copy sitting between two sciui controls — each gets the same gap a paragraph would.
.fish-col, .fish-card-body, .sciui-card-body, .sciui-disclosure-panel-inner, .sciui-tabs-content, plus the explicit .fish-flow scope. sciui is styled host-side from f-ish (same direction as --sciui-text-inset) — the sciui repo is untouched.--flow (base step, ≈ 0.7·--gt); the tight-pair step is --flow / 2, so retuning the base carries the exceptions with it. Tight pairs: kicker→title, title→lead, text→note. Everything else, prose or component, takes the base step.<div> the author adds) becomes a rhythm island — only rhythm owners space their children. Add fish-flow to such a wrapper to opt it back into rhythm. Docs (DESIGN.md/NOTES) land in Phase 7d, after the visual pass.