feat(Splitter): new component

[IgorShevchik]

Port of nuxt/ui@ae2bd5eb (nuxt/ui#6670). Third of six in the queue, after #439.

Resizable panels separated by draggable handles, wrapping reka-ui's SplitterGroup / SplitterPanel / SplitterResizeHandle.

Adopted by decision, not by default

A whole new component is not a mechanical port, so it went to the maintainer with the alternatives — adopt / skip / defer to an issue — rather than being decided in the sync. Answer: adopt and adapt.

It duplicates nothing here. We already have DashboardPanel and DashboardResizeHandle, but those build on reka-ui's Primitive, not on the splitter primitives — checked before proposing, because "we already have something like that" would have been the cheap wrong answer.

What is upstream's, and what is not

The component is upstream's, with §1's mechanical rewrites: ui → b24ui throughout (prop, slot props, item key, appConfig.b24ui?.splitter) and #build/b24ui/splitter. The reka-ui imports keep their own names, so the template is unchanged.

The theme is adapted, not copied. Upstream's handle focus ring is focus-visible:outline-2 focus-visible:outline-primary. Ours follows the convention already in button.ts and checkbox.ts:

outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-(--ui-color-accent-soft-element-blue)

— the same token table.ts uses for focusable rows.

Docs, the four examples and the playground page were translated. bg-elevated/50 → bg-(--ui-color-bg-content-secondary), border-default → border-(--ui-color-divider-default), text-muted → text-description. color="neutral" variant="subtle" → color="air-secondary", since this fork's Button has no variant. And the collapsible example's i-lucide-panel-left-{open,close} become the b24icons the dictionary maps panelOpen/panelClose to — outline/OpenChatIcon and outline/CloseChatIcon, not main/…, which is where a first guess put them.

Registered in the three places a component needs: src/theme/index.ts, src/runtime/types/index.ts, and the outer block of src/runtime/types/theme.ts — that file has two, and the prose one closes at line 159, so the placement is worth stating rather than assuming.

Not ported

docs/public/components/{light,dark}/splitter.png. They feed a preview grid this fork does not have: docs/public/components/ does not exist here and nothing references it.

Tests

Upstream's spec, with ui → b24ui and its bg-primary probe class replaced by a token. 24 snapshots generated against our theme, plus the accessibility pass.

Checked in the output rather than the source that the theme adaptation actually landed:

data-slot="handle" class="group relative shrink-0 outline-transparent
focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-(--ui-color-accent-soft-element-blue) … w-2 cursor-col-resize"

Verify (CI=true)

dev:prepare (all four apps) · lint · typecheck · test · build · docs:generate — all green. Tests 6734 passed | 6 skipped across 296 files.

docs:generate prerenders 1248 routes, up from 1240 — the component page and its four examples build and render, which is the check that the docs half actually works rather than merely existing.

Ledger

6f82268b and 3d2129d2 reconciled with #439 and squash 167cd6f3. cursor → ae2bd5eb, entry and log added, .sync/dep-parity.json refreshed to the new cursor.

Remaining: 2beb2345 + a630c943 (showcase, no-ops) and 14ac2438 (ProgressGroup, also adopted, plus the --percent fix for the existing Progress).

---

Generated by Claude Code