@solidrt/core 0.0.40 → 0.0.42

package/src/svg.ts

@@ -0,0 +1,71 @@
+// SVG documents as data: parseSvg turns a document string into a flat list of
+// draws that map straight onto <d-path> elements. Vector currency is path
+// data, the same way raster currency is a texture id - there is no document
+// element that swallows the source; the app owns the parsed data and composes
+// ordinary primitives from it.
+
+import { parseSvg as fluxParseSvg } from "flux:svg"
+import { parseColor, type Gradient } from "./color"
+
+/**
+ * Tags an inline SVG source, returning it unchanged. Documents small enough to
+ * belong beside the code that uses them stay in the file; the tag is what
+ * makes them legible there, because editors highlight markup inside a template
+ * literal only when a known tag marks it (the name matters - `svg` is one the
+ * grammars look for). Raw semantics, like `glsl`.
+ */
+export let svg = String.raw
+
+/**
+ * One resolved draw in document coordinates. The keys match `PathProps`, so a
+ * draw spreads onto a `<d-path>` unchanged: `<d-path {...draw} />`. A source
+ * path with both a fill and a stroke yields two draws (fill first).
+ */
+export type SvgDraw = {
+  d: string
+  color: string | Gradient
+  drawStyle: "fill" | "stroke"
+  fillRule?: "nonzero" | "evenodd"
+  strokeWidth?: number
+  strokeCap?: "butt" | "round" | "square"
+  strokeJoin?: "miter" | "round" | "bevel"
+}
+
+/** A parsed document: intrinsic size (viewBox/width-height) plus the flat draw list. */
+export type SvgDocument = {
+  width: number
+  height: number
+  draws: SvgDraw[]
+}
+
+/**
+ * Parses an SVG document string (an imported `.svg` asset, an icon library's
+ * string export, or a template literal) into plain draw data: geometry
+ * flattened to absolute path data with every transform baked in, paints
+ * resolved to colors or gradients. Render it by wrapping the draws in a view
+ * that fits the document's coordinate space into its box:
+ *
+ *     let doc = createMemo(() => parseSvg(src))
+ *     <view repaintBoundary viewBox={[doc().width, doc().height]} width={48} height={48}>
+ *       {doc().draws.map((draw) => <d-path {...draw} />)}
+ *     </view>
+ *
+ * The plain repaintBoundary is the recommended default: the parsed subtree is
+ * static, so it never re-records alongside changing siblings. Each `<d-path>`
+ * hit-tests its exact outline; when the document should act as ONE hit target
+ * (the usual icon case), add `pointerEvents="all"` to the wrapper - the box
+ * then matches as a whole and the per-path outline tests are skipped.
+ *
+ * `opts.color` drives `currentColor` in the document (any CSS color string),
+ * which is how monochrome icon sets (Lucide, Feather, Heroicons, ...) get
+ * recolored; explicit fills/strokes still win. Parsing is synchronous and
+ * sandboxed (no network, file, or data-URI access) and throws on an invalid
+ * document. Parse once per document under a memo, not per instance.
+ *
+ * Unsupported and skipped: clipPath, masks, filters, patterns, embedded
+ * images, and SVG text.
+ */
+export function parseSvg(src: string, opts?: { color?: string }): SvgDocument {
+  if (opts?.color != null) return fluxParseSvg(src, { color: parseColor(opts.color) })
+  return fluxParseSvg(src)
+}

package/src/types.d.ts

@@ -2,8 +2,12 @@
 /// <reference path="./runtime-modules.d.ts" />
 
 import type { Gradient } from "./color"
+import type { ProgramId, TextureId } from "flux:gpu"
+import type { TextInputHints } from "flux:rendertree"
 import type { Element } from "solid-js"
 
+export type { TextInputHints }
+
 // The "srt:*" lattice runner modules are declared in ./runtime-modules.d.ts
 // (referenced above) - ambient `declare module` only reaches consumers from a
 // non-module declaration file, and this file is a module.
@@ -173,6 +177,9 @@ export interface TransformProps {
   // Perspective viewing distance in pixels (CSS `perspective`). Enables the 3D
   // depth for rotateY; larger values give a shallower effect.
   perspective?: number
+  // Subtree translation in pixels, composited post-layout (no re-record, no
+  // layout). Unlike the draw primitives' detached-only x/y, these exist on
+  // layout views too - the drag/thumb idiom animates them freely.
   x?: number
   y?: number
   originX?: OriginX
@@ -235,6 +242,10 @@ export interface WheelEvent extends PointerEvent {
 // layout-dependent value ("a", "!", "Enter", "ArrowLeft"); `code` is the
 // physical, layout-independent key position ("KeyA", "Digit1", "NumpadEnter").
 // Printable characters for text entry arrive via onTextInput, not here.
+// Routing: keydown/keyup dispatch along the focused node's ancestor chain,
+// leaf->root, always ending at the window root; with nothing focused they go
+// to the window root alone. <window onKeyDown> is therefore the app-global
+// shortcut point.
 export interface KeyEvent {
   key: string
   code: string
@@ -243,6 +254,16 @@ export interface KeyEvent {
   ctrlKey: boolean
   altKey: boolean
   metaKey: boolean
+  /** Node id whose handler is currently running (bubbling changes it per call). */
+  currentTarget: number
+  /** Node id the dispatch started at: the focused node, or the window root when nothing is focused. */
+  target: number
+  /**
+   * Stops the event from reaching ancestor handlers. A component that consumed
+   * the key calls this so enclosing handlers (and app-global shortcuts on the
+   * window) do not also act on it.
+   */
+  stopPropagation: () => void
 }
 
 export interface TextEvent {
@@ -261,14 +282,70 @@ export interface PointerProps {
   onKeyDown?: (event: KeyEvent) => void
   onKeyUp?: (event: KeyEvent) => void
   onTextInput?: (event: TextEvent) => void
+  /**
+   * IME behavior for this node's text-entry sessions (keyboard type,
+   * capitalization, autocorrect); read when a session starts. Without it the
+   * OS defaults apply - notably sentence auto-capitalization, which
+   * identifier fields and terminals want off:
+   * `textInputHints={{ capitalize: "none", autocorrect: false }}`.
+   */
+  textInputHints?: TextInputHints
+  /**
+   * Declares the element a candidate for focus navigation, enumerable via
+   * getFocusables(). Candidacy only - it changes no behavior by itself; focus
+   * still moves through setFocus.
+   */
+  focusable?: boolean
   pointerEvents?: "auto" | "none" | "all"
 }
 
-interface Position {
+/**
+ * Detached-only geometry, in paint-space pixels. Never affects layout: these
+ * props exist only on the d-* forms, where there is no layout box and the
+ * element owns its geometry. The layout forms of the draw primitives derive
+ * their geometry from the layout box instead (size it with width/height).
+ */
+export interface PositionProps {
+  /** Horizontal offset of the drawn geometry; defaults to 0. */
   x?: number
+  /** Vertical offset of the drawn geometry; defaults to 0. */
   y?: number
 }
 
+/** See {@link PositionProps}: detached-only, never affects layout. */
+export interface GeometryProps extends PositionProps {
+  /** Drawn width; defaults to the inherited box width. */
+  w?: number
+  /** Drawn height; defaults to the inherited box height. */
+  h?: number
+}
+
+/** See {@link PositionProps}: detached-only, never affects layout. */
+export interface OvalGeometryProps extends PositionProps {
+  /** Bounding box width of the ellipse (not a radius); defaults to the inherited box. */
+  w?: number
+  /** Bounding box height of the ellipse (not a radius); defaults to the inherited box. */
+  h?: number
+}
+
+/** See {@link PositionProps}: detached-only, never affects layout. */
+export interface TextGeometryProps extends PositionProps {
+  // Shaping (wrap) width. Detached text wraps at the inherited ancestor size
+  // by default; set w for an unwrapped natural line or an explicit wrap width.
+  w?: number
+  // Reported-bounds height only; paragraph height always falls out of the text.
+  h?: number
+}
+
+/** See {@link PositionProps}: detached-only, never affects layout. */
+export interface LineGeometryProps {
+  /** Endpoints default to spanning the box: (0,0) to (box width, box height). */
+  x1?: number
+  y1?: number
+  x2?: number
+  y2?: number
+}
+
 // Primitives
 
 export interface WindowProps extends LayoutProps, PointerProps {
@@ -298,7 +375,7 @@ export interface WindowProps extends LayoutProps, PointerProps {
  */
 export interface WindowShaderProps {
   /** Linked program handle from linkProgram. */
-  program: number
+  program: ProgramId
   /**
    * Uniforms filled by name, paced to the next real repaint. A number drives
    * a scalar (`float`/`int`); a flat number array drives the declared GLSL
@@ -306,7 +383,7 @@ export interface WindowShaderProps {
    */
   params?: Record<string, number | number[]>
   /** Extra sampler2D inputs: uniform name to texture id. */
-  textures?: Record<string, number>
+  textures?: Record<string, TextureId>
   /** Vertices drawn (attributeless triangles). Default 3, the covering triangle. */
   vertexCount?: number
   /**
@@ -320,9 +397,23 @@ export interface WindowShaderProps {
   previous?: boolean
 }
 
-export interface ViewProps extends LayoutProps, TransformProps, PointerProps {
+// Everything a view offers besides layout: d-view uses this directly (a
+// detached view has no taffy presence, so layout props would be rejected at
+// runtime); the layout `view` adds LayoutProps below.
+export interface ViewOwnProps extends TransformProps, PointerProps {
   children?: Children
   trace?: boolean
+  /**
+   * Design-space size `[w, h]` for the children: content drawn in that
+   * coordinate space is uniformly scaled to fit and centered in the element's
+   * box (SVG's default preserveAspectRatio, generalized). A pure fit
+   * transform - it never sizes the element, so give the box its size with
+   * layout props. Composed innermost: the transform props still operate in
+   * box space, and pointer events on children arrive in design coordinates.
+   * The natural wrapper for parseSvg draws, or any d-* subtree authored in
+   * fixed design units.
+   */
+  viewBox?: [number, number]
   /**
    * Corner radii for the clip applied when overflow is non-visible (hidden,
    * clip, scroll on both axes). A single number rounds all four corners; an
@@ -349,54 +440,38 @@ export interface ViewProps extends LayoutProps, TransformProps, PointerProps {
   repaintBoundary?: boolean | "snapshot" | "snapshot-no-aa"
 }
 
+export interface ViewProps extends ViewOwnProps, LayoutProps {}
+
 // draw primitives
 
-export interface RectProps extends Position, PaintProps, PointerProps {
-  w?: number
-  h?: number
-  // Corner radius. A single number applies to all four corners; an array is
-  // [top-left, top-right, bottom-right, bottom-left] (CSS border-radius order).
+// A stroked rect paints inside its box, like a CSS border: the stroke's outer
+// edge sits on the box edge rather than straddling it, so nothing bleeds past
+// the box for a clip to cut. `path` and `line` strokes stay centered on their
+// geometry - there the geometry is the stroke, not a box.
+export interface RectProps extends PaintProps, PointerProps {
+  // Corner radius, measured on the box (the stroke's outer edge). A single
+  // number applies to all four corners; an array is [top-left, top-right,
+  // bottom-right, bottom-left] (CSS border-radius order).
   radius?: number | [number, number, number, number]
 }
 
-export interface OvalProps extends Position, PaintProps, PointerProps {
-  /** Bounding box width of the ellipse (not a radius); defaults to the layout box. */
-  w?: number
-  /** Bounding box height of the ellipse (not a radius); defaults to the layout box. */
-  h?: number
-}
+// Strokes paint inside the box, same as `RectProps`.
+export interface OvalProps extends PaintProps, PointerProps {}
 
 export interface LineProps extends PaintProps, PointerProps {
-  x1?: number
-  y1?: number
-  x2?: number
-  y2?: number
   /** Dash pattern in local units: the drawn segment length. Both onLength and offLength must be set to dash; with either unset the line is solid. */
   onLength?: number
   /** Dash pattern in local units: the gap length. Both onLength and offLength must be set to dash; with either unset the line is solid. */
   offLength?: number
 }
 
-export interface PathProps extends Position, PaintProps, PointerProps {
+export interface PathProps extends PaintProps, PointerProps {
   d?: string
   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 Position, PaintProps, PointerProps {
+export interface TextProps extends PaintProps, PointerProps {
   children?: Children
-  // Shaping (wrap) width. Detached text wraps at the inherited ancestor size
-  // by default; set w for an unwrapped natural line or an explicit wrap width.
-  w?: number
-  // Reported-bounds height only; paragraph height always falls out of the text.
-  h?: number
   fontFamily?: "sans" | "serif" | "mono" | (string & {})
   fontSize?: number
   /**
@@ -420,8 +495,8 @@ export interface TextProps extends Position, PaintProps, PointerProps {
  * Texture alpha is premultiplied, so additive modes need no manual
  * premultiplication.
  */
-export interface TextureProps extends Position, PaintProps, PointerProps {
-  src?: number
+export interface TextureProps extends PaintProps, PointerProps {
+  src?: TextureId
   /**
    * How the texture's pixels map to the element box (CSS object-fit).
    * "fill" (default) stretches; "cover" and "none" crop; "contain" and
@@ -430,8 +505,6 @@ export interface TextureProps extends Position, PaintProps, PointerProps {
    * bars and "cover" cropped edges still hit-test as part of the element.
    */
   fit?: "fill" | "cover" | "contain" | "none" | "scale-down"
-  w?: number
-  h?: number
   srcX?: number
   srcY?: number
   srcW?: number

package/src/window.ts

@@ -3,8 +3,8 @@ import { requestFrame } from "flux:rendertree"
 import { renderFrame } from "srt:render"
 import { on, once } from "srt:events"
 import { exit } from "srt:app"
-import { getEventHandler, getFocusedNodeId, setFocus } from "./core"
-import { scanForOrphans } from "./renderer"
+import { getEventHandler, focusedNode, setFocus, activateTextInput, setInterestRoot } from "./core"
+import { scanForOrphans, getNodePath } from "./renderer"
 
 /**
  * Leaves the current app, unconditionally: back to the launcher in a dev
@@ -228,7 +228,10 @@ export function onBack(fn: (e: BackEvent) => void) {
 
 // ------ Window ----------------
 
-export function attachWindow(_nodeId: number) {
+export function attachWindow(nodeId: number) {
+  // The root carries the ambient move-interest bit for global onPointerMove
+  // subscribers (it is on every hit path); see core.setInterestRoot.
+  setInterestRoot(nodeId)
   let unsubscribe: () => void = null!
   let unsubDown: () => void = null!
   let unsubUp: () => void = null!
@@ -304,11 +307,16 @@ export function attachWindow(_nodeId: number) {
 
     unsubDown = on("pointerDown", (raw: RawPointer) => {
       bubble(raw, "onPointerDown")
-      // Outside-tap blur. Read focus AFTER per-node handlers so a tap that
-      // moves focus to a new node is not immediately blurred again.
-      let focused = getFocusedNodeId()
+      // Read focus AFTER per-node handlers so a tap that moves focus to a new
+      // node is not immediately blurred again.
+      let focused = focusedNode()
       if (focused != null && !raw.targets.includes(focused)) {
+        // Outside-tap blur.
         setFocus(null)
+      } else if (focused != null) {
+        // A tap on the focused node is the interaction that lets a pending
+        // text session raise the on-screen keyboard.
+        activateTextInput()
       }
     })
 
@@ -332,19 +340,31 @@ export function attachWindow(_nodeId: number) {
       bubble(raw, "onWheel")
     })
 
-    unsubKeyDown = on("keydown", (e: any) => {
-      let id = getFocusedNodeId()
-      if (id != null) {
-        getEventHandler(id, "onKeyDown")?.(e)
+    // Key events dispatch along the focused node's ancestor chain, leaf->root
+    // (the pointer bubbling contract), so a container hears keys from focused
+    // descendants and the window root hears everything: <window onKeyDown> is
+    // the app-global shortcut point. With nothing focused the path is the
+    // window root alone - key events are never dropped. The path is resolved
+    // at dispatch time from current focus (nothing to freeze: keyup follows
+    // focus, as in the DOM).
+    let dispatchKey = (raw: any, handler: string) => {
+      let target = focusedNode() ?? nodeId
+      let stopped = false
+      let e = { ...raw, target, stopPropagation: () => (stopped = true) }
+      let path = getNodePath(target)
+      // A focused node detached this tick has no chain to the root; the
+      // window root must still hear the key.
+      if (path[path.length - 1] !== nodeId) path.push(nodeId)
+      for (let id of path) {
+        e.currentTarget = id
+        getEventHandler(id, handler)?.(e)
+        if (stopped) break
       }
-    })
+    }
 
-    unsubKeyUp = on("keyup", (e: any) => {
-      let id = getFocusedNodeId()
-      if (id != null) {
-        getEventHandler(id, "onKeyUp")?.(e)
-      }
-    })
+    unsubKeyDown = on("keydown", (raw: any) => dispatchKey(raw, "onKeyDown"))
+
+    unsubKeyUp = on("keyup", (raw: any) => dispatchKey(raw, "onKeyUp"))
 
     unsubBack = on("back", () => {
       let prevented = false
@@ -361,7 +381,7 @@ export function attachWindow(_nodeId: number) {
     })
 
     unsubTextInput = on("textInput", (e: any) => {
-      let id = getFocusedNodeId()
+      let id = focusedNode()
       if (id != null) {
         getEventHandler(id, "onTextInput")?.(e)
       }
@@ -386,6 +406,7 @@ export function attachWindow(_nodeId: number) {
   })
 
   onCleanup(() => {
+    setInterestRoot(null)
     if (unsubscribe) unsubscribe()
     if (unsubDown) unsubDown()
     if (unsubUp) unsubUp()

package/examples/svg.tsx

@@ -1,49 +0,0 @@
-// <svg> draws a whole SVG *document* passed as a STRING in the `src` prop. This
-// is not HTML: there are no per-element <rect>/<circle>/<path> JSX children to
-// nest. You hand it the SVG source text and usvg parses it (CSS, transforms,
-// defs/use, gradients, clips) into a flat path tree the element renders. So an
-// SVG is a value (a string you import, fetch, or inline), not markup you author
-// inline with JSX.
-//
-// width/height set the drawn box (percentages work too); a multi-color document
-// keeps each shape's own fill, while a monochrome icon using stroke/fill
-// "currentColor" is recolored by the host `color` prop. For per-shape authored
-// or animated vector art, compose <d-path> instead of this document layer.
-//
-// Being a vector, an <svg> is resolution-independent: it stays crisp at any
-// drawn size x displayScale(). Prefer it over a raster <texture> (image.tsx)
-// whenever the render size is fluid or the display DPI varies.
-//
-// This is how you use an existing icon library (Lucide, Heroicons, Feather,
-// Material, etc.): those ship SVG source, so import/inline the icon string and
-// hand it to `src`. The `currentColor` convention they follow means the `color`
-// prop recolors them, exactly as `currentColor` would in a browser.
-import { render } from "@solidrt/core"
-
-// Multi-color document: each shape carries its own fill, no host color needed.
-const HOUSE = `
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <rect x="20" y="45" width="60" height="45" fill="#457b9d"/>
-  <path d="M10 50 L50 15 L90 50 Z" fill="#e63946"/>
-  <rect x="42" y="62" width="16" height="28" fill="#f1faee"/>
-  <circle cx="50" cy="35" r="6" fill="#ffd166"/>
-</svg>`
-
-// Monochrome icon (Lucide arrow-right) drawn with currentColor, recolored below.
-const ARROW = `
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-     stroke-linecap="round" stroke-linejoin="round">
-  <path d="M5 12h14"/>
-  <path d="M12 5l7 7-7 7"/>
-</svg>`
-
-function App() {
-  return (
-    <window justifyContent="center" alignItems="center" flexDirection="row" gap={32}>
-      <svg width={120} height={120} src={HOUSE} />
-      <svg width={120} height={120} src={ARROW} color="#4f8cff" />
-    </window>
-  )
-}
-
-render(() => <App />)