The UI model

component NotesPage() {
  live var notes = Note.OrderByDescending(n => n.ModifiedAt).ToList();

  string draft = "";

  action Add() {
    if (draft == "") { return; }
    var created = CreateNote(draft);
    draft = "";
    Navigation.Go("/notes/" + created.Id);
  }

  render {
    Stack {
      ScreenHead(eyebrow: notes.Count == 1 ? "One note" : notes.Count + " notes", title: "Notes");
      Composer(value: draft, placeholder: "New note", onAdd: Add, disabled: draft == "");

      if (notes.Count == 0) {
        Blank(title: "Nothing written down yet",
              body: "A note is the fastest way to stop holding something in your head.");
      }

      CardGrid {
        foreach (var n in notes) {
          RuledRow(title: n.Title, sub: n.Tags == null ? "" : n.Tags, href: "/notes/" + n.Id);
        }
      }
    }
  }

    Stack(maxW: Size.Read, mx: "auto", w: "100%") {
      Row(align: Align.Center, pb: 5) {
        Link(href: "/notes") {
          Text("←  Notes", fontFamily: Font.Sans, fontSize: FontSize.Label, letterSpacing: "0.14em",
               textTransform: TextTransform.Uppercase, color: Colors.TextMuted);
        }
        Spacer();
        if (note != null) {
          Link(href: "/notes/" + note.Id + "/edit") {
            Text("Edit", fontFamily: Font.Sans, fontSize: FontSize.Label, fontWeight: FontWeight.Semibold, letterSpacing: "0.14em",
                 textTransform: TextTransform.Uppercase, color: Colors.Primary);
          }
        }
      }

      if (note != null) {
        Stack(gap: 3, pb: 6) {
          if (note.Tags != null && note.Tags != "") { Eyebrow(text: note.Tags); }
          Text(note.Title, fontFamily: Font.Display, fontSize: FontSize.Title, color: Colors.OnBg,
               letterSpacing: "-0.015em", lineHeight: "1.05");
        }
        // The read-only renderer, set as prose: serif, long line height, on the paper rather than in a box. A note
        // you are only READING should not pay for a megabyte of editing machinery.
        Box(fontFamily: Font.Text, fontSize: FontSize.Body, color: Colors.OnBg, lineHeight: "1.7") {
          Markdown(note.Body);
        }

        foreach (var p in history) {
          Row(gap: Space.Beat, align: Align.Start) {
            Avatar(initials: p.Author.DisplayName, size: Size.Sm);
            Stack(gap: "2px", minW: "0") {
              Row(gap: Space.Step, align: Align.Center) {
                Text(p.Author.DisplayName, fontSize: FontSize.Caption, fontWeight: FontWeight.Semibold);
                Text(p.SentAt.ToString("HH:mm"), fontSize: FontSize.Micro, color: Colors.TextSecondary, fontFamily: Font.Mono);
              }
              MessageBody(body: p.Body, handles: handles);
            }
          }
        }

        foreach (var m in arriving) {
          Row(gap: Space.Beat, align: Align.Start) {
            Avatar(initials: m.Author, size: Size.Sm);
            Stack(gap: "2px", minW: "0") {
              Row(gap: Space.Step, align: Align.Center) {
                Text(m.Author, fontSize: FontSize.Caption, fontWeight: FontWeight.Semibold);
                Text(m.SentAt.ToString("HH:mm"), fontSize: FontSize.Micro, color: Colors.TextSecondary, fontFamily: Font.Mono);
              }
              MessageBody(body: m.Body, handles: handles);
            }
          }
        }

      // A pipe that slid off the left edge respawns at the back of the train — the list never grows.
      foreach (var p in pipes) {
        if (p.X < -11.0) {
          p.X = far + 9.0;
          far = p.X;
          p.GapY = 1.9 + (Roll() % 1000) / 1000.0 * 2.6;
          p.Scored = false;
        }
      }
    }
    scroll = scroll + speed * dt;

    if (state == 0) { birdY = 2.6 + Math.Sin(t * 2.2) * 0.16; }
    if (state == 2) {
      deadFor = deadFor + dt;
      vy = vy - 13.5 * dt;
      birdY = birdY + vy * dt;
      if (birdY < birdR + 0.04) { birdY = birdR + 0.04; vy = 0; }
    }

    // The camera breathes after the bird instead of being bolted to it.
    camY = camY + (2.4 + birdY * 0.25 - camY) * 5.0 * dt;

    DrawSky();
    Draw.Camera(3.4, camY + 1.3, 17.5, 3.4, camY, 0, 42);
    Draw.Light(-0.35, -1.0, 0.45, "#fff1d0", "#a8ccff");       // a late-afternoon sun, front-right and high
    Draw.Fog("#d6ecff", 26, 74);
    DrawValley();
    DrawPipes();
    DrawBird();
    DrawHud();

        DataGrid(
            label: "Organizations",
          rows: orgs,
          columns: [
            new GridColumn<Organization> { Name = "Name", Label = "Organization", Value = o => o.Name, Title = true, Fill = true },
            new GridColumn<Organization> { Name = "Slug", Label = "Slug", Value = o => o.Slug, Secondary = true },
            new GridColumn<Organization> { Name = "Type", Label = "Type", Value = o => o.Type.Label, Width = 140 },
            new GridColumn<Organization> { Name = "Status", Label = "Status", Value = o => o.Status.Label, Width = 140 }
          ],
          rowSelected: OpenOrg
        ) {
          // A CELL TEMPLATE (D78): the Status column renders the app's own Osy#, not the grid's text. The pill is the
          // kit's Badge — app code, forkable — and the TONE is a presentation decision about the status, so it lives
          // HERE, in the app's UI layer, never on the enum (metadata must not dictate UI). The label inside the pill
          // is the enum's own [Label], resolved because `o.Status` is a direct read of an enum-typed field.
          slot Status { o =>
            Row(align: Align.Center) {
              if (o.Status == OrganizationStatus.Active) { Badge(tone: Tone.Success) { Text(o.Status); } }
              else { Badge(tone: Tone.Warning) { Text(o.Status); } }
            }
          }