@solidrt/components 0.0.26 → 0.0.28

package/README.md

@@ -151,7 +151,7 @@ import { Text } from "@solidrt/components"
 </Text>
 ```
 
-`layout` accepts all `LayoutProps` plus the font fields `fontFamily`, `fontSize`, `lineHeight`, `fontStyle`, `fontWeight`, `textAlign`, and `maxLines`.
+`layout` accepts all `LayoutProps` plus the font fields `fontFamily`, `fontSize`, `lineHeight`, `fontStyle`, `fontWeight`, `textAlign`, and `maxLines`. Note that `lineHeight` is a multiplier of `fontSize` (the theme uses 1.3-1.6), not a pixel value.
 
 **Props**
 
@@ -166,13 +166,24 @@ Accepts all pointer event props, plus:
 
 ### Image
 
-Loads and displays an image from a URL or raw bytes.
+Loads and displays an image from a URL or raw bytes. URL loads are shared
+runtime-wide: mounts of the same URL reuse one fetch and one texture, and the
+bytes are cached on disk (fetched with `cache: "force-cache"` - no freshness
+check, so use versioned URLs for content that changes). The runtime keeps
+concurrent asset fetches polite with a per-host limit; a failed load rejects
+the mounts sharing it and a later remount retries.
 
 ```jsx
 import { Image } from "@solidrt/components"
 
 function Avatar() {
-  return <Image src="https://example.com/avatar.png" layout={{ width: 64, height: 64 }} />
+  return (
+    <Image
+      src="https://example.com/avatar.png"
+      fallback={PLACEHOLDER_PNG}
+      layout={{ width: 64, height: 64 }}
+    />
+  )
 }
 ```
 
@@ -180,9 +191,15 @@ function Avatar() {
 
 Accepts `layout`, `style`, and all pointer event props, plus:
 
-| Prop  | Type                   | Description                                |
-| ----- | ---------------------- | ------------------------------------------ |
-| `src` | `string \| Uint8Array` | URL to fetch, or raw image bytes to decode |
+| Prop       | Type                     | Description                                                                          |
+| ---------- | ------------------------ | ------------------------------------------------------------------------------------ |
+| `src`      | `string \| Uint8Array`   | URL to fetch, or raw image bytes to decode                                            |
+| `fallback` | `string \| Uint8Array`   | Source shown when `src` fails; if it also fails, the `backgroundColor` placeholder stays |
+| `onLoad`   | `() => void`             | Called each time a source finishes loading                                            |
+| `onError`  | `(err: unknown) => void` | Called when `src` fails to load or decode                                             |
+
+A failing `src` is contained by the component (the fallback or placeholder
+shows); it does not propagate to an outer `<Errored>` boundary.
 
 ### TextInput
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.17",
-    "@solidrt/core": "0.0.26"
+    "@solidrt/core": "0.0.28"
   }
 }

package/src/image.tsx

@@ -1,14 +1,34 @@
-import { createImage, Loading } from "@solidrt/core"
-import type { LayoutProps, PointerProps } from "@solidrt/core"
+import { createImage, createEffect, Loading, Errored } from "@solidrt/core"
+import type { ImageSource, LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
 export interface ImageProps extends PointerProps {
   src: string | Uint8Array
+  /** Image source to show when `src` fails to load. If this also fails, only
+   * the `backgroundColor` placeholder remains. */
+  fallback?: ImageSource
+  /** Called each time a source finishes loading (including reloads on a
+   * reactive `src`). */
+  onLoad?: () => void
+  /** Called when `src` fails to load or decode. The fallback (if any) is shown
+   * regardless; without one the error stays contained here instead of
+   * propagating to an outer boundary. */
+  onError?: (err: unknown) => void
   layout?: LayoutProps
   style?: StyleProps
 }
 
-//TODO onLoad, onError
+// Renders the fallback source when the main one failed. Its own <Errored>
+// keeps a broken fallback from escaping: the placeholder stays instead.
+function FallbackTexture(props: { src: ImageSource; width?: number; height?: number }) {
+  let tex = createImage(() => props.src)
+  return (
+    <Errored fallback={null}>
+      <texture src={tex()} width={props.width} height={props.height} />
+    </Errored>
+  )
+}
+
 export function Image(props: ImageProps) {
   // createImage fetches/decodes/uploads, swaps the texture when src changes, and
   // frees it on cleanup, returning the texture id. Pass an accessor so a reactive
@@ -17,6 +37,14 @@ export function Image(props: ImageProps) {
   let src = createImage(() => props.src)
   let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
+  // Load/error callbacks ride a separate effect read of the same async value;
+  // the error handler also keeps the failure out of the console when the
+  // render side already contains it with a fallback.
+  createEffect(() => src(), {
+    effect: () => props.onLoad?.(),
+    error: (err: unknown) => props.onError?.(err),
+  })
+
   // 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.
@@ -50,7 +78,13 @@ export function Image(props: ImageProps) {
         <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
       <Loading fallback={null}>
-        <texture src={src()} width={texW()} height={texH()} />
+        <Errored
+          fallback={() =>
+            props.fallback != null ? <FallbackTexture src={props.fallback} width={texW()} height={texH()} /> : null
+          }
+        >
+          <texture src={src()} width={texW()} height={texH()} />
+        </Errored>
       </Loading>
       {hasBorder() ? (
         <d-rect

package/src/modal.tsx

@@ -20,7 +20,9 @@ export interface ModalProps {
  * escapes the layout and stacking of its surrounding tree. It fills the window
  * with a dimming backdrop and centers `children` on top. Control visibility by
  * mounting/unmounting it, e.g. `<Show when={open()}><Modal .../></Show>`: the
- * portal's onCleanup removes it when the surrounding scope disposes.
+ * portal's onCleanup removes it when the surrounding scope disposes. The
+ * gating signal must start false: portals cannot mount during the app's
+ * initial render (see createPortal), so a modal visible at startup throws.
  *
  * Pressing the backdrop calls `onClose`; pressing the content does not. This
  * works because pointer events dispatch to the whole hit path with no

package/src/text-input.tsx

@@ -1,7 +1,7 @@
 import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
 import { measureText, setFocus } from "@solidrt/core"
 import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
-import type { LayoutProps } from "@solidrt/core"
+import type { Color, Gradient, LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -166,7 +166,7 @@ export function TextInput(props: TextInputProps) {
     }),
   )
 
-  let textStyle = (color: string) => ({
+  let textStyle = (color: Color | Gradient) => ({
     w: TEXT_SHAPE_WIDTH,
     fontSize: fontSize(),
     lineHeight: theme.text.body.lineHeight,