refactor(ui): adopt the Kagaku.UI layout vocabulary project-wide #281
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "feat/layout-adopt"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Phase 3, whole project in one PR: adopt the Kagaku.UI layout vocabulary (Kagaku.UI #23 + #24) everywhere in Kagura.
Submodule bump
48a5e8b→479100e— pulls in the vocabulary (PR #23) and its in-lib dogfooding (PR #24, four Jibril rounds). Zero Kagura source changes needed against the new KUI.The sweep — every layout-only scoped rule in the project (106 measured): 69 migrated across 50 files, −628 CSS / +193 markup. Layout-only count 106 → 37; scoped CSS total 654 → 584 rules. The audit also covered
Kagura.Server— 2 edge rules there (display: contents,flex: 0 0 auto) are unexpressible and kept.The 37 keeps are deliberate, each reasoned:
flex:1 1 auto+min-width:0,min-heightfloors) — no vocabulary component emits that combination; mostly children ofdisplay:gridparents where the stretch-child mapping is invalid. The vocabulary's honest edge..head h2typography descendants) or::deepoverrides needing the literal scoped element.var(--space-5) — noSpacingmember. 1inline-flexoutside a flex context, 1 pseudo-element.Semantics preserved throughout:
Element=keeps semantic tags (header/section/ul/span), ids/classes survive via the splat, conditional classes →RootClassproperties,@mediablocks untouched, test selectors preserved.Verification: build 0 warnings; BlazorAdapter 874, Integration 790, UseCases 340 — all green.
Replaces #280 (closed: framing/scope mismatch — it was pilot + add-on sweep; this is the single project-wide adoption PR from the start).
Next after this merges: Orihon and Tsumugi, same checklist.
Summary
Summary
Coverage
Kagura.BlazorAdapter - 89.7%
Kagura.Domain - 94.8%
D04ADFED3A21D401C2764A1D17367E35BEB556CBB3B4B0B74__NonSlugChars_0
Kagura.Infrastructure - 97.7%
n
n
on
ng
C689CA5BBE6D1849B2CA79581BBB07D40636D85790C0E51A9__ArtifactTimestampRegex_2
C689CA5BBE6D1849B2CA79581BBB07D40636D85790C0E51A9__ProjectRoute_0
C689CA5BBE6D1849B2CA79581BBB07D40636D85790C0E51A9__TabQuery_1
Kagura.Kernel - 90%
Kagura.Server - 81.5%
Kagura.UseCases - 95.5%
🔮 fufu~ Jibril reviewed your code!
Oh? Oh my~ Ninety-one files, sixty-nine migrations, ONE vocabulary — and −628 lines of CSS to show for it. A project-wide layout purge is exactly the kind of thing that usually hides a hundred tiny sins in the seams… so I read every seam. Every single one~ ♡
Verdict: ✅ Looks good to me~
I could not break it. Mechanically verified:
--space-2→Small,--space-3→Medium,--space-4→Large,--space-6→Huge,align-items:center→Align="Center",flex-start/flex-end→Start/End,justify-content:flex-end→Justify="End",baseline→Baseline— all 1:1 againstLayoutCss(Tiny=1, Small=2, Medium=3, Large=4, Huge=6). Sites that omittedalign-itemscorrectly rely on theStretchdefault;LocationVariantImage's controls even dropped an explicitalign-items: stretchbecause the default already says it. That's understanding, not cargo-culting~Rows/Columnsrender from code (no compiler scope attribute on the root), but every surviving scoped rule that names a converted class is either a descendant compound (.kg-outfits__head h2— the scope attr lands on the lexically-authoredh2, still matches) or a different BEM-suffixed class. My mechanical sweep over every converted root class found exactly one single-selector survivor,.tl-event— which targets the non-editing plaindivthat still exists. Clean.@media, no::deep, noflex-wraptargeted any migrated rule (swept the whole diff and tree) — so the inline-style-beats-stylesheet trap never fires. The two surviving@mediablocks target untouched classes..editor__head,.history__actions,.tl-event--editing,.scene-editor__status,.cgg__actionsall still resolve through the splat — and the green runs prove it.inline-flex→flexswap inSceneLineStage.line-stage__onis a no-op: as a flex item of.line-stage__effectiveit blockifies either way; as a code-rendered root its outer display never mattered.Rowadoption (assets__meta) keepsmin-width:0(built in — the old rule needed it explicitly for the ellipsis titles) and packs content identically in the stretched grid cards..app-header form { display: contents }and.app-shell__statusbar { flex: 0 0 auto }— precisely the two "unexpressible" keeps, and the Server project doesn't even reference Kagaku.UI. Honest edge, honestly reported ♪0 warnings / 0 errorswith-warnaserror; BlazorAdapter 874/874, Integration 790/790, UseCases 340/340 — matching the PR table exactly.No new logic paths exist, so no new tests are owed; the vocabulary itself carries its four review rounds from KUI #23/#24.
💡 Little ideas (non-blocking)~
48a5e8b..479100ecarries four KUI commits: #21 (NavItem.Nested) and #22 (NavItem tree rework, 11 icons) ride along uncredited. I chased it down: Kagura uses only leafNavItems, and the leaf markup is byte-identical between the two pins — zero runtime impact. But a future bisect will thank you for naming the full range in the body.@keyframesframes, and 127→54 for layout-only with a broader property set. Direction and magnitude agree everywhere; consider a one-line note of the counting rules in the audit so the numbers reproduce exactly.✅ What I liked~
Element="section"/"header"/"span"everywhere a semantic tag existed — the outline survives, ids survive, conditional classes became a tidyRootClassproperty. Semantics preserved throughout, as promised.RelationshipsPage.razor.cssdeleted outright once empty, and my dead-reference sweep found zero dangling selectors project-wide. A sweep with no crumbs~Merge it~ The vocabulary is spoken here fluently now. ♡
Automated review by Jibril · 2026-09-24
CI/CD: absent for head SHA
49b4a28(no bot comment at review time) · Local checks: build 0w/0e -warnaserror; 874+790+340 green