@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/webgl/field/index.d.ts

@@ -0,0 +1,4 @@
+export { createField, type FieldColors, type FieldHandle, type FieldOptions } from './field.ts';
+export { buildTarget, flower, fromRaster, mindmap, mulberry32, scattered, statue, temple, TARGET_IDS, type PointSet, type TargetId } from './targets.ts';
+export { rasterizeSvg, sampleRaster, type RasterSample } from './raster.ts';
+export { createCanvasRuntime, type CanvasMotion, type CanvasRuntime, type CanvasRuntimeOptions } from './canvas-runtime.ts';

package/dist/lib/components/webgl/field/index.js

@@ -0,0 +1,4 @@
+export { createField } from "./field.js";
+export { buildTarget, flower, fromRaster, mindmap, mulberry32, scattered, statue, temple, TARGET_IDS } from "./targets.js";
+export { rasterizeSvg, sampleRaster } from "./raster.js";
+export { createCanvasRuntime } from "./canvas-runtime.js";

package/dist/lib/components/webgl/field/raster.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Raster helpers for the assembly field — turn a drawing (the brand mark, an
+ * icon, a word) into the `[x, y, alpha]` triples `fromRaster` scans.
+ * DOM-only; keep it out of the pure target generators.
+ */
+export interface RasterSample {
+    data: Float32Array;
+    count: number;
+}
+/** Sample every pixel at or above `threshold` alpha as a normalised triple. */
+export declare function sampleRaster(image: ImageData, threshold?: number): RasterSample;
+/** Draw an SVG string to an offscreen canvas and sample it. `currentColor`
+ *  is forced opaque so the alpha channel is the shape. */
+export declare function rasterizeSvg(svg: string, size?: number, threshold?: number): Promise<RasterSample>;

package/dist/lib/components/webgl/field/raster.js

@@ -0,0 +1,44 @@
+/**
+ * Raster helpers for the assembly field — turn a drawing (the brand mark, an
+ * icon, a word) into the `[x, y, alpha]` triples `fromRaster` scans.
+ * DOM-only; keep it out of the pure target generators.
+ */
+/** Sample every pixel at or above `threshold` alpha as a normalised triple. */
+export function sampleRaster(image, threshold = 0.4) {
+    const { width, height, data } = image;
+    const out = [];
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const a = data[(y * width + x) * 4 + 3] / 255;
+            if (a >= threshold)
+                out.push(x / width, y / height, a);
+        }
+    }
+    return { data: new Float32Array(out), count: out.length / 3 };
+}
+/** Draw an SVG string to an offscreen canvas and sample it. `currentColor`
+ *  is forced opaque so the alpha channel is the shape. */
+export async function rasterizeSvg(svg, size = 360, threshold = 0.35) {
+    const opaque = svg.replace(/currentColor/g, '#ffffff');
+    const blob = new Blob([opaque], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    try {
+        const img = new Image();
+        await new Promise((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = (event) => reject(new Error('svg raster failed', { cause: event }));
+            img.src = url;
+        });
+        const c = document.createElement('canvas');
+        c.width = size;
+        c.height = size;
+        const ctx = c.getContext('2d');
+        if (!ctx)
+            throw new Error('2d context unavailable');
+        ctx.drawImage(img, 0, 0, size, size);
+        return sampleRaster(ctx.getImageData(0, 0, size, size), threshold);
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}

package/dist/lib/components/webgl/field/targets.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Assembly targets — point sets the field assembles into.
+ *
+ * Every generator returns exactly `count` points so the renderer can morph
+ * between any two targets attribute-for-attribute. Points carry an
+ * `intensity` (0..1), the way a LiDAR return carries reflectance: surfaces
+ * facing the scanner read brighter, edges and nodes read brightest. Nothing
+ * here touches the DOM; the logo target takes an already-sampled raster.
+ */
+export interface PointSet {
+    /** xyz triples, world units roughly within [-1, 1]. */
+    positions: Float32Array;
+    /** one 0..1 value per point. */
+    intensity: Float32Array;
+    count: number;
+}
+export type TargetId = 'flower' | 'logo' | 'temple' | 'rose' | 'mindmap';
+export declare function mulberry32(seed: number): () => number;
+/** Flower of life: 19 circles in the plane, plus a faint second plane
+ *  turned 90° so the figure reads as an object, not a drawing. */
+export declare function flower(count: number, seed?: number): PointSet;
+/** A scanned raster (the logo): `pixels` is a list of [x, y, alpha] in 0..1
+ *  image space, already thresholded by the caller. Points get a shallow
+ *  relief so the mark reads as engraved, not printed. */
+export declare function fromRaster(count: number, pixels: ArrayLike<number>, pixelCount: number, seed?: number, relief?: number): PointSet;
+/** A small temple: three steps, six fluted columns with entasis, capitals,
+ *  an entablature, a pediment. Sampled by surface area like a scan. */
+export declare function temple(count: number, seed?: number): PointSet;
+/** A figure on a plinth: head, neck, shoulders, torso, arms folded, robe. */
+export declare function statue(count: number, seed?: number): PointSet;
+/** A rose window: Gothic tracery in the plane facing the camera — an outer
+ *  ring, twelve spokes, twelve petal circles, a ring of small roundels, and a
+ *  quatrefoil at the centre (the mark's own figure, four circles). Every line
+ *  is a tube with depth, so it reads as stone, not a drawing. */
+export declare function rose(count: number, seed?: number): PointSet;
+/** A mind map: a root, six branches, each with children, edges as tubes;
+ *  nodes read brightest, edges dimmer, the way a scan sees thin things. */
+export declare function mindmap(count: number, seed?: number): PointSet;
+/** A cloud of loose parts — the state between assemblies. */
+export declare function scattered(count: number, seed?: number, radius?: number): PointSet;
+export declare const TARGET_IDS: TargetId[];
+/** Build a target by id. `logoPixels` is required for 'logo'. */
+export declare function buildTarget(id: TargetId, count: number, logoPixels?: {
+    data: ArrayLike<number>;
+    count: number;
+}): PointSet;

package/dist/lib/components/webgl/field/targets.js

@@ -0,0 +1,479 @@
+/**
+ * Assembly targets — point sets the field assembles into.
+ *
+ * Every generator returns exactly `count` points so the renderer can morph
+ * between any two targets attribute-for-attribute. Points carry an
+ * `intensity` (0..1), the way a LiDAR return carries reflectance: surfaces
+ * facing the scanner read brighter, edges and nodes read brightest. Nothing
+ * here touches the DOM; the logo target takes an already-sampled raster.
+ */
+/* ------------------------------------------------------------------ */
+/* deterministic random                                                 */
+/* ------------------------------------------------------------------ */
+export function mulberry32(seed) {
+    let a = seed >>> 0;
+    return () => {
+        a = (a + 0x6d2b79f5) >>> 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+const LIGHT = normalize([0.35, 0.8, 0.5]);
+function normalize(v) {
+    const l = Math.hypot(v[0], v[1], v[2]) || 1;
+    return [v[0] / l, v[1] / l, v[2] / l];
+}
+/** LiDAR-ish reflectance: mostly the facing of the surface, a little grain. */
+function reflectance(n, rng) {
+    const d = n[0] * LIGHT[0] + n[1] * LIGHT[1] + n[2] * LIGHT[2];
+    // two-sided: a scan lights what it sees; the back of a surface still returns
+    const facing = Math.abs(d);
+    // grazing surfaces (silhouettes) return a little brighter, like edges in a scan
+    const rim = Math.pow(1 - facing, 3) * 0.25;
+    return Math.min(1, 0.4 + facing * 0.45 + rim + rng() * 0.12);
+}
+/** Axis-aligned box centred at c with half-extents h; all six faces. */
+function box(c, h) {
+    const faces = [];
+    const areas = [h[1] * h[2], h[0] * h[2], h[0] * h[1]].map((a) => a * 4);
+    for (let axis = 0; axis < 3; axis++) {
+        faces.push({ axis, sign: 1, area: areas[axis] });
+        faces.push({ axis, sign: -1, area: areas[axis] });
+    }
+    const total = faces.reduce((s, f) => s + f.area, 0);
+    return {
+        area: total,
+        sample(rng) {
+            let r = rng() * total;
+            let face = faces[0];
+            for (const f of faces) {
+                if (r < f.area) {
+                    face = f;
+                    break;
+                }
+                r -= f.area;
+            }
+            const p = [
+                c[0] + (rng() * 2 - 1) * h[0],
+                c[1] + (rng() * 2 - 1) * h[1],
+                c[2] + (rng() * 2 - 1) * h[2]
+            ];
+            p[face.axis] = c[face.axis] + face.sign * h[face.axis];
+            const n = [0, 0, 0];
+            n[face.axis] = face.sign;
+            return { p, n };
+        }
+    };
+}
+/** Vertical cylinder (open ends optional), with fluting and entasis hooks. */
+function cylinder(c, radius, height, opts = {}) {
+    const flutes = opts.flutes ?? 0;
+    const entasis = opts.entasis ?? 0;
+    const side = 2 * Math.PI * radius * height;
+    const cap = opts.caps ? Math.PI * radius * radius * 2 : 0;
+    return {
+        area: side + cap,
+        sample(rng) {
+            if (rng() * (side + cap) < side) {
+                const a = rng() * Math.PI * 2;
+                const v = rng(); // 0 bottom .. 1 top
+                // entasis: the shaft swells slightly a third of the way up
+                const swell = 1 + entasis * Math.sin(Math.PI * Math.min(1, v * 1.5)) * 0.5;
+                // fluting: shallow concave channels around the shaft
+                const flute = flutes ? 1 - 0.06 * (0.5 + 0.5 * Math.cos(a * flutes)) : 1;
+                const r = radius * swell * flute;
+                const p = [
+                    c[0] + Math.cos(a) * r,
+                    c[1] - height / 2 + v * height,
+                    c[2] + Math.sin(a) * r
+                ];
+                const n = normalize([Math.cos(a), 0, Math.sin(a)]);
+                return { p, n };
+            }
+            const a = rng() * Math.PI * 2;
+            const r = Math.sqrt(rng()) * radius;
+            const top = rng() < 0.5;
+            return {
+                p: [
+                    c[0] + Math.cos(a) * r,
+                    c[1] + (top ? height / 2 : -height / 2),
+                    c[2] + Math.sin(a) * r
+                ],
+                n: [0, top ? 1 : -1, 0]
+            };
+        }
+    };
+}
+/** Ellipsoid centred at c with radii r. */
+function ellipsoid(c, r) {
+    const area = 4 * Math.PI * Math.cbrt((r[0] * r[1] * r[2]) ** 2); // rough
+    return {
+        area,
+        sample(rng) {
+            const u = rng() * 2 - 1;
+            const a = rng() * Math.PI * 2;
+            const s = Math.sqrt(1 - u * u);
+            const d = [s * Math.cos(a), u, s * Math.sin(a)];
+            const p = [c[0] + d[0] * r[0], c[1] + d[1] * r[1], c[2] + d[2] * r[2]];
+            const n = normalize([d[0] / r[0], d[1] / r[1], d[2] / r[2]]);
+            return { p, n };
+        }
+    };
+}
+/** Triangular prism along Z (a pediment): base width w, height h, depth d. */
+function pediment(c, w, h, d) {
+    const slope = Math.hypot(w / 2, h);
+    const front = (w * h) / 2;
+    const areas = [front, front, slope * d, slope * d, w * d];
+    const total = areas.reduce((a, b) => a + b, 0);
+    return {
+        area: total,
+        sample(rng) {
+            let r = rng() * total;
+            let k = 0;
+            while (k < areas.length - 1 && r >= areas[k]) {
+                r -= areas[k];
+                k++;
+            }
+            if (k < 2) {
+                // front/back triangle: uniform barycentric sample on
+                // A(-w/2,0) B(w/2,0) C(0,h)
+                let u = rng(), v = rng();
+                if (u + v > 1) {
+                    u = 1 - u;
+                    v = 1 - v;
+                }
+                const px = -w / 2 + u * w + v * (w / 2);
+                const py = v * h;
+                const z = c[2] + (k === 0 ? d / 2 : -d / 2);
+                return { p: [c[0] + px, c[1] + py, z], n: [0, 0, k === 0 ? 1 : -1] };
+            }
+            if (k < 4) {
+                // sloped roof faces
+                const t = rng();
+                const z = c[2] + (rng() * 2 - 1) * (d / 2);
+                const sign = k === 2 ? -1 : 1;
+                const px = sign * (w / 2) * (1 - t);
+                const py = t * h;
+                const n = normalize([sign * h, w / 2, 0]);
+                return { p: [c[0] + px, c[1] + py, z], n };
+            }
+            // underside
+            return {
+                p: [c[0] + (rng() * 2 - 1) * (w / 2), c[1], c[2] + (rng() * 2 - 1) * (d / 2)],
+                n: [0, -1, 0]
+            };
+        }
+    };
+}
+/** Torus (a column capital's echinus, a node ring). */
+function torus(c, R, r) {
+    return {
+        area: 4 * Math.PI * Math.PI * R * r,
+        sample(rng) {
+            const a = rng() * Math.PI * 2;
+            const b = rng() * Math.PI * 2;
+            const cx = Math.cos(a), sz = Math.sin(a);
+            const p = [
+                c[0] + (R + r * Math.cos(b)) * cx,
+                c[1] + r * Math.sin(b),
+                c[2] + (R + r * Math.cos(b)) * sz
+            ];
+            const n = normalize([Math.cos(b) * cx, Math.sin(b), Math.cos(b) * sz]);
+            return { p, n };
+        }
+    };
+}
+/** Straight segment as a thin tube — for edges in the mind map. */
+function segment(a, b, radius) {
+    const len = Math.hypot(b[0] - a[0], b[1] - a[1], b[2] - a[2]);
+    return {
+        area: 2 * Math.PI * radius * len,
+        sample(rng) {
+            const t = rng();
+            const p = [
+                a[0] + (b[0] - a[0]) * t,
+                a[1] + (b[1] - a[1]) * t,
+                a[2] + (b[2] - a[2]) * t
+            ];
+            const j = radius;
+            const n = normalize([rng() - 0.5, rng() - 0.5, rng() - 0.5]);
+            return { p: [p[0] + n[0] * j, p[1] + n[1] * j, p[2] + n[2] * j], n };
+        }
+    };
+}
+/** Sample `count` points across surfaces, proportional to area. */
+function scan(surfaces, count, rng, boost = 0) {
+    const total = surfaces.reduce((s, f) => s + f.area, 0);
+    const positions = new Float32Array(count * 3);
+    const intensity = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+        let r = rng() * total;
+        let s = surfaces[0];
+        for (const f of surfaces) {
+            if (r < f.area) {
+                s = f;
+                break;
+            }
+            r -= f.area;
+        }
+        const { p, n } = s.sample(rng);
+        positions[i * 3] = p[0];
+        positions[i * 3 + 1] = p[1];
+        positions[i * 3 + 2] = p[2];
+        intensity[i] = Math.min(1, reflectance(n, rng) + boost);
+    }
+    return { positions, intensity, count };
+}
+/* ------------------------------------------------------------------ */
+/* targets                                                              */
+/* ------------------------------------------------------------------ */
+/** Flower of life: 19 circles in the plane, plus a faint second plane
+ *  turned 90° so the figure reads as an object, not a drawing. */
+export function flower(count, seed = 1) {
+    const rng = mulberry32(seed);
+    const R = 0.28;
+    const centres = [[0, 0]];
+    for (let k = 0; k < 6; k++)
+        centres.push([Math.cos((k * Math.PI) / 3), Math.sin((k * Math.PI) / 3)]);
+    for (let j = 0; j < 12; j++) {
+        const a = (j * Math.PI) / 6;
+        const rr = j % 2 === 0 ? 2 : Math.sqrt(3);
+        centres.push([Math.cos(a) * rr, Math.sin(a) * rr]);
+    }
+    const positions = new Float32Array(count * 3);
+    const intensity = new Float32Array(count);
+    const planeShare = Math.floor(count * 0.94);
+    for (let i = 0; i < count; i++) {
+        const inPlane = i < planeShare;
+        const c = centres[Math.floor(rng() * centres.length)];
+        const a = rng() * Math.PI * 2;
+        const x = c[0] * R + Math.cos(a) * R;
+        const y = c[1] * R + Math.sin(a) * R;
+        const jitter = (rng() - 0.5) * 0.003;
+        if (inPlane) {
+            positions[i * 3] = x;
+            positions[i * 3 + 1] = y;
+            positions[i * 3 + 2] = jitter;
+            // intersections (where circles cross) read brighter: count near-neighbours cheaply by distance to another centre
+            let near = 0;
+            for (const d of centres) {
+                const dd = Math.hypot(x - d[0] * R, y - d[1] * R);
+                if (Math.abs(dd - R) < 0.006)
+                    near++;
+            }
+            intensity[i] = Math.min(1, 0.45 + near * 0.18 + rng() * 0.1);
+        }
+        else {
+            // faint depth plane, turned about the vertical axis
+            positions[i * 3] = jitter;
+            positions[i * 3 + 1] = y;
+            positions[i * 3 + 2] = x;
+            intensity[i] = 0.2 + rng() * 0.15;
+        }
+    }
+    return { positions, intensity, count };
+}
+/** A scanned raster (the logo): `pixels` is a list of [x, y, alpha] in 0..1
+ *  image space, already thresholded by the caller. Points get a shallow
+ *  relief so the mark reads as engraved, not printed. */
+export function fromRaster(count, pixels, pixelCount, seed = 2, relief = 0.05) {
+    const rng = mulberry32(seed);
+    const positions = new Float32Array(count * 3);
+    const intensity = new Float32Array(count);
+    if (pixelCount === 0)
+        return { positions, intensity, count };
+    for (let i = 0; i < count; i++) {
+        const k = Math.floor(rng() * pixelCount) * 3;
+        const x = pixels[k] * 2 - 1;
+        const y = 1 - pixels[k + 1] * 2;
+        const a = pixels[k + 2];
+        positions[i * 3] = x * 0.62 + (rng() - 0.5) * 0.002;
+        positions[i * 3 + 1] = y * 0.62 + (rng() - 0.5) * 0.002;
+        positions[i * 3 + 2] = (rng() - 0.5) * relief * a;
+        intensity[i] = 0.5 + a * 0.4 + rng() * 0.1;
+    }
+    return { positions, intensity, count };
+}
+/** A small temple: three steps, six fluted columns with entasis, capitals,
+ *  an entablature, a pediment. Sampled by surface area like a scan. */
+export function temple(count, seed = 3) {
+    const rng = mulberry32(seed);
+    const s = [];
+    const W = 1.1, D = 0.62;
+    // stylobate: three steps
+    for (let k = 0; k < 3; k++) {
+        const inset = k * 0.05;
+        s.push(box([0, -0.46 + k * 0.04, 0], [W / 2 + 0.12 - inset, 0.02, D / 2 + 0.12 - inset]));
+    }
+    // columns: 6 across the front, 2 behind at the corners
+    const colH = 0.62, colR = 0.045, baseY = -0.34;
+    const xs = [-0.45, -0.27, -0.09, 0.09, 0.27, 0.45];
+    for (const x of xs) {
+        s.push(cylinder([x, baseY + colH / 2, D / 2 - 0.06], colR, colH, { flutes: 20, entasis: 0.12 }));
+        s.push(torus([x, baseY + colH + 0.012, D / 2 - 0.06], colR * 1.15, 0.014));
+        s.push(box([x, baseY + colH + 0.04, D / 2 - 0.06], [colR * 1.5, 0.012, colR * 1.5]));
+    }
+    for (const x of [-0.45, 0.45]) {
+        s.push(cylinder([x, baseY + colH / 2, -D / 2 + 0.06], colR, colH, { flutes: 20, entasis: 0.12 }));
+    }
+    // cella (inner walls, faint through the colonnade)
+    s.push(box([0, baseY + colH / 2, 0], [0.34, colH / 2, 0.2]));
+    // entablature
+    s.push(box([0, baseY + colH + 0.09, 0], [W / 2 + 0.06, 0.04, D / 2 + 0.06]));
+    // pediment
+    s.push(pediment([0, baseY + colH + 0.13, 0], W + 0.12, 0.16, D + 0.12));
+    return scan(s, count, rng);
+}
+/** A figure on a plinth: head, neck, shoulders, torso, arms folded, robe. */
+export function statue(count, seed = 4) {
+    const rng = mulberry32(seed);
+    const s = [];
+    s.push(box([0, -0.5, 0], [0.24, 0.05, 0.24])); // plinth
+    s.push(box([0, -0.41, 0], [0.19, 0.04, 0.19])); // plinth cap
+    s.push(cylinder([0, -0.12, 0], 0.17, 0.5, { flutes: 9, entasis: 0.05 })); // robe (fluted like drapery)
+    s.push(ellipsoid([0, 0.16, 0], [0.2, 0.12, 0.13])); // shoulders
+    s.push(ellipsoid([0, 0.05, 0.02], [0.15, 0.16, 0.11])); // torso
+    s.push(cylinder([0, 0.29, 0], 0.045, 0.08)); // neck
+    s.push(ellipsoid([0, 0.4, 0.01], [0.085, 0.105, 0.09])); // head
+    s.push(ellipsoid([0, 0.46, -0.01], [0.09, 0.05, 0.095])); // hair/crown
+    // arms folded across the torso
+    s.push(cylinder([0.11, 0.09, 0.1], 0.03, 0.22));
+    s.push(cylinder([-0.11, 0.09, 0.1], 0.03, 0.22));
+    s.push(ellipsoid([0, 0.07, 0.13], [0.16, 0.035, 0.035])); // forearms across
+    return scan(s, count, rng);
+}
+/** Points along a circular arc as a thin tube — tracery. */
+function arc(c, radius, from, to, tube, axis = 'z') {
+    const len = Math.abs(to - from) * radius;
+    return {
+        area: 2 * Math.PI * tube * len,
+        sample(rng) {
+            const a = from + (to - from) * rng();
+            const b = rng() * Math.PI * 2;
+            const ca = Math.cos(a), sa = Math.sin(a);
+            // tube cross-section: radial (in plane) and along the axis
+            const rr = radius + Math.cos(b) * tube;
+            const off = Math.sin(b) * tube;
+            const p = axis === 'z'
+                ? [c[0] + ca * rr, c[1] + sa * rr, c[2] + off]
+                : [c[0] + off, c[1] + sa * rr, c[2] + ca * rr];
+            const n = axis === 'z'
+                ? normalize([ca * Math.cos(b), sa * Math.cos(b), Math.sin(b)])
+                : normalize([Math.sin(b), sa * Math.cos(b), ca * Math.cos(b)]);
+            return { p, n };
+        }
+    };
+}
+/** A rose window: Gothic tracery in the plane facing the camera — an outer
+ *  ring, twelve spokes, twelve petal circles, a ring of small roundels, and a
+ *  quatrefoil at the centre (the mark's own figure, four circles). Every line
+ *  is a tube with depth, so it reads as stone, not a drawing. */
+export function rose(count, seed = 4) {
+    const rng = mulberry32(seed);
+    const s = [];
+    const R = 0.62, tube = 0.007;
+    const TAU = Math.PI * 2;
+    // outer rim: two rings, the outer heavier
+    s.push(arc([0, 0, 0], R, 0, TAU, tube * 1.6));
+    s.push(arc([0, 0, 0], R * 0.9, 0, TAU, tube));
+    // twelve spokes from the hub to the rim
+    for (let k = 0; k < 12; k++) {
+        const a = (k / 12) * TAU;
+        s.push(segment([Math.cos(a) * R * 0.2, Math.sin(a) * R * 0.2, 0], [Math.cos(a) * R * 0.9, Math.sin(a) * R * 0.9, 0], tube * 0.8));
+    }
+    // twelve petals: circles centred between spokes at 0.55R, radius 0.19R
+    for (let k = 0; k < 12; k++) {
+        const a = ((k + 0.5) / 12) * TAU;
+        s.push(arc([Math.cos(a) * R * 0.55, Math.sin(a) * R * 0.55, 0], R * 0.19, 0, TAU, tube * 0.8));
+    }
+    // roundels between petals and rim
+    for (let k = 0; k < 12; k++) {
+        const a = (k / 12) * TAU;
+        s.push(arc([Math.cos(a) * R * 0.8, Math.sin(a) * R * 0.8, 0], R * 0.06, 0, TAU, tube * 0.6));
+    }
+    // hub ring and the quatrefoil: four circles of radius 0.11R centred at 0.11R
+    s.push(arc([0, 0, 0], R * 0.2, 0, TAU, tube));
+    for (let k = 0; k < 4; k++) {
+        const a = (k / 4) * TAU + Math.PI / 4;
+        s.push(arc([Math.cos(a) * R * 0.1, Math.sin(a) * R * 0.1, 0], R * 0.1, 0, TAU, tube * 0.7));
+    }
+    // a second, fainter plane behind — the wall the window sits in
+    s.push(arc([0, 0, -0.06], R * 1.02, 0, TAU, tube * 0.5));
+    return scan(s, count, rng, 0.05);
+}
+/** A mind map: a root, six branches, each with children, edges as tubes;
+ *  nodes read brightest, edges dimmer, the way a scan sees thin things. */
+export function mindmap(count, seed = 5) {
+    const rng = mulberry32(seed);
+    const s = [];
+    const root = [0, 0, 0];
+    s.push(ellipsoid(root, [0.07, 0.07, 0.07]));
+    const branches = 6;
+    for (let b = 0; b < branches; b++) {
+        const a = (b / branches) * Math.PI * 2 + 0.3;
+        const tilt = (rng() - 0.5) * 0.6;
+        const n1 = [Math.cos(a) * 0.42, tilt * 0.4, Math.sin(a) * 0.42];
+        s.push(segment(root, n1, 0.006));
+        s.push(ellipsoid(n1, [0.04, 0.04, 0.04]));
+        const kids = 2 + Math.floor(rng() * 3);
+        for (let k = 0; k < kids; k++) {
+            const spread = (k / Math.max(1, kids - 1) - 0.5) * 0.9;
+            const a2 = a + spread * 0.5;
+            const n2 = [
+                n1[0] + Math.cos(a2) * 0.28,
+                n1[1] + (rng() - 0.5) * 0.35,
+                n1[2] + Math.sin(a2) * 0.28
+            ];
+            s.push(segment(n1, n2, 0.004));
+            s.push(ellipsoid(n2, [0.022, 0.022, 0.022]));
+            if (rng() < 0.5) {
+                const n3 = [
+                    n2[0] + Math.cos(a2 + 0.4) * 0.14,
+                    n2[1] + (rng() - 0.5) * 0.2,
+                    n2[2] + Math.sin(a2 + 0.4) * 0.14
+                ];
+                s.push(segment(n2, n3, 0.003));
+                s.push(ellipsoid(n3, [0.014, 0.014, 0.014]));
+            }
+        }
+    }
+    // a couple of cross-links: the map is a graph, not a tree
+    s.push(segment([0.42, 0, 0], [-0.2, 0.1, 0.36], 0.003));
+    return scan(s, count, rng, 0.1);
+}
+/** A cloud of loose parts — the state between assemblies. */
+export function scattered(count, seed = 6, radius = 1.4) {
+    const rng = mulberry32(seed);
+    const positions = new Float32Array(count * 3);
+    const intensity = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+        const u = rng() * 2 - 1;
+        const a = rng() * Math.PI * 2;
+        const r = radius * Math.cbrt(rng());
+        const sq = Math.sqrt(1 - u * u);
+        positions[i * 3] = sq * Math.cos(a) * r;
+        positions[i * 3 + 1] = u * r * 0.7;
+        positions[i * 3 + 2] = sq * Math.sin(a) * r;
+        intensity[i] = 0.15 + rng() * 0.2;
+    }
+    return { positions, intensity, count };
+}
+export const TARGET_IDS = ['flower', 'logo', 'temple', 'rose', 'mindmap'];
+/** Build a target by id. `logoPixels` is required for 'logo'. */
+export function buildTarget(id, count, logoPixels) {
+    switch (id) {
+        case 'flower':
+            return flower(count);
+        case 'logo':
+            return logoPixels ? fromRaster(count, logoPixels.data, logoPixels.count) : flower(count, 9);
+        case 'temple':
+            return temple(count);
+        case 'rose':
+            return rose(count);
+        case 'mindmap':
+            return mindmap(count);
+    }
+}

package/dist/lib/components/webgl/index.d.ts

@@ -0,0 +1,9 @@
+export { default as FlowerOfLifeCanvas } from './FlowerOfLifeCanvas.svelte';
+export { default as NodeNetworkCanvas } from './NodeNetworkCanvas.svelte';
+export { default as CodeFlowCanvas } from './CodeFlowCanvas.svelte';
+export { default as OrbitCanvas } from './OrbitCanvas.svelte';
+export { default as ParticleFlowCanvas } from './ParticleFlowCanvas.svelte';
+export { default as PulseCanvas } from './PulseCanvas.svelte';
+export { default as HexGridCanvas } from './HexGridCanvas.svelte';
+export { default as AssemblyField } from './AssemblyField.svelte';
+export * from './field/index.ts';

package/dist/lib/components/webgl/index.js

@@ -0,0 +1,9 @@
+export { default as FlowerOfLifeCanvas } from './FlowerOfLifeCanvas.svelte';
+export { default as NodeNetworkCanvas } from './NodeNetworkCanvas.svelte';
+export { default as CodeFlowCanvas } from './CodeFlowCanvas.svelte';
+export { default as OrbitCanvas } from './OrbitCanvas.svelte';
+export { default as ParticleFlowCanvas } from './ParticleFlowCanvas.svelte';
+export { default as PulseCanvas } from './PulseCanvas.svelte';
+export { default as HexGridCanvas } from './HexGridCanvas.svelte';
+export { default as AssemblyField } from './AssemblyField.svelte';
+export * from "./field/index.js";

package/dist/lib/config/css-hash.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Stable scoped-style hash across an app's SSR and client builds.
+ *
+ * `svelte.config.js` imports this at CONFIG-LOAD time (plain Node/Bun, no Vite
+ * transform) so hashing must stay path-independent and dependency-free.
+ */
+export declare function pathIndependentCssHash({ css, name, hash }: {
+    css: string;
+    name?: string;
+    hash: (input: string) => string;
+}): string;

package/dist/lib/config/css-hash.js

@@ -0,0 +1,9 @@
+/**
+ * Stable scoped-style hash across an app's SSR and client builds.
+ *
+ * `svelte.config.js` imports this at CONFIG-LOAD time (plain Node/Bun, no Vite
+ * transform) so hashing must stay path-independent and dependency-free.
+ */
+export function pathIndependentCssHash({ css, name, hash }) {
+    return `svelte-${hash(`${name ?? ''}${css}`)}`;
+}