docs/overview

zenit 開発マニュアル

Zig で真にネイティブな macOS デスクトップ UI を構築します。zenit はウィンドウ、GPU レンダリング、テキスト、入力メソッド、アクセシビリティを一つの明快な UI モデルにまとめます。このマニュアルは最初のウィンドウから保守しやすい本番アプリまでをガイドします。

5 分で始める

$zig build run

0.15.2Zig バージョン

Metal現在の GPU バックエンド

2 tiers公開 API：ui.X と ui.<group>.X

src/main.zig

const std = @import("std");
const ui = @import("ui");
const App = @import("zenit_app").App;

fn mountUi(cx: *ui.Cx, _: *ui.Scope) anyerror!*ui.Node {
    return ui.text(cx, "Hello, zenit!", .{
        .font_size = cx.tokens.font_size.xxxl,
        .color = cx.tokens.color.fg_primary,
    });
}

pub fn main() !void {
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    defer _ = gpa.deinit();

    const app = try App.init(gpa.allocator(), .{
        .window = .{ .title = "Hello" },
    });
    defer app.deinit();
    try app.runWith(mountUi);
}

学習パス

順番に一度通して約 45 分。zenit アプリを自力で開発するためのメンタルモデルがひととおり身につきます。

01最初のウィンドウを動かす依存を接続し、UI をマウントして、ビルド・実行します。10 min →02ノードとレイアウトbox・stack・text で画面を組み立てます。12 min →03データ駆動の UISignal・Memo・Effect の連携。12 min →04スタイル体系を作るToken、名前付きスタイル、Recipe。11 min →

あなたが使うアーキテクチャ

アプリは安定した公開レイヤーだけに依存し、プラットフォームとレンダリングは zenit が担います。

LAYERS

zenit.attach(dep, exe) は実行ファイルに ui と zenit_app の 2 つのモジュールインポートだけを追加し、ネイティブブリッジをコンパイルしてシステムフレームワークをリンクします。内部モジュールはアプリのビルドグラフに存在しません。「使わない約束」ではなく、「そもそもインポートできない」のです。

API の寄せ集めではない

この 3 つは、ランタイム、テキストスタック、ツール群を貫く能力です。いずれも実行可能なデモと実ウィンドウでの証拠に裏付けられています。

DATA FLOWSignal による精密な更新仮想ツリーの再構築も、ツリー全体の diff もありません。依存は購読しているノードへ直接届きます。アニメーションを見る →TEXT ENGINEUnicode 17 + IMEUAX #9 の双方向テキスト、UAX #29 の書記素境界、そして preedit / commit のエンドツーエンド入力経路。準拠データを見る →TOOLING目で確かめられる実ウィンドウ E2Eセマンティックなノード検索、仮想カーソル、Retina PNG キャプチャ、drawable から直接録画した MP4。録画を見る →

3 つの開発原則

これらを守れば、zenit が急速に進化している間もコードを明快に保てます。

公開レイヤーからのみインポート

アプリのコードでは ui.*、ui.<group>.*、zenit_app.App を使い、内部ディレクトリには踏み込まないでください。

データに UI を決めさせる

永続的な状態は Signal またはバインド状態に置き、派生値は Memo、副作用は Effect で扱います。

Token ファースト

色、文字サイズ、間隔、角丸はテーマから取ります。どうしてもスケール外の値が必要なときは ui.arb で明示します。

クイックスタート