@solidrt/components 0.0.9 → 0.0.11

package/AGENTS.md

@@ -0,0 +1,67 @@
+# @solidrt/components - agent notes
+
+Higher-level components built on @solidrt/core primitives. Optional: an app can
+be built with core primitives alone. For the underlying element model, events,
+reactivity, and how to run/verify, see @solidrt/core and @solidrt/cli (their
+AGENTS.md). Full prop tables are in this package's README.
+
+## Install
+
+```sh
+bun add @solidrt/components   # peers: @solidrt/core, @solidjs/signals
+```
+
+## Props: layout vs style (the non-obvious split)
+
+Most components group props into two objects, plus top-level event handlers:
+
+- `layout={{...}}` - the core LayoutProps: flex/grid, sizing, padding/margin,
+  position. For `Text`, also the font fields (fontSize, fontWeight, ...).
+  Changing these relayouts.
+- `style={{...}}` - paint only, never affects layout: `backgroundColor`,
+  `borderColor`, `borderWidth`, `borderRadius`, `color` (Text), and the
+  transform `x`/`y`/`rotate`/`scale`.
+- Event handlers (`onPointerDown`, `onKeyDown`, ...) are top-level props, NOT
+  inside `layout`/`style`.
+
+## Exports
+
+- `Window` - root surface; renders a core `<window>`, so `render()` accepts it.
+  Applies `layout` and `style.backgroundColor` only (a window cannot be
+  transformed or bordered). Also: `title`, `fullscreen`, `vsync`, `fps`.
+- `View` - general box; draws a background/border when the matching `style`
+  props are set.
+- `Text` - text in a layout box; font fields go in `layout`, `color` in `style`.
+- `Image` - fetches/decodes/uploads an image: `src: string | Uint8Array`.
+- `TextInput` - single-line input; `value`/`onInput`/`onSubmit`, controlled or
+  uncontrolled, plus `placeholder`, `maxLength`, `autoFocus`, `disabled`.
+- `SafeArea` - pads children clear of system UI (notches, status bars); top and
+  bottom on by default, pass `false`/a number per edge.
+- `theme` / `setTheme` - shared appearance (colors, spacing, radii, font sizes);
+  call `setTheme({...})` to override defaults.
+
+## Minimal app (verified to render)
+
+```tsx
+import { render } from "@solidrt/core"
+import { Window, View, Text } from "@solidrt/components"
+import { createSignal } from "@solidjs/signals"
+
+function App() {
+  let [count, setCount] = createSignal(0)
+  return (
+    <Window title="App" style={{ backgroundColor: "#0b0f17" }}
+      layout={{ flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 24 }}>
+      <Text layout={{ fontSize: 48, fontWeight: 800 }} style={{ color: "#1f6feb" }}>
+        {count()}
+      </Text>
+      <View onPointerDown={() => setCount((c) => c + 1)}
+        layout={{ padding: 16 }} style={{ backgroundColor: "#1f6feb", borderRadius: 12 }}>
+        <Text style={{ color: "#ffffff" }}>increment</Text>
+      </View>
+    </Window>
+  )
+}
+
+render(() => <App />)
+```

package/README.md

@@ -2,6 +2,8 @@
 
 A collection of components for [SolidRT](https://github.com/wellawaretech/solidrt) apps.
 
+> LLM agents: see [AGENTS.md](./AGENTS.md) for a dense, self-contained quickstart.
+
 ## Installation
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -10,11 +10,10 @@
   },
   "files": [
     "src/",
-    "README.md",
-    "LICENSE"
+    "AGENTS.md"
   ],
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.14",
-    "@solidrt/core": "0.0.9"
+    "@solidrt/core": "0.0.11"
   }
 }

package/src/image.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onCleanup } from "@solidjs/signals"
+import { createSignal, createEffect, onCleanup } from "@solidjs/signals"
 import { decodeImage, createTexture } from "@solidrt/core/gpu"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
@@ -12,22 +12,45 @@ export interface ImageProps extends PointerProps {
 //TODO onLoad, onError
 //TODO release texture in onCleanup
 export function Image(props: ImageProps) {
-  let [res] = createSignal(async () => {
-    let bytes: Uint8Array
-    if (typeof props.src === "string") {
-      let response = await fetch(props.src)
-      bytes = await response.bytes()
-    } else {
-      bytes = props.src
-    }
-    let { data, width, height } = decodeImage(bytes)
-    let id = createTexture(data, width, height)
-    return { id, width, height }
-  })
+  let [res, setRes] = createSignal<{ id: number; width: number; height: number }>()
+
+  // Load (and decode) whenever src changes. A url is fetched; bytes are used
+  // directly. The async result is pushed into the signal so the texture shows
+  // once ready; a stale flag drops results from a superseded src.
+  createEffect(
+    () => props.src,
+    (source) => {
+      let stale = false
+
+      ;(async () => {
+        let bytes: Uint8Array
+        if (typeof source === "string") {
+          let response = await fetch(source)
+          bytes = await response.bytes()
+        } else {
+          bytes = source
+        }
+        if (stale) return
+        let { data, width, height } = decodeImage(bytes)
+        let id = createTexture(data, width, height)
+        setRes({ id, width, height })
+      })()
+
+      return () => {
+        stale = true
+      }
+    },
+  )
 
   let src = () => res()?.id
   let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
+  // A texture sizes from its own width/height (not the box around it), so the
+  // numeric layout dimensions are forwarded to it. Omitting height lets the
+  // texture follow the image's intrinsic aspect ratio.
+  let texW = () => (typeof props.layout?.width === "number" ? props.layout.width : undefined)
+  let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
+
   onCleanup(() => {
     //TODO release texture
   })
@@ -35,6 +58,8 @@ export function Image(props: ImageProps) {
   return (
     <view
       {...props.layout}
+      overflow={props.style?.borderRadius != null ? "hidden" : props.layout?.overflow}
+      clipRadius={props.style?.borderRadius}
       x={props.style?.x}
       y={props.style?.y}
       scale={props.style?.scale}
@@ -53,9 +78,9 @@ export function Image(props: ImageProps) {
       pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
-        <d-rect color={props.style.backgroundColor} radius={props.style?.borderRadius} />
+        <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
-      <texture src={src()} />
+      <texture src={src()} width={texW()} height={texH()} />
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"