The code you are given shows the syntax; this covers what it doesn't. Expressions are JavaScript (== compiles to ===).

Answer with a patch #

replace Todos/column/title
  title "My tasks"
insert after Todos/column/row
  text "Type and press Enter" muted
append Todos
  state filter = "all"
  fn clearDone() {
    todos = todos.filter(t => !t.done)
  }
replace Todos.add
  fn add() {
    todos.push({ id: crypto.randomUUID(), title: draft, done: false })
  }
set Todos/column gap=6 -align
set TodoItem compact: Bool = false
remove Todos/column/if/else/text

• Operations: replace, insert before|after, append (children of a node; members or view of a component; fields of a model), remove, set (props on the same line, -name removes), add (new declarations, indented).
• View paths: Component/tag/tag[n] (n = 0-based among siblings with the same tag; if, else, for are segments). Members: Component.name. Fields: Model.field.
• set Component name: Type adds a prop to a component without rewriting it; then pass it where it's used.
• Bodies are indented under their operation (no { } around them). Applied in order, all or nothing.

Members #

state x = 0 · state xs: Item[] = [] · computed total = a * 2 · fn name(a, b) { ... } · data items = api.items.list()

• Assigning updates the screen: x++, xs.push(i), item.done = true (also on a prop or a fn parameter).
• A computed can be assigned; it keeps that value until what it reads changes.
• A component that assigns its own prop (items = items.filter(...)) changes the parent's state: pass a state (List items=items). Or pass a callback: onRemove=(id => items = items.filter(i => i.id != id)).
• xs.find(...) and api.x.get(id) may be null: ?., ?? or if x { }.

View #

tag content prop=value flag -> action { children }, one element per line.

• Elements: text title button input textarea select radio tabs checkbox file modal image link badge icon spinner divider row column card grid form list item table tr th td, and components (Name prop=value). icon "trash" (Lucide names); notify("Saved", "success") shows a message.
• button "x" -> action (click), input state -> action (Enter; binds the state), form { } -> action (submit), select x options=[...].
• Flags: text/title: bold muted small large danger primary success; button: primary danger small. Conditional flag: muted=t.done.
• Layout props: gap=4 pad=4 (×4px), align=start|center|end, justify=start|center|end|between, cols=3.
• Values in text use a template literal: text `Total: ${total}` (not "Total: {total}").
• Prop values: literal, name, a.b, call, or (any expression). Multi-statement action: -> { a(); b = 1 }.
• Control flow: if cond { } else { }, for item, i in list { }.
• Unknown names, elements, props and flags are compile errors with a suggested fix.