Galactic Key · Universal Component Rig

True-Clone Page Measurement + Semantic Density Morph for Kokonut & Magic Cards

Measures a real card clone in 0.5 ms, locks body height to whole text lines, and packs 2×1 hero bento cards with 0 px mid-letter clipping.

Real Card Text Overflow measured
0 px
45 px mid-letter slice (lumped 68 px guess) → 0 px real overflow
Clone Probe + Solve Time measured
1.8 ms
18,000 ms headless screenshot loop → 1.8 ms in-browser solver
Bento Column Field & Height calculated
3.00 cols · 496 px
302 px breakpoint jump → 60 fps liquid glide + 2×1 hero bento spans

Who benefits: Every agent cockpit gets self-fitting cards across 4, 9, or 18 items with whole-line text quantization and live overflow verification.

Second-order: Cards morph cleanly across Compact Pill, Standard Bento, and Expanded Telemetry Drawer instead of crushing body copy into thin slits.

Risk: Freeform custom canvas art outside card containers still needs a visual check.

Next: Toggle between Compact Pill, Standard Bento, and Expanded Drawer, or switch 4 → 9 → 18 Cards below; nothing needed from Berkeley.
3D Layout Energy Manifold (Width × Padding) Drag to scrub · Shift+drag to orbit
Liquid Sigmoid vs Hard `@media` Step Lurch Cyan = Liquid · Amber = CSS Step
Interactive Workbench & Universal Architecture Proof

Live KokonutUI + Magic UI Bento Stage (Hover for Titanium Spotlight)

Integer-line quantized · Real DOM overflow readback
Continuous Sigmoid Column Weights (`w₁ … w₄`) Hover any card for cursor-tracked border refraction
3c · 75%

How the Universal 4-Primitive Clone Engine Fixes Ad-Hoc Height Formulas Forever

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 (`Compact Pill` ↔ `Standard` ↔ `Expanded 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