Galactic Key · Component Rig

Self-Fitting KokonutUI + Magic UI Card Rig

Measures a real card clone, locks text to whole lines, and fits bento cards with 0 px clipping.

Text Overflow measured
0 px
45 px → 0 px
Probe + Solve measured
1.8 ms
18 s → 1.8 ms
Column Field calculated
3.00 cols
302 px → glide
Payload Modes live
4 · 9 · 18
pill · card · drawer

Who benefits: every cockpit gets self-fitting cards at 4, 9, or 18.

Second-order: cards morph across pill, card, drawer without crushed copy.

Risk: freeform canvas art still needs a visual check.

Next: drag a chart or pick a tier. Nothing needed from you.

3D Energy Surface drag
2D Liquid vs Snap cyan · amber

Live Bento Stage

3.00 cols 496 px 0 px 1.8 ms fit 100%
Reference Comparison & Universal Architecture Proof

Instead of guessing `headerChrome = 68 * scale`, `gk-rig.js` renders one off-screen `.koko-card` clone with `height: auto`, measures each real sub-element (`headH`, `metricH`, `drawerH`, `footH`, `lineH`), quantizes `.koko-body` to exact integer line multiples (`lines × lineH`), and checks real `scrollHeight - clientHeight` on every card after layout.

Failure Mode Lumped Height Guess (v1 Bug) Universal Clone + Quantized Rig (v2) Measured Proof
Mid-Letter Text Slicing Unmodeled sparkline + footer ate 48 px, slicing `.koko-body` mid-glyph Measures real sub-elements + locks body height to `k × lineHeight` 0 px DOM overflow across 4, 9, and 18 cards
Crowded Narrow Cards Crushed paragraphs into 1-line slits at high density Semantic Density Morph (`Pill` ↔ `Card` ↔ `Drawer`) 3 clean semantic modes · 0 crushed lines
Monotonous Equal-Width Grid Every card forced into identical `1×1` cells Automatic `2×1` hero bento bin-packing when columns ≥ 2 Zero card overlaps across all widths
False "Exact Fit" Badges Stamped green from formula prediction without checking DOM Reads real `scrollHeight - clientHeight` from every card after paint 100% ground-truth DOM badge verification