Introduction

Cloud is Nyte's design system: the tokens, primitives, and application surfaces shared by the web, desktop, and terminal hosts

View as Markdown

Cloud is the design system for Nyte. It names the tokens, the primitives, and the application surfaces that every host renders, and it says which file implements each one. The pages under it are written to be read by an agent before it touches a component, and by a person who wants to know why the component looks and behaves the way it does.

What this covers

Nyte ships the same product in three hosts. Each host renders the same concerns with different materials, and Cloud documents them in the tier they actually live in.

@base-ui/react              headless interaction, focus, ARIA
  └─ @nyte-ai/ui            6 styled wrappers, 18 headless re-exports, --nyte-* tokens
       └─ desktop/components  Menu, Button, ConfirmDialog, Settings controls (own theme vars)
            └─ desktop surfaces  ModelPicker, SearchPalette, Sidebar, DiffView, Composer…
@opentui/core               terminal (documented later; not in this pass)

Section	What it holds	Source of truth
Foundations	Tokens, theming channels, focus modality, icons	`packages/ui/src/platform-tokens.stylex.ts`
Primitives	The styled wrappers exported from `@nyte-ai/ui`: Button, Avatar, Input, Textarea, Dialog, Alert dialog, Dropdown menu	`packages/ui/src/components/ui/*.tsx`
Headless	The Base UI namespaces `@nyte-ai/ui/<name>` re-exports without styling, with Base UI's documentation verbatim	`packages/ui/src/<name>.ts`, Base UI docs (MIT)
Desktop	The desktop app's own component tier and the application surfaces built on it	`packages/desktop/src/renderer/src/**`
Surfaces	One page per product concern, saying which component implements it in each host	this section

How to read a component page

Every page follows the same order so an agent can jump to what it needs.

Import and the file that implements it.
Usage rules: when to reach for this and when not to.
Anatomy: the parts, in the nesting they must appear in.
Examples: live where the component is pure, code otherwise.
Props as a table. For headless pages the table is Base UI's own.
Accessibility: the keyboard model, focus behavior, and ARIA the component guarantees.
Data attributes and styling hooks.

Precedence and voice

Cloud describes what shipped. It is not the core contract; when a Cloud page and the design record disagree about the runtime, the design record wins. Within Cloud, must and must not mark accessibility and interaction rules that a change is not allowed to regress. Anatomy and props are descriptive.

Verbatim material

Base UI owns the interaction layer. Their component documentation is MIT-licensed (© Material-UI SAS), and Cloud reproduces the relevant props tables, anatomy, and accessibility notes word for word rather than paraphrasing them, so an agent reads the same guarantees the library author wrote. Every headless page carries the attribution. Regenerate them with:

node packages/docs/scripts/sync-base-ui-reference.mjs

The structure of the pages (Usage → Anatomy → Examples → Props → Accessibility) follows Vercel's Geist documentation. The wording is Nyte's.

Known gaps

@nyte-ai/ui ships styled wrappers for six components. The desktop app does not use them; it imports the headless subpaths and styles a second tier in desktop/src/renderer/src/components. Both tiers are documented. The duplication is the known target for consolidation.
@nyte-ai/ui and the desktop keep separate token systems: --nyte-* from platform-tokens.stylex.ts and t.* from desktop/src/renderer/src/theme/vars.stylex.ts. Foundations documents both.
Twelve of the eighteen headless subpaths have no Nyte styling anywhere yet. Their pages exist so the accessibility contract is on record before a wrapper is written.
Terminal components are out of scope for this pass.

Index

Foundations

Primitives

Headless

Overview and one page per subpath: alert-dialog, autocomplete, button, collapsible, context-menu, dialog, menu, number-field, popover, preview-card, select, slider, switch, tabs, toggle, toggle-group, toolbar, tooltip.