The UI kit

@localixai/kit is the one set of controls, overlays, rows, states, class recipes and design tokens that the Localix workbench and every mini app view are built from. Use this page to find the module for a job, learn the shared size and tone vocabulary, and add to the kit without forking it.

Terminology

What you can do

Choose by job

The full catalog has about a hundred modules; these are the jobs that are most often hand-rolled.

How it works

Use startResizeSession from @localixai/kit/pane-resize for custom resize handles. It owns the pointer or mouse listeners, a temporary shield above embedded content, and one movement update per animation frame. Supply onMove, onEnd and onCancel; call the returned cleanup when the handle unmounts. Cancellation restores the caller's original size, while release commits the final movement.

Use ClaudeMark, CodexMark, GeminiMark, CopilotMark, OpenCodeMark and HermesMark from @localixai/kit/coding-agent-marks for coding agent identities. These monochrome SVGs inherit the surrounding text colour. Menus, session rows and resource references share the same marks.

One package, two consumers

The primitives live in one package rather than inside the app, because a facade of re-exports would make "the kit" a list the app happened to maintain: the app would import internals the facade did not list, and nothing would stop a primitive from reading app state. As a package, its boundary is checked like any package's — scripts/check-architecture.mjs refuses a kit file that imports the app — and the app imports the same doors a mini app does. What the app sees is what a mini app gets.

The package is source only. The app's Vite build compiles it with the app, React Compiler included, and a mini app's artifact build turns each @localixai/kit/<id> import into a load of the host's module, so the host, the app and every mini app share one instance of each primitive and of the libraries behind them (Radix, cmdk, the flow canvas). The registry of those modules, apps/ui/src/app/miniAppSharedModules.ts, is built from the doors and the lent modules; its test refuses an id served by both.

The kit owns the design system

The tokens and style layers are in packages/kit/styles/, in the cascade order packages/kit/styles/index.css states. The app's stylesheet imports it with one line, and the mini app kit stages it so a mini app's utilities are compiled against the same theme. The rules that keep a surface on that system — no palette colour, no literal duration, the radius scale, one focus recipe, no pane-sized ground — are the ones Visual system lists; each is a check that scans the kit as well as the app, and the authoring plugin's style check applies them to a mini app.

One vocabulary for every primitive

Three axes carry the same names everywhere, so a caller never has to look up which word a component chose:

One look for a menu row that can be chosen

A described menu has two kinds of choice row: selected for one choice among several (announced as menuitemradio) and checked for a real multi-select or an on/off toggle (announced as menuitemcheckbox). Both are drawn the same way — the row's icon in the leading slot, the check at the END of the row, and on an unchosen row that end slot kept empty so hints still line up.

A checkbox row that put its check in the leading slot would take the icon's place: a filter menu of status dots or severities would show bare names while a single-choice menu beside it kept its icons. Only the role tells the two kinds apart; pick by what the choice means, never by how it should look.

Headings and chips

SectionHeading is the one title block: a heading, an optional description and optional actions on the title's line. level is how large it is drawn (page is 1.25rem, section 1rem) and as is the element (h1, h2 or h3), so a pane title can be an h1 at section size. With actions it is its own container and reflows on its own width, so its parent is a block or a column flex; without actions it sits anywhere. The Store and Settings open every page with it.

ChipButton is the pill of Chip as a native button with the focus ring: a tag that opens what else carries it, a category to browse. It holds no pressed state (that is TogglePill) and is not the glass pill of the composer bar (ComposerChip). SectionLabel takes as="h2"–"h4" when the label is the heading of the group under it.

The catalog is the answer to "which module?"

A list of exports and props does not say which module a job needs. The mini app authoring agent was once given the props of sixteen controls and nothing else, and it hand-rolled tabs, a checkbox and a progress bar the kit already had. The catalog states each module's job and what not to confuse it with. The mini app kit renders it into KIT.md, every mini-app check writes that file into the mini app's folder the way it writes tsconfig.json, and the mini-app create instruction tells the agent to choose there before writing a control.

Configuration

Limits

• The kit's doors list only the names something imports today. A new use of an internal name is a door edit, which is the review point, not a defect.
• Fourteen modules are still lent by the host because they carry host features: Markdown, the code editor, diffs, code blocks, comments, tool cards and a few others. They keep the host's behaviour; moving them into the kit needs a port for the host service each one reads.
• The checks read class strings and source; a class assembled at runtime from variables passes unchecked.

Related guides

• Build workbench UI — the artifact, the authoring plugin's create command and mini-app check.
• Visual system — the paint contract and the checks behind it.

Source of truth

• packages/kit/src/entries/ — the public modules.
• packages/kit/src/catalog/index.ts — the catalog.
• packages/kit/styles/index.css — the layer order.
• apps/ui/src/app/miniAppSharedModules.ts — the runtime registry.

Loading content can reserve its geometry with Skeleton from @localixai/kit/skeleton. The enclosing region owns its accessible status and aria-busy; individual shapes are decorative.