@solidrt/components 0.0.11 → 0.0.13

package/package.json

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

package/src/image.tsx

@@ -1,5 +1,6 @@
 import { createSignal, createEffect, onCleanup } from "@solidjs/signals"
-import { decodeImage, createTexture } from "@solidrt/core/gpu"
+import { createTexture, destroyTexture } from "@solidrt/core/gpu"
+import { decodeImage } from "@solidrt/core/image"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -10,13 +11,14 @@ export interface ImageProps extends PointerProps {
 }
 
 //TODO onLoad, onError
-//TODO release texture in onCleanup
 export function Image(props: ImageProps) {
   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.
+  // once ready; a stale flag drops results from a superseded src. The old
+  // texture is destroyed before installing the new one; on unmount the current
+  // texture is destroyed by onCleanup below.
   createEffect(
     () => props.src,
     (source) => {
@@ -33,7 +35,9 @@ export function Image(props: ImageProps) {
         if (stale) return
         let { data, width, height } = decodeImage(bytes)
         let id = createTexture(data, width, height)
+        let old = res()
         setRes({ id, width, height })
+        if (old !== undefined) destroyTexture(old.id)
       })()
 
       return () => {
@@ -52,7 +56,8 @@ export function Image(props: ImageProps) {
   let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
 
   onCleanup(() => {
-    //TODO release texture
+    let r = res()
+    if (r !== undefined) destroyTexture(r.id)
   })
 
   return (

package/src/safe-area.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { onResize } from "@solidrt/core"
+import { safeArea } from "@solidrt/core"
 
 export function SafeArea(props: {
   top?: boolean | number
@@ -9,21 +8,12 @@ export function SafeArea(props: {
   relative?: boolean
   children?: any
 }) {
-  let [insets, setInsets] = createSignal({ top: 0, bottom: 0, left: 0, right: 0 })
-  onResize(({ width, height, safeArea }) => {
-    setInsets({
-      top: safeArea.top,
-      left: safeArea.left,
-      bottom: height - safeArea.bottom,
-      right: width - safeArea.right,
-    })
-  })
   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)
+    if (p === true) return safeArea()[edge]
+    return Math.max(safeArea()[edge], p as number)
   }
   return (
     <view

package/src/text-input.tsx

@@ -1,9 +1,14 @@
-import { createSignal, flush, onCleanup } from "@solidjs/signals"
-import { getBoundingBox, measureText, onLayout, setFocus } from "@solidrt/core"
+import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
+import { setFocus } from "@solidrt/core"
+import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
 
+// Caret thickness. Shared so the drawn caret and the scroll offset's reserved
+// edge column cannot drift apart.
+const CARET_WIDTH = 1
+
 export interface TextInputProps {
   value?: string
   defaultValue?: string
@@ -21,28 +26,38 @@ export interface TextInputProps {
   style?: StyleProps
 }
 
-// V1: single-line, caret-at-end only, no selection, no mid-string editing.
-// Printable text arrives via onTextInput (post-IME commit). onKeyDown handles
-// Backspace, Enter, Escape. Outside-click-to-blur is the caller's job.
+// Single-line. The caret moves through the text (Left/Right/Home/End), edits
+// happen at the caret, and the inner box scrolls to keep it in view. Printable
+// text arrives via onTextInput (post-IME commit). onKeyDown handles caret
+// movement, Backspace/Delete, Enter, Escape. Range selection (shift-movement,
+// highlight, click-to-position) is not wired yet. Outside-click-to-blur is the
+// caller's job.
 export function TextInput(props: TextInputProps) {
-  let [internalValue, setInternalValue] = createSignal(props.defaultValue ?? "")
   let [focused, setFocused] = createSignal(false)
   let [caretOn, setCaretOn] = createSignal(true)
-  let [viewportWidth, setViewportWidth] = createSignal(0)
 
   let node: { id: number } | undefined
   let viewport: { id: number } | undefined
   let blinkId: any = null
 
-  let value = () => props.value ?? internalValue()
-
-  let commit = (next: string) => {
-    if (props.maxLength != null && next.length > props.maxLength) {
-      next = next.slice(0, props.maxLength)
-    }
-    if (props.value == null) setInternalValue(next)
-    props.onInput?.(next)
-  }
+  let buffer = createTextBuffer({
+    value: () => props.value,
+    defaultValue: props.defaultValue,
+    onInput: (v) => props.onInput?.(v),
+    maxLength: () => props.maxLength,
+  })
+  let value = buffer.value
+
+  // autoFocus runs in an effect, not the ref: setFocus fires onFocus and reads
+  // the node's onTextInput handler to toggle the keyboard, and those handlers
+  // are only registered after the element's props are applied. The ref can fire
+  // before that, so focusing there would no-op.
+  createEffect(
+    () => props.autoFocus,
+    (autoFocus) => {
+      if (autoFocus && node) setFocus(node.id)
+    },
+  )
 
   let handlePointerDown = () => {
     if (props.disabled) return
@@ -70,11 +85,26 @@ export function TextInput(props: TextInputProps) {
   let handleKeyDown = (e: any) => {
     if (props.disabled) return
     if (e.key === "Backspace") {
-      let v = value()
-      if (v.length > 0) commit(v.slice(0, -1))
+      buffer.deleteBackward()
+      setCaretOn(true)
+    } else if (e.key === "Delete") {
+      buffer.deleteForward()
+      setCaretOn(true)
+    } else if (e.key === "Left") {
+      buffer.move("left")
+      setCaretOn(true)
+    } else if (e.key === "Right") {
+      buffer.move("right")
+      setCaretOn(true)
+    } else if (e.key === "Home") {
+      buffer.move("start")
+      setCaretOn(true)
+    } else if (e.key === "End") {
+      buffer.move("end")
       setCaretOn(true)
     } else if (e.key === "Return" || e.key === "Enter") {
       props.onSubmit?.(value())
+      setFocus(null)
     } else if (e.key === "Escape") {
       if (node) setFocus(null)
     }
@@ -82,7 +112,7 @@ export function TextInput(props: TextInputProps) {
 
   let handleTextInput = (e: any) => {
     if (props.disabled) return
-    commit(value() + (e.text ?? ""))
+    buffer.insertText(e.text ?? "")
     setCaretOn(true)
   }
 
@@ -98,37 +128,44 @@ export function TextInput(props: TextInputProps) {
   let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
 
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
-  let displayText = () => (showPlaceholder() ? (props.placeholder ?? "") : value())
-  let displayColor = () => (showPlaceholder() ? theme.color.textMuted : textColor())
-
-  // Viewport width is the inner scroll container's own laid-out width, read
-  // after layout. This works for numeric, "auto" and "%" widths alike (no need
-  // to subtract padding: the padding lives on the outer view). getBoundingBox
-  // is a snapshot, so we push it into a signal from onLayout. The flush drains
-  // the resulting scrollX update synchronously, before paint, so the scroll
-  // tracks the width in the same frame instead of trailing it by one.
-  onLayout(() => {
-    if (!viewport) return
-    let w = getBoundingBox(viewport)?.width ?? 0
-    if (w !== viewportWidth()) setViewportWidth(w)
-    flush()
-  })
+  let showCaret = () => focused() && caretOn() && !showPlaceholder()
+
+  // The text is split at the caret into two nodes with a zero-size anchor view
+  // between them. Flow places the anchor at the caret x (the before-text width),
+  // and the caret is a detached d-rect inside it: detached nodes take no layout
+  // slot, so the anchor stays zero-width and the after-text is not shifted. The
+  // anchor sits at the row's vertical center (alignItems center, zero height),
+  // so the caret is offset up by half its height to straddle it. While the
+  // placeholder shows, value() is "" so the slices and the scroll offset are 0
+  // with no special case. The viewport node is the inner scroll container;
+  // createCaretScroll reads its laid-out width after layout, keeps the caret in
+  // view, and flushes the offset before paint.
+  let beforeCaret = () => value().slice(0, buffer.caret())
+  let afterCaret = () => value().slice(buffer.caret())
+  let scrollX = createCaretScroll(
+    () => viewport,
+    () => ({
+      text: value(),
+      fontSize: theme.text.body.size,
+      caret: buffer.caret(),
+      // Constant, not tied to caret visibility: the caret's footprint does not
+      // change as it blinks, so reserving the column only when shown would swing
+      // the scroll offset every blink and shift text that exactly fills the box.
+      caretWidth: CARET_WIDTH,
+    }),
+  )
 
-  let caretWidth = () => (focused() && !showPlaceholder() ? 1 : 0)
-  let scrollX = () => {
-    if (showPlaceholder()) return 0
-    let tw = measureText(value(), { fontSize: theme.text.body.size }).width
-    let vw = viewportWidth()
-    if (vw <= 0) return 0
-    return Math.max(0, tw + caretWidth() - vw)
-  }
+  let textStyle = (color: string) => ({
+    fontSize: theme.text.body.size,
+    lineHeight: theme.text.body.lineHeight,
+    color,
+    maxLines: 1,
+    flexShrink: 0,
+  })
 
   return (
     <view
-      ref={(n: { id: number }) => {
-        node = n
-        if (props.autoFocus) setFocus(n.id)
-      }}
+      ref={(n: { id: number }) => (node = n)}
       flexDirection="row"
       alignItems="center"
       paddingLeft={theme.spacing.md}
@@ -161,18 +198,24 @@ export function TextInput(props: TextInputProps) {
         overflow="hidden"
         scrollX={scrollX()}
       >
-        <text
-          fontSize={theme.text.body.size}
-          lineHeight={theme.text.body.lineHeight}
-          color={displayColor()}
-          maxLines={1}
-          flexShrink={0}
-        >
-          {displayText()}
-        </text>
-        {focused() && caretOn() && !showPlaceholder() ? (
-          <rect color={theme.color.text} w={1} h={theme.text.body.size} flexShrink={0} />
-        ) : null}
+        {showPlaceholder() ? (
+          <text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</text>
+        ) : (
+          <view flexDirection="row" alignItems="center" flexShrink={0}>
+            <text {...textStyle(textColor())}>{beforeCaret()}</text>
+            {showCaret() ? (
+              <view>
+                <d-rect
+                  color={textColor()}
+                  y={-theme.text.body.size / 2}
+                  w={CARET_WIDTH}
+                  h={theme.text.body.size}
+                />
+              </view>
+            ) : null}
+            <text {...textStyle(textColor())}>{afterCaret()}</text>
+          </view>
+        )}
       </view>
     </view>
   )

package/src/window.tsx

@@ -1,7 +1,7 @@
-import type { LayoutProps } from "@solidrt/core"
+import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
-export interface WindowProps {
+export interface WindowProps extends PointerProps {
   children?: any
   title?: string
   fullscreen?: boolean
@@ -21,6 +21,18 @@ export function Window(props: WindowProps) {
       fullscreen={props.fullscreen}
       vsync={props.vsync}
       fps={props.fps}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onKeyDown={props.onKeyDown}
+      onKeyUp={props.onKeyUp}
+      onTextInput={props.onTextInput}
+      pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
         <d-rect color={props.style.backgroundColor} />