Native sheets

A native sheet is a compiled NativeViewArtifactV1. It is data rendered by Aether, not package code executed inside the app. That lets the host apply its own layout, accessibility, projected document, and gesture handling.

#Bind to a document

import { defineNativeView, document, expr, gesture, native } from "@aether/sdk";

const current = document();
const modifier = expr.floor(
  expr.divide(expr.subtract(current.number("system.strength"), 10), 2),
);

const characterSheet = defineNativeView({
  surface: "sheet",
  root: native.stack({
    gap: "section",
    children: [
      native.score({
        label: "Strength",
        value: modifier,
        detail: current.number("system.strength"),
        editableDetail: {
          bind: current.number("system.strength"),
          min: 1,
          max: 30,
        },
      }),
      native.meter({
        label: "Hit points",
        value: current.number("system.hp.value"),
        max: current.number("system.hp.max"),
        tone: "health",
        editable: true,
      }),
      native.button({
        label: "Roll damage",
        tone: "roll",
        action: gesture.runAutomation({
          scriptId: "roll-damage",
          target: current.id(),
        }),
      }),
    ],
  }),
});

Register it under the exact document type:

return {
  documents: [character],
  sheets: { "my-system.character": characterSheet },
};

#What the renderer owns

The artifact declares nodes such as tabs, grids, fields, meters, scores, references, and buttons. Aether owns the concrete controls and responsive layout. Bindings read and edit known document paths. Expressions are display-only. Gestures request a host action; they do not mutate a server store directly.

The server projects a document before the renderer receives it. A hidden field cannot be recovered by changing the native view. Permission enforcement still happens when a gesture reaches the server.

#Preview while writing

The interactive previews page renders a real native artifact with the production renderer. Its host is local, so it demonstrates bindings and layout but not server projection or persistence. Use a registered world for the authoritative acceptance check.

The broader maintained example is systems/demo-system/src/index.ts, including tabs, editable fields, derived strength, and an automation gesture.