@solidrt/core 0.0.40 → 0.0.42

package/examples/gpu-texture-blend.tsx

@@ -14,35 +14,36 @@
 // pass paints opaque black outside its ring, so source-over hides the base
 // entirely while plus adds only the lit pixels - black contributes nothing.
 import { render, onFrame, createSignal } from "@solidrt/core"
-import { createShader } from "@solidrt/core/gpu"
+import { createShaderTexture, glsl } from "@solidrt/core/gpu"
 
 let SIZE = 360
 
 // Base pass: a static gradient with a soft vignette. Nothing drives it, so it
 // renders once at creation and then holds - shaders re-render on params writes.
-let BASE = `
-void main() {
-  vec2 uv = vUV;
-  float v = 1.0 - length(uv - 0.5) * 1.1;
-  vec3 col = mix(vec3(0.04, 0.05, 0.14), vec3(0.15, 0.10, 0.42), uv.y);
-  fragColor = vec4(col * v, 1.0);
-}
+let BASE = glsl`
+  void main() {
+    vec2 uv = vUV;
+    float v = 1.0 - length(uv - 0.5) * 1.1;
+    vec3 col = mix(vec3(0.04, 0.05, 0.14), vec3(0.15, 0.10, 0.42), uv.y);
+    fragColor = vec4(col * v, 1.0);
+  }
 `
 
 // Additive pass: a breathing ring, black everywhere else.
-let GLOW = `
-void main() {
-  vec2 uv = vUV;
-  float r = length(uv - 0.5);
-  float radius = 0.28 + 0.04 * sin(iTime * 2.0);
-  float ring = smoothstep(0.06, 0.0, abs(r - radius));
-  fragColor = vec4(vec3(1.0, 0.55, 0.15) * ring, 1.0);
-}
+let GLOW = glsl`
+  uniform float uTime;
+  void main() {
+    vec2 uv = vUV;
+    float r = length(uv - 0.5);
+    float radius = 0.28 + 0.04 * sin(uTime * 2.0);
+    float ring = smoothstep(0.06, 0.0, abs(r - radius));
+    fragColor = vec4(vec3(1.0, 0.55, 0.15) * ring, 1.0);
+  }
 `
 
 function App() {
-  let baseId = createShader(BASE, SIZE, SIZE)
-  let glowId = createShader(GLOW, SIZE, SIZE, { iTime: 0 })
+  let baseId = createShaderTexture(BASE, SIZE, SIZE, null, { label: "base" })
+  let glowId = createShaderTexture(GLOW, SIZE, SIZE, { uTime: 0 }, { label: "glow" })
   let [time, setTime] = createSignal(0)
   let [mode, setMode] = createSignal<"plus" | "source-over">("plus")
   onFrame((tick) => setTime(tick / 1000))
@@ -67,7 +68,7 @@ function App() {
           width={SIZE}
           height={SIZE}
           blendMode={mode()}
-          params={{ iTime: time() }}
+          params={{ uTime: time() }}
         />
       </view>
       <text fontSize={14} color="#888">blendMode "{mode()}" - click to toggle</text>

package/examples/inline-image.tsx

@@ -15,7 +15,7 @@ import bytes from "./logo.png" with { type: "binary" }
 
 function App() {
   let { data, width, height } = decodeImage(bytes)
-  let id = createTexture(data, width, height)
+  let id = createTexture(data, width, height, { label: "logo" })
 
   return (
     <window alignItems="center" justifyContent="center">

package/examples/parse-svg.tsx

@@ -0,0 +1,94 @@
+// parseSvg turns a whole SVG *document string* into plain draw data. This is
+// not HTML: there are no <rect>/<circle>/<path> JSX children to nest. You hand
+// it the source text (a string you import, fetch, or inline) and get back the
+// document's intrinsic size plus a flat list of draws whose keys match the
+// path element's props - so rendering is a map to <d-path>, wrapped in a view
+// whose `viewBox` fits the document's coordinate space into the box.
+//
+// The point of draws-as-data over an opaque document element: every shape is
+// a real node you own. Below, the house highlights the shape under the
+// pointer - exact-geometry hit testing (the path outline, not its box), with
+// the recolor a per-node prop override that never re-parses the document.
+// The same structure gives per-shape animation (wrap a subset in <d-view>),
+// layer filtering, or interleaving your own JSX between document layers.
+//
+// A multi-color document keeps each shape's own fill; a monochrome icon
+// using stroke/fill "currentColor" is recolored by the `color` option,
+// exactly as `currentColor` would be in a browser. That is how you use an
+// existing icon library (Lucide, Heroicons, Feather, Material, ...): they
+// ship SVG source strings following the currentColor convention. Parse once
+// per document under a memo (or at module scope for a static asset).
+//
+// Being vectors, the draws are resolution-independent: crisp at any drawn
+// size x displayScale(). Prefer them over a raster <texture> (image.tsx)
+// whenever the render size is fluid or the display DPI varies.
+import { render, parseSvg, svg, createMemo, createSignal, For } from "@solidrt/core"
+
+// Multi-color document: each shape carries its own fill. The `svg` tag returns
+// the string unchanged; it exists so editors highlight the markup (like `glsl`
+// for shader sources).
+const HOUSE = svg`
+<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`
+<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>`
+
+// The payoff over the old document-element approach: each draw is its own
+// node, so the shape under the pointer lights up - hit on the true outline
+// (hovering the sky inside the roof triangle's box does nothing), recolor
+// without a re-parse.
+function InteractiveHouse() {
+  let doc = createMemo(() => parseSvg(HOUSE))
+  let [hot, setHot] = createSignal(-1)
+  // repaintBoundary still pays off on an interactive document: the subtree
+  // re-records only when a draw inside it changes (hover), never because a
+  // sibling elsewhere on the screen did.
+  return (
+    <view repaintBoundary width={240} height={240} viewBox={[doc().width, doc().height]}>
+      <For each={doc().draws}>
+        {(draw, i) => (
+          <d-path
+            {...draw}
+            color={hot() === i() ? "#ffd166" : draw.color}
+            onPointerEnter={() => setHot(i())}
+            onPointerLeave={() => setHot((v) => (v === i() ? -1 : v))}
+          />
+        )}
+      </For>
+    </view>
+  )
+}
+
+// The plain pattern: memoized parse, viewBox-fitted box, draws mapped to
+// <d-path>, and a plain repaintBoundary (the DL-reuse tier, not "snapshot")
+// so the static subtree never re-records alongside animating siblings. The
+// components-package Icon is this plus theming.
+function Svg(props: { src: string; size: number; color?: string }) {
+  let doc = createMemo(() => parseSvg(props.src, { color: props.color }))
+  return (
+    <view repaintBoundary width={props.size} height={props.size} viewBox={[doc().width, doc().height]}>
+      <For each={doc().draws}>{(draw) => <d-path {...draw} />}</For>
+    </view>
+  )
+}
+
+function App() {
+  return (
+    <window justifyContent="center" alignItems="center" flexDirection="row" gap={32}>
+      <InteractiveHouse />
+      <Svg size={120} src={ARROW} color="#4f8cff" />
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/text-import.tsx

@@ -7,8 +7,8 @@
 //
 // This example shows only the text import itself: it reports the imported
 // file's size and first line. Shader sources are the motivating case - the
-// string is exactly what gpu-shader.tsx passes to createShader, moved out of
-// the .tsx so it can be edited as GLSL. Inlining trades update granularity for
+// string is exactly what gpu-shader.tsx passes to createShaderTexture, moved
+// out of the .tsx so it can be edited as GLSL. Inlining trades update granularity for
 // zero I/O, so keep big or streamable files in assets/ and read them at
 // runtime instead.
 import { render } from "@solidrt/core"

package/examples/wave.glsl

@@ -1,11 +1,13 @@
 // wave.glsl - animated scanline
 //
 // A plain fragment body in the injected-preamble dialect: no #version line, so
-// createShader prepends vUV / iResolution / iTime / fragColor. Living in its
-// own file it stays editable as GLSL instead of as a template literal.
+// createShaderTexture prepends vUV / iResolution / fragColor. The time uniform
+// is this file's own declaration, driven by the app through params. Living in
+// its own file it stays editable as GLSL instead of as a template literal.
+uniform float uTime;
 void main() {
   vec2 uv = vUV;
-  float wave = sin(uv.x * 12.0 + iTime * 2.0) * 0.06;
+  float wave = sin(uv.x * 12.0 + uTime * 2.0) * 0.06;
   float d = abs(uv.y - 0.5 - wave);
   float line = smoothstep(0.05, 0.0, d);
   vec3 col = mix(vec3(0.05, 0.07, 0.12), vec3(0.2, 0.8, 1.0), line);

package/examples/window-shader-history.tsx

@@ -3,37 +3,37 @@
 // one-frame history. Here it draws a motion echo behind the orbiting square;
 // click to toggle the echo term off and compare with the plain frame.
 import { render, onFrame, createSignal } from "@solidrt/core"
-import { compileShader, destroyShader, linkProgram } from "@solidrt/core/gpu"
+import { compileShader, destroyShader, glsl, linkProgram } from "@solidrt/core/gpu"
 
-let VERTEX = `#version 300 es
-precision highp float;
-out vec2 vUV;
-void main() {
-  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
-  // uSource/uPrevious are top-left origin; flip v so the frame lands upright.
-  vUV = vec2(p.x, 1.0 - p.y);
-  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
-}
+let VERTEX = glsl`#version 300 es
+  precision highp float;
+  out vec2 vUV;
+  void main() {
+    vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+    // uSource/uPrevious are top-left origin; flip v so the frame lands upright.
+    vUV = vec2(p.x, 1.0 - p.y);
+    gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+  }
 `
 
-let ECHO = `
-uniform sampler2D uSource;
-uniform sampler2D uPrevious;
-uniform float uEcho;
-in vec2 vUV;
-void main() {
-  vec4 cur = texture(uSource, vUV);
-  vec4 prev = texture(uPrevious, vUV);
-  // Brightest of the current frame and the decayed previous one: motion
-  // leaves a one-frame ghost trailing it.
-  fragColor = max(cur, prev * uEcho);
-}
+let ECHO = glsl`
+  uniform sampler2D uSource;
+  uniform sampler2D uPrevious;
+  uniform float uEcho;
+  in vec2 vUV;
+  void main() {
+    vec4 cur = texture(uSource, vUV);
+    vec4 prev = texture(uPrevious, vUV);
+    // Brightest of the current frame and the decayed previous one: motion
+    // leaves a one-frame ghost trailing it.
+    fragColor = max(cur, prev * uEcho);
+  }
 `
 
 function App() {
   let vs = compileShader("vertex", VERTEX)
   let fs = compileShader("fragment", ECHO, { header: true })
-  let echoProgram = linkProgram(vs, fs)
+  let echoProgram = linkProgram(vs, fs, { label: "echo" })
   destroyShader(vs)
   destroyShader(fs)
 

package/examples/window-shader.tsx

@@ -9,38 +9,40 @@
 // is an identity pass, which must be indistinguishable from no shader at all
 // (the orientation/half-pixel regression check from the plan).
 import { render, onFrame, createSignal } from "@solidrt/core"
-import { compileShader, destroyShader, linkProgram } from "@solidrt/core/gpu"
+import { compileShader, destroyShader, glsl, linkProgram } from "@solidrt/core/gpu"
 
-let VERTEX = `#version 300 es
-precision highp float;
-out vec2 vUV;
-void main() {
-  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
-  // uSource is top-left origin; flip v so the frame lands upright on the
-  // window (the one flip of the frame path, done here in the vertex stage).
-  vUV = vec2(p.x, 1.0 - p.y);
-  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
-}
+let VERTEX = glsl`#version 300 es
+  precision highp float;
+  out vec2 vUV;
+  void main() {
+    vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+    // uSource is top-left origin; flip v so the frame lands upright on the
+    // window (the one flip of the frame path, done here in the vertex stage).
+    vUV = vec2(p.x, 1.0 - p.y);
+    gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+  }
 `
 
-// { header: true } declares #version, precision, iResolution/iTime and
-// fragColor; uSource, vUV, and the app's own uniforms are declared here.
-let WARP = `
-uniform sampler2D uSource;
-uniform float uAmount;
-in vec2 vUV;
-void main() {
-  vec2 uv = vUV;
-  uv.x += sin(uv.y * 24.0 + iTime * 3.0) * 0.012 * uAmount;
-  uv.y += sin(uv.x * 18.0 - iTime * 2.0) * 0.012 * uAmount;
-  fragColor = texture(uSource, uv);
-}
+// { header: true } declares #version, precision, iResolution and fragColor;
+// uSource, vUV, and the app's own uniforms - the time included - are
+// declared here.
+let WARP = glsl`
+  uniform sampler2D uSource;
+  uniform float uAmount;
+  uniform float uTime;
+  in vec2 vUV;
+  void main() {
+    vec2 uv = vUV;
+    uv.x += sin(uv.y * 24.0 + uTime * 3.0) * 0.012 * uAmount;
+    uv.y += sin(uv.x * 18.0 - uTime * 2.0) * 0.012 * uAmount;
+    fragColor = texture(uSource, uv);
+  }
 `
 
 function App() {
   let vs = compileShader("vertex", VERTEX)
   let fs = compileShader("fragment", WARP, { header: true })
-  let warp = linkProgram(vs, fs)
+  let warp = linkProgram(vs, fs, { label: "warp" })
   destroyShader(vs)
   destroyShader(fs)
 
@@ -50,7 +52,7 @@ function App() {
 
   return (
     <window
-      shader={{ program: warp, params: { iTime: time(), uAmount: amount() } }}
+      shader={{ program: warp, params: { uTime: time(), uAmount: amount() } }}
       onPointerDown={() => setAmount(a => (a > 0 ? 0 : 1))}
       flexDirection="column"
       gap={12}
@@ -59,9 +61,9 @@ function App() {
     >
       <text fontSize={28} color="#222">Window shader</text>
       <view flexDirection="row" gap={12}>
-        <rect w={90} h={90} radius={12} color="#0077ff" />
-        <rect w={90} h={90} radius={12} color="#ff6a00" />
-        <rect w={90} h={90} radius={12} color="#00c46a" />
+        <rect width={90} height={90} radius={12} color="#0077ff" />
+        <rect width={90} height={90} radius={12} color="#ff6a00" />
+        <rect width={90} height={90} radius={12} color="#00c46a" />
       </view>
       <text fontSize={14} color="#666">Click to toggle warp (identity at 0)</text>
     </window>

package/jsx-runtime.d.ts

@@ -2,12 +2,18 @@ import type {
   WindowProps,
   RectProps,
   OvalProps,
+  LineProps,
   PathProps,
-  SvgProps,
   ViewProps,
+  ViewOwnProps,
   TextProps,
   TextureProps,
   LayoutProps,
+  PositionProps,
+  GeometryProps,
+  OvalGeometryProps,
+  TextGeometryProps,
+  LineGeometryProps,
   Element as CoreElement,
   ElementChildrenAttribute as CoreElementChildrenAttribute
 } from "./src/types"
@@ -30,21 +36,23 @@ export namespace JSX {
     ref?: Ref<{ id: number }> | undefined
   }
 
+  // Layout forms compose LayoutProps and derive their geometry from the
+  // layout box; d-* forms compose the paint-space geometry props instead.
   interface IntrinsicElements {
     window: WindowProps & ElementRef
     view: ViewProps & ElementRef
     text: TextProps & LayoutProps & ElementRef
     rect: RectProps & LayoutProps & ElementRef
     oval: OvalProps & LayoutProps & ElementRef
+    line: LineProps & LayoutProps & ElementRef
     path: PathProps & LayoutProps & ElementRef
-    svg: SvgProps & LayoutProps & ElementRef
     texture: TextureProps & LayoutProps & ElementRef
-    "d-view": ViewProps & ElementRef
-    "d-rect": RectProps & ElementRef
-    "d-oval": OvalProps & ElementRef
-    "d-path": PathProps & ElementRef
-    "d-svg": SvgProps & ElementRef
-    "d-texture": TextureProps & ElementRef
-    "d-text": TextProps & ElementRef
+    "d-view": ViewOwnProps & ElementRef
+    "d-rect": RectProps & GeometryProps & ElementRef
+    "d-oval": OvalProps & OvalGeometryProps & ElementRef
+    "d-line": LineProps & LineGeometryProps & ElementRef
+    "d-path": PathProps & PositionProps & ElementRef
+    "d-texture": TextureProps & GeometryProps & ElementRef
+    "d-text": TextProps & TextGeometryProps & ElementRef
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -27,7 +27,7 @@
     "colord": "^2.9.3"
   },
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.40"
+    "@solidrt/flux-types": "0.0.42"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.26",

package/src/camera.ts

@@ -8,6 +8,7 @@
 
 import { createSignal, onCleanup } from "@solidjs/signals"
 import { listCameras, open } from "flux:camera"
+import type { TextureId } from "flux:gpu"
 import { on } from "srt:events"
 
 export type CameraFacing = "front" | "back" | "unknown"
@@ -41,8 +42,11 @@ let devicesAccessor: (() => CameraInfo[]) | undefined
 
 /**
  * Current camera list as a reactive accessor: re-enumerates on hotplug. Also
- * initializes the camera subsystem (required before hotplug events fire).
- * App-lifetime: there is one camera subsystem, so no cleanup is needed.
+ * kicks off the camera subsystem (required before hotplug events fire), which
+ * starts asynchronously: the list is empty until the initial device events
+ * arrive - moments later normally, never if the platform's capture backend is
+ * wedged. App-lifetime: there is one camera subsystem, so no cleanup is
+ * needed.
  *
  * Coverage caveat (SDL 3.4.8): only Android delivers both add and remove. On
  * Linux you get add events but not remove (removal is broken upstream); on
@@ -70,7 +74,7 @@ export function onDeviceChange(callback: (event: { added: boolean }) => void): (
 /** A live camera as reactive accessors. */
 export type CameraStream = {
   /** Texture id once the stream is up, undefined while opening; render with <texture src={...}>. */
-  texture(): number | undefined
+  texture(): TextureId | undefined
   /** Actual stream size, undefined while opening. */
   width(): number | undefined
   height(): number | undefined
@@ -87,7 +91,7 @@ export type CameraStream = {
  * call open() from "flux:camera" directly.
  */
 export function createCamera(options: CameraOptions = {}): CameraStream {
-  let [texture, setTexture] = createSignal<number | undefined>(undefined)
+  let [texture, setTexture] = createSignal<TextureId | undefined>(undefined)
   let [width, setWidth] = createSignal<number | undefined>(undefined)
   let [height, setHeight] = createSignal<number | undefined>(undefined)
   let [barcode, setBarcode] = createSignal<BarcodeResult | undefined>(undefined)

package/src/color.ts

@@ -48,9 +48,21 @@ type Stop = { offset: number; color: number }
 // `pct()` length vocabulary used by layout and transformOrigin: a gradient's
 // position is naturally a fraction (like a stop offset), so 0..1 reads cleaner
 // than pct(0)..pct(100). Do not "unify" them onto pct().
+//
+// The optional absolute-space fields are produced by parseSvg, never by the
+// factories: `units: "absolute"` switches the coordinates to the document's
+// drawing space, `spread` is the SVG spreadMethod (default pad), and
+// `transform` an SVG matrix(a b c d e f) sextet mapping the gradient's
+// coordinates into that space (default identity).
+type AbsoluteSpace = {
+  units?: "absolute"
+  spread?: "pad" | "reflect" | "repeat"
+  transform?: [number, number, number, number, number, number]
+}
+
 export type Gradient =
-  | { readonly __gradient: "linear"; x0: number; y0: number; x1: number; y1: number; stops: Stop[] }
-  | { readonly __gradient: "radial"; cx: number; cy: number; r: number; circle: boolean; stops: Stop[] }
+  | ({ readonly __gradient: "linear"; x0: number; y0: number; x1: number; y1: number; stops: Stop[] } & AbsoluteSpace)
+  | ({ readonly __gradient: "radial"; cx: number; cy: number; r: number; circle?: boolean; stops: Stop[] } & AbsoluteSpace)
 
 /**
  * A linear gradient between two points, each given in 0..1 of the element's box