@solidrt/cli 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/cli",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -22,12 +22,12 @@
     "qrcode-generator": "^2.0.4"
   },
   "optionalDependencies": {
-    "@solidrt/darwin-arm64": "0.0.18",
-    "@solidrt/linux-x64-gnu": "0.0.18",
-    "@solidrt/win32-x64-msvc": "0.0.18"
+    "@solidrt/darwin-arm64": "0.0.19",
+    "@solidrt/linux-x64-gnu": "0.0.19",
+    "@solidrt/win32-x64-msvc": "0.0.19"
   },
   "peerDependencies": {
-    "@solidrt/core": "0.0.18",
+    "@solidrt/core": "0.0.19",
     "typescript": "^6"
   },
   "devDependencies": {

package/scaffold/AGENTS.md

@@ -5,58 +5,68 @@ runtime. No DOM, no HTML, no CSS cascade. If you are an AI assistant, read this
 before writing or editing code here.
 
 Authoritative references ship inside the installed packages - read them:
-- node_modules/solid-js/CHEATSHEET.md     - SolidJS 2.0 reactivity/control-flow model
-- node_modules/@solidrt/core/AGENTS.md   - element/prop/reactivity model
-- node_modules/@solidrt/core/examples/   - single-concept usage patterns to copy (see its README.md index)
-- node_modules/@solidrt/cli/AGENTS.md    - running, bundling, headless verify
+- node_modules/solid-js/CHEATSHEET.md          - SolidJS 2.0 reactivity/control-flow model
+- node_modules/@solidrt/components/AGENTS.md   - the component vocabulary; build UI from these
+- node_modules/@solidrt/components/README.md   - full prop tables for every component
+- node_modules/@solidrt/core/AGENTS.md         - the underlying element/prop/reactivity model
+- node_modules/@solidrt/core/examples/         - single-concept usage patterns to copy (see its README.md index)
+- node_modules/@solidrt/cli/AGENTS.md          - running, bundling, headless verify
 - node_modules/@solidrt/core/src/types.d.ts and jsx-runtime.d.ts - source of truth
 
 <!-- Claude Code auto-imports these; other tools read the paths above. -->
 @./node_modules/solid-js/CHEATSHEET.md
+@./node_modules/@solidrt/components/AGENTS.md
 @./node_modules/@solidrt/core/AGENTS.md
 @./node_modules/@solidrt/cli/AGENTS.md
 
 ## The things assistants get wrong (this is not React/DOM)
 
 1. This is SolidJS 2.0 (see CHEATSHEET.md for the reactivity/control-flow
-   model), rendering through a custom Rust runtime instead of the DOM. Import
-   the whole authoring surface from @solidrt/core - it re-exports the
-   substrate so you do not have to know which package a symbol lives in:
-   render plus the window/paint/event APIs alongside the standard reactive
-   primitives and control-flow components.
-2. Host elements are lowercase intrinsics: window, view, text, rect, oval, path,
-   texture, audio (+ d- variants). No div/span/img/button.
-3. render(() => <App/>) once, top level. The root MUST be <window> or it throws.
-4. Containers (window, view) DO NOT PAINT. Background = a draw primitive child
-   placed behind the content, e.g. <d-rect color="..." />.
-5. Paint color is the color prop (a CSS color string). No fill/stroke/background
-   prop. Outline: drawStyle="stroke" + strokeWidth.
-6. No onClick/onPress. A button is a <view>/<rect> with onPointerDown.
-7. d- prefix = detached from layout: a plain element is laid out by Taffy, a
-   d-element you position with x/y (omit to fill the parent = how backgrounds
-   work). A detached node cannot have attached (regular, Taffy-laid-out)
-   children - everything under a d-element must itself be detached. Nesting a
-   plain <view>/<text> inside a d-element is an error.
-8. Per-frame animation: onFrame((tick, frame) => {}) is the native hook
-   (runtime-paced, auto-cleans). requestAnimationFrame(t => {}) exists as a
-   web-standard one-shot but is not the preferred animation driver.
-9. Reactive window state: prefer the accessors windowSize(), safeArea(),
-   displayScale(), windowFocused(), keyboardHeight() from @solidrt/core over the
-   onResize / onLayout callbacks for reading layout and window state.
-10. Device/GPU via subpath imports: @solidrt/core/camera, /microphone, /gpu.
-    Images: createImage(src) from @solidrt/core (reactive load -> texture id);
-    raw decodeImage + createTexture (from /gpu) are the primitives underneath.
-11. tsconfig needs jsx:"preserve" + jsxImportSource:"@solidrt/core". Solid peer
-    deps are pinned betas - do not bump them casually.
-12. Use ASCII characters whenever possible in code and text - for example, no
+   model), rendering through a custom Rust runtime instead of the DOM. Build
+   UI from @solidrt/components (Window, View, Text, Image, TextInput,
+   ScrollView, Pressable, Button, SafeArea, theme/setTheme) - it is the
+   higher-level, batteries-included vocabulary and is where most app code
+   should live.
+2. Most components split their props into two objects: `layout={{...}}` for
+   anything that feeds the layout engine (flex/grid, sizing, padding/margin,
+   position; font fields for Text) and `style={{...}}` for paint-only
+   properties that never relayout (`backgroundColor`, `borderColor`,
+   `borderWidth`, `borderRadius`, `color`, and the transform `x`/`y`/
+   `rotate`/`scale`). Event handlers (`onPointerDown`, `onKeyDown`, ...) are
+   top-level props, not inside `layout`/`style`.
+3. `render(() => <App/>)` once, top level. The root MUST be a `<Window>`
+   (from @solidrt/components) or the core `<window>` - it throws otherwise.
+4. `Window`/`View` do not paint on their own; they only paint when you set
+   `style.backgroundColor`/`borderColor` etc - there is no separate
+   background element to place by hand.
+5. There is no onClick/onPress on host elements. Use `Pressable`/`Button`
+   from components (`onPress`), or `onPointerDown` on a `View` for anything
+   custom.
+6. Reactive window state: prefer the accessors windowSize(), safeArea(),
+   displayScale(), windowFocused(), keyboardHeight() (re-exported from
+   @solidrt/core) over onResize/onLayout callbacks for reading layout and
+   window state. SafeArea (the component) is usually the simpler fix for
+   avoiding notches/system UI.
+7. Per-frame animation: onFrame((tick, frame) => {}) is the native hook
+   (runtime-paced, auto-cleans), re-exported from @solidrt/core.
+   requestAnimationFrame(t => {}) exists as a web-standard one-shot but is
+   not the preferred animation driver.
+8. Reach for @solidrt/core directly only for what components doesn't wrap:
+   raw host intrinsics and the `d-` (detached, non-layout) primitives like
+   `d-rect`/`d-path`/`d-oval` for vector art or perf-sensitive positioned
+   drawing, device/GPU subpath imports (@solidrt/core/camera, /microphone,
+   /gpu), gradients (createLinearGradient/createRadialGradient), and
+   createImage/decodeImage for images below the `Image` component's level.
+   Components and core primitives compose freely in the same tree - a
+   components-based app can drop to a `<d-path>` for one custom shape without
+   giving up `View`/`Text` everywhere else.
+9. tsconfig needs jsx:"preserve" + jsxImportSource:"@solidrt/core" (still
+   true even when you build almost entirely with @solidrt/components -
+   components are plain functions returning core JSX). Solid peer deps are
+   pinned betas - do not bump them casually.
+10. Use ASCII characters whenever possible in code and text - for example, no
     em-dashes (use a hyphen), no smart/curly quotes, no unicode symbols.
-13. Mind the safe area. safeArea() from @solidrt/core is a reactive accessor
-    returning { top, left, right, bottom } insets (like CSS
-    env(safe-area-inset-*)). It is fine to place content outside the safe-area
-    zone (e.g. full-bleed backgrounds), just be aware it may not be visible and
-    cannot be interacted with (touch gestures). Keep interactive or essential
-    content inside the safe area by padding the edges.
-14. Prefer let over const. Use const only for real constants - a single fixed
+11. Prefer let over const. Use const only for real constants - a single fixed
     string or number value - and name those in ALL_CAPS.
 
 ## Run / verify
@@ -65,4 +75,4 @@ Authoritative references ship inside the installed packages - read them:
 - bunx srt bundle src/index.tsx  - exit 0 means it compiles
 - bunx srt record src/index.tsx --size 480x640 --duration 1 --fps 2 - headless
   render to PNG frames (proves it renders; see the cli AGENTS.md for where the
-  frames land)
+  frames land)

package/scaffold/package.json

@@ -4,10 +4,13 @@
   "private": true,
   "scripts": {
     "dev": "srt run src/index.tsx",
-    "bundle": "srt bundle src/index.tsx"
+    "server": "srt server",
+    "client": "srt client",
+    "android": "srt client --android"
   },
   "dependencies": {
-    "@solidrt/core": "0.0.18"
+    "@solidrt/core": "0.0.19",
+    "@solidrt/components": "0.0.19"
   },
   "devDependencies": {
     "@solidrt/cli": "0.0.0",

package/scaffold/src/index.tsx

@@ -1,25 +1,66 @@
-import { render } from "@solidrt/core"
+import { render, For, onFrame, createSignal, createLinearGradient } from "@solidrt/core"
+import { View, Window } from "@solidrt/components"
+
+const FADE = 360 
+
+let SEGMENTS = [
+  { base: 0, light: "#3f5494", dark: "#162b6c", d: "M50.000 50.000 L28.330 50.000 C28.330 48.810 27.695 47.711 26.665 47.116 C25.635 46.521 24.365 46.521 23.335 47.116 C22.305 47.711 21.670 48.810 21.670 50.000 L0.000 50.000 L50.000 0.000 L50.000 9.170 C48.810 9.170 47.711 9.805 47.116 10.835 C46.521 11.865 46.521 13.135 47.116 14.165 C47.711 15.195 48.810 15.830 50.000 15.830 L50.000 25.000 L50.000 34.170 C48.810 34.170 47.711 34.805 47.116 35.835 C46.521 36.865 46.521 38.135 47.116 39.165 C47.711 40.195 48.810 40.830 50.000 40.830 L50.000 50.000 Z" },
+  { base: 90, light: "#547ebf", dark: "#2b5696", d: "M50.000 50.000 L50.000 59.170 C48.810 59.170 47.711 59.805 47.116 60.835 C46.521 61.865 46.521 63.135 47.116 64.165 C47.711 65.195 48.810 65.830 50.000 65.830 L50.000 75.000 L50.000 84.170 C48.810 84.170 47.711 84.805 47.116 85.835 C46.521 86.865 46.521 88.135 47.116 89.165 C47.711 90.195 48.810 90.830 50.000 90.830 L50.000 100.000 L0.000 50.000 L21.670 50.000 C21.670 48.810 22.305 47.711 23.335 47.116 C24.365 46.521 25.635 46.521 26.665 47.116 C27.695 47.711 28.330 48.810 28.330 50.000 L50.000 50.000 Z" },
+  { base: 180, light: "#7ea9ea", dark: "#5681c1", d: "M50.000 25.000 L50.000 15.830 C48.810 15.830 47.711 15.195 47.116 14.165 C46.521 13.135 46.521 11.865 47.116 10.835 C47.711 9.805 48.810 9.170 50.000 9.170 L50.000 0.000 L75.000 25.000 L65.830 25.000 C65.830 26.190 65.195 27.289 64.165 27.884 C63.135 28.479 61.865 28.479 60.835 27.884 C59.805 27.289 59.170 26.190 59.170 25.000 L50.000 25.000 Z" },
+  { base: 270, light: "#547ebf", dark: "#2b5696", d: "M50.000 25.000 L59.170 25.000 C59.170 26.190 59.805 27.289 60.835 27.884 C61.865 28.479 63.135 28.479 64.165 27.884 C65.195 27.289 65.830 26.190 65.830 25.000 L75.000 25.000 L75.000 34.170 C73.810 34.170 72.711 34.805 72.116 35.835 C71.521 36.865 71.521 38.135 72.116 39.165 C72.711 40.195 73.810 40.830 75.000 40.830 L75.000 50.000 L65.830 50.000 C65.830 48.810 65.195 47.711 64.165 47.116 C63.135 46.521 61.865 46.521 60.835 47.116 C59.805 47.711 59.170 48.810 59.170 50.000 L50.000 50.000 L50.000 40.830 C48.810 40.830 47.711 40.195 47.116 39.165 C46.521 38.135 46.521 36.865 47.116 35.835 C47.711 34.805 48.810 34.170 50.000 34.170 L50.000 25.000 Z" },
+  { base: 360, light: "#7ea9ea", dark: "#5681c1", d: "M50.000 50.000 L59.170 50.000 C59.170 48.810 59.805 47.711 60.835 47.116 C61.865 46.521 63.135 46.521 64.165 47.116 C65.195 47.711 65.830 48.810 65.830 50.000 L75.000 50.000 L64.855 60.145 C64.013 59.304 62.787 58.976 61.638 59.283 C60.489 59.591 59.591 60.489 59.283 61.638 C58.976 62.787 59.304 64.013 60.145 64.855 L50.000 75.000 L50.000 65.830 C48.810 65.830 47.711 65.195 47.116 64.165 C46.521 63.135 46.521 61.865 47.116 60.835 C47.711 59.805 48.810 59.170 50.000 59.170 L50.000 50.000 Z" },
+  { base: 450, light: "#3f5494", dark: "#162b6c", d: "M75.000 50.000 L75.000 59.170 C73.810 59.170 72.711 59.805 72.116 60.835 C71.521 61.865 71.521 63.135 72.116 64.165 C72.711 65.195 73.810 65.830 75.000 65.830 L75.000 75.000 L50.000 100.000 L50.000 90.830 C48.810 90.830 47.711 90.195 47.116 89.165 C46.521 88.135 46.521 86.865 47.116 85.835 C47.711 84.805 48.810 84.170 50.000 84.170 L50.000 75.000 L60.145 64.855 C59.304 64.013 58.976 62.787 59.283 61.638 C59.591 60.489 60.489 59.591 61.638 59.283 C62.787 58.976 64.013 59.304 64.855 60.145 L75.000 50.000 Z" },
+  { base: 540, light: "#7ea9ea", dark: "#5681c1", d: "M100.000 50.000 L75.000 75.000 L75.000 65.830 C73.810 65.830 72.711 65.195 72.116 64.165 C71.521 63.135 71.521 61.865 72.116 60.835 C72.711 59.805 73.810 59.170 75.000 59.170 L75.000 50.000 L75.000 40.830 C73.810 40.830 72.711 40.195 72.116 39.165 C71.521 38.135 71.521 36.865 72.116 35.835 C72.711 34.805 73.810 34.170 75.000 34.170 L75.000 25.000 L100.000 50.000 Z" },
+]
+
+let LAST = SEGMENTS[SEGMENTS.length - 1].base
+let IN_DONE = LAST + FADE
+let CYCLE = IN_DONE + LAST + FADE
+
+let clamp = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x)
+let ease = (t: number) => 1 - (1 - t) * (1 - t)
+let byte = (x: number) => Math.round(Math.max(0, Math.min(255, x))).toString(16).padStart(2, "0")
+
+let fill = (seg: (typeof SEGMENTS)[number], a: number) =>
+  createLinearGradient(0, 0, 1, 1, [
+    { offset: 0, color: seg.light + byte(a * 255) },
+    { offset: 1, color: seg.dark + byte(a * 255) },
+  ])
 
 function Icon() {
+  let [clock, setClock] = createSignal(0)
+  let start = -1
+  onFrame((t) => (start < 0 && (start = t), setClock((t - start) % CYCLE)))
   return (
-    <view width={100} height={100} scale={3}>
-      <d-path d="M50 50L0 50L50 0Z" color="#1a3380" />
-      <d-path d="M50 50L50 100L0 50Z" color="#3366b3" />
-      <d-path d="M50 25L50 0L75 25Z" color="#6699e6" />
-      <d-path d="M50 25L75 25L75 50L50 50Z" color="#3366b3" />
-      <d-path d="M50 50L75 50L50 75Z" color="#6699e6" />
-      <d-path d="M75 50L75 75L50 100L50 75Z" color="#1a3380" />
-      <d-path d="M100 50L75 75L75 25Z" color="#6699e6" />
-    </view>
+    <View layout={{ width: 100, height: 100 }} style={{ scale: 3 }}>
+      <For each={SEGMENTS}>
+        {(seg) => {
+          let a = () => {
+            let t = clock(), end = IN_DONE + seg.base + FADE
+            if (t < seg.base || t >= end) return 0
+            return ease(Math.min(clamp((t - seg.base) / FADE), clamp((end - t) / FADE)))
+          }
+          return <d-path d={seg.d} color={fill(seg, a())} />
+        }}
+      </For>
+    </View>
   )
 }
 
 function App() {
+  let backgroundColor = createLinearGradient(0, 0, 1, 1, [
+    { offset: 0, color: "#080b16" },
+    { offset: 1, color: "#1d2a52" },
+  ])
+
   return (
-    <window alignItems="center" justifyContent="center">
+    <Window
+      layout={{ alignItems: "center", justifyContent: "center" }}
+      style={{ backgroundColor }}
+    >
       <Icon />
-    </window>
+    </Window>
   )
 }
 
-render(() => <App />)
+render(() => <App />)

package/src/commands/init.ts

@@ -33,12 +33,12 @@ export async function runInitCommand() {
     process.exit(1)
   }
 
-  console.log(`>> scaffolding SolidRT project in ${resolve(dir)}`)
+  console.log(`>> Scaffolding SolidRT project in ${resolve(dir)}`)
   for (let { from, to } of TEMPLATE_FILES) {
     let dest = join(dir, to)
     await mkdir(dirname(dest), { recursive: true })
     await writeFile(dest, await readFile(join(SCAFFOLD_DIR, from)))
-    console.log(`   write ${to}`)
+    console.log(`   Write ${to}`)
   }
 
   // The scaffold package.json carries a placeholder name; set it from the
@@ -50,18 +50,18 @@ export async function runInitCommand() {
 
   // Deps are declared in scaffold/package.json (Solid peers resolve via
   // @solidrt/core's peerDependencies), so a plain install is enough.
-  console.log("\n>> installing dependencies")
+  console.log("\n>> Installing dependencies")
   let install = Bun.spawnSync(["bun", "install"], {
     cwd: dir,
     stdout: "inherit",
     stderr: "inherit",
   })
   if (install.exitCode !== 0) {
-    console.error("\n!! dependency install failed; retry with `bun install` in the project")
+    console.error("\n!! Dependency install failed; retry with `bun install` in the project")
     process.exit(1)
   }
 
   let prefix = dir === "." ? "" : `cd ${dir} && `
-  console.log(`\n>> done. next:\n   ${prefix}bunx srt run src/index.tsx\n`)
+  console.log(`\n>> Done. Next:\n   ${prefix}bun run dev\n`)
   process.exit()
 }

package/src/dev-android.ts

@@ -65,11 +65,43 @@ function listDevices(adb: string): string[] {
     .filter((s): s is string => Boolean(s))
 }
 
-// Resolve the target device serial. With --device, treat the value as a serial
-// prefix and require it to match exactly one connected device; without it, use
-// the sole connected device. Exits with a clear message on any ambiguity.
-function resolveTarget(adb: string): string {
+// Primary ABI of the connected device (e.g. "arm64-v8a", "armeabi-v7a"), used
+// to pick the matching APK -- a fat (multi-ABI) APK reports its 64-bit ABI
+// here and still installs fine, so this only matters for single-ABI builds.
+function deviceAbi(adb: string, target: string): string {
+  let res = Bun.spawnSync([adb, "-s", target, "shell", "getprop", "ro.product.cpu.abi"], {
+    stdout: "pipe",
+    stderr: "pipe",
+  })
+  return res.stdout.toString().trim()
+}
+
+// Always shown up front, regardless of how many devices are connected or
+// whether --device narrows it down: one line per device with the ABI its APK
+// build would target, then a dev-dependency hint for each ABI that isn't
+// resolvable locally yet. Returns the device->abi map so callers don't have
+// to re-query it.
+function printDeviceStatus(adb: string, devices: string[]): Map<string, string> {
+  let abiByDevice = new Map<string, string>()
+  let missingAbis = new Set<string>()
+  for (let d of devices) {
+    let abi = deviceAbi(adb, d)
+    abiByDevice.set(d, abi)
+    print(`${d} - ${abi}`)
+    if (!resolveApk(abi)) missingAbis.add(abi)
+  }
+  let missingPkgs = [...missingAbis].map((abi) => ANDROID_PKG_MAP[abi]).filter((pkg): pkg is string => Boolean(pkg))
+  if (missingPkgs.length > 0) print(`Add dev dependencies with: bun add -d ${missingPkgs.join(" ")}`)
+  return abiByDevice
+}
+
+// Resolve the target device serial (and its ABI). With --device, treat the
+// value as a serial prefix and require it to match exactly one connected
+// device; without it, use the sole connected device. Exits with a clear
+// message on any ambiguity.
+function resolveTarget(adb: string): { target: string; abi: string } {
   let devices = listDevices(adb)
+  let abiByDevice = printDeviceStatus(adb, devices)
 
   if (values.device) {
     let prefix = values.device
@@ -80,14 +112,14 @@ function resolveTarget(adb: string): string {
     }
     let [match] = matches
     if (!match) {
-      console.error(`No connected device matches --device "${prefix}". Connected: ${devices.join(", ") || "none"}`)
+      console.error(`No connected device matches --device "${prefix}".`)
       process.exit(1)
     }
-    return match
+    return { target: match, abi: abiByDevice.get(match)! }
   }
 
   if (devices.length > 1) {
-    console.error(`Multiple devices connected (${devices.join(", ")}); pick one with --device <serial or prefix>.`)
+    console.error("Pick one with --device <serial or prefix>.")
     process.exit(1)
   }
   let [only] = devices
@@ -95,18 +127,7 @@ function resolveTarget(adb: string): string {
     console.error("No authorized Android device found. Enable USB debugging and check `adb devices`.")
     process.exit(1)
   }
-  return only
-}
-
-// Primary ABI of the connected device (e.g. "arm64-v8a", "armeabi-v7a"), used
-// to pick the matching APK -- a fat (multi-ABI) APK reports its 64-bit ABI
-// here and still installs fine, so this only matters for single-ABI builds.
-function deviceAbi(adb: string, target: string): string {
-  let res = Bun.spawnSync([adb, "-s", target, "shell", "getprop", "ro.product.cpu.abi"], {
-    stdout: "pipe",
-    stderr: "pipe",
-  })
-  return res.stdout.toString().trim()
+  return { target: only, abi: abiByDevice.get(only)! }
 }
 
 // Install + launch the Android client on a connected device over adb, passing it
@@ -116,16 +137,13 @@ function deviceAbi(adb: string, target: string): string {
 export async function spawnAndroidClient() {
   let adb = requireAdb()
 
-  let target = resolveTarget(adb)
-  let abi = deviceAbi(adb, target)
+  let { target, abi } = resolveTarget(adb)
 
   let apk = resolveApk(abi)
   if (!apk) {
     console.error(`Could not find a SolidRT-Go APK for ABI "${abi}".`)
     let pkg = ANDROID_PKG_MAP[abi]
     if (pkg) console.error(`Add it with: bun add -d ${pkg}`)
-    let target = abi === "armeabi-v7a" ? "make dist-android-armeabi-v7a" : "make dist-android"
-    console.error(`Or build one locally (from lattice/): ${target}`)
     process.exit(1)
   }