@solidrt/components 0.0.37 → 0.0.39

package/README.md

@@ -194,10 +194,20 @@ Accepts `layout`, `style`, and all pointer event props, plus:
 | Prop       | Type                     | Description                                                                          |
 | ---------- | ------------------------ | ------------------------------------------------------------------------------------ |
 | `src`      | `string \| Uint8Array`   | URL to fetch, or raw image bytes to decode                                            |
+| `fit`      | `"fill" \| "cover" \| "contain" \| "none" \| "scale-down"` | How the image maps into the box (CSS object-fit, centered)  |
 | `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                                             |
 
+With `fit` the image fills whatever box `layout` gives the component - numbers,
+`pct()`, or flex - and the fit decides how the pixels map into it (`"cover"` is
+the ported-web-hero-image answer). Without `fit`, only *numeric* layout sizes
+reach the image; anything else draws at intrinsic size.
+
+```jsx
+<Image src={hero} fit="cover" layout={{ width: pct(100), height: 240 }} />
+```
+
 A failing `src` is contained by the component (the fallback or placeholder
 shows); it does not propagate to an outer `<Errored>` boundary.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -17,7 +17,7 @@
     "qrcode-generator": "^2.0.4"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-beta.20",
-    "@solidrt/core": "0.0.37"
+    "@solidjs/signals": "2.0.0-beta.26",
+    "@solidrt/core": "0.0.39"
   }
 }

package/src/button.tsx

@@ -24,6 +24,7 @@ export interface ButtonProps {
   size?: ButtonSize
   onPress?: () => void
   disabled?: boolean
+  ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
 }
@@ -93,7 +94,10 @@ export function Button(props: ButtonProps) {
 
   return (
     <view
-      ref={press.ref}
+      ref={(n: { id: number }) => {
+        press.ref(n)
+        props.ref?.(n)
+      }}
       repaintBoundary
       flexDirection="row"
       alignItems="center"

package/src/image.tsx

@@ -1,9 +1,18 @@
-import { createImage, createEffect, Loading, Errored } from "@solidrt/core"
-import type { ImageSource, LayoutProps, PointerProps } from "@solidrt/core"
+import { createImage, createEffect, Loading, Errored, pct } from "@solidrt/core"
+import type { ImageSource, LayoutProps, Pct, PointerProps, TextureProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
 export interface ImageProps extends PointerProps {
   src: string | Uint8Array
+  /**
+   * How the image maps into the Image's box (CSS object-fit): "fill"
+   * stretches, "cover"/"none" crop, "contain"/"scale-down" letterbox,
+   * everything centered. Requires the Image to have a box: give `layout` a
+   * size in any form (numbers, `pct()`, flex). Without `fit` the image keeps
+   * its legacy sizing: numeric layout sizes are honored, anything else draws
+   * at intrinsic size.
+   */
+  fit?: TextureProps["fit"]
   /** Image source to show when `src` fails to load. If this also fails, only
    * the `backgroundColor` placeholder remains. */
   fallback?: ImageSource
@@ -22,11 +31,16 @@ export interface ImageProps extends PointerProps {
 // 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 }) {
+function FallbackTexture(props: {
+  src: ImageSource
+  fit?: TextureProps["fit"]
+  width?: number | Pct
+  height?: number | Pct
+}) {
   let tex = createImage(() => props.src)
   return (
     <Errored fallback={(_err: unknown) => null}>
-      <texture src={tex()} width={props.width} height={props.height} />
+      <texture src={tex()} fit={props.fit} width={props.width} height={props.height} />
     </Errored>
   )
 }
@@ -47,11 +61,14 @@ export function Image(props: ImageProps) {
     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.
-  let texW = () => (typeof props.layout?.width === "number" ? props.layout.width : undefined)
-  let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
+  // A texture sizes from its own width/height (not the box around it). With
+  // `fit` the texture simply fills the Image's box and the fit maps the pixels
+  // into it. Without it, legacy sizing: numeric layout dimensions are
+  // forwarded, and omitting height lets the texture follow the image's
+  // intrinsic aspect ratio.
+  let texW = () => (props.fit != null ? pct(100) : typeof props.layout?.width === "number" ? props.layout.width : undefined)
+  let texH = () =>
+    props.fit != null ? pct(100) : typeof props.layout?.height === "number" ? props.layout.height : undefined
 
   return (
     <view
@@ -82,10 +99,12 @@ export function Image(props: ImageProps) {
       <Loading fallback={null}>
         <Errored
           fallback={(_err: unknown) =>
-            props.fallback != null ? <FallbackTexture src={props.fallback} width={texW()} height={texH()} /> : null
+            props.fallback != null ? (
+              <FallbackTexture src={props.fallback} fit={props.fit} width={texW()} height={texH()} />
+            ) : null
           }
         >
-          <texture src={src()} width={texW()} height={texH()} />
+          <texture src={src()} fit={props.fit} width={texW()} height={texH()} />
         </Errored>
       </Loading>
       {hasBorder() ? (

package/src/press.ts

@@ -2,6 +2,10 @@ import { createSignal, onSettled, getBoundingBoxViewport } from "@solidrt/core"
 import type { PointerEvent } from "@solidrt/core"
 import { claim, release } from "./arena"
 
+// A live view of a recognizer's state, not a snapshot: both fields are getters,
+// so a consumer that reads one inside a JSX prop or child expression tracks that
+// signal there and nothing else re-runs. Read them in those positions, not
+// eagerly into a local, or the read lands in whatever scope destructured it.
 export type PressState = { pressed: boolean; hovered: boolean }
 
 export interface PressOptions {
@@ -43,7 +47,23 @@ export function createPress(options: PressOptions) {
   let active: number | null = null
   let inside = false
 
-  let state = (): PressState => ({ pressed: pressed(), hovered: hovered() })
+  // One stable object of getters, handed out as-is. Returning a fresh snapshot
+  // instead would read both signals at call time, making them dependencies of
+  // the caller's scope - and for render-prop children that scope is the one
+  // that builds the subtree, so a hover or press would rebuild it. A rebuild
+  // mid-gesture replaces a nested recognizer with a fresh one that never saw
+  // the down, so its up fires nothing: invisible with a mouse (hover settles
+  // long before the click) and fatal on touch, where the finger's arrival flips
+  // the ancestor's hover during the very gesture it is meant to recognize.
+  let live: PressState = {
+    get pressed() {
+      return pressed()
+    },
+    get hovered() {
+      return hovered()
+    },
+  }
+  let state = (): PressState => live
   let ref = (n: { id: number }) => {
     node = n
   }

package/src/pressable.tsx

@@ -7,7 +7,9 @@ export type { PressState } from "./press"
 
 export interface PressableProps extends PointerProps {
   // children and style may be functions of the press state, so a caller can
-  // restyle on press/hover without wiring their own signals.
+  // restyle on press/hover without wiring their own signals. The state is live
+  // (getters, not a snapshot): read it inside a prop or child expression, never
+  // eagerly into a local, or the value is captured once where it was read.
   children?: any | ((state: PressState) => any)
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
@@ -29,8 +31,13 @@ export function Pressable(props: PressableProps) {
   // ((state) => ...) passes through it intact because flatten only unwraps
   // zero-arg functions.
   let resolved = children(() => props.children)
+  // The render prop runs once: the state it receives is a live object of getters
+  // (see press.ts), so a press or hover updates only the props that read it
+  // rather than rebuilding this subtree - which is what keeps a nested
+  // recognizer's in-flight gesture alive.
   let kids = () => {
-    let c = resolved()
+    // children()'s return type erases the render-prop variant, hence the any.
+    let c = resolved() as any
     return typeof c === "function" ? c(press.state()) : c
   }
 

package/src/split-view.tsx

@@ -1,6 +1,5 @@
 import { Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { theme } from "./theme"
 import { policy } from "./policy"
 
 export interface SplitViewProps {
@@ -20,11 +19,18 @@ const LIST_WIDTH = 320
 
 /**
  * A list-detail container driven by the layout policy: two-pane shows the list
- * beside the detail with a hairline between, single-pane shows one pane at a
- * time per `showDetail`. Keep pane state (selection, scroll) in the app, not
- * in the panes: crossing a breakpoint re-arranges and can remount them.
+ * beside the detail, single-pane shows one pane at a time per `showDetail`.
+ * Keep pane state (selection, scroll) in the app, not in the panes: crossing
+ * a breakpoint re-arranges and can remount them.
  * SplitView draws no chrome; a back affordance in the single-pane detail is
  * the app's to render (fork on policy.layout, as the shell example does).
+ *
+ * Panes get no padding, max-width or alignment either - that is content, and
+ * SplitView cannot know the intended reading width. Give the single-pane
+ * detail the same treatment as the list (centered max-width column), otherwise
+ * crossing the breakpoint leaves the detail hugging the window's left edge
+ * while every other screen stays centered. Two-pane wants the opposite: the
+ * detail sits against the pane edge, since the pane already bounds its width.
  */
 export function SplitView(props: SplitViewProps) {
   return (
@@ -42,9 +48,6 @@ export function SplitView(props: SplitViewProps) {
         <view width={props.listWidth ?? LIST_WIDTH} flexDirection="column">
           {props.list}
         </view>
-        <view width={1}>
-          <d-rect color={theme.color.border} />
-        </view>
         <view flex={1} flexDirection="column">
           {props.detail}
         </view>