@solidrt/components 0.0.27 → 0.0.29

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.27",
+  "version": "0.0.29",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.17",
-    "@solidrt/core": "0.0.27"
+    "@solidrt/core": "0.0.29"
   }
 }

package/src/badge.tsx

@@ -1,4 +1,4 @@
-import { Show } from "@solidrt/core"
+import { Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { typeStyle, lightOnDark } from "./typography"
@@ -38,7 +38,10 @@ export function Badge(props: BadgeProps) {
   let bg = () => props.style?.backgroundColor ?? colors().bg
   let fg = () => props.style?.color ?? colors().fg
   let radius = () => props.style?.borderRadius ?? RADIUS
-  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // Resolved once via children(): the typeof probe and the mount sites must
+  // share one build - reading the raw getter again would orphan native nodes.
+  let resolved = children(() => props.children)
+  let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
   let labelOnDark = () => lightOnDark(fg(), bg())
 
   return (
@@ -58,9 +61,9 @@ export function Badge(props: BadgeProps) {
       opacity={props.style?.opacity}
     >
       <d-rect color={bg()} radius={radius()} />
-      <Show when={isText()} fallback={props.children}>
+      <Show when={isText()} fallback={resolved()}>
         <text color={fg()} {...typeStyle("label", labelOnDark())}>
-          {props.children}
+          {resolved()}
         </text>
       </Show>
     </view>

package/src/button.tsx

@@ -1,4 +1,4 @@
-import { Show } from "@solidrt/core"
+import { Show, children } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -55,7 +55,11 @@ export function Button(props: ButtonProps) {
         : colors().fill)
   let radius = () => props.style?.borderRadius ?? theme.radius.sm
   let label = () => (props.disabled ? theme.color.textMuted : colors().label)
-  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // Resolved once via children(): reading the raw children getter builds a new
+  // subtree per read, so the typeof probe and the two mount sites below must
+  // share this single memoized build (an unmounted build leaks native nodes).
+  let resolved = children(() => props.children)
+  let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
   // The label's polarity against the idle fill: onPrimary on a saturated fill
   // is light-on-dark even in a light theme, so it needs the low-DPI weight
   // compensation there too.
@@ -92,9 +96,9 @@ export function Button(props: ButtonProps) {
         scale: (props.style?.scale ?? 1) * (s.pressed && policy.motion !== "none" ? 0.97 : 1),
       })}
     >
-      <Show when={isText()} fallback={props.children}>
+      <Show when={isText()} fallback={resolved()}>
         <text color={label()} {...typeStyle("body", labelOnDark())}>
-          {props.children}
+          {resolved()}
         </text>
       </Show>
     </Pressable>

package/src/image.tsx

@@ -1,14 +1,36 @@
-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.
+// Both fallbacks here take the error argument: an arity >= 1 fallback tells
+// <Errored> the error is handled, so dev builds do not console.error it.
+function FallbackTexture(props: { src: ImageSource; width?: number; height?: number }) {
+  let tex = createImage(() => props.src)
+  return (
+    <Errored fallback={(_err: unknown) => 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 +39,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 +80,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={(_err: unknown) =>
+            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/pressable.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "@solidjs/signals"
+import { createSignal, children } from "@solidrt/core"
 import type { LayoutProps, PointerEvent, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -26,7 +26,17 @@ export function Pressable(props: PressableProps) {
 
   let state = (): PressState => ({ pressed: pressed(), hovered: hovered() })
   let style = () => (typeof props.style === "function" ? props.style(state()) : props.style)
-  let kids = () => (typeof props.children === "function" ? props.children(state()) : props.children)
+  // Element-valued props build a fresh native subtree on every read, and a
+  // subtree that is never inserted is never destroyed - probing the raw getter
+  // with typeof would orphan one full copy per evaluation. children() memoizes
+  // the resolve so probe and mount share one build; a render-prop child
+  // ((state) => ...) passes through it intact because flatten only unwraps
+  // zero-arg functions.
+  let resolved = children(() => props.children)
+  let kids = () => {
+    let c = resolved()
+    return typeof c === "function" ? c(state()) : c
+  }
 
   let handleDown = (e: PointerEvent) => {
     if (e.button != null && e.button !== 0) return

package/src/progress-bar.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { onFrame, onLayout, getBoundingBox, Show } from "@solidrt/core"
+import { createSignal, onFrame, onLayout, getBoundingBox, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"

package/src/qrcode.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "@solidjs/signals"
+import { createMemo } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import qrcode from "qrcode-generator"
 

package/src/radio.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createContext, useContext, Show } from "@solidrt/core"
+import { createSignal, createContext, useContext, Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable } from "./pressable"
 import { theme } from "./theme"
@@ -72,7 +72,10 @@ export function Radio(props: RadioProps) {
   let selected = () => ctx.value() === props.value
   let disabled = () => props.disabled || ctx.disabled()
   let ringColor = () => (selected() ? theme.color.primary : theme.color.border)
-  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // Resolved once via children(): the typeof probe and the mount sites must
+  // share one build - reading the raw getter again would orphan native nodes.
+  let resolved = children(() => props.children)
+  let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
 
   let ring = () => Math.round(RING * densityScale())
   // Inner dot inset as a fraction of the ring, so it scales with the density.
@@ -91,9 +94,9 @@ export function Radio(props: RadioProps) {
           <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} color={theme.color.primary} />
         </Show>
       </view>
-      <Show when={isText()} fallback={props.children}>
+      <Show when={isText()} fallback={resolved()}>
         <text color={theme.color.text} {...typeStyle("body")}>
-          {props.children}
+          {resolved()}
         </text>
       </Show>
     </Pressable>

package/src/slider.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { getBoundingBox, onLayout, setPointerCapture } from "@solidrt/core"
+import { createSignal, getBoundingBox, onLayout, setPointerCapture } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { densityScale } from "./policy"

package/src/spinner.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { onFrame, Show } from "@solidrt/core"
+import { createSignal, onFrame, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"

package/src/switch.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "@solidjs/signals"
+import { createSignal } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable } from "./pressable"
 import { theme } from "./theme"

package/src/text-input.tsx

@@ -1,7 +1,6 @@
-import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
-import { measureText, setFocus } from "@solidrt/core"
+import { createEffect, createSignal, onCleanup, 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 +165,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,

package/src/text.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "@solidjs/signals"
+import { createMemo } from "@solidrt/core"
 import type { PointerProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps } from "./types"
 import { theme, type TextVariant } from "./theme"

package/src/tooltip.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env } from "@solidrt/core"
+import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env, children } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -66,7 +66,10 @@ export function Tooltip(props: TooltipProps) {
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
-    let isText = () => typeof props.content === "string" || typeof props.content === "number"
+    // Resolved once via children(): the typeof probe and the mount sites must
+    // share one build - reading the raw getter again would orphan native nodes.
+    let content = children(() => props.content)
+    let isText = () => typeof content() === "string" || typeof content() === "number"
     return createPortal(
       <view
         ref={(n: { id: number }) => (bubble = n)}
@@ -83,9 +86,9 @@ export function Tooltip(props: TooltipProps) {
         pointerEvents="none"
       >
         <d-rect color={theme.color.surfaceAlt} radius={theme.radius.sm} />
-        <Show when={isText()} fallback={props.content}>
+        <Show when={isText()} fallback={content()}>
           <text color={theme.color.text} {...typeStyle("body")}>
-            {props.content}
+            {content()}
           </text>
         </Show>
         <d-rect