@solidrt/core 0.0.39 → 0.0.41

package/src/runtime-modules.d.ts

@@ -8,9 +8,25 @@ declare module "*.svg" {
   export default content
 }
 
+// Text asset imports: `import src from "./effect.glsl" with { type: "text" }`.
+// The bundler inlines the file's UTF-8 contents as a string literal, so a
+// shader source travels in the bundle and needs no runtime read.
+declare module "*.glsl" {
+  const content: string
+  export default content
+}
+declare module "*.vert" {
+  const content: string
+  export default content
+}
+declare module "*.frag" {
+  const content: string
+  export default content
+}
+
 // Binary asset imports: `import data from "./pic.png" with { type: "binary" }`.
 // The bundler inlines the file's bytes as a Uint8Array (see packages/cli
-// bundler `binaryImport`); feed it straight into createImage/decodeImage.
+// bundler `inlineImport`); feed it straight into createImage/decodeImage.
 declare module "*.png" {
   const bytes: Uint8Array
   export default bytes
@@ -89,8 +105,8 @@ declare module "srt:apps" {
    * installs nothing and leaves it alone. `size` is the version's
    * manifest-declared size (bundle plus assets) - claimed rather than walked,
    * so that listing stays cheap; `info()` reports what is actually on disk.
-   * `icon` is the manifest-declared icon's SVG source, ready for an `<svg>`
-   * src; absent when the app declares none (or the file is unreadable).
+   * `icon` is the manifest-declared icon's SVG source, ready for `parseSvg`;
+   * absent when the app declares none (or the file is unreadable).
    */
   export type InstalledApp = {
     id: string

package/src/speech-recognition.ts

@@ -3,7 +3,8 @@
 // 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.
+// are loaded and listening has begun; it rejects when the microphone cannot be
+// opened or the models fail to load.
 // 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.

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,6 +2,7 @@
 /// <reference path="./runtime-modules.d.ts" />
 
 import type { Gradient } from "./color"
+import type { ProgramId, TextureId } from "flux:gpu"
 import type { Element } from "solid-js"
 
 // The "srt:*" lattice runner modules are declared in ./runtime-modules.d.ts
@@ -173,6 +174,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
@@ -264,11 +268,53 @@ export interface PointerProps {
   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,11 +344,15 @@ export interface WindowProps extends LayoutProps, PointerProps {
  */
 export interface WindowShaderProps {
   /** Linked program handle from linkProgram. */
-  program: number
-  /** Float uniforms filled by name, paced to the next real repaint. */
-  params?: Record<string, 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
+   * type: 2/3/4 for `vec2`/`vec3`/`vec4`, 16 (column-major) for `mat4`.
+   */
+  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
   /**
@@ -316,9 +366,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
@@ -345,54 +409,32 @@ 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
+export interface RectProps extends PaintProps, PointerProps {
   // 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).
   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
-}
+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
   /**
@@ -416,8 +458,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
@@ -426,14 +468,15 @@ 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
   srcH?: number
   // Shader uniform values, when src names a shader texture. Applied at the
   // next repaint (not synchronously), so a fast-changing signal stays paced
-  // to real frames rather than triggering a GL render pass per write.
-  params?: Record<string, number>
+  // to real frames rather than triggering a GL render pass per write. A
+  // number drives a scalar (`float`/`int`); a flat number array drives the
+  // declared GLSL type: 2/3/4 for `vec2`/`vec3`/`vec4`, 16 (column-major)
+  // for `mat4`.
+  params?: Record<string, number | number[]>
 }

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 />)