@solidrt/core 0.0.11 → 0.0.14

package/src/text-input.ts

@@ -0,0 +1,207 @@
+// Headless text-input mechanism. These primitives own the objective parts of
+// an editable single-line field -- the value buffer (text + caret/selection)
+// and the scroll-to-caret geometry -- and nothing with a UI opinion. Caret
+// blink, keybindings, placeholder and styling are policy and belong to the
+// component (the "skin") that composes these.
+
+import { createSignal, flush } from "@solidjs/signals"
+import { getBoundingBox, measureText } from "./core"
+import { onLayout } from "./window"
+
+/**
+ * A text selection as anchor/focus character offsets, following the same model
+ * as the platform editors (Flutter's TextSelection, the DOM Selection): the
+ * anchor is where the selection started, the focus is the moving end where the
+ * caret sits. A collapsed selection (anchor === focus) is a plain caret.
+ */
+export type Selection = { anchor: number; focus: number }
+
+export type MoveDirection = "left" | "right" | "start" | "end"
+
+export type TextBufferOptions = {
+  /**
+   * Controlled value accessor. When it returns a string, the buffer mirrors it
+   * and edits flow out only through onInput (the internal text is bypassed).
+   * The selection is always buffer-owned editing state regardless.
+   */
+  value?: () => string | undefined
+  /** Initial value when uncontrolled. */
+  defaultValue?: string
+  /** Called with the new text after every edit, already clamped to maxLength. */
+  onInput?: (value: string) => void
+  /** Max length; inserts past it are clamped. */
+  maxLength?: () => number | undefined
+}
+
+export type TextBuffer = {
+  /** Current text: the controlled value if provided, else internal state. */
+  value(): string
+  /** Current selection, clamped to the text length. Collapsed = a caret. */
+  selection(): Selection
+  /** The focus offset (where the caret sits). */
+  caret(): number
+  /** Replace the current selection with text, then collapse the caret after it. */
+  insertText(text: string): void
+  /** Delete the selection if any, else the character before the caret. */
+  deleteBackward(): void
+  /** Delete the selection if any, else the character after the caret. */
+  deleteForward(): void
+  /** Move the caret. `extend` keeps the anchor to grow a selection (else collapses). */
+  move(direction: MoveDirection, options?: { extend?: boolean }): void
+  /** Set the selection directly (offsets are clamped to the text length). */
+  setSelection(anchor: number, focus: number): void
+  /** Replace the whole value, caret to the end. */
+  setValue(next: string): void
+  /** Clear to empty. */
+  clear(): void
+}
+
+/**
+ * An editable text buffer that bridges controlled/uncontrolled use and owns the
+ * caret/selection. With a `value` accessor the buffer is controlled: edits do
+ * not mutate internal text, they only call `onInput` so the owner can update its
+ * source. Without one it holds the text itself. The selection is always
+ * buffer-owned state and is clamped to the current text length on read, so an
+ * external truncation of a controlled value cannot leave the caret dangling.
+ * Every edit is clamped to `maxLength`.
+ */
+export function createTextBuffer(options: TextBufferOptions = {}): TextBuffer {
+  let initial = options.defaultValue ?? ""
+  let [internalValue, setInternalValue] = createSignal(initial)
+  let [selectionState, setSelectionState] = createSignal<Selection>({
+    anchor: initial.length,
+    focus: initial.length,
+  })
+
+  let value = () => options.value?.() ?? internalValue()
+
+  let selection = (): Selection => {
+    let len = value().length
+    let s = selectionState()
+    return { anchor: Math.min(s.anchor, len), focus: Math.min(s.focus, len) }
+  }
+
+  // Ordered selection bounds [start, end).
+  let range = () => {
+    let { anchor, focus } = selection()
+    return anchor <= focus ? [anchor, focus] : [focus, anchor]
+  }
+
+  let setCaret = (offset: number) => setSelectionState({ anchor: offset, focus: offset })
+
+  // Apply a text edit and place the caret, clamping to maxLength.
+  let apply = (next: string, caret: number) => {
+    let max = options.maxLength?.()
+    if (max != null && next.length > max) next = next.slice(0, max)
+    caret = Math.min(caret, next.length)
+    if (options.value?.() == null) setInternalValue(next)
+    setCaret(caret)
+    options.onInput?.(next)
+  }
+
+  return {
+    value,
+    selection,
+    caret: () => selection().focus,
+
+    insertText: (text) => {
+      let v = value()
+      let [start, end] = range()
+      apply(v.slice(0, start) + text + v.slice(end), start + text.length)
+    },
+
+    deleteBackward: () => {
+      let v = value()
+      let [start, end] = range()
+      if (start !== end) apply(v.slice(0, start) + v.slice(end), start)
+      else if (start > 0) apply(v.slice(0, start - 1) + v.slice(start), start - 1)
+    },
+
+    deleteForward: () => {
+      let v = value()
+      let [start, end] = range()
+      if (start !== end) apply(v.slice(0, start) + v.slice(end), start)
+      else if (end < v.length) apply(v.slice(0, end) + v.slice(end + 1), end)
+    },
+
+    move: (direction, opts) => {
+      let extend = opts?.extend ?? false
+      let { anchor, focus } = selection()
+      let len = value().length
+      // A non-extending left/right on a range collapses to the near edge.
+      if (!extend && anchor !== focus && (direction === "left" || direction === "right")) {
+        setCaret(direction === "left" ? Math.min(anchor, focus) : Math.max(anchor, focus))
+        return
+      }
+      let next = focus
+      if (direction === "left") next = Math.max(0, focus - 1)
+      else if (direction === "right") next = Math.min(len, focus + 1)
+      else if (direction === "start") next = 0
+      else if (direction === "end") next = len
+      setSelectionState({ anchor: extend ? anchor : next, focus: next })
+    },
+
+    setSelection: (anchor, focus) => {
+      let len = value().length
+      setSelectionState({ anchor: Math.min(anchor, len), focus: Math.min(focus, len) })
+    },
+
+    setValue: (next) => apply(next, next.length),
+    clear: () => apply("", 0),
+  }
+}
+
+export type CaretScrollInput = {
+  text: string
+  fontSize: number
+  /** Caret offset into `text`. Defaults to the text end. */
+  caret?: number
+  /** Px reserved so the caret stays visible at the viewport edge. Default 0. */
+  caretWidth?: number
+}
+
+/**
+ * Returns the horizontal scroll offset that keeps the caret within the viewport
+ * node. The offset is retained between frames and only adjusted when the caret
+ * would fall outside the visible range (scrolled left when the caret runs past
+ * the right edge, right when it moves before the left edge), so stationary text
+ * does not jump. The viewport width and offset are computed in onLayout and the
+ * synchronous flush drains the update before paint, so the scroll tracks a caret
+ * or width change in the same frame. Pure geometry: no caret rendering and no
+ * placeholder/visual policy.
+ */
+export function createCaretScroll(
+  viewport: () => { id: number } | undefined,
+  input: () => CaretScrollInput,
+): () => number {
+  let [scrollX, setScrollX] = createSignal(0)
+
+  onLayout(() => {
+    let node = viewport()
+    if (!node) return
+    let vw = getBoundingBox(node)?.width ?? 0
+    let { text, fontSize, caret, caretWidth = 0 } = input()
+    let len = text.length
+    let c = caret == null ? len : Math.max(0, Math.min(caret, len))
+
+    let totalWidth = measureText(text, { fontSize }).width
+    let caretX = c >= len ? totalWidth : measureText(text.slice(0, c), { fontSize }).width
+    let maxScroll = Math.max(0, totalWidth + caretWidth - vw)
+
+    let cur = scrollX()
+    let next = cur
+    if (vw <= 0) {
+      next = 0
+    } else if (caretX < cur) {
+      next = caretX
+    } else if (caretX + caretWidth > cur + vw) {
+      next = caretX + caretWidth - vw
+    }
+    next = Math.max(0, Math.min(next, maxScroll))
+
+    if (next !== cur) setScrollX(next)
+    flush()
+  })
+
+  return scrollX
+}

package/src/types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="@solidrt/flux-types" />
 
 import type { JSX as SolidJSX } from "@solidjs/signals"
+import type { Gradient } from "./color"
 
 // UI event bus (lattice), provided by the runtime as a builtin module.
 // on/once return an unsubscribe function.
@@ -20,59 +21,26 @@ declare module "srt:dev" {
   export function stop(): void
 }
 
-declare global {
-  function requestAnimationFrame(callback: (time: number) => void): number
-  function cancelAnimationFrame(id: number): void
-
-  let ffi: {
-    createRoot(id: number): void
-    createNode(id: number, kind: string): void
-    insertNode(parentId: number, nodeId: number, anchorId?: number): void
-    deleteNode(parentId: number, nodeId: number): void
-    setProperty(nodeId: number, name: string, value: unknown): void
-    setTextInputActive(active: boolean): void
-    requestFrame(): void
-    measureText(text: string, options?: MeasureTextOptions): { width: number, height: number }
-    getBoundingBox(id: number): { x: number, y: number, width: number, height: number } | null
-  }
+// Frame draw (lattice runner). renderFrame() synchronously renders the current
+// frame: layout, the postLayout hook, paint and hover refresh, then builds and
+// submits the display list. To schedule a future frame instead, use
+// requestFrame() from "flux:rendertree". The tree-building surface itself is
+// "flux:rendertree" (from @solidrt/flux-types).
+declare module "srt:render" {
+  export function renderFrame(): void
+}
 
-  let gpu: {
-    createTexture(data: Uint8Array, width: number, height: number): number
-    createMutableTexture(data: Uint8Array, width: number, height: number): number
-    uploadTexture(textureId: number, offset?: number): void
-    createShader(
-      fragmentSrc: string,
-      width: number,
-      height: number,
-      params?: Record<string, number>,
-      textures?: Record<string, number>,
-    ): number
-    setShaderParams(textureId: number, params: Record<string, number>): void
+declare global {
+  let image: {
     decodeImage(bytes: Uint8Array): { data: Uint8Array, width: number, height: number }
   }
 
-  let camera: {
-    listCameras(): { id: number, name: string, facing: "front" | "back" | "unknown" }[]
-    open(options: { camera?: number, facing?: "front" | "back", width?: number, height?: number, scan?: string[] }):
-      Promise<{ handle: number, texture: number, width: number, height: number }>
-    setBarcodeCallback(handle: number, callback: (result: { data: string, format: "qr" }) => void): void
-    scanImage(data: Uint8Array, width: number, height: number): { data: string, format: "qr" }[]
-    close(handle: number): void
-  }
-
-  let microphone: {
-    listMicrophones(): { id: number, name: string }[]
-    open(options: { microphone?: number, sampleRate?: number }): { handle: number, sampleRate: number }
-    read(handle: number): Float32Array
-    close(handle: number): void
-  }
-
   let speech: {
     start(options: {
-      model: Uint8Array, vadModel: Uint8Array, language?: string, microphone?: number,
-      singleUtterance?: boolean, interimResults?: boolean, wakeWord?: Uint8Array | string | string[], wakeThreshold?: number,
+      model: Uint8Array, vadModel: Uint8Array, lang?: string, microphone?: number,
+      continuous?: boolean, interimResults?: boolean, wakeWord?: Uint8Array | string | string[], wakeThreshold?: number,
     }): Promise<{ handle: number }>
-    setResultCallback(handle: number, callback: (result: { text: string, final: boolean }) => void): void
+    setResultCallback(handle: number, callback: (result: { transcript: string, isFinal: boolean }) => void): void
     setSpeechStartCallback(handle: number, callback: () => void): void
     setSpeechEndCallback(handle: number, callback: () => void): void
     setWakeCallback(handle: number, callback: () => void): void
@@ -80,14 +48,6 @@ declare global {
   }
 }
 
-export interface MeasureTextOptions {
-  fontFamily?: "sans" | "mono" | (string & {})
-  fontSize?: number
-  fontStyle?: "normal" | "italic"
-  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
-  maxLines?: number
-}
-
 type Children = SolidJSX.Element
 
 interface FlexboxProps {
@@ -136,6 +96,7 @@ export interface LayoutProps extends FlexboxProps, GridProps {
   minHeight?: Dimension
   maxWidth?: Dimension
   maxHeight?: Dimension
+  aspectRatio?: number | (string & {})
 
   padding?: Dimension
   paddingTop?: Dimension
@@ -154,11 +115,12 @@ export interface LayoutProps extends FlexboxProps, GridProps {
   overflowY?: "visible" | "clip" | "hidden" | "scroll"
 }
 
-// Colors are CSS color strings, parsed to a packed u32 by parseColorToU32.
+/** Colors are CSS color strings, parsed to a packed u32 by `parseColor`. */
 export type Color = string
 
 export interface PaintProps {
-  color?: Color
+  // A solid color, or a gradient from createLinearGradient/createRadialGradient.
+  color?: Color | Gradient
   blendMode?: "clear" | "source" | "destination" | "source-over" | "destination-over" | "source-in" | "destination-in" | "source-out" | "destination-out" | "source-atop" | "destination-atop" | "xor" | "plus" | "modulate" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "multiply" | "hue" | "saturation" | "color" | "luminosity"
   drawStyle?: "fill" | "stroke" | "stroke-and-fill"
   strokeCap?: "butt" | "round" | "square"
@@ -191,14 +153,22 @@ export interface TransformProps {
   scrollY?: number
 }
 
+// Window-relative pointer coordinates are reported as clientX/clientY (matching
+// the DOM MouseEvent). pointerType distinguishes mouse from touch; button is the
+// pressed button on down/up (0 = primary); the modifier flags mirror the DOM.
 export interface PointerEvent {
-  x: number
-  y: number
+  clientX: number
+  clientY: number
+  pointerId: number
+  pointerType: "mouse" | "touch" | "pen" | (string & {})
+  button?: number
+  shiftKey: boolean
+  ctrlKey: boolean
+  altKey: boolean
+  metaKey: boolean
 }
 
-export interface WheelEvent {
-  x: number
-  y: number
+export interface WheelEvent extends PointerEvent {
   deltaX: number
   deltaY: number
 }
@@ -296,7 +266,15 @@ export interface LineProps extends PaintProps, PointerProps {
 
 export interface PathProps extends Position, PaintProps, PointerProps {
   d?: string
-  fillRule?: "nonZero" | "evenOdd"
+  fillRule?: "nonzero" | "evenodd"
+}
+
+export interface SvgProps extends Position, PointerProps {
+  // A whole SVG document as a string (an imported asset, a fetched string, or a
+  // template literal). Parsed and rendered as one unit; takes no JSX children.
+  src?: string
+  // Drives currentColor in the document. Explicit fills/strokes still win.
+  color?: Color
 }
 
 export interface TextProps extends PaintProps, PointerProps {

package/src/window.ts

@@ -1,4 +1,6 @@
-import { onCleanup, onSettled, flush } from "@solidjs/signals"
+import { createSignal, onCleanup, onSettled, flush } from "@solidjs/signals"
+import { requestFrame } from "flux:rendertree"
+import { renderFrame } from "srt:render"
 import { on, once } from "srt:events"
 import { getEventHandler, getFocusedNodeId, setFocus } from "./core"
 
@@ -28,12 +30,12 @@ export function onFrame(fn: (tick: number, frame: number, rate: number) => void)
     frameId = nextFrameId++
     animationFrames.set(frameId, extendedFn)
     // A pending onFrame callback is a standing request for the next frame.
-    ffi.requestFrame()
+    requestFrame()
   }
 
   frameId = nextFrameId++
   animationFrames.set(frameId, extendedFn)
-  ffi.requestFrame()
+  requestFrame()
 
   let cleanup = () => animationFrames.delete(frameId)
   onCleanup(cleanup)
@@ -42,6 +44,8 @@ export function onFrame(fn: (tick: number, frame: number, rate: number) => void)
 
 // ------ Resize ----------------
 
+// Insets: each value is the distance from the corresponding window edge, like
+// CSS env(safe-area-inset-*).
 interface SafeArea {
   top: number
   left: number
@@ -62,10 +66,86 @@ export function onResize(fn: (data: ResizeEvent) => void) {
   return unsubscribe
 }
 
-// Fires after layout has been computed for the current frame but before paint.
-// Setting properties that affect layout from this callback will be picked up
-// by a re-layout pass before painting (one extra pass; cascades beyond that
-// paint stale).
+// ------ Reactive window state ----------------
+
+// Singleton accessors over the same events as onResize / onWindowFocus. There
+// is one window, so these are bare accessors rather than a createX instance.
+// Lazily subscribed on first read (resize is sticky, so the first read sees the
+// current value); app-lifetime, so no onCleanup.
+
+let sizeAccessor: (() => { width: number; height: number }) | undefined
+let safeAreaAccessor: (() => SafeArea) | undefined
+let displayScaleAccessor: (() => number) | undefined
+
+function ensureResizeState() {
+  if (sizeAccessor) return
+  let [size, setSize] = createSignal({ width: 0, height: 0 })
+  let [safe, setSafe] = createSignal<SafeArea>({ top: 0, left: 0, right: 0, bottom: 0 })
+  let [scale, setScale] = createSignal(1)
+  on("resize", (e: ResizeEvent) => {
+    setSize({ width: e.width, height: e.height })
+    setSafe(e.safeArea)
+    setScale(e.displayScale)
+  })
+  sizeAccessor = size
+  safeAreaAccessor = safe
+  displayScaleAccessor = scale
+}
+
+/** Current window size, as a reactive accessor. */
+export function windowSize(): { width: number; height: number } {
+  ensureResizeState()
+  return sizeAccessor!()
+}
+
+/** Current safe-area insets, as a reactive accessor. */
+export function safeArea(): SafeArea {
+  ensureResizeState()
+  return safeAreaAccessor!()
+}
+
+/** Current display scale (device pixel ratio), as a reactive accessor. */
+export function displayScale(): number {
+  ensureResizeState()
+  return displayScaleAccessor!()
+}
+
+let focusedAccessor: (() => boolean) | undefined
+
+/** Whether the window currently has focus, as a reactive accessor. */
+export function windowFocused(): boolean {
+  if (!focusedAccessor) {
+    let [focused, setFocused] = createSignal(true)
+    on("windowFocus", () => setFocused(true))
+    on("windowBlur", () => setFocused(false))
+    focusedAccessor = focused
+  }
+  return focusedAccessor()
+}
+
+let keyboardHeightAccessor: (() => number) | undefined
+
+/**
+ * Height in logical pixels that the on-screen keyboard overlaps the window
+ * (0 when hidden or on platforms without a soft keyboard), as a reactive
+ * accessor. The window is not resized for the keyboard, so pad or lift content
+ * by this much to keep it above the keyboard.
+ */
+export function keyboardHeight(): number {
+  if (!keyboardHeightAccessor) {
+    let [height, setHeight] = createSignal(0)
+    on("keyboardVisibility", ({ height: h }: { height: number }) => setHeight(h ?? 0))
+    keyboardHeightAccessor = height
+  }
+  return keyboardHeightAccessor()
+}
+
+/**
+ * Fires after layout has been computed for the current frame but before paint.
+ * Setting properties that affect layout from this callback will be picked up
+ * by a re-layout pass before painting (one extra pass; cascades beyond that
+ * paint stale).
+ */
 export function onLayout(fn: () => void) {
   let unsubscribe = on("postLayout", fn)
   onCleanup(unsubscribe)
@@ -108,7 +188,7 @@ export function attachWindow(_nodeId: number) {
       for (let fn of frames.values()) fn(t, frame, refreshRate)
     }
     flush()
-    draw()
+    renderFrame()
   }
 
   onSettled(() => {

package/src/camera-view.tsx

@@ -1,55 +0,0 @@
-import { createSignal, onCleanup } from "@solidjs/signals"
-import { openCamera, type BarcodeResult, type Camera } from "./camera"
-
-// Convenience viewfinder over openCamera: opens on mount, renders the stream
-// texture, closes on cleanup. Use openCamera directly for anything it does not
-// cover; this is just composition, no extra capability.
-
-export interface CameraViewProps {
-  /** Explicit device id from listCameras(); takes precedence over facing. */
-  camera?: number
-  facing?: "front" | "back"
-  /**
-   * Size hint for the stream and explicit size of the view. Omit height to
-   * follow the stream's aspect ratio, which can flip when a phone rotates.
-   */
-  width?: number
-  height?: number
-  scan?: "qr"[]
-  onReady?: (cam: Camera) => void
-  onError?: (error: Error) => void
-  onBarcode?: (result: BarcodeResult) => void
-}
-
-export function CameraView(props: CameraViewProps) {
-  let [texture, setTexture] = createSignal<number | undefined>(undefined)
-  let cam: Camera | undefined
-  let disposed = false
-
-  openCamera({
-    camera: props.camera,
-    facing: props.facing,
-    width: props.width,
-    height: props.height,
-    scan: props.scan,
-  })
-    .then((opened) => {
-      if (disposed) {
-        opened.close()
-        return
-      }
-      cam = opened
-      if (props.onBarcode) opened.onBarcode(props.onBarcode)
-      setTexture(opened.texture)
-      props.onReady?.(opened)
-    })
-    .catch((e) => props.onError?.(e instanceof Error ? e : new Error(String(e))))
-
-  onCleanup(() => {
-    disposed = true
-    cam?.close()
-    cam = undefined
-  })
-
-  return <texture src={texture()} width={props.width} height={props.height} />
-}

package/src/speech.ts

@@ -1,67 +0,0 @@
-// Speech recognition. A session captures the microphone, segments utterances
-// by silence (Silero VAD) and transcribes each one with Whisper, delivering
-// final transcripts through onResult. With wakeWord the session starts
-// asleep behind an efficient wake word detector (livekit-wakeword) and only
-// transcribes after the wake word. startRecognition resolves once the models
-// are loaded and listening has begun; it rejects when loading fails.
-// Models are passed as bytes so any source composes: flux:fs file(), fetch
-// (incl. the dev-server file proxy), or a download cache layered on top.
-// Requires a runtime built with speech support.
-
-export type SpeechOptions = {
-  /** A ggml Whisper model (file contents, e.g. ggml-tiny.en.bin). */
-  model: Uint8Array
-  /** A ggml Silero VAD model (file contents). */
-  vadModel: Uint8Array
-  /** Whisper language code; "auto" detects (multilingual models only). Default "en". */
-  language?: string
-  /** Explicit microphone device id from listMicrophones(). */
-  microphone?: number
-  /** Stop automatically after the first final result (with wakeWord: re-arm instead, one result per wake). */
-  singleUtterance?: boolean
-  /** Also deliver snapshot transcripts (final: false) while an utterance is still being spoken. */
-  interimResults?: boolean
-  /**
-   * Wake word: start asleep, fire onWake when it is heard, then transcribe
-   * the speech that follows. How the wake word is specified depends on the
-   * engine. The current engine detects with a trained classifier and takes
-   * the model's bytes (livekit-wakeword ONNX, e.g. the pretrained "hey
-   * livekit"; custom phrases are trained offline with its toolkit). Phrase
-   * strings are reserved for engines that match text; passing them to this
-   * engine rejects with an error.
-   */
-  wakeWord?: Uint8Array | string | string[]
-  /** Detector confidence (0..1) that counts as a wake. Default 0.5. */
-  wakeThreshold?: number
-}
-
-export type SpeechResult = {
-  /** Transcript of the utterance (a snapshot of it when final is false). */
-  text: string
-  /** True for the completed utterance, false for interim snapshots. */
-  final: boolean
-}
-
-export type SpeechSession = {
-  /** Receive transcripts (replaces any previous callback). */
-  onResult(callback: (result: SpeechResult) => void): void
-  /** The user started speaking (replaces any previous callback). */
-  onSpeechStart(callback: () => void): void
-  /** The utterance ended; its final result follows once transcribed. */
-  onSpeechEnd(callback: () => void): void
-  /** The wake word was heard (wakeWordModel sessions only). */
-  onWake(callback: () => void): void
-  /** Release the microphone and discard any utterance in progress. */
-  stop(): void
-}
-
-export async function startRecognition(options: SpeechOptions): Promise<SpeechSession> {
-  let started = await speech.start(options)
-  return {
-    onResult: (callback: (result: SpeechResult) => void) => speech.setResultCallback(started.handle, callback),
-    onSpeechStart: (callback: () => void) => speech.setSpeechStartCallback(started.handle, callback),
-    onSpeechEnd: (callback: () => void) => speech.setSpeechEndCallback(started.handle, callback),
-    onWake: (callback: () => void) => speech.setWakeCallback(started.handle, callback),
-    stop: () => speech.stop(started.handle),
-  }
-}