@solidrt/core 0.0.51 → 0.0.53

package/docs/reference/gpu.md

@@ -0,0 +1,207 @@
+# GPU
+
+`@solidrt/core/gpu` is the programmable half of rendering: textures you
+upload, shader passes that render into textures, and pipelines that draw
+your own geometry into them. Everything it produces is a texture id, and a
+texture id goes anywhere a texture goes: `<texture src={id} />` to display
+it, a `textures` binding to sample it from another pass, `readTexture` to
+bake it.
+
+The imperative primitives (`uploadTexture`, `setTargetParams`, `addDraw`,
+`destroyTexture`, ...) are the `flux:gpu` module and are documented in the
+[runtime reference](/runtime/gui/gpu/). This page is the reactive layer
+over them and the contracts that hold across both.
+
+## The model
+
+A target is retained, not redrawn. Creating one renders it once; after that
+it re-renders exactly when something it depends on changes - a param, a
+bound texture, a buffer it draws from, its size - and never otherwise. A
+static shader costs zero passes per frame.
+
+Sampler bindings are live dependencies. A target bound as another's
+`textures` input re-renders its consumer whenever it re-renders itself, in
+topological order, so a chain (a plasma pass feeding a mesh pipeline) is
+driven by writing only the first target's uniforms. A cycle throws.
+
+Targets whose pass is state rather than a function of its inputs
+(accumulation, feedback, simulation) opt out with `render: "manual"`: the
+runtime never renders them, only `renderTarget(id)` does, in call order,
+normally from `onFrame`.
+
+## Three layers
+
+- **Fused.** `createShaderTexture` compiles a fragment source and renders it
+  fullscreen; `createPipelineTexture` does the same over your own vertex
+  buffer. One call, one texture, program and target sharing a lifetime. The
+  shader-toy shape.
+- **Raw.** `compileShader`, `linkProgram`, `createRenderPipeline`, then
+  `createShaderTarget` per target. A pipeline (program plus draw state:
+  attribute layout, topology, blend, cull, depth) backs any number of targets
+  and compiles nothing per target. Reach for it when programs are shared or
+  lifetimes differ.
+- **Draw list.** `createDrawTarget` renders many entries in one pass, each
+  entry its own pipeline, buffer, params and textures, added and removed with
+  `addDraw` / `removeDraw` and sorted with `setDrawOrder`. A scene, in one
+  texture.
+
+`@solidrt/3d` builds its scene graph on the third layer; nothing there is
+hidden from this one.
+
+## Creating
+
+Every `create*` helper frees its resource when the reactive owner that
+created it is disposed. Created outside a reactive scope (after an `await`,
+in an event handler with no owner) nothing is registered and the matching
+`destroy*` is yours to call; `{ autoFree: false }` opts out of the auto-free
+inside a scope for resources rebuilt by hand. `label` names the resource in
+the dev tooling's GPU inventory and in engine log messages.
+
+{{ decl packages/core/src/gpu.ts createTexture }}
+
+{{ decl packages/core/src/gpu.ts createMutableTexture }}
+
+{{ decl packages/core/src/gpu.ts createShaderTexture }}
+
+{{ decl packages/core/src/gpu.ts createPipelineTexture }}
+
+{{ decl packages/core/src/gpu.ts createShaderTarget }}
+
+{{ decl packages/core/src/gpu.ts createDrawTarget }}
+
+{{ decl packages/core/src/gpu.ts createShaderTextureMemo }}
+
+{{ decl packages/core/src/gpu.ts ShaderSpec }}
+
+## Buffers
+
+{{ decl packages/core/src/gpu.ts createBuffer }}
+
+{{ decl packages/core/src/gpu.ts beginBufferWrite }}
+
+{{ decl packages/core/src/gpu.ts writeBuffer }}
+
+A buffer's size is fixed at creation, an entry's buffers are not: `setDraw`
+(single-draw targets) and `setDrawBuffers` (draw-list entries) re-point a
+role the entry already fills - `buffer`, `indexBuffer` + `indexFormat`,
+`instanceBuffer` - at another buffer. That is how a population grows past
+its reservation: create a larger buffer, write it, swap, destroy the old.
+The swap is replace-only (roles are pipeline layout state) and keeps the
+entry's draw range, rechecked against the new sizes.
+
+## Uniforms
+
+Uniforms are driven by name. Declaratively, `<texture src={id}
+params={{ uTime: t() }} />` writes the target's params paced to the next real
+repaint, which is the preferred form; `setTargetParams` and `setDrawParams`
+are the imperative forms for targets no element holds. A number drives a
+scalar, a flat number array drives the declared type (2, 3, 4 for `vec2`,
+`vec3`, `vec4`, 16 column-major for `mat4`, element size times length for
+arrays). `textures` binds `sampler2D` uniforms to texture ids the same way.
+
+Every write is validated at the call site against the linked program:
+
+- a name the program never declares throws, listing the active uniforms;
+- a value whose length does not fit the declared type throws;
+- a `sampler2D` named in `params` (or a non-sampler named in `textures`)
+  throws;
+- a name the source declares but the compiler optimized out is accepted
+  with a warning and skipped, so one param object can drive several shader
+  variants that do not all read every uniform.
+
+On a draw target, target-level `params` and `textures` are the shared set
+every entry reads (a camera's view-projection written once per move), applied
+before each entry's own, and a shared name only some entries declare applies
+where declared.
+
+The fused preamble declares exactly what the runtime provides: `#version
+300 es`, precision, `vUV` (fragment path), `fragColor`, and `iResolution`,
+filled with the target size in physical pixels. Anything app-driven - a time
+uniform - is the source's own declaration, driven like any other uniform, so
+forgetting to drive it is a compile error rather than a value stuck at zero.
+A source starting with its own `#version` line gets no preamble and compiles
+as written.
+
+## Sampling
+
+`filter` (`"linear"` default, `"nearest"`), `wrap` (`"clamp"` default,
+`"repeat"`) and `mipmap` (`false` default) are declared at creation and are
+a property of the texture id: `<texture>` display and shader sampling follow
+the same state, so a nearest texture upscales with hard pixels everywhere.
+Changing any of them means a new id.
+
+Without a mip chain, shader sampling of a minified texture skips texels and
+aliases (3d surfaces at distance, a target sampled at a fraction of its
+size). `mipmap: true` keeps the chain on the id and the runtime rebuilds it
+after every upload (data textures) and every render (targets) - there is
+nothing to schedule. Shader sampling then minifies through it (trilinear
+for `"linear"`, per-level nearest for `"nearest"`). The `<texture>` display
+draw samples the full-size level only, so a supersampled target shown
+through `<texture>` should stay at 2x. Rebuilding is one GPU pass per
+upload or render; a per-frame texture pays it per frame.
+
+One binding can deviate: a `textures` value may be `{ id, filter?, wrap? }`
+instead of a bare id, sampling that texture with a different filter or
+wrap in this binding only - blur a `"nearest"` atlas linearly, tile a
+clamped target in one consumer. The texture's own state stays what
+`<texture>` paints and what every other binding uses. `mipmap` is not
+overridable: the chain either exists on the id or it does not.
+
+## Blending
+
+Combining passes is a render-tree job: stack `<texture>` elements and set
+`blendMode` on them. Within one pipeline draw, `blend` on the pipeline
+decides how overlapping geometry combines: `"add"` and `"multiply"` are
+order-independent (glows, shadows); `"alpha"` composites over in draw-list
+order with premultiplied output, normally after the opaques with
+`depthWrite: false`, and nothing sorts for you (`setDrawOrder` does, or a
+scene layer above). Anything else overwrites.
+
+## The pixel contract
+
+Three facts hold for every texture and target:
+
+- **Clip space is y-down.** `gl_Position` y = -1 is the top of the target.
+  A vertex stage carrying camera-up geometry negates y or folds the flip into
+  its projection. The fragment path absorbs the flip, so `vUV` is 0..1 with
+  a top-left origin.
+- **Color is premultiplied alpha.** A target's RGB is already multiplied by
+  its A: write `vec4(rgb * a, a)`. `vec4(rgb, a)` composites as opaque.
+  `clearColor` is premultiplied too, and so are uploaded pixels:
+  `decodeImage` premultiplies at the codec boundary (image files store
+  straight alpha) and `encodeImage` converts back, so pixels inside the app
+  are premultiplied everywhere.
+- **Values are non-linear RGBA8** (or `"r8"` for single-channel data), with
+  no color-space conversion anywhere. Filtering and blending operate on the
+  stored values.
+
+## UI as a texture
+
+`snapshotTexture(ref)` (from `@solidrt/core`) is the texture id behind a
+`repaintBoundary="snapshot"` view: the subtree's rasterized pixels, usable
+wherever a texture id is - a `<texture>`, a shader or draw target binding,
+a 3d material. The id is allocated on first call and stable for the node's
+lifetime; the runtime re-points it after every re-rasterization, which
+happens only when the subtree changes, so a static panel sampled by an
+animated consumer costs no repaint. Premultiplied, top-left origin, cropped
+to the layout box. Empty until the boundary's first paint. The boundary owns
+it: `destroyTexture` on it throws, and unmounting the boundary releases it
+on the deferred-destroy path (a consumer still sampling it keeps the last
+pixels). A boundary showing its own texture is not a feedback loop: its
+rasterization is the change, so it does not re-invalidate itself.
+
+## Readback
+
+`captureSnapshot` renders a render-tree node to pixels and `readTexture`
+reads any texture back; both resolve `{ width, height, data }`. This is the
+one-shot bake path (a glyph atlas, a processed image), paid for with a
+readback stall and a paint pass of latency per call. Never per frame; to
+feed live content into a shader, bind a texture that updates in place
+instead - for a UI subtree, `snapshotTexture`.
+
+## Limits
+
+`limits` holds the device ceilings queried at startup: maximum texture and
+target size, sampler inputs per pass, vertex attributes per pipeline. Creates
+and binds validate against them and throw naming the limit; read them to
+size within the device instead.

package/docs/reference/index.md

@@ -0,0 +1,50 @@
+# Reference
+
+Core's API is its types. `@solidrt/core` ships `types.d.ts` and
+`jsx-runtime.d.ts` as sources, with a doc comment on every prop that deviates
+from the CSS or DOM meaning you already expect, so these pages show those
+declarations directly rather than paraphrasing them.
+
+They are grouped by subject, not by element. Most props live on several
+elements at once (every element takes pointer handlers, every drawing
+primitive takes paint props), so a page per element would print the same
+interface a dozen times and still not say where a prop comes from.
+
+- [Elements](/core/reference/elements/) - `window` and `view`, the structural
+  vocabulary
+- [Drawing](/core/reference/drawing/) - `rect`, `oval`, `line`, `path`,
+  `texture`, and the paint props they share
+- [Text](/core/reference/text/) - `text` and `span`
+- [Detached elements](/core/reference/detached/) - the `d-*` forms and their
+  paint-space geometry
+- [Layout](/core/reference/layout/) - flexbox, the grid subset, and the box
+  props
+- [Transforms](/core/reference/transforms/) - post-layout transform, opacity,
+  and scroll offsets
+- [Input](/core/reference/input/) - handlers and the event objects they receive
+- [Shaders](/core/reference/shaders/) - the `shader` prop on `window` and
+  `view`
+- [GPU](/core/reference/gpu/) - textures, shader targets, pipelines and the
+  draw list from `@solidrt/core/gpu`
+- [Types](/core/reference/types/) - the shared aliases
+
+## The element vocabulary
+
+Every JSX intrinsic and the prop interfaces it composes. `ref` is available on
+all of them and is left out here.
+
+{{ intrinsics packages/core/jsx-runtime.d.ts }}
+
+Read a row as the sum of its parts: `<rect>` takes paint props, pointer props
+and layout props, while `<d-rect>` swaps the layout props for detached
+geometry. The pages above cover the interfaces in that table.
+
+## Clearing a prop
+
+Writing `undefined` (or `null`) to a prop resets it to its default - the
+value it had before anything was set, per element kind. So the reactive
+pattern `scale={style()?.scale}` is safe: when the binding clears, the
+element returns to its unset state instead of erroring. On a `span`,
+clearing a prop returns the run to inheriting from its paragraph. Content
+props are the exception: `text` on a span and `d` on a path require a value.
+A wrong-typed value is an error either way.

package/docs/reference/input.md

@@ -0,0 +1,58 @@
+# Input
+
+Pointer, wheel, key and text events are props on any element. There is no
+`addEventListener` and no event registry: a handler prop is the subscription.
+
+Events travel from the hit leaf up to the root, and `stopPropagation()` ends
+the walk.
+
+## Handlers
+
+{{ decl packages/core/src/types.d.ts PointerProps }}
+
+`pointerEvents="none"` takes an element out of hit testing, and the walk skips
+it as an ancestor too, so the `parentX`/`parentY` of an event stay in the frame
+you would expect.
+
+Focus is explicit: `setFocus(node)` moves it, `onFocus`/`onBlur` report it,
+and `focusable` only marks an element as a candidate for `getFocusables()`,
+so a focus-navigation scheme (a component set's, or your own) can enumerate
+targets without the runtime imposing one.
+
+## Pointer events
+
+Coordinates are logical points, so a handler reads the same numbers on a
+high-density phone screen as on a desktop monitor. Three frames are reported,
+which is what makes drag idioms short:
+
+{{ decl packages/core/src/types.d.ts PointerEvent }}
+
+The drag idiom is `x = parentX - grab offset`, taking the grab offset from
+`localX`/`localY` at pointer down.
+
+{{ decl packages/core/src/types.d.ts WheelEvent }}
+
+## Key events
+
+Key events use the W3C UI Events vocabulary: `key` is the logical,
+layout-dependent value (`"a"`, `"!"`, `"Enter"`, `"ArrowLeft"`), and `code` is
+the physical key position (`"KeyA"`, `"Digit1"`).
+
+{{ decl packages/core/src/types.d.ts KeyEvent }}
+
+Routing differs from pointer events in where the walk starts: keydown and
+keyup dispatch along the focused node's ancestor chain and always end at the
+window root, and with nothing focused they go to the window root alone.
+`<window onKeyDown>` is therefore the app-global shortcut point.
+
+## Text entry
+
+Printable characters do not arrive as key events. Text entry goes to the
+focused node's `onTextInput`:
+
+{{ decl packages/core/src/types.d.ts TextEvent }}
+
+Focusing a field never raises the on-screen keyboard by itself. A tap on the
+field does, or an explicit `startTextInput()`, and never while a physical
+keyboard is attached. `textInputHints` on the node is read when a session
+starts.

package/docs/reference/layout.md

@@ -0,0 +1,44 @@
+# Layout
+
+Layout is flexbox plus a line-based subset of CSS grid, over the whole element
+tree. Prop names match CSS, so `flexDirection`, `alignItems`,
+`justifyContent`, `gap`, `padding` and `width` mean what you expect.
+
+These props exist on `window`, `view`, and the layout form of every drawing
+and text primitive. They do not exist on the
+[detached](/core/reference/detached/) forms, which own their geometry instead.
+
+## Units
+
+A bare number is pixels. A percentage is `pct(50)`, a branded value rather
+than a parsed string, though the `"50%"` string form is accepted so pasted CSS
+keeps working.
+
+```tsx
+<view flexDirection="row" gap={8} padding={16}>
+  <view width={pct(50)} />
+</view>
+```
+
+{{ decl packages/core/src/types.d.ts Dimension }}
+
+{{ decl packages/core/src/types.d.ts LengthPercentage }}
+
+## The box
+
+{{ decl packages/core/src/types.d.ts LayoutProps }}
+
+Two divergences from CSS are worth reading twice. `position` has `relative`
+and `absolute` only, and an absolute element does not itself become a
+containing block: it resolves against the nearest ancestor with
+`position="relative"`. And `float` / `clear` are not page layout; they apply
+to an element child of a `<text>`, where it becomes an inline atom the lines
+wrap around.
+
+## Flexbox
+
+{{ decl packages/core/src/types.d.ts FlexboxProps }}
+
+## Grid
+
+{{ decl packages/core/src/types.d.ts GridProps }}

package/docs/reference/shaders.md

@@ -0,0 +1,46 @@
+# Shaders
+
+Two elements take a `shader` prop: `window` runs a program over the finished
+frame, and `view` runs one over its own rasterized subtree. Both are
+declarative - the pass exists while the prop is declared and the resources go
+away when it is removed.
+
+Everything about the program itself (compiling, linking, lifetime) belongs to
+the raw shading layer: `compileShader` and `linkProgram` from
+`@solidrt/core/gpu`.
+
+## The shared contract
+
+Both passes bind their input as `uniform sampler2D uSource` with a top-left
+origin, like every sampled texture in the engine, and fill `iResolution` by
+name with the pass size in physical pixels. Both fill `params` uniforms by
+name, paced to the next real repaint: a number drives a scalar, and a flat
+number array drives the declared GLSL type (2, 3 or 4 for `vec2`, `vec3`,
+`vec4`, and 16 column-major for `mat4`).
+
+## Window
+
+{{ decl packages/core/src/types.d.ts WindowShaderProps }}
+
+The window pass draws attributeless triangles with `vertexCount` vertices
+fetched via `gl_VertexID`, defaulting to a single covering triangle.
+
+## View
+
+A boundary shader requires a snapshot boundary (`repaintBoundary="snapshot"`
+or `"snapshot-no-aa"`). The cost is snapshot semantics, and it is kept
+explicit: declared without one, the shader is ignored with a warning.
+
+{{ decl packages/core/src/types.d.ts ViewShaderProps }}
+
+The pass is split from content invalidation, so animating `params` over a
+static subtree re-runs only the pass against the cached snapshot and never
+re-rasterizes it.
+
+The effect samples the subtree's own pixels and nothing else. Grading,
+warping and dissolving a panel work; anything that needs what is *behind* the
+panel does not. Hit testing stays on layout geometry, so a distortion moves
+pixels, not hit targets.
+
+`outset` grows the rasterized canvas by a transparent margin on every side,
+for effects that write past the edge such as a glow or a drop shadow.

package/docs/reference/text.md

@@ -0,0 +1,46 @@
+# Text
+
+`<text>` is a shaped paragraph, and `<span>` is a styled run inside it. Text is
+laid out by the engine's own layout and shaping, not by a browser: a paragraph
+is one element that wraps, aligns and truncates as a unit.
+
+```tsx
+<text fontSize={16} maxLines={2} textOverflow="ellipsis">
+  Weather for <span fontWeight={700}>Tuesday</span>
+</text>
+```
+
+## Run style
+
+The style props of a run: paragraph defaults on `<text>`, overrides on
+`<span>`.
+
+{{ decl packages/core/src/types.d.ts TextRunProps }}
+
+The cascade is intra-paragraph only. A span inherits from its enclosing span
+and then from the `<text>`; nothing inherits across the element tree, so there
+is no ambient font size to chase.
+
+`lineHeight` is the one prop with a CSS reflex worth unlearning: it is a
+multiplier of `fontSize`, not a pixel value.
+
+## text
+
+{{ decl packages/core/src/types.d.ts TextProps }}
+
+Paragraph-level behavior lives here: `textAlign`, `maxLines` with
+`textOverflow`, `textIndent`, and `textWrap` for line-breaking quality
+(`"balance"` for headings, `"pretty"` to avoid a lone last word).
+
+An element child of a `<text>` is an inline atom, which is where the
+[layout](/core/reference/layout/) props `float` and `clear` apply: a floated
+atom leaves the flow and the lines it overlaps wrap around it.
+
+## span
+
+{{ decl packages/core/src/types.d.ts SpanProps }}
+
+Inline only: its children are text and other spans, and it has no layout box,
+which is why it is the one element with no detached form. Pointer handlers on
+a span fire for the boxes its text occupies on each line it spans, and bubble
+to the enclosing spans and the text.

package/docs/reference/transforms.md

@@ -0,0 +1,35 @@
+# Transforms
+
+Transform props apply after layout, at composite time. Nothing re-records and
+nothing reflows, on a laid-out `view` as much as on a `d-view`, so these are
+the props to animate.
+
+They live on `ViewOwnProps`, which means both `view` and `d-view` have them;
+see [elements](/core/reference/elements/).
+
+{{ decl packages/core/src/types.d.ts TransformProps }}
+
+## Origin
+
+`originX` and `originY` are the point rotation and scale pivot around, split
+per axis to match the engine's `x`/`y` prop convention.
+
+{{ decl packages/core/src/types.d.ts OriginX }}
+
+{{ decl packages/core/src/types.d.ts OriginY }}
+
+A percentage origin tracks the layout size with no reactive wiring of your
+own. On a `d-view` there is no box, so the origin defaults to the view's local
+`(0,0)` - the origin its children's coordinates are authored against - and
+`pct()` or keyword origins resolve against the inherited box, which is rarely
+what you want. Pivot a `d-view` around its content by setting the origin in
+pixels.
+
+## Opacity
+
+`opacity` is group opacity: the children composite together and then fade as a
+whole, like CSS. It costs a compositing layer while below 1, unless the view
+is a `repaintBoundary`, where it is hoisted to composite time for free.
+
+To fade a single primitive, put the alpha in its `color` instead. Paint alpha
+costs nothing.

package/docs/reference/types.md

@@ -0,0 +1,34 @@
+# Types
+
+The shared aliases the element props refer to.
+
+## Color
+
+{{ decl packages/core/src/types.d.ts Color }}
+
+Anywhere a `color` prop is accepted, a `Gradient` from
+`createLinearGradient` or `createRadialGradient` is accepted too. Gradient
+stops are positions in 0..1, not percentages.
+
+## Percentages
+
+{{ decl packages/core/src/types.d.ts Pct }}
+
+`pct(50)` is the only way to write a percentage as a value. It is branded, so
+a percentage cannot be confused with a pixel count by accident, and it
+resolves against the element box wherever it is used - layout dimensions,
+gaps, and transform origins alike.
+
+## Children
+
+{{ decl packages/core/src/types.d.ts Children }}
+
+The element type is SolidJS's own, so the control-flow components (`For`,
+`Show`, `Switch`) return something the JSX types accept.
+
+## JSX plumbing
+
+One declaration exists purely to tell TypeScript which prop receives JSX
+children. It is not something an app refers to:
+
+{{ decl packages/core/src/types.d.ts ElementChildrenAttribute }}

package/examples/README.md

@@ -8,7 +8,7 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 ## Host elements and layout
 - `window-root.tsx` - the minimal app; the root must be `<window>`.
 - `view-layout.tsx` - `<view>` as a flex container; containers do not paint.
-- `view-viewbox.tsx` - `viewBox` on a `<view>`: author a scene once in fixed design units and let the view uniformly scale-and-center (letterbox) that space into its box. A pure fit transform - it never sizes the element (layout still does); children live in design space (the box they inherit IS the design size, so a bare `d-rect` fills it); pointer `localX`/`localY` arrive in design units. The fixed-aspect alternative to `windowSizeClass` reflow for diagrams, slides, dashboards, game boards.
+- `view-design-size.tsx` - `designSize` on a `<view>`: author a scene once in fixed design units and let the view uniformly scale-and-center (letterbox) that space into its box. Children live in design space for layout as well as paint (the box they inherit IS the design size, so a bare `d-rect` fills it and a flex row lays out against the design width, never reflowing on resize); the view itself sizes like a replaced element whose intrinsic size is the design size; pointer `localX`/`localY` arrive in design units. The fixed-aspect alternative to `windowSizeClass` reflow for diagrams, slides, dashboards, game boards, scaled panels.
 - `background-rect.tsx` - a `d-rect` filling its parent as a background.
 - `detached-positioning.tsx` - the `d-` prefix: x/y placement, no reflow, detached-only children.
 - `text-paint-styling.tsx` - the uniform `color` prop; `drawStyle="stroke"` vs fill.
@@ -21,6 +21,7 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `pointer-local-coords.tsx` - the three pointer coordinate frames (`clientX` window, `localX` the handling node's own frame, `parentX` its path-parent's frame - where the node's x/y live) and the transform-proof drag idiom: grab offset from `localX` at down, place with `parentX - offset` on moves. Exact inside rotated/scaled ancestors and when the pointer leaves the node mid-drag.
 
 ## Performance
+- `snapshot-texture.tsx` - `snapshotTexture(ref)`: a `repaintBoundary="snapshot"` view's rasterized pixels as a live texture id; a shader texture samples the panel and a sibling `<texture>` shows the warped copy. The boundary re-rasterizes only when its content changes.
 - `repaint-boundary.tsx` - `repaintBoundary` on a `<view>` to keep static content from rebuilding while a neighbor animates: `{true}` retains the recorded draw list, `"snapshot"` also retains the rasterized pixels as a GPU texture (for raster-expensive, screen-aligned, static subtrees). `"snapshot-no-aa"` rasterizes without anti-aliasing: cheaper, fine for text and axis-aligned rects, hard-edged on vector content.
 
 ## Scrolling
@@ -28,7 +29,7 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 
 ## Window state
 - `window-signals.tsx` - reactive `windowSize()` / `safeArea()` accessors (prefer over `onResize`).
-- `responsive-grid.tsx` - one app across phone/tablet/desktop: `capabilities.windowSizeClass` (Material 3 breakpoints, a reactive getter) drives the column count and `windowSize()` sizes each card; reflows on resize. The reflow answer; for fixed-aspect content use `view-viewbox.tsx` instead.
+- `responsive-grid.tsx` - one app across phone/tablet/desktop: `capabilities.windowSizeClass` (Material 3 breakpoints, a reactive getter) drives the column count and `windowSize()` sizes each card; reflows on resize. The reflow answer; for fixed-aspect content use `view-design-size.tsx` instead.
 
 ## Overlays
 - `portal.tsx` - `createPortal` relocating content to the window root to escape clipping.
@@ -51,7 +52,8 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `audio.tsx` - `createSound`: decode a clip once from bytes (here a binary import), replay cheaply; `overlap` stacking vs single-voice, `playing()` signal, release on unmount. `createPcmSound` for a synthesised clip from raw samples (a generated sine sweep). Points to `createSoundStream` for long tracks streamed from a path.
 
 ## Vector graphics
-- `parse-svg.tsx` - `parseSvg` turns a whole SVG *document string* (not HTML/JSX children) into plain draw data mapped to `<d-path>` inside a `viewBox`-fitted view; per-shape hover highlighting shows the payoff (exact-outline hit testing, recolor without re-parse), plus a `currentColor` icon recolored via the `color` option. This is how to use existing icon libraries (Lucide, Heroicons, etc.) - hand their SVG source to `parseSvg`.
+- `line-points.tsx` - `points` on `line`/`d-line`: a flat `[x0, y0, x1, y1, ...]` array (or `Float32Array`) makes the polyline whose geometry is numbers - a live trace rewritten every frame with no `d` string to parse, `closed` outlines, `drawStyle="fill"` polygons (a line's paint defaults to stroke), per-segment dashing, and a laid-out `<line points>` measuring its box from the points.
+- `parse-svg.tsx` - `parseSvg` turns a whole SVG *document string* (not HTML/JSX children) into plain draw data mapped to `<d-path>` inside a `designSize`-fitted view; per-shape hover highlighting shows the payoff (exact-outline hit testing, recolor without re-parse), plus a `currentColor` icon recolored via the `color` option. This is how to use existing icon libraries (Lucide, Heroicons, etc.) - hand their SVG source to `parseSvg`.
 
 ## Bundling assets
 - `binary-import.tsx` - `import bytes from "./file" with { type: "binary" }` inlines a file's bytes into the bundle as a `Uint8Array` (the bytes are in memory, so `inline-image.tsx` displays them with the synchronous `decodeImage` + `createTexture` path).

package/examples/gpu-pipeline.tsx

@@ -101,11 +101,11 @@ function App() {
   let [time, setTime] = createSignal(0)
   onFrame((tick) => setTime(tick / 1000))
 
-  // Fill the window: the viewBox fits and centers the square content into
+  // Fill the window: the design-size fits and centers the square content into
   // the full-window view, so the projection is never stretched.
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} viewBox={[1024, 1024]}>
+      <view width={pct(100)} height={pct(100)} designSize={[1024, 1024]}>
         <texture src={id} params={{ uTime: time() }} width={1024} height={1024} />
       </view>
     </window>