Jixoai UI v0.6: better docs browsing, wider component customization

2026-09-25 jixoai v0.6.0 ui

All 110 component doc pages follow one skeleton and the install command moved into each page's first card. Every component takes the eight explicit style axes with one grammar for named steps, numbers and query(). Installed files left tailwind behind and no style engine is needed. The chart family stopped scrolling, timeline was rebuilt, and boot-splash is new. 540 commits, no breaking changes.

この記事は英語で書かれています。中国語版を読む →

$ git log v0.5.1..v0.6.0 --oneline | wc -l
540

jixoai-ui v0.6 (2026-09-25, currently 0.6.0) collects 540 commits since v0.5.1 (2026-09-13): 82 feat / 87 fix / 257 docs, the rest test, chore, refactors and merges. Four things changed. The 110 component doc pages now follow one skeleton, with the install command moved into each page's first card. Every component takes the eight explicit style axes. The style system moved from tailwind to stylex, and installs no longer need a style engine. The chart and timeline families were rebuilt or fixed, and boot-splash is new. No commit carries a breaking-change mark; upgrading needs no migration.

One skeleton per docs page, install command in the first card

Every component page now follows one skeleton: Usage first, then the per-axis mechanism table, Universal props, API, Accessibility, Theming and See Also in that order. Pages used to differ in structure, so readers had to relearn the layout on every page. After the unification, the same kind of information sits in the same place on every page.

The install command moved too. The header's right side of each page's first card now carries a TerminalCard with npx jixoai-ui add <name> verbatim; the standalone Install cards are gone, 77 pages in total (71 DocsInstall pages, 5 SectionCard pages and 1 pilot). The command stays copyable and the docs skeleton lint keeps checking it verbatim.

Details: reviews and one exception

The redo passed three external review rounds, opening at 4.5 and closing at 8.5 CONDITIONAL GO, with the Owner signing decisions B and C; the remaining gaps were archived as follow-up work. ghostty-term needs a two-step wasm prerequisite install, so it keeps its standalone card and the hero card points to it.

Every component takes the eight explicit style axes

Customizing a component no longer means memorizing each family's own conventions. Every component now accepts the same set of style props: size / shape / radius / density / color / theme / elevation / motion. Values follow one three-lane grammar: named steps (such as 'small'), 'auto' (inherit the context), and numbers (exact values); cross-breakpoint composition goes through query():

<script>
  import Alert from '$lib/ui/alert';
  import { query } from '$lib/universal-props-query.svelte';
</script>

<!-- named step -->
<Alert size="small" />

<!-- number lane: an exact value -->
<Alert size={13} />

<!-- query: compose by viewport breakpoint -->
<Alert size={query({ sm: 'small', '@md': 'medium' })} />

110 component families are wired; the glass material library is exempt. An axis you leave unset keeps the component's own default, and the props ride CSS variables, adding no class identities. Each docs page gained a per-axis mechanism table, and the playground lets you flip the eight axes and watch the resolution live.

Details: how query() resolves

Media breakpoints normalize narrow to wide, so key order never matters; container keys (such as @md/card) query the nearest qualifying ancestor and never match without one; SSR first paint takes the unconditional base value. The query() runtime ships with the component library.

Installed components no longer depend on tailwind

Where styles are written moved from tailwind utility classes to stylex atoms, for the site and the components together; tailwindcss, @tailwindcss/vite and tailwind-merge left the dependency manifests. If you install through npx jixoai-ui add, two things change: the files you get no longer depend on tailwind utility classes, and the payloads are flipped at delivery into compiled style carriers, so your project needs neither tailwindcss nor @stylexjs/stylex. Clean-install verification passed 24/24.

A standing gate watches the residue. verify:tailwindless tracks utility-class identities through an allowlist, currently 2 files with 7 identities and 7 occurrences, each with a written exemption (the boot screen's inline first-paint styles), and the count only goes down.

Details: the path to zero

The baseline was 470 files with 11,437 identities and 25,024 utility occurrences. The migration advanced in waves over the component zone, the site libs and the routes; each zone's budget fell to zero in turn and the final count is 0 / 0 / 0. Five external review rounds ran through it: 4.5 to 6.1 to 7.8 to 8.4 to 9.4 GO.

Charts stopped scrolling, bars share one start line

After the migration the chart family showed a cluster of symptoms: 42 glyph runs magnified to 96px (7.38x), scrollbars on bars, odd font sizes on some pages. The root cause was the component defaults resolution backfilling donut's outer diameter of 96 into the size slots of bar, sparkline and line. The fix adds one guard at six default-stamping sites: only an explicit number may reach the size slot (406f12a7).

The adaptation switched too: the bar chart re-bins its glyph budget against the container's measured capacity, the font stays on its density rung, and all bars share one start line. The final build was measured at widths 360 / 636 / 1280, plus a full sweep from 360 to 1500 on the prior build: zero overflow, zero scrollbars (da509b3c).

Timeline strokes and dots share one weight

timeline was rebuilt to the reui standard: progress renders as a fractional svg-path; structural strokes share one weight token with the node borders, set once and followed by dots and lines together; the ring dot stays permanently hollow. Connectors now lap into the node's own ink band instead of abutting in mid-air. The regression battery runs 36/36 and the review landed GO 9.1/10 (998f36fd).

New: boot-splash, a loading mask

boot-splash is a loading mask that covers the first paint while stylesheets are still in flight. Five slots (logo / loading / title / subtitle / description), three exits (opacity-out / blur-out / none), a reveal signal of fonts / load / manual, and a timeout cap of 4 seconds by default. Installing it is one command:

npx jixoai-ui add boot-splash

Details: the zero-css-file law

Element styles are inline and the sheet vocabulary ships in a head-level inline block, so the font-loading race cannot happen by construction; a noscript environment hides the layer outright, and a no-JS page never gets stuck behind the mask.

Other changes

The CLI's --overwrite passthrough flags were silently dropped by the item filter before; an item that writes one file twice in a run stalled on the confirmation prompt. They now pass through verbatim to every child process (b0ace9cb).
input-otp's slot width is now explicit, 40x40 by default, and the density ladder holds in any container; before, the bare input's intrinsic width stretched slots to 167px (79038f95).
popover's position-area span-suffix inversion is fixed (0c8ea5c6).
The W2 repair batch covers press-button semantics / the anchor and external rules / dialog closure (6df8f659) and alert dismissal / the ItemField icon lane / the ItemSegmented and ItemStepper adapters (5720cb80).

Upgrade

npx jixoai-ui@latest upgrade

No migration steps.

Commit types, counted strictly by the conventional prefix grep -cE '^(type)(\(|!|:)' over v0.5.1..v0.6.0: feat 82 / fix 87 / docs 257 / test 14 / chore 33 / refactor 5 / style 1 / the rest (merges and others) 61, totaling 540.