@solidrt/cli 0.0.42 → 0.0.44

package/AGENTS.md

@@ -32,10 +32,16 @@ Two reliable checks that need no GUI:
 
 1. `bunx srt bundle src/index.tsx` - exit 0 means the app compiles. Fast.
 2. `bunx srt render src/index.tsx --size 480x640 --duration 1 --fps 2` -
-   renders offscreen via EGL/wgpu and writes `frame-NNNNNN.png`. This actually
+   renders offscreen via EGL and writes `frame-NNNNNN.png`. This actually
    proves the app renders. Combine with `--fps`/`--duration` (defaults
    1280x720, 60fps, 1s).
 
+Also headless: the bundled flux runtime runs a plain `.js` file directly -
+`node_modules/@solidrt/<platform>/flux script.js` (e.g.
+`@solidrt/linux-x64-gnu`). No display, no dev server, full `flux:*` module
+access. The right tool for micro-benchmarks and for probing flux module
+behavior in isolation.
+
 `render` gotchas:
 - Frames are written to the RUNTIME's working dir (`~/.local/share/SolidRT/go/`),
   NOT the directory you ran the command from. Look there for the PNGs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/cli",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -28,17 +28,16 @@
     "zod": "^4.4.3"
   },
   "optionalDependencies": {
-    "@solidrt/darwin-arm64": "0.0.42",
-    "@solidrt/linux-arm64-gnu": "0.0.42",
-    "@solidrt/linux-x64-gnu": "0.0.42",
-    "@solidrt/win32-x64-msvc": "0.0.42"
+    "@solidrt/darwin-arm64": "0.0.44",
+    "@solidrt/linux-arm64-gnu": "0.0.44",
+    "@solidrt/linux-x64-gnu": "0.0.44",
+    "@solidrt/win32-x64-msvc": "0.0.44"
   },
   "peerDependencies": {
-    "@solidrt/core": "0.0.42",
     "typescript": "^7"
   },
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.42",
+    "@solidrt/flux-types": "0.0.44",
     "@types/babel__core": "^7.20.5",
     "@types/bun": "latest"
   }

package/scaffold/AGENTS.md

@@ -54,9 +54,12 @@ Authoritative references ship inside the installed packages - read them:
    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.
+4. Components' `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. That is the components level
+   only: the core `<view>`/`<window>` have no background prop at all - in a
+   core-only app the background is a draw-primitive child
+   (`<d-rect color={...} />`) behind the content.
 5. There is no onClick/onPress on host elements. Use `Pressable`/`Button`
    from components (`onPress`), or `onPointerDown` on a `View` for anything
    custom.
@@ -125,7 +128,15 @@ Authoritative references ship inside the installed packages - read them:
     effect's apply phase, or `onSettled`; opt in narrowly with
     `createSignal(v, { ownedWrite: true })` for a signal that genuinely is
     internal state.
-19. Cover/contain images: give `Image` a `fit` prop ("fill" | "cover" |
+19. Transform origin on a `d-view`: unset `originX`/`originY` pivots
+    scale/rotate at the view's local (0,0), the point its children's
+    coordinates are drawn against (a laid-out view pivots at its own box
+    center; a d-view has no box). To pivot a detached group around its
+    content's center, set the origin explicitly in pixels
+    (`originX={100} originY={50}` for content drawn in a 200x100 local
+    space). Avoid pct()/keyword origins on a d-view - they resolve against
+    the box inherited from the nearest laid-out ancestor.
+20. Cover/contain images: give `Image` a `fit` prop ("fill" | "cover" |
     "contain" | "none" | "scale-down", CSS object-fit semantics, centered)
     plus a box via `layout` in any form - numbers, pct(), flex. Without
     `fit`, only NUMERIC layout sizes reach the image; `width: pct(100)`
@@ -153,7 +164,7 @@ work stops being free" below is where it does not. Rules, in order of leverage:
    to compileShader/linkProgram. Params drive any uniform type: a number
    fills a `float`/`int` scalar, a flat number array fills `vec2`/`vec3`/
    `vec4` (2/3/4 numbers) or `mat4` (16, column-major), dispatched by the
-   shader's own declaration - a ported shader's `vec2 uCenter` or Shadertoy's
+   shader's own declaration - a ported shader's `vec2 uCenter` or
    `vec3 iResolution` needs no splitting into scalars. To combine several
    GPU passes, stack `<texture>` elements and set `blendMode` (e.g. a base
    pass plus an additive `blendMode="plus"` pass) rather than writing a
@@ -171,7 +182,10 @@ work stops being free" below is where it does not. Rules, in order of leverage:
    on screen and to shaders sampling the texture.
 2. Reduce setProperty calls wherever possible: one path string rebuilt per
    frame beats N elements with N animated positions; a shader beats the path
-   string. get_stats' setPropsPerFrame is the counter to watch.
+   string. get_stats' setPropsPerFrame is the counter to watch. Compiled JSX
+   attribute expressions diff before writing, so a per-frame expression that
+   returns an unchanged value costs no property write - setPropsPerFrame
+   counts values that actually changed, not expressions re-run.
 3. Never leave onFrame registered while nothing animates: a pending onFrame
    is a standing frame request, so the runtime renders and presents every
    vsync even when the callback body does nothing - an invisible 60fps GPU
@@ -187,7 +201,11 @@ work stops being free" below is where it does not. Rules, in order of leverage:
    system classifies these as Transform and keeps the node's own cache).
    What DOES invalidate the cache is any paint or content change inside the
    subtree - colors, path data, text, a Show toggling - so drive animation
-   with transforms and keep the cached content itself static.
+   with transforms and keep the cached content itself static. Off a boundary,
+   `opacity` on a view is NOT cheap: it wraps the subtree in a compositing
+   layer (save_layer) for as long as it is below 1. To fade a single
+   primitive, put the alpha in its `color` (`rgba(...)`) - paint alpha is
+   free; reserve view `opacity` for fading a genuine group as a whole.
 5. "snapshot" boundaries pay first-frame texture allocation + raster:
    creating many at once (dealing a board of 64 sprites) is a visible
    one-frame hiccup - pool or pre-warm if that moment matters.
@@ -308,6 +326,9 @@ its tools over guessing at runtime state:
 - get_buffer: a vertex-buffer range decoded to numbers (f32/u16/u8, 64 KiB
   per call) - verify geometry after a writeBuffer instead of inferring it
   from pixels
+- list_debug / call_debug: the app's own debug commands (registered with
+  `registerDebug` from `srt:dev`) - list them, then invoke by name with a
+  JSON argument. Per client, like get_snapshot
 - reload: rebuild from source and push to every client - THE dev loop is
   edit -> reload -> get_logs -> get_snapshot. reload surfaces build errors
   but not type errors; run `bunx srt check` for those.
@@ -350,6 +371,13 @@ flag: `"args": [..., "mcp", "--port", "N"]`.
 - console.log + get_logs is your primary probe into runtime state. For state
   you will want repeatedly (a pose, a mode, a counter), bind a debug key that
   logs it and read it back via get_logs.
+- Better than debug keys when driving the app over MCP: register debug
+  COMMANDS - `registerDebug(name, fn)` from `srt:dev`, invoked via the
+  list_debug/call_debug tools. `seek`/`pause`/`play` commands turn verifying
+  an animation into "jump to t, snapshot, look"; a `zoom` command that
+  shrinks a viewBox to a region gives magnified captures without touching
+  source. Registrations reset on hot reload, so register at module init;
+  sync return values only.
 - Key events start at the focused node and bubble to the window root; with
   nothing focused they go to the window root alone. So a debug key bound via
   `<window onKeyDown>` always fires (unless a focused component consumes the
@@ -367,6 +395,13 @@ flag: `"args": [..., "mcp", "--port", "N"]`.
 - When a human reports a visual bug: capture a snapshot and SAY WHAT YOU SEE
   in it before investigating, so you agree on the symptom. If you cannot see
   the problem in the capture, say that instead of guessing.
+- Snapshots are downscaled by the time you see them, so a full-window capture
+  cannot show you a defect a few pixels across. Whenever you hand-author
+  geometry - a `d-path` from raw path math, a `radius` where two shapes meet,
+  a stroke join - inspect it MAGNIFIED once, when you write it: a throwaway
+  entry file drawing the construction at 4-8x (pushed with `load`), or a
+  `zoom` debug command on the real app. Verifying that a shape is in the
+  right place is not the same check as verifying it is drawn right.
 - GPU/geometry bugs: inspect the actual GPU data FIRST - get_gpu_resources
   for draw counts/uniforms/sizes, get_texture for atlas or data-texture
   contents ("is this tile blank?" is a ten-second question), get_buffer for

package/scaffold/package.json

@@ -4,17 +4,18 @@
   "private": true,
   "scripts": {
     "dev": "srt run src/index.tsx",
+    "pack": "srt pack -o out src/index.tsx",
     "server": "srt server",
     "client": "srt client",
     "android": "srt client --android"
   },
   "dependencies": {
-    "@solidrt/core": "0.0.42",
-    "@solidrt/components": "0.0.42"
+    "@solidrt/core": "0.0.44",
+    "@solidrt/components": "0.0.44"
   },
   "devDependencies": {
-    "@solidrt/cli": "0.0.42",
-    "@solidrt/flux-types": "0.0.42",
+    "@solidrt/cli": "0.0.44",
+    "@solidrt/flux-types": "0.0.44",
     "typescript": "^7"
   }
 }

package/scaffold/templates/components/icon.tsx

@@ -0,0 +1,48 @@
+// The animated SolidRT logo: each segment fades in, then out, on its own delay.
+import { For, onFrame, createSignal, createLinearGradient } from "@solidrt/core"
+
+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) },
+  ])
+
+export function Icon() {
+  let [clock, setClock] = createSignal(0)
+  let start = -1
+  onFrame((t) => (start < 0 && (start = t), setClock((t - start) % CYCLE)))
+  return (
+    <view width={300} height={300} viewBox={[100, 100]}>
+      <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>
+  )
+}

package/scaffold/templates/components/index.tsx

@@ -1,12 +1,23 @@
 // Components template: built with the @solidrt/components framework.
-import { render } from "@solidrt/core"
-import { Window, SafeArea, Text } from "@solidrt/components"
+import { render, createLinearGradient } from "@solidrt/core"
+import { Window, SafeArea, View, Text } from "@solidrt/components"
+import { Icon } from "./icon"
 
 function App() {
+  let backgroundColor = createLinearGradient(0, 0, 1, 1, [
+    { offset: 0, color: "#080b16" },
+    { offset: 1, color: "#1d2a52" },
+  ])
+
   return (
-    <Window>
+    <Window title="The Solid Runtime" style={{ backgroundColor }}>
       <SafeArea>
-        <Text>Hello, World!</Text>
+        <View layout={{ flex: 1, gap: 20, alignItems: "center", justifyContent: "center" }}>
+          <Icon />
+          <Text layout={{ fontSize: 40 }} style={{ color: "#ccc" }}>
+            The Solid Runtime
+          </Text>
+        </View>
       </SafeArea>
     </Window>
   )

package/scaffold/templates/components/template.json

@@ -1,4 +1,4 @@
 {
   "level": "components",
-  "description": "components, blank start"
+  "description": "components starter application"
 }

package/scaffold/templates/default/icon.tsx

@@ -0,0 +1,48 @@
+// The animated SolidRT logo: each segment fades in, then out, on its own delay.
+import { For, onFrame, createSignal, createLinearGradient } from "@solidrt/core"
+
+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) },
+  ])
+
+export function Icon() {
+  let [clock, setClock] = createSignal(0)
+  let start = -1
+  onFrame((t) => (start < 0 && (start = t), setClock((t - start) % CYCLE)))
+  return (
+    <view width={300} height={300} viewBox={[100, 100]}>
+      <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>
+  )
+}

package/scaffold/templates/default/index.tsx

@@ -1,51 +1,5 @@
-// Core-only template: built from @solidrt/core primitives.
-import { render, For, onFrame, createSignal, createLinearGradient } from "@solidrt/core"
-
-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}>
-      <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>
-  )
-}
+import { render, createLinearGradient, safeArea } from "@solidrt/core"
+import { Icon } from "./icon"
 
 function App() {
   let backgroundColor = createLinearGradient(0, 0, 1, 1, [
@@ -54,9 +8,19 @@ function App() {
   ])
 
   return (
-    <window alignItems="center" justifyContent="center">
+    <window title="The Solid Runtime">
       <d-rect color={backgroundColor} />
-      <Icon />
+      <view
+        flex={1}
+        gap={20}
+        alignItems="center"
+        justifyContent="center"
+        paddingTop={safeArea().top}
+        paddingBottom={safeArea().bottom}
+      >
+        <Icon />
+        <text fontSize={40} color="#ccc">The Solid Runtime</text>
+      </view>
     </window>
   )
 }

package/scaffold/templates/default/template.json

@@ -1,4 +1,4 @@
 {
   "level": "core",
-  "description": "core, animated logo"
+  "description": "core starter application"
 }

package/src/bundler.ts

@@ -72,7 +72,11 @@ async function codeFromOutputs(outputs: BuildArtifact[]): Promise<string> {
 }
 
 // Bun build plugin that runs JSX/TSX through babel-preset-solid (universal
-// generate, targeting @solidrt/core) plus the TS preset. Plain .js/.ts app
+// generate, targeting @solidrt/core) plus the TS preset. `moduleName` only ends
+// up as an import specifier in the emitted code, resolved from the app's tree at
+// bundle time; the CLI itself never loads core, so core is deliberately neither
+// a dependency nor a peer of this package (a second copy under the CLI could be
+// hoisted over the app's and bundle two runtime instances). Plain .js/.ts app
 // modules take the same path (solid is a no-op without JSX) so inlineImport
 // can rewrite their `with { type: "binary" }` imports too; dependency code
 // (node_modules) skips the babel detour and keeps Bun's native loaders.

package/src/commands/init.ts

@@ -89,10 +89,12 @@ async function resolveTemplate(): Promise<TemplateInfo> {
   if (process.stdin.isTTY) {
     let picked = await select(
       "Select a template",
-      templates.map((t) => ({
-        label: t.description ? `${t.name} - ${t.description}` : t.name,
-        value: t.name,
-      })),
+      templates.map((t) => {
+        // Core is the runtime every app has; anything else is a package the
+        // app opts into, so the picker marks it as such.
+        let name = t.level === "core" ? t.name : `${t.name} (extension)`
+        return { label: t.description ? `${name} - ${t.description}` : name, value: t.name }
+      }),
     )
     return templates.find((t) => t.name === picked)!
   }
@@ -171,4 +173,4 @@ export async function runInitCommand() {
   let prefix = dir === "." ? "" : `cd ${dir} && `
   console.log(`\n>> Done. Next:\n   ${prefix}bun run dev\n`)
   process.exit()
-}
+}

package/scaffold/templates/gallery/index.tsx

@@ -1,485 +0,0 @@
-import {
-  render,
-  createSignal,
-  createEffect,
-  untrack,
-  env,
-  capabilities,
-} from "@solidrt/core"
-import {
-  policy,
-  setPolicy,
-  type DensityPolicy,
-  type MotionPolicy,
-  Window,
-  View,
-  Text,
-  Image,
-  Button,
-  TextInput,
-  Switch,
-  Checkbox,
-  RadioGroup,
-  Radio,
-  Slider,
-  QrCode,
-  Card,
-  Divider,
-  Badge,
-  Spinner,
-  ProgressBar,
-  Tooltip,
-  Select,
-  ContextMenu,
-  Icon,
-  ScrollView,
-  theme,
-  space,
-  typeWeight,
-  setTheme,
-  darkTheme,
-  lightTheme,
-  SafeArea,
-} from "@solidrt/components"
-
-import icon from "./icon.png" with { type: "binary" }
-
-// A growing gallery of @solidrt/components. The whole thing recolors live when
-// the theme switches: every component reads theme.* reactively, so pressing
-// "Toggle theme" reflows the palette with no remount. The "Environment and
-// policies" card shows the environment -> capabilities -> policies cascade and
-// lets you force density/motion overrides to watch every control adapt.
-
-// Lucide icons are SVG documents (strings). In a real app you import them as
-// assets (`import House from "lucide-static/icons/house.svg"`) or from a string
-// export; we inline a few here so the example stays self-contained. Each strokes
-// with currentColor, so Icon recolors them from the theme.
-const LUCIDE = (body: string) =>
-  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"` +
-  ` stroke="currentColor" stroke-width="2" stroke-linecap="round"` +
-  ` stroke-linejoin="round">${body}</svg>`
-const HOUSE = LUCIDE(
-  `<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>` +
-    `<path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>`,
-)
-const HEART = LUCIDE(
-  `<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>`,
-)
-const STAR = LUCIDE(
-  `<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>`,
-)
-const SETTINGS = LUCIDE(
-  `<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/>` +
-    `<circle cx="12" cy="12" r="3"/>`,
-)
-const BELL = LUCIDE(
-  `<path d="M10.268 21a2 2 0 0 0 3.464 0"/>` +
-    `<path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>`,
-)
-
-function Row(props: { label: string; children?: any }) {
-  return (
-    <View
-      layout={{
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: space("lg"),
-      }}
-    >
-      <Text muted>{props.label}</Text>
-      {props.children}
-    </View>
-  )
-}
-
-function Value(props: { children?: any }) {
-  return <Text>{props.children}</Text>
-}
-
-// Joins the names whose flag is true, e.g. list(["mouse", env.mouseSeen], ...).
-function list(...entries: [string, boolean][]) {
-  let names = entries.filter(([, on]) => on).map(([name]) => name)
-  return names.length > 0 ? names.join(", ") : "none yet"
-}
-
-function App() {
-  let [dark, setDark] = createSignal(true)
-  let [name, setName] = createSignal("")
-  let [notify, setNotify] = createSignal(true)
-  let [agree, setAgree] = createSignal(false)
-  let [plan, setPlan] = createSignal<unknown>("pro")
-  let [volume, setVolume] = createSignal(40)
-  let [fruit, setFruit] = createSignal<unknown>(undefined)
-
-  // The QR code follows the name field debounced, not per keystroke: each data
-  // change regenerates the whole module grid, which is too heavy to run at
-  // typing frequency.
-  // untrack: seed with the current name once; the debounced effect below owns
-  // keeping it in sync, and a bare name() read here would warn (strict mode
-  // flags top-level reactive reads in component bodies as one-shot).
-  let [qrData, setQrData] = createSignal(untrack(name))
-  createEffect(
-    () => name(),
-    (v) => {
-      let timer = setTimeout(() => setQrData(v), 250)
-      return () => clearTimeout(timer)
-    },
-  )
-
-  // Follow the OS dark/light preference until the user toggles manually; the
-  // manual toggle then owns the choice for the rest of the session.
-  let userToggledTheme = false
-  let toggleTheme = () => {
-    userToggledTheme = true
-    let next = !dark()
-    setDark(next)
-    setTheme(next ? darkTheme : lightTheme)
-  }
-  createEffect(
-    () => env.systemTheme,
-    (t) => {
-      if (userToggledTheme || t === "unknown") return
-      let isDark = t === "dark"
-      setDark(isDark)
-      setTheme(isDark ? darkTheme : lightTheme)
-    },
-  )
-
-  // Policy override choices; "auto" hands the policy back to the resolver.
-  let [densityChoice, setDensityChoice] = createSignal<unknown>("auto")
-  let [motionChoice, setMotionChoice] = createSignal<unknown>("auto")
-  let chooseDensity = (v: unknown) => {
-    setDensityChoice(v)
-    setPolicy({ density: v === "auto" ? undefined : (v as DensityPolicy) })
-  }
-  let chooseMotion = (v: unknown) => {
-    setMotionChoice(v)
-    setPolicy({ motion: v === "auto" ? undefined : (v as MotionPolicy) })
-  }
-  let [textScaleChoice, setTextScaleChoice] = createSignal<unknown>("auto")
-  let chooseTextScale = (v: unknown) => {
-    setTextScaleChoice(v)
-    setPolicy({ textScale: v === "auto" ? undefined : (v as number) })
-  }
-  let [weightDeltaChoice, setWeightDeltaChoice] = createSignal<unknown>("auto")
-  let chooseWeightDelta = (v: unknown) => {
-    setWeightDeltaChoice(v)
-    setPolicy({ textWeightDelta: v === "auto" ? undefined : (v as number) })
-  }
-
-  return (
-    <Window
-      title="Components gallery"
-      layout={{ flexDirection: "column" }}
-      style={{ backgroundColor: theme.color.background }}
-    >
-      <SafeArea>
-        <ScrollView horizontal layout={{ flex: 1 }}>
-          <View
-            layout={{
-              height: "100%",
-              flexDirection: "column",
-              flexWrap: "wrap",
-              alignContent: "flex-start",
-              justifyContent: "flex-start",
-              gap: space("xl"),
-              padding: space("xl"),
-            }}
-          >
-            <Card title={dark() ? "Dark theme" : "Light theme"} layout={{ width: 360 }}>
-              <Text muted>Toggle to recolor every control below.</Text>
-              <Button onPress={toggleTheme}>Toggle theme</Button>
-            </Card>
-
-            <Card title="Environment" layout={{ width: 360 }}>
-              <Row label="Window">
-                <Value>
-                  {`${env.windowSize.width} x ${env.windowSize.height} @ ${env.displayScale}x`}
-                </Value>
-              </Row>
-              <Row label="System">
-                <Value>{`${env.systemTheme} theme, ${env.orientation}`}</Value>
-              </Row>
-              <Row label="Devices">
-                <Value>
-                  {env.inputDevices
-                    ? list(
-                        ["mouse", env.inputDevices.mouse],
-                        ["touch", env.inputDevices.touch],
-                        ["keyboard", env.inputDevices.keyboard],
-                      )
-                    : "not reported"}
-                </Value>
-              </Row>
-              <Row label="Inputs seen">
-                <Value>
-                  {list(
-                    ["mouse", env.mouseSeen],
-                    ["touch", env.touchSeen],
-                    ["keyboard", env.keyboardSeen],
-                  )}
-                </Value>
-              </Row>
-              <Row label="Capabilities">
-                <Value>
-                  {list(
-                    ["hover", capabilities.hover],
-                    ["touch", capabilities.touch],
-                    ["keyboard nav", capabilities.keyboardNav],
-                  )}
-                </Value>
-              </Row>
-              <Row label="Size class">
-                <Value>{capabilities.windowSizeClass}</Value>
-              </Row>
-            </Card>
-
-            <Card title="Policies" layout={{ width: 360 }}>
-              <Row label="Interaction policy">
-                <Value>{policy.interaction}</Value>
-              </Row>
-              <Row label="Focus ring">
-                <Value>{policy.focusRing ? "visible" : "hidden"}</Value>
-              </Row>
-              <Row label="App policies">
-                <Value>{`${policy.navigation}, ${policy.layout}`}</Value>
-              </Row>
-              <Divider />
-              <Row label="Density policy">
-                <Value>{policy.density}</Value>
-              </Row>
-              <RadioGroup
-                value={densityChoice()}
-                onChange={chooseDensity}
-                layout={{ flexDirection: "row", flexWrap: "wrap", gap: space("md") }}
-              >
-                <Radio value="auto">Auto</Radio>
-                <Radio value="comfortable">Comfortable</Radio>
-                <Radio value="compact">Compact</Radio>
-                <Radio value="dense">Dense</Radio>
-              </RadioGroup>
-              <Divider />
-              <Row label="Motion policy">
-                <Value>{policy.motion}</Value>
-              </Row>
-              <RadioGroup
-                value={motionChoice()}
-                onChange={chooseMotion}
-                layout={{ flexDirection: "row", flexWrap: "wrap", gap: space("md") }}
-              >
-                <Radio value="auto">Auto</Radio>
-                <Radio value="normal">Normal</Radio>
-                <Radio value="reduced">Reduced</Radio>
-                <Radio value="none">None</Radio>
-              </RadioGroup>
-              <Divider />
-              <Row label="Text scale">
-                <Value>{`${policy.textScale}x`}</Value>
-              </Row>
-              <RadioGroup
-                value={textScaleChoice()}
-                onChange={chooseTextScale}
-                layout={{ flexDirection: "row", flexWrap: "wrap", gap: space("md") }}
-              >
-                <Radio value="auto">Auto</Radio>
-                <Radio value={0.9}>0.9</Radio>
-                <Radio value={1.0}>1.0</Radio>
-                <Radio value={1.1}>1.1</Radio>
-              </RadioGroup>
-              <Divider />
-              <Row label="Text weight delta">
-                <Value>
-                  {`base +${policy.textWeightDelta}, body ${typeWeight(
-                    theme.text.body.weight,
-                    theme.text.body.size * policy.textScale,
-                  )}, title ${typeWeight(theme.text.title.weight, theme.text.title.size * policy.textScale)}`}
-                </Value>
-              </Row>
-              <RadioGroup
-                value={weightDeltaChoice()}
-                onChange={chooseWeightDelta}
-                layout={{ flexDirection: "row", flexWrap: "wrap", gap: space("md") }}
-              >
-                <Radio value="auto">Auto</Radio>
-                <Radio value={0}>0</Radio>
-                <Radio value={100}>+100</Radio>
-                <Radio value={200}>+200</Radio>
-              </RadioGroup>
-            </Card>
-
-            <Card title="Buttons" layout={{ width: 360 }}>
-              <View
-                layout={{
-                  flexDirection: "row",
-                  flexWrap: "wrap",
-                  gap: space("md"),
-                  alignItems: "center",
-                }}
-              >
-                <Button>Primary</Button>
-                <Button variant="secondary">Secondary</Button>
-                <Button variant="ghost">Ghost</Button>
-                <Button variant="danger">Danger</Button>
-                <Button disabled>Disabled</Button>
-              </View>
-            </Card>
-
-            <Card title="Switch and checkbox" layout={{ width: 360 }}>
-              <Row label="Notifications">
-                <Switch value={notify()} onChange={setNotify} />
-              </Row>
-              <Row label="I agree to the terms">
-                <Checkbox checked={agree()} onChange={setAgree} />
-              </Row>
-            </Card>
-
-            <Card title="Radio group" layout={{ width: 360 }}>
-              <RadioGroup value={plan()} onChange={setPlan}>
-                <Radio value="free">Free</Radio>
-                <Radio value="pro">Pro</Radio>
-                <Radio value="team">Team</Radio>
-              </RadioGroup>
-            </Card>
-
-            <Card title="Context menu" layout={{ width: 360 }}>
-              <Text muted>
-                Right-click (mouse) or long-press (touch) the box below. Touch policy presents a
-                bottom sheet, desktop and hybrid a menu at the pointer.
-              </Text>
-              <ContextMenu
-                items={[
-                  { label: "Copy", onSelect: () => console.log("copy") },
-                  { label: "Paste", onSelect: () => console.log("paste") },
-                  { label: "Rename", disabled: true },
-                  { label: "Delete", onSelect: () => console.log("delete") },
-                ]}
-              >
-                <View
-                  layout={{ padding: space("lg"), alignItems: "center" }}
-                  style={{
-                    backgroundColor: theme.color.surfaceAlt,
-                    borderRadius: theme.radius.sm,
-                  }}
-                >
-                  <Text>Secondary actions live here</Text>
-                </View>
-              </ContextMenu>
-            </Card>
-
-            <Card title="Select" layout={{ width: 360 }}>
-              <Text muted>
-                Forks on the interaction policy: desktop and hybrid anchor a dropdown, touch opens a
-                bottom sheet.
-              </Text>
-              <Select
-                value={fruit()}
-                onChange={setFruit}
-                placeholder="Pick a fruit"
-                options={[
-                  { value: "apple", label: "Apple" },
-                  { value: "banana", label: "Banana" },
-                  { value: "cherry", label: "Cherry" },
-                  { value: "dragonfruit", label: "Dragonfruit" },
-                ]}
-                layout={{ width: 200 }}
-              />
-            </Card>
-
-            <Card title="Slider" layout={{ width: 360 }}>
-              <Row label={`Volume: ${Math.round(volume())}`}>
-                <Slider
-                  value={volume()}
-                  onChange={setVolume}
-                  min={0}
-                  max={100}
-                  step={1}
-                  layout={{ width: 180 }}
-                />
-              </Row>
-            </Card>
-
-            <Card title="Progress and spinner" layout={{ width: 360 }}>
-              <Row label="Loading">
-                <Spinner />
-              </Row>
-              <Text muted>Determinate, tracking the volume slider:</Text>
-              <ProgressBar value={volume() / 100} />
-              <Text muted>Indeterminate:</Text>
-              <ProgressBar />
-            </Card>
-
-            <Card title="Badges and divider" layout={{ width: 360 }}>
-              <Row label="Status">
-                <View layout={{ flexDirection: "row", gap: space("md"), alignItems: "center" }}>
-                  <Badge>New</Badge>
-                  <Badge variant="neutral">3</Badge>
-                  <Badge variant="danger">Error</Badge>
-                </View>
-              </Row>
-              <Divider />
-              <Text muted>A divider separates content within a card.</Text>
-            </Card>
-
-            <Card title="Tooltip" layout={{ width: 360 }}>
-              <Text muted>
-                Rest the mouse on a button. Shows under desktop and hybrid interaction policies,
-                never under touch.
-              </Text>
-              <View layout={{ flexDirection: "row", gap: space("md") }}>
-                <Tooltip content="Saves your changes">
-                  <Button>Hover me</Button>
-                </Tooltip>
-                <Tooltip content="Appears below the anchor" placement="bottom">
-                  <Button>Below</Button>
-                </Tooltip>
-              </View>
-            </Card>
-
-            <Card title="Icons" layout={{ width: 360 }}>
-              <Text muted>
-                Lucide SVGs drawn through the core svg primitive. currentColor follows the theme;
-                the last two are recolored explicitly.
-              </Text>
-              <View layout={{ flexDirection: "row", gap: space("lg"), alignItems: "center" }}>
-                <Icon src={HOUSE} />
-                <Icon src={SETTINGS} />
-                <Icon src={BELL} />
-                <Icon src={HEART} color={theme.color.danger} />
-                <Icon src={STAR} color={theme.color.primary} />
-              </View>
-            </Card>
-
-            <Card title="Text input" layout={{ width: 360 }}>
-              <TextInput
-                value={name()}
-                onInput={setName}
-                placeholder="Your name"
-                layout={{ width: 320 }}
-              />
-            </Card>
-
-            <Card title="QR code" layout={{ width: 360 }}>
-              <Text muted>Encodes your name, or a link if the field is empty.</Text>
-              <View layout={{ alignItems: "center" }}>
-                <QrCode data={qrData() || "https://solidjs.com"} />
-              </View>
-            </Card>
-
-            <Card title="Image" layout={{ width: 360 }}>
-              <Text muted>
-                Fetches, decodes, and uploads an image, then shows it as a GPU texture. Rounded via
-                a clipping border radius.
-              </Text>
-              <View layout={{ alignItems: "center" }}>
-                <Image src={icon} style={{ borderRadius: theme.radius.md }} />
-              </View>
-            </Card>
-          </View>
-        </ScrollView>
-      </SafeArea>
-    </Window>
-  )
-}
-
-render(() => <App />)

package/scaffold/templates/gallery/template.json

@@ -1,4 +0,0 @@
-{
-  "level": "components",
-  "description": "components, widget tour"
-}

package/scaffold/templates/minimal/index.tsx

@@ -1,14 +0,0 @@
-// Core-only template: built from @solidrt/core primitives.
-import { render, safeArea } from "@solidrt/core"
-
-function App() {
-  return (
-    <window>
-      <view flex={1} paddingTop={safeArea().top} paddingBottom={safeArea().bottom}>
-        <text>Hello, World!</text>
-      </view>
-    </window>
-  )
-}
-
-render(() => <App />)

package/scaffold/templates/minimal/template.json

@@ -1,4 +0,0 @@
-{
-  "level": "core",
-  "description": "core, blank start"
-}