native-ui

Author native UI with Native markup

A native-rendered Native SDK app is a markup view plus an app core. The primary authoring path is:

• src/app.native — the entire UI: elements, layout, bindings, message dispatch.
• src/core.ts — Model, the discriminated Msg union, update(model, msg), effects, subscriptions, and derived binding helpers.
• app.zon — identity, windows, assets, permissions, and policy.

The TypeScript core is checked and compiled ahead of time to native code; no JS runtime ships in the binary. Load native skills get ts-core beside this skill for every default app implementation. A Zig core (src/main.zig) is first-class when explicitly selected with native init --template zig-core; the Zig-only wiring, builder, and runtime-extension recipes below are labeled so they are not mistaken for the default.

The markup compiles to the same widget tree a hand-written canvas.Ui(Msg) builder view would produce: identical structural widget ids, identical typed handler table. Markup can never mutate state — it binds values and dispatches messages; all logic lives in the app core, whichever core language the existing tree uses.

Editors highlight .native markup well in HTML mode — the default scaffold writes no editor config, so add .vscode/settings.json with "files.associations": {"*.native": "html"} yourself, or scaffold with native init --full, which writes it.

Start a new app with native init (zero-config: app.zon + src/core.ts + src/app.native + assets; the CLI generates the build graph). Use examples/chatbot, examples/soundboard, and examples/system-monitor as substantial TypeScript references. The native check|dev|test|build verbs drive any app directory shaped this way.

Menu-bar status items (TypeScript default)

Export statusItem(model: Model): StatusItemState from src/core.ts. The generated launcher installs icon/tooltip/click-open commands plus the boot presentation/menu, re-derives it after every committed update, and patches presentation/menu independently. Import StatusItemState from @native-sdk/core/events. Commands route through the core's commandMsg(name): Msg | null export. There is no app-owned Zig wiring and statusItem is automatically marked shell-bound for the markup lint.