complete UI CSS ownership remediation

This commit is contained in:
2026-08-09 21:42:30 +05:30
parent 937ccb9e8e
commit 8f19a5eb2b
61 changed files with 1320 additions and 1577 deletions
+24 -21
View File
@@ -1,14 +1,15 @@
# Framework remediation plan
**Status: remediation behavior completed; CSS ownership cleanup remains.** The
**Status: completed.** The
repository has 102 maintained UI components, zero
undeclared non-native output emitters, zero components matching the scaffold
definition, and local styles on every component. The core reactive runtime is
48,124 minified bytes; component controllers ship separately at 24,027 bytes.
Section 4.1 remains open: the global `ui.css` still contains legacy component
rules duplicated by local component styles. Those rules must be removed before
the §0.1 ownership convention can be called complete.
The §4.1 ownership migration is complete: `ui.css` contains global and
cross-cutting primitives only. Shared component foundations are carried by
three internal style-only components and render on demand; the former global
component families and standalone `wire-next` generation class are absent.
Final validation passed the production, package, example, service, editor,
showcase-generation, typecheck, lint, formatting, public-API, visual-contract,
@@ -16,7 +17,7 @@ security, and runtime-size gates. The only skipped test is the explicitly
environment-dependent live PostgreSQL/MySQL test.
Written 2026-08-09, after the 0.8.6 release. Every number here was measured
against the tree at commit `7a2b5865`, not estimated. Where a cause is not yet
against the completed tree, not estimated. Where a cause is not yet
proven the item says so and makes proving it step one — nothing in this document
should be implemented on the strength of a guess.
@@ -440,11 +441,10 @@ AdvancedRangeSlider, Chart, Confetti, CopyMarkup, FileUpload, Toast,
ToastNotifications, TreeView. Do §3.1 first and this list drops to 19 without
any extra work. Do not plan the two items separately.
Separately, 58 components carried the `wire-next` scaffold class in the
original audit; **45 retain it now**. This is a cosmetic naming artefact and was
not part of the scaffold completion criterion. That class is a
generation artefact rather than a design, and it is what ties them to `ui.css`
instead of their own styles (§4.1).
Separately, 58 components carried the standalone `wire-next` scaffold class in
the original audit; **zero retain it now**. Component-specific BEM identifiers
such as `wire-next--alert` remain locally owned implementation details, but no
component is bound to a global stylesheet through the generation artefact.
**Change.** Rebuild them under §0.1, or remove them. Note that several are
primitives where a scaffold is nearly the right answer — `skeleton`, `spinner`,
@@ -500,18 +500,20 @@ whichever behaviour was chosen.
## 4. Delivery and the dev loop
### 4.1 Global `ui.css` migration — PARTIAL
### 4.1 Global `ui.css` migration — FIXED
**Original issue.** `ui.css` was **175,848 bytes, 26,350 gzipped**, served on
every page. Only **42 of 108** components had a local `style {}` block.
**Result so far.** The maintained library now has **102 of 102** components
with local styles. Built `ui.css` is **54,016 bytes / 9,338 gzipped** after
removing the unused `.wire-switch`, `.wire-alert`, and `.wire-card` families and
localizing the live `.wire-btn`, `.wire-dropdown`, ButtonGroup, alert-variant,
card-overlay, and related rules. The remaining `.wire-next` field and component
rules still form a parallel legacy layer. Local-style coverage alone does not
complete this item; global component selectors must reach zero.
**Result.** The maintained library now has **102 of 102** components with local
styles. Built `ui.css` is **15,927 bytes / 3,762 gzipped**. The `.wire-next`,
`.wire-btn`, `.wire-dropdown`, `.wire-alert`, `.wire-card`, `.wire-footer`,
`.wire-metric-card`, and `.wire-segmented-group` global families are gone.
Reusable field, select, color, and size foundations live in three internal
style-only components; the renderer emits and deduplicates them only when a
component that needs them renders. An example-app SSR guard verifies that
on-demand path, while the UI suite prevents the global families or standalone
`wire-next` class from returning.
**Change.** Done in groups with the visual contract regenerated after each
migration.
@@ -520,8 +522,9 @@ migration.
```bash
ls packages/ui/components/*.wrn | wc -l # 102
grep -lE '^\s*style\s*\{' packages/ui/components/*.wrn | wc -l # 102
bun run build && gzip -c examples/basic-app/dist/ui.css | wc -c # 9338
grep -lE '^\s*style\s*\{' packages/ui/components/*.wrn | wc -l # 102
bun run build
bun -e "const b=await Bun.file('examples/basic-app/dist/ui.css').arrayBuffer(); console.log(Bun.gzipSync(new Uint8Array(b)).length)" # 3762
```
Add a ratchet test asserting the gzipped size only ever decreases, so this
@@ -849,7 +852,7 @@ history. Every row is complete.
| 3 | §2.6 server-rendered i18n | Contained work; the core SSR claim currently fails on text. |
| 4 | §4.2 + §4.3 dev loop | Cheap, and it compounds across every task below. |
| 5 | §4.6 de-duplicate generated client modules | 490 kB decoded parsed per page, 90% of it duplicated. Codegen-only, no API impact. |
| 6 | §4.1 finish the CSS migration | 66 components, mechanical, takes ~26 kB off every page. |
| 6 | §4.1 finish the CSS migration | Localized component ownership and reduced the always-served sheet by ~160 kB. |
| 7 | §4.6 split controllers out of the core runtime | 6.6 kB gzipped a typical page never executes. |
| 8 | §3.1 Group A: supersede the 5 duplicate scaffolds | 15 of the 22 dead outputs, and 5 fewer components to maintain. Needs a migration entry, not new code. |
| 9 | §3.2 scaffolds that need only their styles | Larger and cheaper than it looks; folds into item 6. |