@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/surface-field/index.js

@@ -1,11 +1,17 @@
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
+import { effect, read as get, signal, untrack, write } from '@esportsplus/reactivity';
+import { pool } from '@esportsplus/workers';
+import { observer } from '../../shared/resize.js';
+import { observeIntersection } from '../../shared/visible.js';
+import engine, { scheduler } from './engine.js';
+import surface from './surface.js';
 import './scss/index.scss';
-const template_1a5zh7n1 = template_u1.template(`<div class='surface-field-surface'><button class='surface-field-surface-handle' type='button'></button><div class='surface-field-surface-content'></div><button class='surface-field-surface-resize' type='button'>`);
-const template_1a5zh7n7 = template_u1.template(`<div class='surface-field'><canvas aria-hidden='true' class='surface-field-canvas'></canvas><div class='surface-field-content'>`);
-const ALPHA_LEVELS = 32;
+const template_1a5zh7n1 = template_u1.template(`<div class='surface-field'><!--$--><div class='surface-field-content'>`);
+const template_1a5zh7n6 = template_u1.template(`<canvas aria-hidden='true' class='surface-field-canvas'>`);
+const ANGLE = /(-?[\d.]+)(deg|grad|rad|turn)\s*$/;
 const DEFAULTS = {
-    accent: '#6683e8',
+    accent: '',
     base: 0.14,
     breathe: 0,
     brightness: 0.2,
@@ -13,33 +19,52 @@ const DEFAULTS = {
     connected: true,
     gap: 22,
     lineRadius: 200,
+    links: null,
     pointerPush: 2,
     radius: 250,
+    ripple: null,
     ripplePush: 6,
     still: false,
     surfacePadding: 0,
     tint: 0,
     wander: false
 };
-const IDLE = 1500;
 const KEYS = Object.keys(DEFAULTS);
-const HALO = 0.75;
-const RIPPLE_LIFE = 1.4;
-const RIPPLE_SPEED = 520;
-const RIPPLE_WIDTH = 36;
+const METHODS = [
+    'camera',
+    'cancel',
+    'configure',
+    'links',
+    'pointer',
+    'press',
+    'recolor',
+    'release',
+    'resize',
+    'ripple',
+    'surfaces',
+    'visible'
+];
 const SELECTOR = '.surface-field-surface, [data-surface-field]';
-const TAU = Math.PI * 2;
-const TINT_LEVELS = 5;
-let colors = new Map(), probe = null, z = 1;
-function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
-function falloff(distance, radius) {
-    if (radius <= 0 || distance >= radius) {
-        return 0;
-    }
-    let t = distance / radius;
-    return (1 - t * t) * (1 - t * t);
+const SETTINGS = [
+    'base',
+    'breathe',
+    'brightness',
+    'connected',
+    'gap',
+    'lineRadius',
+    'pointerPush',
+    'radius',
+    'ripplePush',
+    'still',
+    'surfacePadding',
+    'tint',
+    'wander'
+];
+const UNITS = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
+let colors = new Map(), probe = null;
+function angle(value) {
+    let match = ANGLE.exec(value);
+    return match ? parseFloat(match[1]) * UNITS[match[2]] : 0;
 }
 function rgb(color) {
     let cached = colors.get(color);
@@ -58,112 +83,39 @@ function rgb(color) {
     colors.set(color, value);
     return value;
 }
-const surface = component(function ({ bounded = true, height = 160, label = 'surface', minHeight = 72, minWidth = 120, state, width = 240, x = 0, y = 0, ...attributes }, content) {
-    let element, start = null;
-    if (state) {
-        ({ height, width, x, y } = state);
-    }
-    function apply() {
-        if (!element) {
-            return;
-        }
-        let parent = element.parentElement;
-        width = Math.max(minWidth, width);
-        height = Math.max(minHeight, height);
-        if (bounded && parent) {
-            let pw = parent.clientWidth, ph = parent.clientHeight;
-            width = clamp(width, minWidth, Math.max(minWidth, pw));
-            height = clamp(height, minHeight, Math.max(minHeight, ph));
-            x = clamp(x, 0, Math.max(0, pw - width));
-            y = clamp(y, 0, Math.max(0, ph - height));
-        }
-        element.style.height = `${height}px`;
-        element.style.translate = `${x}px ${y}px`;
-        element.style.width = `${width}px`;
-        if (state && (state.height !== height || state.width !== width || state.x !== x || state.y !== y)) {
-            state.height = height;
-            state.width = width;
-            state.x = x;
-            state.y = y;
-        }
+function same(a, b) {
+    if (a.length !== b.length) {
+        return false;
     }
-    function begin(event) {
-        if (event.button !== 0 || !element) {
-            return;
+    for (let i = 0, n = a.length; i < n; i++) {
+        let x = a[i], y = b[i];
+        if (x.active !== y.active || x.ellipse !== y.ellipse || x.height !== y.height || x.id !== y.id
+            || x.radius !== y.radius || x.rotation !== y.rotation || x.width !== y.width || x.x !== y.x || x.y !== y.y) {
+            return false;
         }
-        event.currentTarget.setPointerCapture(event.pointerId);
-        element.classList.add('--active');
-        element.style.zIndex = String(++z);
-        start = {
-            h: height,
-            pointerX: event.clientX,
-            pointerY: event.clientY,
-            scale: element.getBoundingClientRect().width / element.offsetWidth || 1,
-            w: width,
-            x,
-            y
-        };
     }
-    function end() {
-        element?.classList.remove('--active');
-        start = null;
+    return true;
+}
+function style(element) {
+    let computed = getComputedStyle(element), corner = computed.borderTopLeftRadius, rotation = computed.rotate && computed.rotate !== 'none' ? angle(computed.rotate) : 0, transform = computed.transform;
+    if (transform && transform !== 'none') {
+        let m = transform.slice(transform.indexOf('(') + 1, -1).split(',');
+        rotation += Math.atan2(parseFloat(m[1]), parseFloat(m[0])) * 180 / Math.PI;
     }
-    function nudge(event, resize) {
-        let step = event.shiftKey ? 32 : 8, dx = event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0, dy = event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;
-        if (!dx && !dy) {
-            return;
-        }
-        event.preventDefault();
-        if (resize) {
-            width += dx;
-            height += dy;
-        }
-        else {
-            x += dx;
-            y += dy;
+    if (corner.endsWith('%')) {
+        let percent = parseFloat(corner);
+        if (percent >= 50) {
+            return { ellipse: true, radius: 0, rotation };
         }
-        apply();
+        let { height, width } = element.getBoundingClientRect();
+        return { ellipse: false, radius: Math.min(width, height) * percent / 100, rotation };
     }
-    return (() => {
-        let root_1a5zh7n0 = template_1a5zh7n1(), element_1a5zh7n2 = root_1a5zh7n0.firstChild, element_1a5zh7n3 = element_1a5zh7n2.firstElementChild, element_1a5zh7n4 = element_1a5zh7n3.nextElementSibling, element_1a5zh7n5 = element_1a5zh7n4.nextElementSibling;
-        template_u1.setProperties(element_1a5zh7n2, this?.attributes);
-        template_u1.setProperties(element_1a5zh7n2, attributes);
-        template_u1.onconnect(element_1a5zh7n2, (el) => {
-            element = el;
-            apply();
-        });
-        template_u1.setProperty(element_1a5zh7n3, 'aria-label', `Move ${label} surface with arrow keys`);
-        template_u1.delegate(element_1a5zh7n3, 'keydown', (event) => nudge(event, false));
-        template_u1.delegate(element_1a5zh7n3, 'lostpointercapture', end);
-        template_u1.delegate(element_1a5zh7n3, 'pointerdown', begin);
-        template_u1.delegate(element_1a5zh7n3, 'pointermove', (event) => {
-            if (!start) {
-                return;
-            }
-            x = start.x + (event.clientX - start.pointerX) / start.scale;
-            y = start.y + (event.clientY - start.pointerY) / start.scale;
-            apply();
-        });
-        template_u1.slot(element_1a5zh7n4, content, 1);
-        template_u1.setProperty(element_1a5zh7n5, 'aria-label', `Resize ${label} surface with arrow keys; right and down make it larger`);
-        template_u1.delegate(element_1a5zh7n5, 'keydown', (event) => nudge(event, true));
-        template_u1.delegate(element_1a5zh7n5, 'lostpointercapture', end);
-        template_u1.delegate(element_1a5zh7n5, 'pointerdown', begin);
-        template_u1.delegate(element_1a5zh7n5, 'pointermove', (event) => {
-            if (!start) {
-                return;
-            }
-            width = start.w + (event.clientX - start.pointerX) / start.scale;
-            height = start.h + (event.clientY - start.pointerY) / start.scale;
-            apply();
-        });
-        return root_1a5zh7n0;
-    })();
-});
-export default Object.assign(component(function (attributes, content) {
-    let given = {}, rest = {}, state = attributes.state;
+    return { ellipse: false, radius: parseFloat(corner) || 0, rotation };
+}
+export default component(function (attributes, content) {
+    let given = {}, rest = {}, state = attributes.state, url = attributes.worker;
     for (let key in attributes) {
-        if (key === 'state') {
+        if (key === 'state' || key === 'worker') {
             continue;
         }
         if (KEYS.includes(key)) {
@@ -173,302 +125,373 @@ export default Object.assign(component(function (attributes, content) {
             rest[key] = attributes[key];
         }
     }
-    let canvas, context = null, frame = 0, host, key = '', last = 0, light = { intensity: 0, x: 0, y: 0 }, reduced = matchMedia('(prefers-reduced-motion: reduce)'), observer, pointer = { at: -Infinity, inside: false, x: 0, y: 0 }, ripples = [], size = { dpr: 0, height: 0, width: 0 }, visible = false;
-    let bucket = new Uint16Array(0), dotAlpha = new Float32Array(0), dotLight = new Float32Array(0), lineLight = new Float32Array(0), order = new Uint32Array(0), px = new Float32Array(0), py = new Float32Array(0), segment = new Uint32Array(0), segmentBucket = new Uint16Array(0), segmentOrder = new Uint32Array(0), seed = new Float32Array(0);
-    function options() {
-        let snapshot = {};
-        for (let i = 0, n = KEYS.length; i < n; i++) {
-            let k = KEYS[i];
-            snapshot[k] = state?.[k] ?? given[k] ?? DEFAULTS[k];
-        }
-        let camera = snapshot.camera;
-        if (camera) {
-            snapshot.camera = { x: camera.x, y: camera.y, zoom: camera.zoom };
-        }
-        return snapshot;
+    let bounds = null, canvas, elements = null, field = null, generation = signal(0), host, last = { accent: '', camera: null, color: '', shapes: [], size: '' }, listening, measuring = 0, relink = true, resizer, running = 0, settle = 0, shown = true, styles = new WeakMap();
+    function box() {
+        return bounds ??= host.getBoundingClientRect();
     }
-    function grow(n) {
-        if (px.length >= n) {
-            return;
+    function collect() {
+        elements = Array.from(host.querySelectorAll(SELECTOR));
+        resizer?.disconnect();
+        resizer?.observe(host);
+        for (let i = 0, n = elements.length; i < n; i++) {
+            resizer?.observe(elements[i]);
         }
-        bucket = new Uint16Array(n);
-        dotAlpha = new Float32Array(n);
-        dotLight = new Float32Array(n);
-        lineLight = new Float32Array(n);
-        order = new Uint32Array(n);
-        px = new Float32Array(n);
-        py = new Float32Array(n);
-        segment = new Uint32Array(n * 4);
-        segmentBucket = new Uint16Array(n * 2);
-        segmentOrder = new Uint32Array(n * 2);
-        seed = new Float32Array(n);
+        return elements;
     }
-    function start() {
-        if (!frame && visible && host?.isConnected) {
-            last = performance.now();
-            frame = requestAnimationFrame(tick);
+    function curve(a, b) {
+        let points = [];
+        if (!a || !b) {
+            return points;
         }
+        let dx = b.x - a.x, dy = b.y - a.y, across = Math.abs(dx) >= Math.abs(dy), c1x = across ? a.x + dx / 2 : a.x, c1y = across ? a.y : a.y + dy / 2, c2x = across ? b.x - dx / 2 : b.x, c2y = across ? b.y : b.y - dy / 2;
+        for (let i = 0; i <= 32; i++) {
+            let t = i / 32, u = 1 - t;
+            points.push(u * u * u * a.x + 3 * u * u * t * c1x + 3 * u * t * t * c2x + t * t * t * b.x, u * u * u * a.y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * b.y);
+        }
+        return points;
     }
-    function stop() {
-        cancelAnimationFrame(frame);
-        frame = 0;
-    }
-    function tick(now) {
-        frame = requestAnimationFrame(tick);
-        if (!host || !canvas || !context) {
+    function measure() {
+        measuring = 0;
+        if (!host || !field) {
             return;
         }
-        let dt = Math.min(64, now - last) / 1000, o = options(), width = host.clientWidth, height = host.clientHeight, dpr = Math.min(2, devicePixelRatio || 1);
-        last = now;
-        if (width !== size.width || height !== size.height || dpr !== size.dpr) {
-            canvas.height = Math.max(1, Math.round(height * dpr));
-            canvas.width = Math.max(1, Math.round(width * dpr));
-            size = { dpr, height, width };
-            key = '';
-        }
-        let bounds = host.getBoundingClientRect(), elements = host.querySelectorAll(SELECTOR), rects = [];
-        for (let i = 0, n = elements.length; i < n; i++) {
-            let r = elements[i].getBoundingClientRect();
-            if (r.width && r.height) {
-                rects.push({
-                    bottom: r.bottom - bounds.top,
-                    left: r.left - bounds.left,
-                    right: r.right - bounds.left,
-                    top: r.top - bounds.top
-                });
+        let changed = false, height = host.clientHeight, width = host.clientWidth, dpr = Math.min(2, devicePixelRatio || 1), size = `${width} ${height} ${dpr}`;
+        bounds = host.getBoundingClientRect();
+        if (size !== last.size) {
+            changed = true;
+            field.resize(width, height, dpr);
+            last.size = size;
+        }
+        let list = elements ?? collect(), shapes = [];
+        for (let i = 0, n = list.length; i < n; i++) {
+            let element = list[i], r = element.getBoundingClientRect();
+            if (!r.width || !r.height) {
+                continue;
+            }
+            let s = styles.get(element);
+            if (!s) {
+                s = style(element);
+                styles.set(element, s);
             }
+            let turn = s.rotation * Math.PI / 180, cos = Math.abs(Math.cos(turn)), sin = Math.abs(Math.sin(turn)), w = element.offsetWidth || r.width, h = element.offsetHeight || r.height, scale = r.width / (w * cos + h * sin) || 1;
+            shapes.push({
+                active: element.classList.contains('--active'),
+                ellipse: s.ellipse,
+                height: h * scale,
+                id: element.getAttribute('data-surface-field') ?? '',
+                radius: s.radius * scale,
+                rotation: s.rotation,
+                width: w * scale,
+                x: r.left - bounds.left + r.width / 2,
+                y: r.top - bounds.top + r.height / 2
+            });
         }
-        let animate = !o.still && !reduced.matches, intensity = 0, target = { x: light.x, y: light.y }, wandering = false;
-        if (animate && pointer.inside) {
-            intensity = 1;
-            target = { x: pointer.x, y: pointer.y };
+        if (!same(shapes, last.shapes)) {
+            changed = relink = true;
+            field.surfaces(shapes);
+            last.shapes = shapes;
         }
-        else if (animate && o.wander && now - pointer.at > IDLE) {
-            let t = now / 1000;
-            intensity = 0.85;
-            target = {
-                x: width / 2 + Math.cos(t * 0.23) * width * 0.34 + Math.sin(t * 0.57) * width * 0.08,
-                y: height / 2 + Math.sin(t * 0.31) * height * 0.3 + Math.cos(t * 0.49) * height * 0.08
-            };
-            wandering = true;
+        let camera = read('camera');
+        if (camera) {
+            if (!last.camera || last.camera.x !== camera.x || last.camera.y !== camera.y || last.camera.zoom !== camera.zoom) {
+                changed = relink = true;
+                last.camera = { x: camera.x, y: camera.y, zoom: camera.zoom };
+                field.camera(last.camera);
+            }
         }
-        if (light.intensity < 0.01 && intensity > 0) {
-            light.x = target.x;
-            light.y = target.y;
+        else if (last.camera) {
+            changed = relink = true;
+            last.camera = null;
+            field.camera(null);
         }
-        let follow = 1 - Math.exp(-dt * (wandering ? 2.5 : 16)), fade = 1 - Math.exp(-dt * 6);
-        light.intensity += (intensity - light.intensity) * fade;
-        light.x += (target.x - light.x) * follow;
-        light.y += (target.y - light.y) * follow;
-        if (!animate) {
-            light.intensity = 0;
-            ripples.length = 0;
+        if (relink) {
+            relink = false;
+            field.links(paths());
         }
-        else if (ripples.length) {
-            ripples = ripples.filter((ripple) => (now - ripple.born) / 1000 < RIPPLE_LIFE);
+        field.flush();
+        if (changed || running > 0) {
+            settle = 0;
+            schedule();
         }
-        let color = getComputedStyle(canvas).color, settled = Math.abs(intensity - light.intensity) < 0.002
-            && (light.intensity < 0.002 || (Math.abs(target.x - light.x) < 0.1 && Math.abs(target.y - light.y) < 0.1)), signature = JSON.stringify([o, color, rects, pointer.inside && animate ? [pointer.x, pointer.y] : 0]);
-        if (settled && !wandering && !ripples.length && !(animate && o.breathe > 0) && signature === key) {
-            return;
+        else if (++settle < 2) {
+            schedule();
         }
-        key = signature;
-        draw(o, rects, color, animate ? now : 0, animate);
     }
-    function draw(o, rects, color, now, animate) {
-        let ctx = context, { dpr, height, width } = size, camera = o.camera, gap = Math.max(6, o.gap) * (camera ? Math.max(0.01, camera.zoom) : 1), zoom = camera ? Math.max(0.01, camera.zoom) : 1;
-        while (gap < 8) {
-            gap *= 2;
-        }
-        let cols = Math.floor(width / gap) + 2, rows = Math.floor(height / gap) + 2, n = cols * rows, i0 = camera ? Math.floor(-camera.x / gap) : 0, j0 = camera ? Math.floor(-camera.y / gap) : 0, ox = camera ? camera.x + i0 * gap : (width - (cols - 1) * gap) / 2, oy = camera ? camera.y + j0 * gap : (height - (rows - 1) * gap) / 2, padding = o.surfacePadding * zoom, clear = Math.max(2, gap * 0.8 + padding), band = Math.max(clear + gap, gap * 3 + padding), halo = band + gap * 1.5, push = Math.min(o.radius, gap * 5), peak = Math.min(1, o.brightness * 2.5), time = now / 1000;
-        grow(n);
-        for (let j = 0; j < rows; j++) {
-            for (let i = 0; i < cols; i++) {
-                let k = j * cols + i, x = ox + i * gap, y = oy + j * gap, glow = 0, shown = 1;
-                seed[k] = ((Math.sin((i + i0) * 12.9898 + (j + j0) * 78.233) * 43758.5453) % 1 + 1) % 1;
-                for (let r = 0, m = rects.length; r < m; r++) {
-                    let rect = rects[r], cx = clamp(x, rect.left, rect.right), cy = clamp(y, rect.top, rect.bottom), dx = x - cx, dy = y - cy, d = Math.sqrt(dx * dx + dy * dy);
-                    if (d === 0) {
-                        shown = 0;
-                        break;
-                    }
-                    if (d < halo) {
-                        glow = Math.max(glow, 1 - d / halo);
-                    }
-                    if (d < band) {
-                        let scale = (clear + d * (band - clear) / band) / d;
-                        x = cx + dx * scale;
-                        y = cy + dy * scale;
-                    }
-                }
-                let dot = glow * glow * HALO, line = dot;
-                if (shown && light.intensity > 0.001) {
-                    let dx = x - light.x, dy = y - light.y, d = Math.sqrt(dx * dx + dy * dy);
-                    dot += falloff(d, o.radius) * light.intensity;
-                    line += falloff(d, o.lineRadius) * light.intensity;
-                    if (pointer.inside && o.pointerPush && d > 0.001 && d < push) {
-                        let s = o.pointerPush * (1 - d / push) * (1 - d / push) * light.intensity / d;
-                        x += dx * s;
-                        y += dy * s;
-                    }
+    function paths() {
+        let links = read('links'), camera = last.camera, named, result = [];
+        if (!links) {
+            return result;
+        }
+        for (let i = 0, n = links.length; i < n; i++) {
+            let link = links[i], points = [];
+            if (link.points && link.points.length >= 2) {
+                for (let j = 0, m = link.points.length; j < m; j++) {
+                    let p = link.points[j];
+                    points.push(camera ? p.x * camera.zoom + camera.x : p.x, camera ? p.y * camera.zoom + camera.y : p.y);
                 }
-                for (let r = 0, m = shown ? ripples.length : 0; r < m; r++) {
-                    let ripple = ripples[r], age = (now - ripple.born) / 1000, dx = x - ripple.x, dy = y - ripple.y, d = Math.sqrt(dx * dx + dy * dy), life = 1 - age / RIPPLE_LIFE, wave = (d - age * RIPPLE_SPEED) / RIPPLE_WIDTH, strength = Math.exp(-wave * wave) * life * life;
-                    if (d > 0.001) {
-                        x += dx / d * o.ripplePush * strength;
-                        y += dy / d * o.ripplePush * strength;
-                    }
-                    dot += strength * 0.8;
-                    line += strength * 0.6;
-                }
-                let breath = animate && o.breathe > 0
-                    ? 1 - o.breathe * 0.5 * (1 + Math.sin(time * 1.3 + seed[k] * TAU))
-                    : 1;
-                dot = Math.min(1, dot);
-                px[k] = x;
-                py[k] = y;
-                dotLight[k] = dot;
-                dotAlpha[k] = shown * breath * (o.base + (peak - o.base) * Math.max(0, dot));
-                lineLight[k] = shown * Math.min(1, line);
             }
-        }
-        let accent = rgb(o.accent), base = rgb(color), buckets = ALPHA_LEVELS * TINT_LEVELS, counts = new Uint32Array(buckets + 1), fills = [], tint = clamp(o.tint, 0, 1);
-        for (let t = 0; t < TINT_LEVELS; t++) {
-            let mix = tint * t / (TINT_LEVELS - 1);
-            fills[t] = `rgb(${Math.round(base[0] + (accent[0] - base[0]) * mix)} ${Math.round(base[1] + (accent[1] - base[1]) * mix)} ${Math.round(base[2] + (accent[2] - base[2]) * mix)})`;
-        }
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, width, height);
-        if (o.connected) {
-            let segments = 0;
-            for (let j = 0; j < rows; j++) {
-                for (let i = 0; i < cols; i++) {
-                    let k = j * cols + i;
-                    for (let neighbour of [i + 1 < cols ? k + 1 : -1, j + 1 < rows ? k + cols : -1]) {
-                        if (neighbour < 0) {
-                            continue;
+            else {
+                if (!named) {
+                    named = new Map();
+                    for (let j = 0, m = last.shapes.length; j < m; j++) {
+                        let shape = last.shapes[j];
+                        if (shape.id && !named.has(shape.id)) {
+                            named.set(shape.id, shape);
                         }
-                        let lit = Math.min(lineLight[k], lineLight[neighbour]), alpha = Math.round(lit * o.brightness * (ALPHA_LEVELS - 1));
-                        if (alpha < 1) {
-                            continue;
-                        }
-                        segment[segments * 2] = k;
-                        segment[segments * 2 + 1] = neighbour;
-                        segmentBucket[segments] = Math.round(lit * (TINT_LEVELS - 1)) * ALPHA_LEVELS + Math.min(alpha, ALPHA_LEVELS - 1);
-                        counts[segmentBucket[segments] + 1]++;
-                        segments++;
                     }
                 }
+                points = curve(named.get(link.from ?? ''), named.get(link.to ?? ''));
             }
-            sort(counts, segmentBucket, segmentOrder, segments);
-            ctx.lineWidth = 1;
-            for (let b = 0; b < buckets; b++) {
-                let from = counts[b], to = counts[b + 1];
-                if (from === to) {
-                    continue;
-                }
-                ctx.beginPath();
-                for (let s = from; s < to; s++) {
-                    let a = segment[segmentOrder[s] * 2], c = segment[segmentOrder[s] * 2 + 1];
-                    ctx.moveTo(px[a], py[a]);
-                    ctx.lineTo(px[c], py[c]);
-                }
-                ctx.globalAlpha = (b % ALPHA_LEVELS) / (ALPHA_LEVELS - 1);
-                ctx.strokeStyle = fills[Math.floor(b / ALPHA_LEVELS)];
-                ctx.stroke();
+            if (points.length >= 4) {
+                result.push({ motion: link.motion ?? 'still', points, speed: link.speed ?? 0, width: link.width ?? 0 });
             }
-            counts.fill(0);
         }
-        let dots = 0;
-        for (let k = 0; k < n; k++) {
-            let alpha = Math.round(dotAlpha[k] * (ALPHA_LEVELS - 1));
-            if (alpha < 1) {
-                bucket[k] = buckets;
-                continue;
-            }
-            bucket[k] = Math.round(dotLight[k] * (TINT_LEVELS - 1)) * ALPHA_LEVELS + Math.min(alpha, ALPHA_LEVELS - 1);
-            counts[bucket[k] + 1]++;
-            dots++;
+        return result;
+    }
+    function page() {
+        shown = !document.hidden;
+        field?.visible(shown);
+    }
+    function read(key) {
+        return (state?.[key] ?? given[key] ?? DEFAULTS[key]);
+    }
+    function recolor() {
+        if (!canvas || !field) {
+            return;
         }
-        sort(counts, bucket, order, n);
-        for (let b = 0; b < buckets; b++) {
-            let from = counts[b], to = counts[b + 1];
-            if (from === to) {
-                continue;
-            }
-            let r = 0.85 + 0.45 * Math.floor(b / ALPHA_LEVELS) / (TINT_LEVELS - 1);
-            ctx.beginPath();
-            for (let s = from; s < to; s++) {
-                let k = order[s];
-                ctx.moveTo(px[k] + r, py[k]);
-                ctx.arc(px[k], py[k], r, 0, TAU);
-            }
-            ctx.globalAlpha = (b % ALPHA_LEVELS) / (ALPHA_LEVELS - 1);
-            ctx.fillStyle = fills[Math.floor(b / ALPHA_LEVELS)];
-            ctx.fill();
+        let computed = getComputedStyle(canvas), accent = read('accent') || computed.accentColor, color = computed.color;
+        if (accent === last.accent && color === last.color) {
+            return;
         }
-        ctx.globalAlpha = 1;
+        last.accent = accent;
+        last.color = color;
+        field.recolor(rgb(color), rgb(accent));
     }
-    function sort(counts, keys, into, n) {
-        for (let b = 1, m = counts.length; b < m; b++) {
-            counts[b] += counts[b - 1];
+    function remote(element, script) {
+        let calls = [], channel = new MessageChannel(), queued = false, workers = pool(script, { limit: 1 }), task = workers().attach(element.transferControlToOffscreen(), channel.port2), proxy = {};
+        function flush() {
+            queued = false;
+            if (calls.length) {
+                channel.port1.postMessage(calls);
+                calls = [];
+            }
         }
-        let cursor = counts.slice();
-        for (let i = 0; i < n; i++) {
-            if (keys[i] < counts.length - 1) {
-                into[cursor[keys[i]]++] = i;
+        for (let i = 0, n = METHODS.length; i < n; i++) {
+            let name = METHODS[i];
+            proxy[name] = (...args) => {
+                calls.push([name, args]);
+                if (!queued) {
+                    queued = true;
+                    queueMicrotask(flush);
+                }
+            };
+        }
+        proxy.dispose = () => {
+            flush();
+            task.dispatch('release');
+            channel.port1.close();
+            void workers.shutdown();
+        };
+        proxy.flush = flush;
+        task.catch(() => {
+            if (field !== proxy) {
+                return;
             }
+            channel.port1.close();
+            void workers.shutdown();
+            field = null;
+            write(generation, generation.value + 1);
+        });
+        return proxy;
+    }
+    function schedule() {
+        if (!measuring && host) {
+            measuring = requestAnimationFrame(measure);
         }
     }
-    function track(event) {
-        if (!host) {
+    function settings() {
+        let snapshot = {};
+        for (let i = 0, n = SETTINGS.length; i < n; i++) {
+            let key = SETTINGS[i];
+            snapshot[key] = read(key);
+        }
+        snapshot.still ||= !!canvas && parseFloat(getComputedStyle(canvas).getPropertyValue('--still')) > 0;
+        return snapshot;
+    }
+    function sync() {
+        if (!field) {
             return;
         }
-        let bounds = host.getBoundingClientRect();
-        pointer.at = performance.now();
-        pointer.inside = true;
-        pointer.x = event.clientX - bounds.left;
-        pointer.y = event.clientY - bounds.top;
+        last = { accent: '', camera: null, color: '', shapes: [], size: '' };
+        relink = true;
+        field.configure(settings());
+        field.visible(shown);
+        recolor();
+        measure();
     }
+    function viewport() {
+        bounds = null;
+        schedule();
+    }
+    effect(() => {
+        let next = settings();
+        untrack(() => field?.configure(next));
+    });
+    effect(() => {
+        read('accent');
+        untrack(recolor);
+    });
+    effect(() => {
+        let camera = read('camera'), links = read('links');
+        if (camera) {
+            void (camera.x + camera.y + camera.zoom);
+        }
+        void JSON.stringify(links);
+        untrack(() => {
+            relink = true;
+            schedule();
+        });
+    });
+    effect(() => {
+        let ripple = read('ripple');
+        if (ripple) {
+            let { x, y } = ripple;
+            untrack(() => field?.ripple(x, y));
+        }
+    });
     return (() => {
-        let root_1a5zh7n6 = template_1a5zh7n7(), element_1a5zh7n8 = root_1a5zh7n6.firstChild, element_1a5zh7n9 = element_1a5zh7n8.firstElementChild.nextElementSibling;
-        template_u1.setProperties(element_1a5zh7n8, this?.attributes);
-        template_u1.setProperties(element_1a5zh7n8, rest);
-        template_u1.onconnect(element_1a5zh7n8, (element) => {
+        let root_1a5zh7n0 = template_1a5zh7n1(), element_1a5zh7n2 = root_1a5zh7n0.firstChild, element_1a5zh7n3 = element_1a5zh7n2.firstChild, element_1a5zh7n4 = element_1a5zh7n2.firstElementChild;
+        new template_u1.EffectSlot(element_1a5zh7n3, () => {
+            get(generation);
+            return (() => {
+                let root_1a5zh7n5 = template_1a5zh7n6(), element_1a5zh7n7 = root_1a5zh7n5.firstChild;
+                template_u1.onconnect(element_1a5zh7n7, (element) => {
+                    canvas = element;
+                    if (host && !field) {
+                        field = engine(element, scheduler());
+                        sync();
+                    }
+                });
+                template_u1.delegate(element_1a5zh7n7, 'transitionend', (e) => {
+                    if (e.propertyName === '--still') {
+                        field?.configure(settings());
+                    }
+                });
+                return root_1a5zh7n5;
+            })();
+        });
+        template_u1.slot(element_1a5zh7n4, content, 1);
+        template_u1.setProperties(element_1a5zh7n2, this?.attributes);
+        template_u1.setProperties(element_1a5zh7n2, rest);
+        template_u1.onconnect(element_1a5zh7n2, (element) => {
+            if (!canvas) {
+                return;
+            }
             host = element;
-            canvas = element.querySelector('.surface-field-canvas');
-            context = canvas.getContext('2d');
-            observer = new IntersectionObserver((entries) => {
-                visible = entries[entries.length - 1].isIntersecting;
-                if (visible) {
-                    start();
+            field = url && typeof Worker === 'function' && 'transferControlToOffscreen' in canvas
+                ? remote(canvas, url)
+                : engine(canvas, scheduler());
+            listening = new AbortController();
+            let done = (event) => {
+                if (event.type === 'transitionrun' || event.type === 'animationstart') {
+                    running++;
                 }
                 else {
-                    stop();
+                    running = Math.max(0, running - 1);
                 }
+                schedule();
+            }, intersection = observeIntersection(element, (entries) => {
+                shown = entries[entries.length - 1].isIntersecting && !document.hidden;
+                field?.visible(shown);
+            }), mutation = new MutationObserver((records) => {
+                for (let i = 0, n = records.length; i < n; i++) {
+                    let record = records[i];
+                    if (record.type === 'childList' || record.attributeName === 'data-surface-field') {
+                        elements = null;
+                    }
+                    else if (record.target === element) {
+                        recolor();
+                    }
+                    styles.delete(record.target);
+                }
+                schedule();
+            }), signal = listening.signal, theme = new MutationObserver(() => {
+                styles = new WeakMap();
+                recolor();
+                schedule();
+            });
+            resizer = observer(() => schedule());
+            mutation.observe(element, {
+                attributeFilter: ['class', 'data-surface-field', 'style'],
+                characterData: true,
+                childList: true,
+                subtree: true
             });
-            observer.observe(element);
+            theme.observe(document.documentElement, { attributes: true });
+            for (let type of ['animationcancel', 'animationend', 'animationstart', 'transitioncancel', 'transitionend', 'transitionrun']) {
+                element.addEventListener(type, done, { signal });
+            }
+            element.addEventListener('scroll', viewport, { capture: true, passive: true, signal });
+            matchMedia('(prefers-color-scheme: dark)').addEventListener('change', recolor, { signal });
+            window.addEventListener('scroll', () => {
+                bounds = null;
+            }, { capture: true, passive: true, signal });
+            signal.addEventListener('abort', () => {
+                intersection();
+                mutation.disconnect();
+                resizer?.disconnect();
+                theme.disconnect();
+            }, { once: true });
+            collect();
+            sync();
         });
-        template_u1.ondisconnect(element_1a5zh7n8, () => {
-            observer?.disconnect();
-            stop();
+        template_u1.ondisconnect(element_1a5zh7n2, () => {
+            listening?.abort();
+            listening = undefined;
+            cancelAnimationFrame(measuring);
+            measuring = 0;
+            field?.dispose();
+            field = null;
+            host = undefined;
         });
-        template_u1.delegate(element_1a5zh7n8, 'pointerdown', (event) => {
-            track(event);
-            if (event.button !== 0 || event.target.closest?.(SELECTOR)) {
+        template_u1.ondocument(element_1a5zh7n2, 'visibilitychange', page);
+        template_u1.delegate(element_1a5zh7n2, 'pointerdown', (event) => {
+            if (!field || !host) {
                 return;
             }
-            ripples.push({ born: performance.now(), x: pointer.x, y: pointer.y });
-            if (ripples.length > 6) {
-                ripples.shift();
+            let b = box(), id = event.pointerId, x = event.clientX - b.left, y = event.clientY - b.top;
+            field.pointer(id, x, y, true);
+            if (event.button !== 0 || event.target.closest?.(SELECTOR)) {
+                return;
             }
+            let finish = (e) => {
+                if (e.pointerId !== id) {
+                    return;
+                }
+                if (e.type === 'pointercancel') {
+                    field?.cancel(id);
+                }
+                else {
+                    field?.release(id);
+                }
+                window.removeEventListener('pointercancel', finish);
+                window.removeEventListener('pointerup', finish);
+            };
+            field.press(id, x, y);
+            window.addEventListener('pointercancel', finish, { signal: listening?.signal });
+            window.addEventListener('pointerup', finish, { signal: listening?.signal });
+        });
+        template_u1.on(element_1a5zh7n2, 'pointerleave', (event) => {
+            field?.pointer(event.pointerId, 0, 0, false);
         });
-        template_u1.on(element_1a5zh7n8, 'pointerleave', () => {
-            pointer.at = performance.now();
-            pointer.inside = false;
+        template_u1.delegate(element_1a5zh7n2, 'pointermove', (event) => {
+            if (!field || !host) {
+                return;
+            }
+            let b = box();
+            field.pointer(event.pointerId, event.clientX - b.left, event.clientY - b.top, true);
         });
-        template_u1.delegate(element_1a5zh7n8, 'pointermove', track);
-        template_u1.slot(element_1a5zh7n9, content, 1);
-        return root_1a5zh7n6;
+        template_u1.onwindow(element_1a5zh7n2, 'resize', viewport);
+        return root_1a5zh7n0;
     })();
-}), { surface });
+}, { surface });