fix: perry init type stubs + UI docs examples (v0.5.109) (#103)

State is now generic (State<T = number>) so State<string[]>([]) / State("")
type-check. Added ForEach to the stub; stateBindTextfield takes State<string>.
Rewrote the UI docs examples (first-app, state, widgets, dialogs) to use the
real runtime signatures — the old TextField(state, placeholder) form
segfaulted because UiArgKind::Str routes the first arg through
get_raw_string_ptr.

Author: proggeramlug

CLAUDE.md

@@ -8,7 +8,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 Perry is a native TypeScript compiler written in Rust that compiles TypeScript source code directly to native executables. It uses SWC for TypeScript parsing and LLVM for code generation.
 
-**Current Version:** 0.5.108
+**Current Version:** 0.5.109
 
 ## TypeScript Parity Status
 
@@ -150,6 +150,7 @@ First-resolved directory cached in `compile_package_dirs`; subsequent imports re
 
 Keep entries to 1-2 lines max. Full details in CHANGELOG.md.
 
+- **v0.5.109** — Fix `perry init` TypeScript type stubs and the UI docs that exercised them (closes #103). `types/perry/ui/index.d.ts`: `State` is now generic (`State<T = number>`) so `State<string[]>([])` and `State("")` type-check instead of erroring on the old number-only signature; added `ForEach(count: State<number>, render)` export (was used in the todo-app docs example but missing from the stub); `stateBindTextfield` now takes `State<string>`. Rewrote the docs examples in `docs/src/getting-started/first-app.md` (counter + todo), `docs/src/ui/state.md` (two-way binding section, onChange snippet, complete example), `docs/src/ui/widgets.md` (TextField/SecureField/Toggle/Slider/Picker/Form), and `docs/src/ui/dialogs.md` to use the actual runtime signatures — `TextField(placeholder, onChange)`, `Slider(min, max, onChange)`, `Picker(onChange)` + `pickerAddItem`, etc. — instead of the fictional `TextField(state, placeholder)` / `count.onChange(...)` forms. The old forms silently segfaulted at launch because `UiArgKind::Str` at `lower_call.rs:2557` routes the first arg through `get_raw_string_ptr`, and a State handle (i64) reinterpreted as a NaN-boxed string derefs garbage. No runtime/codegen change — the stubs are embedded via `include_str!` at compile time and ship to users via `perry init` / `perry types`. Verified: 5 new example binaries (counter, todo, controls, form, onchange) all `tsc --noEmit` clean AND compile + launch without crashing.
 - **v0.5.108** — Honor `PERRY_RUNTIME_DIR` / `PERRY_LIB_DIR` env vars in `find_library` so out-of-tree installs (perry binary in `/usr/local/bin`, source tree elsewhere) can point at an explicit lib dir. The "Could not find libperry_runtime.a" error now lists every candidate path it searched and names the env var as a fix. Closes #101.
 - **v0.5.107** — First end-to-end release with npm distribution live. `@perryts/perry` + seven per-platform optional-dep packages (`@perryts/perry-{darwin-arm64,darwin-x64,linux-x64,linux-arm64,linux-x64-musl,linux-arm64-musl,win32-x64}`) publish via OIDC Trusted Publisher from `release-packages.yml` on each GitHub Release. `npx @perryts/perry compile file.ts` works on all seven platforms. No runtime/codegen change.
 - **v0.5.106** — Swap `lettre`'s `tokio1-native-tls` feature for `tokio1-rustls-tls` in `crates/perry-stdlib/Cargo.toml`. Eliminates `openssl-sys` / `native-tls` from the transitive dep tree (they were the only holdouts; the policy comment at Cargo.toml:35 already states "rustls only to avoid OpenSSL"). Unblocks the musl CI build — `openssl-sys` was failing with "Could not find openssl via pkg-config: cross-compilation unsupported" on `x86_64-unknown-linux-musl`. No functional change for SMTP clients; rustls provides the same TLS surface.

Cargo.lock

@@ -102,7 +102,7 @@ opt-level = "s"       # Optimize for size in stdlib
 opt-level = 3
 
 [workspace.package]
-version = "0.5.108"
+version = "0.5.109"
 edition = "2021"
 license = "MIT"
 repository = "https://github.com/PerryTS/perry"

Cargo.toml

@@ -11,17 +11,16 @@ import { App, Text, Button, VStack, State } from "perry/ui";
 
 const count = State(0);
 
-App("My Counter", () =>
-  VStack([
-    Text(`Count: ${count.get()}`),
-    Button("Increment", () => {
-      count.set(count.get() + 1);
-    }),
-    Button("Reset", () => {
-      count.set(0);
-    }),
-  ])
-);
+App({
+  title: "My Counter",
+  width: 400,
+  height: 300,
+  body: VStack(16, [
+    Text(`Count: ${count.value}`),
+    Button("Increment", () => count.set(count.value + 1)),
+    Button("Reset", () => count.set(0)),
+  ]),
+});
 ```
 
 Compile and run:
@@ -35,43 +34,51 @@ A native window opens with a label and two buttons. Clicking "Increment" updates
 
 ## How It Works
 
-- **`App(title, renderFn)`** — Creates a native application window. The render function defines the UI.
-- **`State(initialValue)`** — Creates reactive state. When you call `.set()`, the UI re-renders.
-- **`VStack([...])`** — Vertical stack layout (like SwiftUI's VStack or CSS flexbox column).
-- **`Text(string)`** — A text label. Template literals with `${state.get()}` update reactively.
+- **`App({ title, width, height, body })`** — Creates a native application window. `body` is the root widget.
+- **`State(initialValue)`** — Creates reactive state. `.value` reads, `.set(v)` writes and triggers UI updates.
+- **`VStack(spacing, [...])`** — Vertical stack layout (like SwiftUI's VStack or CSS flexbox column). Spacing arg is optional.
+- **`Text(string)`** — A text label. Template literals referencing `${state.value}` bind reactively.
 - **`Button(label, onClick)`** — A native button with a click handler.
 
 ## A Todo App
 
 ```typescript
-import { App, Text, Button, TextField, VStack, HStack, State, ForEach } from "perry/ui";
+import {
+  App, Text, Button, TextField, VStack, HStack, State, ForEach, Spacer,
+} from "perry/ui";
 
 const todos = State<string[]>([]);
+const count = State(0); // ForEach iterates by index, so we keep a count in sync
 const input = State("");
 
-App("Todo App", () =>
-  VStack([
-    HStack([
-      TextField(input, "Add a todo..."),
+App({
+  title: "Todo App",
+  width: 480,
+  height: 600,
+  body: VStack(16, [
+    HStack(8, [
+      TextField("Add a todo...", (value: string) => input.set(value)),
       Button("Add", () => {
-        const text = input.get();
+        const text = input.value;
         if (text.length > 0) {
-          todos.set([...todos.get(), text]);
+          todos.set([...todos.value, text]);
+          count.set(count.value + 1);
           input.set("");
         }
       }),
     ]),
-    ForEach(todos, (todo, index) =>
-      HStack([
-        Text(todo),
+    ForEach(count, (i: number) =>
+      HStack(8, [
+        Text(todos.value[i]),
+        Spacer(),
         Button("Remove", () => {
-          const items = todos.get();
-          todos.set(items.filter((_, i) => i !== index));
+          todos.set(todos.value.filter((_, idx) => idx !== i));
+          count.set(count.value - 1);
         }),
       ])
     ),
-  ])
-);
+  ]),
+});
 ```
 
 ## Cross-Platform

docs/src/getting-started/first-app.md

@@ -111,7 +111,7 @@ App({
       }),
     ]),
     Text(`File: ${filePath.value || "No file open"}`),
-    TextField(content, "Start typing..."),
+    TextField("Start typing...", (value: string) => content.set(value)),
   ]),
 });
 ```