bireactive 0.2.0

package/dist/shapes/layout.js

@@ -0,0 +1,74 @@
+// Spatial composition primitives.
+import { Box, BoxMath, reader, transformBox } from "../core/index.js";
+/** Lay out `shapes` in a row/column. First stays put; the rest bind
+ *  their `translate` reactively to sit `gap` past the previous.
+ *  Reflows on size or anchor change. */
+export function arrange(shapes, axis, opts = {}) {
+    const gap = opts.gap ?? 0;
+    const cross = opts.align ?? 0;
+    if (shapes.length < 2)
+        return;
+    const anchor = shapes[0];
+    for (let i = 1; i < shapes.length; i++) {
+        const prev = shapes[i - 1];
+        const cur = shapes[i];
+        cur.effect(() => {
+            // prev/anchor in the parent frame so upstream transforms
+            // cascade; cur stays local since we're writing its own translate.
+            const pBox = transformBox(prev.localFrame.value, prev.box.value);
+            const aBox = transformBox(anchor.localFrame.value, anchor.box.value);
+            const cb = cur.box.value;
+            if (axis === "row") {
+                const targetX = pBox.x + pBox.w + gap;
+                const targetY = aBox.y + cross * aBox.h - cross * cb.h;
+                cur.translate.value = {
+                    x: targetX - cb.x,
+                    y: targetY - cb.y,
+                };
+            }
+            else {
+                const targetY = pBox.y + pBox.h + gap;
+                const targetX = aBox.x + cross * aBox.w - cross * cb.w;
+                cur.translate.value = {
+                    x: targetX - cb.x,
+                    y: targetY - cb.y,
+                };
+            }
+        });
+    }
+}
+/** Inflate a Box on each side by `by`. */
+export function expand(b, by) {
+    const byFn = reader(by);
+    return Box.derive(() => BoxMath.expand(b.value, byFn()));
+}
+/** Split a Box along an axis into N reactive sub-Boxes.
+ *
+ *   split(b, "x", 3)              — 3 equal columns
+ *   split(b, "x", [3, 2, 2])      — weighted 3:2:2
+ *   split(b, "x", 3, { gap: 4 })  — 4px between
+ */
+export function split(source, axis, parts, opts = {}) {
+    const ratios = typeof parts === "number" ? new Array(parts).fill(1) : parts;
+    const total = ratios.reduce((a, b) => a + b, 0);
+    const cumBefore = ratios.map((_, i) => ratios.slice(0, i).reduce((a, b) => a + b, 0));
+    const gapFn = reader(opts.gap ?? 0);
+    return ratios.map((r, i) => Box.derive(() => {
+        const b = source.value;
+        const gap = gapFn();
+        const gapTotal = gap * (ratios.length - 1);
+        if (axis === "x") {
+            const free = b.w - gapTotal;
+            const offset = (cumBefore[i] / total) * free + gap * i;
+            return { x: b.x + offset, y: b.y, w: (r / total) * free, h: b.h };
+        }
+        const free = b.h - gapTotal;
+        const offset = (cumBefore[i] / total) * free + gap * i;
+        return { x: b.x, y: b.y + offset, w: b.w, h: (r / total) * free };
+    }));
+}
+/** Two-axis split into a `rows × cols` grid (sugar over `split`).
+ *  Returns `[row][col]`. */
+export function grid(source, rows, cols, opts = {}) {
+    return split(source, "y", rows, opts).map(row => split(row, "x", cols, opts));
+}

package/dist/shapes/line.d.ts

@@ -0,0 +1,21 @@
+import { type Cell, type Val, Vec } from "../core/index.js";
+import { type CommonOpts, type Segment, Shape } from "./shape.js";
+export interface LineOpts extends CommonOpts {
+}
+export declare class Line<O extends LineOpts = LineOpts> extends Shape<O> {
+    #private;
+    readonly from: Vec;
+    readonly to: Vec;
+    constructor(from: Vec, to: Vec, opts?: O);
+    /** Position at fraction `t` (0=from, 1=to). Symmetric with
+     *  `Path.pointAt`. */
+    pointAt(t: Val<number>): Vec;
+    tangentAt(_t?: Val<number>): Vec;
+    normalAt(_t?: Val<number>): Vec;
+    angleAt(_t?: Val<number>): Cell<number>;
+    length(): Cell<number>;
+    /** Closer endpoint to `toward`. */
+    boundary(toward: Vec): Vec;
+    segments(): Segment[];
+}
+export declare const line: <const O extends LineOpts>(from: Vec, to: Vec, opts?: O) => Line<O>;

package/dist/shapes/line.js

@@ -0,0 +1,79 @@
+import { derive, Vec } from "../core/index.js";
+import { Shape } from "./shape.js";
+export class Line extends Shape {
+    from;
+    to;
+    constructor(from, to, opts = {}) {
+        super(opts.dashed ? "path" : "line", () => {
+            const a = from.value;
+            const b = to.value;
+            return {
+                x: Math.min(a.x, b.x),
+                y: Math.min(a.y, b.y),
+                w: Math.abs(b.x - a.x),
+                h: Math.abs(b.y - a.y),
+            };
+        }, opts, {
+            origin: derive(() => {
+                const a = from.value;
+                const b = to.value;
+                return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+            }),
+        });
+        this.from = from;
+        this.to = to;
+        this.attr("stroke-linecap", opts.cap ?? "round");
+        this.stroke(opts, false, { x1: from.x, y1: from.y, x2: to.x, y2: to.y });
+    }
+    // Tangent/normal/angle are constant along a Line; `t` is accepted
+    // for API symmetry with Path but ignored. Cached lazily.
+    #tangent;
+    #normal;
+    #angle;
+    #length;
+    /** Position at fraction `t` (0=from, 1=to). Symmetric with
+     *  `Path.pointAt`. */
+    pointAt(t) {
+        if (typeof t === "number") {
+            if (t === 0)
+                return this.from;
+            if (t === 1)
+                return this.to;
+        }
+        return this.from.lerp(this.to, t);
+    }
+    tangentAt(_t = 0) {
+        return (this.#tangent ??= this.to.sub(this.from).normalize());
+    }
+    normalAt(_t = 0) {
+        return (this.#normal ??= this.tangentAt().perp());
+    }
+    angleAt(_t = 0) {
+        if (this.#angle)
+            return this.#angle;
+        const tan = this.tangentAt();
+        return (this.#angle = derive(() => Math.atan2(tan.y.value, tan.x.value)));
+    }
+    length() {
+        return (this.#length ??= derive(() => {
+            const a = this.from.value;
+            const b = this.to.value;
+            return Math.hypot(b.x - a.x, b.y - a.y);
+        }));
+    }
+    /** Closer endpoint to `toward`. */
+    boundary(toward) {
+        return Vec.derive(() => {
+            const t = toward.value;
+            const a = this.from.value;
+            const b = this.to.value;
+            const da = (t.x - a.x) ** 2 + (t.y - a.y) ** 2;
+            const db = (t.x - b.x) ** 2 + (t.y - b.y) ** 2;
+            return da <= db ? a : b;
+        });
+    }
+    segments() {
+        return [{ type: "line", from: this.from.value, to: this.to.value }];
+    }
+}
+export const line = (from, to, opts) => new Line(from, to, opts);

package/dist/shapes/list.d.ts

@@ -0,0 +1,18 @@
+import { type Val } from "../core/index.js";
+import type { AnyShape } from "./shape.js";
+export interface ForEachOptions<T> {
+    /** Stable identity per item; defaults to index (fine for fixed
+     *  positions, makes swaps look like replacement). */
+    key?: (item: T, index: number) => unknown;
+}
+/** Reactive list result. `at(i)` returns the primary shape (the first
+ *  if `render` returned an array). */
+export interface ForEachResult {
+    dispose: () => void;
+    at: (i: number) => AnyShape | undefined;
+    all: (i: number) => readonly AnyShape[] | undefined;
+}
+/** Render a shape (or shapes) per item in `source`, mounting under
+ *  `parent`. Re-runs only on structural changes; per-item reactivity
+ *  is the render fn's job. */
+export declare function forEach<T>(parent: AnyShape, source: Val<readonly T[]>, render: (item: T, index: number) => AnyShape | AnyShape[], options?: ForEachOptions<T>): ForEachResult;

package/dist/shapes/list.js

@@ -0,0 +1,51 @@
+// Reactive list rendering. Diffs `parent`'s children as `source`
+// changes; stable keys preserve per-shape state across updates.
+import { effect, readNow, untracked } from "../core/index.js";
+/** Render a shape (or shapes) per item in `source`, mounting under
+ *  `parent`. Re-runs only on structural changes; per-item reactivity
+ *  is the render fn's job. */
+export function forEach(parent, source, render, options = {}) {
+    const { key: keyOf } = options;
+    let entries = [];
+    const eff = effect(() => {
+        const next = readNow(source);
+        // Diff in `untracked` so internal reads/writes don't re-trigger.
+        untracked(() => {
+            const prevByKey = new Map();
+            for (const e of entries)
+                prevByKey.set(e.key, e);
+            const nextEntries = [];
+            for (let i = 0; i < next.length; i++) {
+                const item = next[i];
+                const k = keyOf ? keyOf(item, i) : i;
+                const existing = prevByKey.get(k);
+                if (existing) {
+                    nextEntries.push(existing);
+                    prevByKey.delete(k);
+                }
+                else {
+                    const result = render(item, i);
+                    const shapes = Array.isArray(result) ? result : [result];
+                    parent.add(...shapes);
+                    nextEntries.push({ key: k, shapes });
+                }
+            }
+            // Anything left in prevByKey is gone from the source.
+            for (const removed of prevByKey.values()) {
+                parent.remove(...removed.shapes);
+            }
+            entries = nextEntries;
+        });
+    });
+    return {
+        dispose: () => {
+            eff();
+            const toRemove = entries;
+            entries = [];
+            for (const e of toRemove)
+                parent.remove(...e.shapes);
+        },
+        at: (i) => entries[i]?.shapes[0],
+        all: (i) => entries[i]?.shapes,
+    };
+}

package/dist/shapes/mount.d.ts

@@ -0,0 +1,7 @@
+import type { AnyShape } from "./shape.js";
+export interface Mount {
+    <T extends AnyShape>(shape: T): T;
+    <T extends AnyShape[]>(...shapes: T): T;
+    readonly root: AnyShape;
+}
+export declare function mount(root: AnyShape): Mount;

package/dist/shapes/mount.js

@@ -0,0 +1,10 @@
+// Callable mount handle: `s(shape)` adds children under a root Shape and returns them.
+export function mount(root) {
+    const fn = ((...shapes) => {
+        for (const s of shapes)
+            root.add(s);
+        return shapes.length === 1 ? shapes[0] : shapes;
+    });
+    Object.defineProperty(fn, "root", { value: root });
+    return fn;
+}

package/dist/shapes/path.d.ts

@@ -0,0 +1,77 @@
+import { type Cell, type Read, type Val, Vec } from "../core/index.js";
+import { type CommonOpts, type Segment, Shape } from "./shape.js";
+export interface PathOpts extends CommonOpts {
+    closed?: boolean;
+}
+/** Open or closed polyline through a reactive list of Points.
+ *
+ *   path(start, opts?).to(p2).to(p3)   — fluent (preferred)
+ *   new Path([p1, p2, p3], opts?)      — explicit array
+ *
+ *  Extension methods (`to`/`u`/`d`/`l`/`r`/`offset`/`along`) mutate in
+ *  place and return `this`. The `d` attribute and all sampling methods
+ *  react to point changes automatically. */
+export declare class Path<O extends PathOpts = PathOpts> extends Shape<O> {
+    private readonly _points;
+    readonly closed: boolean;
+    readonly length: Cell<number>;
+    /** Sample at `t ∈ [0, 1]`. Named to avoid shadowing the Box `at(u, v)`
+     *  anchor — same symmetry as `tangentAt` / `normalAt` / `angleAt`. */
+    readonly pointAt: (t: Val<number>) => Vec;
+    readonly atDistance: (d: Val<number>) => Vec;
+    readonly tangentAt: (t: Val<number>) => Vec;
+    readonly normalAt: (t: Val<number>) => Vec;
+    readonly angleAt: (t: Val<number>) => Cell<number>;
+    constructor(start?: Vec | readonly Vec[], opts?: O);
+    /** Untracked snapshot of the points list. */
+    get points(): readonly Vec[];
+    private get last();
+    private extend;
+    to(p: Vec): this;
+    /** Step `n` up from the last vertex. */
+    u(n: Val<number>): this;
+    /** Step `n` down from the last vertex. */
+    d(n: Val<number>): this;
+    /** Step `n` left from the last vertex. */
+    l(n: Val<number>): this;
+    /** Step `n` right from the last vertex. */
+    r(n: Val<number>): this;
+    offset(dx: Val<number>, dy: Val<number>): this;
+    /** Walk `dist` at `angle` (radians, y-down). */
+    along(angle: Val<number>, dist: Val<number>): this;
+    segments(): Segment[];
+}
+/** Start a fluent path at `start`. Chain `.to(p)` / `.u(n)` / `.d(n)`
+ *  / `.l(n)` / `.r(n)` / `.offset(dx, dy)` / `.along(angle, dist)` and
+ *  pass to `s(...)` to render. */
+export declare const path: <const O extends PathOpts>(start: Vec, opts?: O) => Path<O>;
+export interface PathDOpts {
+    /** Stroke color. Default: `tokens.stroke`. */
+    stroke?: Val<string>;
+    /** Fill color. Default: `"none"`. */
+    fill?: Val<string>;
+    /** Stroke width override; trumps `thin`. */
+    strokeWidth?: Val<number>;
+    /** Use the thin stroke weight (`tokens.thinWeight`). Default: false. */
+    thin?: boolean;
+    /** Stroke line cap. */
+    cap?: "butt" | "round" | "square";
+    /** Stroke line join. */
+    join?: "miter" | "round" | "bevel";
+    /** Stroke dash array (e.g. `"3 5"`). */
+    dasharray?: Val<string>;
+    /** Reactive opacity. */
+    opacity?: Val<number>;
+    /** Reactive bbox for auto-fit. Default: zero box (caller manages view). */
+    box?: () => {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+}
+/** Low-level `<path>` driven by a reactive `d` string — build the `d`
+ *  attribute directly (dense plots, custom samplers). One attr-effect drives
+ *  the whole path, far cheaper than N shapes for dense geometry. Pass `box`
+ *  for auto-fit; otherwise contributes a zero box (caller owns the viewBox). */
+export declare function pathD(d: Read<string>, opts?: PathDOpts): Shape;

package/dist/shapes/path.js

@@ -0,0 +1,227 @@
+import { cell, derive, reader, Vec, } from "../core/index.js";
+import { Shape } from "./shape.js";
+import { tokens } from "./tokens.js";
+const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v);
+/** Geometry sampler over a reactive list of Points. `pts` is tracked
+ *  by every computed, so mutating the list re-runs sampling. */
+function sampler(pts) {
+    const cumLen = derive(() => {
+        const points = pts.value;
+        const lens = [0];
+        for (let i = 1; i < points.length; i++) {
+            const a = points[i - 1].value;
+            const b = points[i].value;
+            lens.push(lens[i - 1] + Math.hypot(b.x - a.x, b.y - a.y));
+        }
+        return lens;
+    });
+    const length = derive(() => {
+        const lens = cumLen.value;
+        return lens[lens.length - 1] ?? 0;
+    });
+    /** Locate by arc-length `d` (px), clamped to `[0, total]`. */
+    const locateAt = (d, points) => {
+        const lens = cumLen.value;
+        const total = lens[lens.length - 1] ?? 0;
+        if (points.length < 2 || total === 0)
+            return { i: 0, segT: 0 };
+        const target = d < 0 ? 0 : d > total ? total : d;
+        let i = 1;
+        while (i < lens.length - 1 && lens[i] < target)
+            i++;
+        const segLen = lens[i] - lens[i - 1];
+        const segT = segLen > 0 ? (target - lens[i - 1]) / segLen : 0;
+        return { i: i - 1, segT };
+    };
+    const sampleAt = (ds) => Vec.derive(() => {
+        const points = pts.value;
+        if (points.length === 0)
+            return { x: 0, y: 0 };
+        if (points.length === 1)
+            return points[0].value;
+        const { i, segT } = locateAt(ds.value, points);
+        const a = points[i].value;
+        const b = points[i + 1].value;
+        return { x: a.x + (b.x - a.x) * segT, y: a.y + (b.y - a.y) * segT };
+    });
+    const at = (t) => {
+        const ts = reader(t);
+        return sampleAt(derive(() => clamp01(ts()) * length.value));
+    };
+    /** Sample at absolute arc-length (px from start). */
+    const atDistance = (d) => {
+        const ds = reader(d);
+        return sampleAt(derive(ds));
+    };
+    const tangentAt = (t) => {
+        const ts = reader(t);
+        return Vec.derive(() => {
+            const points = pts.value;
+            if (points.length < 2)
+                return { x: 1, y: 0 };
+            const total = length.value;
+            const { i } = locateAt(clamp01(ts()) * total, points);
+            const a = points[i].value;
+            const b = points[i + 1].value;
+            const dx = b.x - a.x;
+            const dy = b.y - a.y;
+            const len = Math.hypot(dx, dy) || 1;
+            return { x: dx / len, y: dy / len };
+        });
+    };
+    const normalAt = (t) => tangentAt(t).perp();
+    const angleAt = (t) => {
+        const tan = tangentAt(t);
+        return derive(() => Math.atan2(tan.y.value, tan.x.value));
+    };
+    return { length, at, atDistance, tangentAt, normalAt, angleAt };
+}
+/** Open or closed polyline through a reactive list of Points.
+ *
+ *   path(start, opts?).to(p2).to(p3)   — fluent (preferred)
+ *   new Path([p1, p2, p3], opts?)      — explicit array
+ *
+ *  Extension methods (`to`/`u`/`d`/`l`/`r`/`offset`/`along`) mutate in
+ *  place and return `this`. The `d` attribute and all sampling methods
+ *  react to point changes automatically. */
+export class Path extends Shape {
+    _points;
+    closed;
+    length;
+    /** Sample at `t ∈ [0, 1]`. Named to avoid shadowing the Box `at(u, v)`
+     *  anchor — same symmetry as `tangentAt` / `normalAt` / `angleAt`. */
+    pointAt;
+    atDistance;
+    tangentAt;
+    normalAt;
+    angleAt;
+    constructor(start = [], opts = {}) {
+        const init = start instanceof Vec ? [start] : start;
+        const points = cell(init);
+        const closed = opts.closed ?? false;
+        super("path", () => {
+            const ps = points.value;
+            if (ps.length === 0)
+                return { x: 0, y: 0, w: 0, h: 0 };
+            let xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY, xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY;
+            for (const p of ps) {
+                const v = p.value;
+                if (v.x < xMin)
+                    xMin = v.x;
+                if (v.y < yMin)
+                    yMin = v.y;
+                if (v.x > xMax)
+                    xMax = v.x;
+                if (v.y > yMax)
+                    yMax = v.y;
+            }
+            return { x: xMin, y: yMin, w: xMax - xMin, h: yMax - yMin };
+        }, opts, {
+            // First vertex — matches `path.pointAt(0)`. Override via `origin`
+            // for a different pivot.
+            origin: derive(() => {
+                const ps = points.value;
+                return ps.length > 0 ? ps[0].value : { x: 0, y: 0 };
+            }),
+        });
+        this._points = points;
+        this.closed = closed;
+        const s = sampler(points);
+        this.length = s.length;
+        this.pointAt = s.at;
+        this.atDistance = s.atDistance;
+        this.tangentAt = s.tangentAt;
+        this.normalAt = s.normalAt;
+        this.angleAt = s.angleAt;
+        this.stroke(opts, closed, {
+            d: derive(() => {
+                const ps = points.value;
+                if (ps.length === 0)
+                    return "";
+                const parts = [`M ${ps[0].x.value} ${ps[0].y.value}`];
+                for (let i = 1; i < ps.length; i++) {
+                    parts.push(`L ${ps[i].x.value} ${ps[i].y.value}`);
+                }
+                if (closed)
+                    parts.push("Z");
+                return parts.join(" ");
+            }),
+        });
+    }
+    /** Untracked snapshot of the points list. */
+    get points() {
+        return this._points.peek();
+    }
+    get last() {
+        const ps = this._points.peek();
+        return ps[ps.length - 1];
+    }
+    extend(p) {
+        this._points.value = [...this._points.peek(), p];
+        return this;
+    }
+    to(p) {
+        return this.extend(p);
+    }
+    /** Step `n` up from the last vertex. */
+    u(n) {
+        return this.extend(this.last.up(n));
+    }
+    /** Step `n` down from the last vertex. */
+    d(n) {
+        return this.extend(this.last.down(n));
+    }
+    /** Step `n` left from the last vertex. */
+    l(n) {
+        return this.extend(this.last.left(n));
+    }
+    /** Step `n` right from the last vertex. */
+    r(n) {
+        return this.extend(this.last.right(n));
+    }
+    offset(dx, dy) {
+        return this.extend(this.last.offset(dx, dy));
+    }
+    /** Walk `dist` at `angle` (radians, y-down). */
+    along(angle, dist) {
+        const af = reader(angle);
+        const df = reader(dist);
+        return this.extend(this.last.offset(derive(() => Math.cos(af()) * df()), derive(() => Math.sin(af()) * df())));
+    }
+    segments() {
+        const ps = this._points.peek();
+        const segs = [];
+        for (let i = 0; i < ps.length - 1; i++) {
+            segs.push({ type: "line", from: ps[i].value, to: ps[i + 1].value });
+        }
+        if (this.closed && ps.length > 1) {
+            segs.push({ type: "line", from: ps[ps.length - 1].value, to: ps[0].value });
+        }
+        return segs;
+    }
+}
+/** Start a fluent path at `start`. Chain `.to(p)` / `.u(n)` / `.d(n)`
+ *  / `.l(n)` / `.r(n)` / `.offset(dx, dy)` / `.along(angle, dist)` and
+ *  pass to `s(...)` to render. */
+export const path = (start, opts) => new Path(start, opts);
+/** Low-level `<path>` driven by a reactive `d` string — build the `d`
+ *  attribute directly (dense plots, custom samplers). One attr-effect drives
+ *  the whole path, far cheaper than N shapes for dense geometry. Pass `box`
+ *  for auto-fit; otherwise contributes a zero box (caller owns the viewBox). */
+export function pathD(d, opts = {}) {
+    const sh = new Shape("path", opts.box ?? (() => ({ x: 0, y: 0, w: 0, h: 0 })), {
+        opacity: opts.opacity,
+    });
+    sh.attr("d", d);
+    sh.attr("fill", opts.fill ?? "none");
+    sh.attr("stroke", opts.stroke ?? tokens.stroke);
+    sh.attr("stroke-width", opts.strokeWidth ?? (opts.thin ? tokens.thinWeight : tokens.weight));
+    sh.attr("vector-effect", "non-scaling-stroke");
+    if (opts.cap)
+        sh.attr("stroke-linecap", opts.cap);
+    if (opts.join)
+        sh.attr("stroke-linejoin", opts.join);
+    if (opts.dasharray !== undefined)
+        sh.attr("stroke-dasharray", opts.dasharray);
+    return sh;
+}

package/dist/shapes/rect.d.ts

@@ -0,0 +1,30 @@
+import { Box, Num, type Val, Vec } from "../core/index.js";
+import { type CommonOpts, type Segment, Shape } from "./shape.js";
+export interface RectOpts extends CommonOpts {
+    corner?: Val<number>;
+}
+export declare class Rect<O extends RectOpts = RectOpts> extends Shape<O> {
+    readonly x: Num;
+    readonly y: Num;
+    readonly w: Num;
+    readonly h: Num;
+    readonly corner: Num;
+    constructor(x: Val<number>, y: Val<number>, w: Val<number>, h: Val<number>, opts?: O);
+    boundary(toward: Vec): Vec;
+    /** Concentric outline — a new unmounted Rect inflated by `by` per
+     *  side; corner radius bumps to keep curves parallel. */
+    outline(by: Val<number>, opts?: RectOpts): Rect;
+    /** 4 sides + 4 corner quarter-arcs (or just sides when `corner === 0`). */
+    segments(): Segment[];
+}
+/** Rect factory:
+ *
+ *   rect(x, y, w, h, opts?)             — corner-based (canonical)
+ *   rect(box, opts?)                    — fill another Box (use `shape.box`)
+ *   rect(center: Point, w, h, opts?)    — centered on a Point
+ *   rect(p1: Point, p2: Point, opts?)   — between two corner Points
+ */
+export declare function rect<const O extends RectOpts>(b: Box, opts?: O): Rect<O>;
+export declare function rect<const O extends RectOpts>(p1: Vec, p2: Vec, opts?: O): Rect<O>;
+export declare function rect<const O extends RectOpts>(center: Vec, w: Val<number>, h: Val<number>, opts?: O): Rect<O>;
+export declare function rect<const O extends RectOpts>(x: Val<number>, y: Val<number>, w: Val<number>, h: Val<number>, opts?: O): Rect<O>;