@solidrt/components 0.0.4 → 0.0.5

package/README.md

@@ -24,7 +24,7 @@ import { SafeArea } from "@solidrt/components"
 function App() {
   return (
     <window>
-      <SafeArea>
+      <SafeArea top bottom>
         <text>Content clear of system UI</text>
       </SafeArea>
     </window>
@@ -32,13 +32,28 @@ function App() {
 }
 ```
 
+Top and bottom insets are applied by default. Pass `false` to opt out of an edge, or a number to apply the inset with a minimum padding.
+
+```jsx
+// top only
+<SafeArea bottom={false}>
+
+// apply top and bottom insets, with a minimum of 16px each
+<SafeArea top={16} bottom={16}>
+
+// all four edges
+<SafeArea top bottom left right>
+```
+
 **Props**
 
-| Prop       | Type                                         | Default             | Description                                                    |
-| ---------- | -------------------------------------------- | ------------------- | -------------------------------------------------------------- |
-| `edges`    | `("top" \| "bottom" \| "left" \| "right")[]` | `["top", "bottom"]` | Which edges to apply safe area insets on                       |
-| `minimum`  | `number`                                     | `0`                 | Minimum padding applied even if the safe area inset is smaller |
-| `children` | `any`                                        | -                   | Content to render inside the safe area                         |
+| Prop       | Type                | Default | Description                                         |
+| ---------- | ------------------- | ------- | --------------------------------------------------- |
+| `top`      | `boolean \| number` | `true`  | Apply top inset. A number sets the minimum padding. |
+| `bottom`   | `boolean \| number` | `true`  | Apply bottom inset. A number sets the minimum padding. |
+| `left`     | `boolean \| number` | `false` | Apply left inset. A number sets the minimum padding. |
+| `right`    | `boolean \| number` | `false` | Apply right inset. A number sets the minimum padding. |
+| `children` | `any`               | -       | Content to render inside the safe area.             |
 
 ### TextInput
 
@@ -78,6 +93,26 @@ function NameField() {
 | `autoFocus`    | `boolean`                  | `false` | Focuses on mount                                             |
 | `width`        | `number \| "auto" \| "N%"` | -       | Field width                                                  |
 
+### Image
+
+Loads and displays an image from a URL or raw bytes.
+
+```jsx
+import { Image } from "@solidrt/components"
+
+function Avatar() {
+  return <Image src="https://example.com/avatar.png" width={64} height={64} />
+}
+```
+
+**Props**
+
+Accepts all layout, transform, and pointer event props, plus:
+
+| Prop  | Type                   | Description                                  |
+| ----- | ---------------------- | -------------------------------------------- |
+| `src` | `string \| Uint8Array` | URL to fetch, or raw image bytes to decode   |
+
 ## License
 
 MIT. Copyright (c) 2026 Antoine van Wel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -15,6 +15,6 @@
   ],
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.13",
-    "@solidrt/core": "0.0.4"
+    "@solidrt/core": "0.0.5"
   }
 }

package/src/image.tsx

@@ -0,0 +1,66 @@
+import { createSignal, onCleanup } from "@solidjs/signals"
+import { decodeImage, createTexture } from "@solidrt/core/gpu"
+import type { LayoutProps, TransformProps, PointerProps } from "@solidrt/core"
+
+export interface ImageProps extends LayoutProps, TransformProps, PointerProps {
+  src: string | Uint8Array
+}
+
+//TODO onLoad, onError
+//TODO release texture in onCleanup
+//TODO forward all LayoutProps (currently only the common subset)
+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 src = () => res()?.id
+
+  onCleanup(() => {
+    //TODO release texture
+  })
+
+  return (
+    <view
+      width={props.width}
+      height={props.height}
+      flex={props.flex}
+      flexGrow={props.flexGrow}
+      flexShrink={props.flexShrink}
+      alignSelf={props.alignSelf}
+      margin={props.margin}
+      marginTop={props.marginTop}
+      marginBottom={props.marginBottom}
+      marginLeft={props.marginLeft}
+      marginRight={props.marginRight}
+      padding={props.padding}
+      position={props.position}
+      top={props.top}
+      right={props.right}
+      bottom={props.bottom}
+      left={props.left}
+      x={props.x}
+      y={props.y}
+      scale={props.scale}
+      rotate={props.rotate}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      pointerEvents={props.pointerEvents}
+    >
+      <texture src={src()} />
+    </view>
+  )
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+export { Image, type ImageProps } from "./image"
 export { SafeArea } from "./safe-area"
 export { TextInput, type TextInputProps } from "./text-input"
 export { theme, setTheme, type Theme } from "./theme"

package/src/safe-area.tsx

@@ -2,8 +2,10 @@ import { createSignal } from "@solidjs/signals"
 import { onResize } from "@solidrt/core"
 
 export function SafeArea(props: {
-  edges?: ("top" | "bottom" | "left" | "right")[]
-  minimum?: number
+  top?: boolean | number
+  bottom?: boolean | number
+  left?: boolean | number
+  right?: boolean | number
   children?: any
 }) {
   let [insets, setInsets] = createSignal({ top: 0, bottom: 0, left: 0, right: 0 })
@@ -15,9 +17,13 @@ export function SafeArea(props: {
       right: width - safeArea.right,
     })
   })
-  let has = (e: string) => (props.edges ?? ["top", "bottom"]).includes(e as any)
-  let pad = (edge: "top" | "bottom" | "left" | "right") =>
-    has(edge) ? Math.max(insets()[edge], props.minimum ?? 0) : 0
+  let pad = (edge: "top" | "bottom" | "left" | "right") => {
+    let defaultOn = edge === "top" || edge === "bottom"
+    let p = props[edge] ?? defaultOn
+    if (p === false) return 0
+    if (p === true) return insets()[edge]
+    return Math.max(insets()[edge], p as number)
+  }
   return (
     <view
       flex={1}