@solidrt/core 0.0.40 → 0.0.41

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,7 +344,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 +352,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 +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
@@ -349,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
   /**
@@ -420,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
@@ -430,8 +468,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/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 />)