modern-canvas 0.0.2 → 0.0.3

package/dist/index.mjs

@@ -1,120 +1,9 @@
-function v(o) {
+function w(o) {
   return typeof o == "function" ? o() : o;
 }
-const U = v(() => ({
-  name: "canvas:base",
-  register(o) {
-    o.registerShape({
-      name: "rectangle",
-      type: "2d",
-      mode: "triangles",
-      data: new Float32Array([
-        -1,
-        1,
-        -1,
-        -1,
-        1,
-        -1,
-        1,
-        -1,
-        1,
-        1,
-        -1,
-        1
-      ])
-    }), o.registerMaterial({
-      name: "baseMaterial",
-      vertexShader: `attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  gl_Position = vec4(aPosition, 0, 1);
-}`,
-      fragmentShader: `uniform sampler2D uSampler;
-varying vec2 vTextureCoord;
-void main() {
-  gl_FragColor = texture2D(uSampler, vTextureCoord);
-}`
-    });
-  }
-})), D = v(() => ({
-  name: "canvas:node-image",
-  register(o) {
-    o.registerNodeRenderer({
-      name: "image",
-      include: (r) => Boolean(r.image),
-      shape: "rectangle",
-      material: "baseMaterial",
-      update(r) {
-        if (!o.resources.has(r.image)) {
-          const e = new Image();
-          e.src = r.image, o.registerResource({
-            name: r.image,
-            data: e
-          });
-        }
-        return {
-          uSampler: r.image
-        };
-      }
-    });
-  }
-})), N = v(() => {
-  const o = document.createElement("canvas").getContext("2d");
-  return {
-    name: "canvas:node-text",
-    register(r) {
-      r.registerNodeRenderer({
-        name: "text",
-        include: (e) => Boolean(e.text),
-        shape: "rectangle",
-        material: "baseMaterial",
-        update(e) {
-          const { width: a = 100, height: t = 100, text: c } = e;
-          return r.resources.has(c) || (o.canvas.width = a, o.canvas.height = t, o.font = "20px monospace", o.textAlign = "center", o.textBaseline = "middle", o.fillStyle = "black", o.clearRect(0, 0, o.canvas.width, o.canvas.height), o.fillText(c, a / 2, t / 2), r.registerResource({
-            name: c,
-            data: o.canvas
-          })), {
-            uSampler: e.text
-          };
-        }
-      });
-    }
-  };
-}), F = v(() => ({
-  name: "canvas:fade",
-  register(o) {
-    o.registerNodeRenderer({
-      name: "fade",
-      include: (r) => Boolean(r.fade),
-      shape: "rectangle",
-      material: {
-        vertexShader: `attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  gl_Position = vec4(aPosition, 0, 1);
-}`,
-        fragmentShader: `uniform sampler2D uSampler;
-varying vec2 vTextureCoord;
-uniform float uTime;
-float linear(float time, float offset, float change, float duration) {
-  return change * (time / duration) + offset;
-}
-void main(void) {
-  vec4 color = texture2D(uSampler, vTextureCoord);
-  gl_FragColor = vec4(color.rgb, linear(uTime, 0.0, 1.0, 3.0));
-}`
-      },
-      update: (r, e) => ({
-        uTime: e
-      })
-    });
-  }
-}));
-class _ extends Float32Array {
+class x extends Float32Array {
   static identity() {
-    return new _([
+    return new x([
       1,
       0,
       0,
@@ -126,8 +15,8 @@ class _ extends Float32Array {
       1
     ]);
   }
-  static translation(r, e) {
-    return new _([
+  static translation(r, c) {
+    return new x([
       1,
       0,
       0,
@@ -135,31 +24,31 @@ class _ extends Float32Array {
       1,
       0,
       r,
-      e,
+      c,
       1
     ]);
   }
   static rotation(r) {
-    const e = Math.cos(r), a = Math.sin(r);
-    return new _([
-      e,
-      -a,
+    const c = Math.cos(r), t = Math.sin(r);
+    return new x([
+      c,
+      -t,
       0,
-      a,
-      e,
+      t,
+      c,
       0,
       0,
       0,
       1
     ]);
   }
-  static scaling(r, e) {
-    return new _([
+  static scaling(r, c) {
+    return new x([
       r,
       0,
       0,
       0,
-      e,
+      c,
       0,
       0,
       0,
@@ -167,91 +56,97 @@ class _ extends Float32Array {
     ]);
   }
   multiply(r) {
-    const e = this[0], a = this[1], t = this[2], c = this[3], u = this[4], i = this[5], l = this[6], s = this[7], n = this[8], f = r[0], R = r[1], g = r[2], T = r[3], d = r[4], E = r[5], m = r[6], A = r[7], x = r[8];
-    return this[0] = f * e + R * c + g * l, this[1] = f * a + R * u + g * s, this[2] = f * t + R * i + g * n, this[3] = T * e + d * c + E * l, this[4] = T * a + d * u + E * s, this[5] = T * t + d * i + E * n, this[6] = m * e + A * c + x * l, this[7] = m * a + A * u + x * s, this[8] = m * t + A * i + x * n, this;
+    const c = this[0], t = this[1], n = this[2], d = this[3], m = this[4], a = this[5], s = this[6], e = this[7], i = this[8], u = r[0], f = r[1], h = r[2], E = r[3], T = r[4], l = r[5], g = r[6], R = r[7], A = r[8];
+    return this[0] = u * c + f * d + h * s, this[1] = u * t + f * m + h * e, this[2] = u * n + f * a + h * i, this[3] = E * c + T * d + l * s, this[4] = E * t + T * m + l * e, this[5] = E * n + T * a + l * i, this[6] = g * c + R * d + A * s, this[7] = g * t + R * m + A * e, this[8] = g * n + R * a + A * i, this;
   }
 }
-const L = v(() => {
-  const o = { x: 0, y: 0 };
-  return {
-    name: "canvas:selector2d",
-    register(r) {
-      const { view: e } = r;
-      e.addEventListener("mousemove", (a) => {
-        const t = e.getBoundingClientRect();
-        o.x = a.clientX - t.left, o.y = a.clientY - t.top;
-      }), e.addEventListener("click", () => {
-        var t;
-        const a = r.get("hovered");
-        a && ((t = r.get("onSelect")) == null || t(a));
-      }), r.registerNodeRenderer({
-        name: "selector2d",
-        include: () => !1,
-        shape: "rectangle",
-        material: {
-          vertexShader: `attribute vec2 aPosition;
-varying vec2 vTextureCoord;
-uniform mat3 uModelMatrix;
-void main() {
-  vTextureCoord = step(0.0, aPosition);
-  vec2 position = aPosition;
-  gl_Position = vec4((uModelMatrix * vec3(position, 1)).xy, 0, 1);
-}`,
-          fragmentShader: `uniform vec4 uColor;
-void main() {
-  gl_FragColor = uColor;
-}`
-        },
-        update: (a, t) => {
-          const { width: c, height: u } = r;
-          let {
-            x: i = 0,
-            y: l = 0,
-            width: s = c,
-            height: n = u
-          } = a;
-          const {
-            rotation: f = 0
-          } = a;
-          i = i / c, l = l / u, s = s / c, n = n / u;
-          const R = f / 180 * Math.PI;
-          return {
-            uModelMatrix: _.identity().multiply(_.translation(2 * i - (1 - s), 1 - n - 2 * l)).multiply(_.scaling(s, n)).multiply(_.rotation(R)),
-            uColor: [(t >>> 16 & 255) / 255, (t >>> 8 & 255) / 255, (t & 255) / 255, 1]
-          };
-        }
-      });
-    },
-    beforeRender(r) {
-      var R, g;
-      const { width: e, height: a, gl: t, children: c, nodeRenderers: u } = r;
-      let i = 0;
-      const l = {};
-      t.bindFramebuffer(t.FRAMEBUFFER, r.glFramebuffers[0].buffer), t.viewport(0, 0, e, a), t.clear(t.COLOR_BUFFER_BIT | t.DEPTH_BUFFER_BIT), t.enable(t.DEPTH_TEST), r.forEachNode((T, d) => {
-        var m;
-        const E = i++;
-        l[E] = d, (m = u.get("selector2d")) == null || m.render(T, E);
-      });
-      const s = new Uint8Array(4);
-      t.readPixels(o.x, a - o.y, 1, 1, t.RGBA, t.UNSIGNED_BYTE, s);
-      const n = l[(s[0] << 16) + (s[1] << 8) + s[2]];
-      if (((R = r.get("hoveredPath")) == null ? void 0 : R.join("")) === (n == null ? void 0 : n.join("")))
-        return;
-      let f;
-      n && (f = { children: c }, n.forEach((T) => {
-        var d;
-        return f = (d = f.children) == null ? void 0 : d[T];
-      })), r.set("hovered", f), r.set("hoveredPath", n), f && ((g = r.get("onHover")) == null || g(f, n));
+function P(o) {
+  const r = [];
+  for (let c = o.length, t = 0; t < c; t++) {
+    const n = o[t], d = ~~(n / 16);
+    for (let m = 0; m <= d; m++)
+      m in r || (r[m] = 0);
+    r[d] |= 1 << n % 16;
+  }
+  return r;
+}
+function B(o) {
+  const r = document.createElement("video");
+  return r.playsInline = !0, r.muted = !0, r.loop = !0, r.src = o, r;
+}
+function O(o) {
+  const r = new Image();
+  return r.decoding = "sync", r.loading = "eager", r.crossOrigin = "anonymous", r.src = o, r;
+}
+let b;
+const y = /* @__PURE__ */ new Map();
+function X() {
+  var o;
+  return b || (b = document.createElement("iframe"), b.id = `__SANDBOX__${Math.random()}`, b.width = "0", b.height = "0", b.style.visibility = "hidden", b.style.position = "fixed", document.body.appendChild(b), (o = b.contentWindow) == null || o.document.write('<!DOCTYPE html><meta charset="UTF-8"><title></title><body>')), b;
+}
+function U(o) {
+  switch (!0) {
+    case (o.startsWith("#") && o.length === 7):
+      return o = o.substring(1), [
+        parseInt(`${o[0]}${o[1]}`, 16) / 255,
+        parseInt(`${o[2]}${o[3]}`, 16) / 255,
+        parseInt(`${o[4]}${o[5]}`, 16) / 255,
+        1
+      ];
+    case (o.startsWith("#") && o.length === 9):
+      return o = o.substring(1), [
+        parseInt(`${o[0]}${o[1]}`, 16) / 255,
+        parseInt(`${o[2]}${o[3]}`, 16) / 255,
+        parseInt(`${o[4]}${o[5]}`, 16) / 255,
+        parseInt(`${o[6]}${o[7]}`, 16) / 255
+      ];
+    case o.startsWith("rgb("):
+      return [
+        ...o.replace(/rgb\((.+?)\)/, "$1").split(",").slice(0, 3).map((r) => Number(r.trim()) / 255),
+        1
+      ];
+    case o.startsWith("rgba("):
+      return o.replace(/rgba\((.+?)\)/, "$1").split(",").slice(0, 4).map((r) => Number(r.trim()) / 255);
+  }
+}
+function G(o, r = [0, 0, 0, 0]) {
+  if (y.has(o))
+    return y.get(o);
+  let c = U(o);
+  if (!c) {
+    const t = X();
+    if (t) {
+      const n = t.contentWindow;
+      if (n) {
+        const d = n.document, m = d.createElement("div");
+        d.body.appendChild(m), m.textContent = " ", m.style.color = o, c = U(n.getComputedStyle(m).color), d.body.removeChild(m);
+      }
     }
-  };
-}), S = v(() => ({
-  name: "canvas:transform2d",
+  }
+  return c && y.set(o, c), c ?? r;
+}
+const j = w({
+  name: "renderer2d",
   register(o) {
-    o.registerNodeRenderer({
-      name: "transform2d",
-      shape: "rectangle",
-      material: {
-        vertexShader: `attribute vec2 aPosition;
+    o.registerShape("rectangle", {
+      type: "2d",
+      mode: "triangles",
+      buffer: new Float32Array([
+        -1,
+        1,
+        -1,
+        -1,
+        1,
+        -1,
+        1,
+        -1,
+        1,
+        1,
+        -1,
+        1
+      ])
+    }), o.registerMaterial("material2d", {
+      vertexShader: `attribute vec2 aPosition;
 varying vec2 vTextureCoord;
 uniform mat3 uModelMatrix;
 void main() {
@@ -259,262 +154,422 @@ void main() {
   vec2 position = aPosition;
   gl_Position = vec4((uModelMatrix * vec3(position, 1)).xy, 0, 1);
 }`,
-        fragmentShader: `uniform sampler2D uSampler;
+      fragmentShader: `uniform sampler2D uSampler;
 varying vec2 vTextureCoord;
+uniform vec4 uBackgroundColor;
 void main() {
-  gl_FragColor = texture2D(uSampler, vTextureCoord);
+  vec4 color = texture2D(uSampler, vTextureCoord);
+  gl_FragColor = mix(uBackgroundColor, color, color.a);
 }`
-      },
-      update: (r) => {
-        const { width: e, height: a } = o;
-        let {
-          x: t = 0,
-          y: c = 0,
-          width: u = e,
-          height: i = a
-        } = r;
+    });
+    const r = document.createElement("canvas").getContext("2d");
+    o.registerSystem({
+      update(c = 0) {
+        var d;
+        const { textures: t } = o, n = o.query("type");
+        for (let m = n.length, a = 0; a < m; a++) {
+          const s = n[a], { type: e } = s;
+          if (e === "image" && s.src)
+            t.has(s.id) || o.registerTexture(s.id, O(s.src));
+          else if (e === "video")
+            if (!t.has(s.id))
+              o.registerTexture(s.id, B(s.src));
+            else {
+              const i = (d = t.get(s.id)) == null ? void 0 : d.source;
+              i.duration && (i.currentTime = c % i.duration);
+            }
+          else if (e === "text") {
+            const {
+              width: i,
+              height: u,
+              color: f = "black",
+              fontSize: h = 14,
+              fontWeight: E = 400,
+              direction: T = "inherit",
+              fontFamily: l = "monospace",
+              fontKerning: g = "normal",
+              textAlign: R = "center",
+              textBaseline: A = "middle"
+            } = s.style ?? {};
+            if (!t.has(s.id)) {
+              const _ = `${E} ${h}px ${l}`;
+              r.font = _;
+              const p = r.measureText(s.content), I = u ?? p.actualBoundingBoxAscent + p.actualBoundingBoxDescent, v = i ?? p.width;
+              s.style.width = v, s.style.height = I, r.canvas.width = v, r.canvas.height = I, r.fillStyle = f, r.direction = T, r.font = _, r.fontKerning = g, r.textAlign = R, r.textBaseline = A, r.clearRect(0, 0, v, I), r.fillText(s.content, v / 2, I / 2), o.registerTexture(s.id, r.canvas);
+            }
+          }
+        }
+      }
+    }), o.registerSystem({
+      update() {
+        var m;
         const {
-          rotation: l = 0
-        } = r;
-        t = t / e, c = c / a, u = u / e, i = i / a;
-        const s = l / 180 * Math.PI;
-        return {
-          uModelMatrix: _.identity().multiply(_.translation(2 * t - (1 - u), 1 - i - 2 * c)).multiply(_.scaling(u, i)).multiply(_.rotation(s))
-        };
+          width: c,
+          height: t,
+          textures: n
+        } = o, d = o.query();
+        for (let a = d.length, s = 0; s < a; s++) {
+          const e = d[s], {
+            shape: i = "rectangle",
+            material: u = "material2d",
+            filters: f = []
+          } = e, {
+            left: h = 0,
+            top: E = 0,
+            width: T = 0,
+            height: l = 0,
+            rotation: g = 0,
+            background: R
+          } = e.style ?? {}, A = h / c, _ = E / t, p = T / c, I = l / t, v = g / 180 * Math.PI, D = R != null && R.color ? G(R.color) : [0, 0, 0, 0];
+          o.renderNode({
+            shape: i,
+            material: u,
+            uniforms: {
+              uSampler: (m = n.get(e.id)) == null ? void 0 : m.value,
+              uBackgroundColor: D,
+              uModelMatrix: x.identity().multiply(x.translation(2 * A - (1 - p), 1 - I - 2 * _)).multiply(x.scaling(p, I)).multiply(x.rotation(v))
+            },
+            extraRenderers: f == null ? void 0 : f.map((N) => {
+              const {
+                shape: C,
+                material: M,
+                type: S,
+                ...F
+              } = N;
+              return {
+                shape: C ?? i,
+                material: M ?? S ?? u,
+                uniforms: F
+              };
+            })
+          });
+        }
       }
     });
   }
-})), X = [
-  U,
-  D,
-  N,
-  F,
-  S,
-  L
-];
-function P(o, r = 0) {
-  const {
-    gl: e,
-    width: a,
-    height: t,
-    beforeRenderPlugins: c,
-    afterRenderPlugins: u,
-    nodeRenderers: i,
-    forEachNode: l
-  } = o, s = Array.from(i.values());
-  c.forEach((n) => {
-    var f;
-    return (f = n.beforeRender) == null ? void 0 : f.call(n, o);
-  }), e.viewport(0, 0, a, t), e.clear(e.COLOR_BUFFER_BIT | e.DEPTH_BUFFER_BIT), l((n, f) => {
-    e.bindFramebuffer(e.FRAMEBUFFER, null), e.bindTexture(e.TEXTURE_2D, null);
-    const R = s.filter((g) => !g.include && !g.exclude || g.include && g.include(n, f) || g.exclude && !g.exclude(n, f));
-    for (let g = R.length, T = 0; T < g; T++) {
-      let d = null;
-      T < g - 1 && (d = o.glFramebuffers[T % 2]), e.bindFramebuffer(e.FRAMEBUFFER, (d == null ? void 0 : d.buffer) ?? null), d && e.clear(e.COLOR_BUFFER_BIT | e.DEPTH_BUFFER_BIT), R[T].render(n, r), d && e.bindTexture(e.TEXTURE_2D, d.texture);
-    }
-  }), u.forEach((n) => {
-    var f;
-    return (f = n.afterRender) == null ? void 0 : f.call(n, o);
-  }), e.flush();
+});
+function $(o, r) {
+  const { width: c, height: t, context: n, shapes: d, materials: m, framebuffers: a, lastState: s } = o, { extraRenderers: e = [] } = r, i = [
+    r,
+    ...e
+  ].filter((u) => d.has(u.shape) && m.has(u.material));
+  for (let u = i.length, f = 0; f < u; f++) {
+    const h = i[f], {
+      shape: E,
+      material: T,
+      uniforms: l
+    } = h, g = d.get(E), R = m.get(T);
+    (s == null ? void 0 : s.material) !== T && (s == null ? void 0 : s.shape) !== E && R.setupAttributes({ aPosition: g.buffer });
+    const A = f < u - 1 ? a[f % 2] : null;
+    n.bindFramebuffer(n.FRAMEBUFFER, (A == null ? void 0 : A.buffer) ?? null), n.viewport(0, 0, c, t), A && n.clear(n.COLOR_BUFFER_BIT | n.DEPTH_BUFFER_BIT), (s == null ? void 0 : s.material) !== T && n.useProgram(R.program), l && R.setupUniforms(l), n.drawArrays(g.mode, 0, g.count), A && n.bindTexture(n.TEXTURE_2D, A.texture), o.lastState = {
+      material: T,
+      shape: E
+    };
+  }
+}
+function L(o, r = 0) {
+  var d, m;
+  const { context: c, systems: t, framebuffers: n } = o;
+  n.forEach((a) => a.resize()), c.clear(c.COLOR_BUFFER_BIT | c.DEPTH_BUFFER_BIT);
+  for (let a = t.length, s = 0; s < a; s++)
+    (m = (d = t[s]).update) == null || m.call(d, r);
+  c.flush();
 }
-function C() {
+function W() {
   const o = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
-  function e(i) {
-    if (o.has(i))
-      return o.get(i);
-    if (r.has(i)) {
-      const { value: l, shared: s } = r.get(i), n = l();
-      return s && t(i, n), n;
+  function c(a) {
+    if (o.has(a))
+      return o.get(a);
+    if (r.has(a)) {
+      const { value: s, shared: e } = r.get(a), i = s();
+      return e && n(a, i), i;
     }
   }
-  function a(i) {
-    return o.has(i) || r.has(i);
+  function t(a) {
+    return o.has(a) || r.has(a);
   }
-  function t(i, l) {
-    o.set(i, l);
+  function n(a, s) {
+    o.set(a, s);
   }
-  function c(i, l) {
-    u(i, l, !0);
+  function d(a, s) {
+    m(a, s, !0);
   }
-  function u(i, l, s = !1) {
-    r.set(i, { value: l, shared: s });
+  function m(a, s, e = !1) {
+    r.set(a, { value: s, shared: e });
   }
   return new Proxy(
-    { instances: o, bindings: r, get: e, has: a, set: t, bind: u, singleton: c },
+    { instances: o, bindings: r, get: c, has: t, set: n, bind: m, singleton: d },
     {
-      get(i, l, s) {
-        return typeof l == "symbol" || l in i ? Reflect.get(i, l, s) : i.get(l);
+      get(a, s, e) {
+        return typeof s == "symbol" || s in a ? Reflect.get(a, s, e) : a.get(s);
       },
-      has(i, l) {
-        return typeof l == "symbol" || l in i ? Reflect.has(i, l) : i.has(l);
+      has(a, s) {
+        return typeof s == "symbol" || s in a ? Reflect.has(a, s) : a.has(s);
       },
-      set(i, l, s, n) {
-        return typeof l == "symbol" || l in i ? Reflect.set(i, l, s, n) : (i.set(l, s), !0);
+      set(a, s, e, i) {
+        return typeof s == "symbol" || s in a ? Reflect.set(a, s, e, i) : (a.set(s, e), !0);
       }
     }
   );
 }
-function M(o, r) {
-  const { gl: e, materials: a, glSlTypes: t } = o, {
-    name: c,
-    vertexShader: u,
-    fragmentShader: i,
-    uniforms: l
-  } = r;
-  if (a.has(c))
+function V(o, r, c) {
+  const { context: t, materials: n, slTypes: d } = o, {
+    vertexShader: m,
+    fragmentShader: a,
+    uniforms: s
+  } = c;
+  if (n.has(r))
     return;
-  const s = [
-    { type: e.VERTEX_SHADER, source: u },
-    { type: e.FRAGMENT_SHADER, source: i.includes("precision") ? i : `precision mediump float;
-${i}` }
-  ].map(({ type: T, source: d }) => {
-    const E = e.createShader(T);
-    if (!E)
+  const e = [
+    { type: t.VERTEX_SHADER, source: m },
+    { type: t.FRAGMENT_SHADER, source: a.includes("precision") ? a : `precision mediump float;
+${a}` }
+  ].map(({ type: E, source: T }) => {
+    const l = t.createShader(E);
+    if (!l)
       throw new Error("failed to create shader");
-    if (e.shaderSource(E, d), e.compileShader(E), !e.getShaderParameter(E, e.COMPILE_STATUS))
+    if (t.shaderSource(l, T), t.compileShader(l), !t.getShaderParameter(l, t.COMPILE_STATUS))
       throw new Error(`failed to compiling shader:
-${d}
-${e.getShaderInfoLog(E)}`);
-    return E;
-  }), n = e.createProgram();
-  if (!n)
+${T}
+${t.getShaderInfoLog(l)}`);
+    return l;
+  }), i = t.createProgram();
+  if (!i)
     throw new Error("failed to create program");
-  if (s.forEach((T) => e.attachShader(n, T)), e.linkProgram(n), s.forEach((T) => e.deleteShader(T)), !e.getProgramParameter(n, e.LINK_STATUS))
-    throw new Error(`failed to initing program: ${e.getProgramInfoLog(n)}`);
-  const f = {};
-  for (let T = e.getProgramParameter(n, e.ACTIVE_ATTRIBUTES), d = 0; d < T; d++) {
-    const E = e.getActiveAttrib(n, d);
-    if (!E)
+  if (e.forEach((E) => t.attachShader(i, E)), t.linkProgram(i), e.forEach((E) => t.deleteShader(E)), !t.getProgramParameter(i, t.LINK_STATUS))
+    throw new Error(`failed to initing program: ${t.getProgramInfoLog(i)}`);
+  const u = {};
+  for (let E = t.getProgramParameter(i, t.ACTIVE_ATTRIBUTES), T = 0; T < E; T++) {
+    const l = t.getActiveAttrib(i, T);
+    if (!l)
       continue;
-    const m = E.name.replace(/\[.*?]$/, "");
-    f[m] = {
-      type: t[E.type],
-      isArray: m !== E.name,
-      location: e.getAttribLocation(n, m)
+    const g = l.name.replace(/\[.*?]$/, "");
+    u[g] = {
+      type: d[l.type],
+      isArray: g !== l.name,
+      location: t.getAttribLocation(i, g)
     };
   }
-  const R = {};
-  for (let T = e.getProgramParameter(n, e.ACTIVE_UNIFORMS), d = 0; d < T; d++) {
-    const E = e.getActiveUniform(n, d);
-    if (!E)
+  const f = {};
+  for (let E = t.getProgramParameter(i, t.ACTIVE_UNIFORMS), T = 0; T < E; T++) {
+    const l = t.getActiveUniform(i, T);
+    if (!l)
       continue;
-    const m = E.name.replace(/\[.*?]$/, "");
-    R[m] = {
-      type: t[E.type],
-      isArray: m !== E.name,
-      location: e.getUniformLocation(n, m)
+    const g = l.name.replace(/\[.*?]$/, "");
+    f[g] = {
+      type: d[l.type],
+      isArray: g !== l.name,
+      location: t.getUniformLocation(i, g)
     };
   }
-  const g = {
-    ...r,
-    program: n,
-    attributes: f,
-    uniforms: R,
-    setAttributes(T) {
-      for (const [d, E] of Object.entries(T)) {
-        const m = f[d];
-        if (!m)
+  const h = {
+    ...c,
+    program: i,
+    attributes: u,
+    uniforms: f,
+    setupAttributes(E) {
+      for (const [T, l] of Object.entries(E)) {
+        const g = u[T];
+        if (!g)
           continue;
-        const { type: A, isArray: x, location: b } = m;
-        if (E instanceof WebGLBuffer) {
-          e.bindBuffer(e.ARRAY_BUFFER, E);
-          const h = e.getAttribLocation(n, d);
-          switch (A) {
+        const { type: R, isArray: A, location: _ } = g;
+        if (l instanceof WebGLBuffer) {
+          t.bindBuffer(t.ARRAY_BUFFER, l);
+          const p = t.getAttribLocation(i, T);
+          switch (R) {
             case "vec2":
-              e.vertexAttribPointer(h, 2, e.FLOAT, !1, 0, 0), e.enableVertexAttribArray(h);
+              t.vertexAttribPointer(p, 2, t.FLOAT, !1, 0, 0), t.enableVertexAttribArray(p);
               break;
             case "vec3":
-              e.vertexAttribPointer(h, 3, e.FLOAT, !1, 0, 0), e.enableVertexAttribArray(h);
+              t.vertexAttribPointer(p, 3, t.FLOAT, !1, 0, 0), t.enableVertexAttribArray(p);
               break;
           }
         } else
-          switch (A) {
+          switch (R) {
             case "float":
-              x ? e.vertexAttrib1fv(b, E) : e.vertexAttrib1f(b, E);
+              A ? t.vertexAttrib1fv(_, l) : t.vertexAttrib1f(_, l);
               break;
             case "vec2":
-              e.vertexAttrib2fv(b, E);
+              t.vertexAttrib2fv(_, l);
               break;
             case "vec3":
-              e.vertexAttrib3fv(b, E);
+              t.vertexAttrib3fv(_, l);
               break;
             case "vec4":
-              e.vertexAttrib4fv(b, E);
+              t.vertexAttrib4fv(_, l);
               break;
           }
       }
     },
-    setUniforms(T) {
-      var d;
-      for (const [E, m] of Object.entries(T)) {
-        const A = R[E];
-        if (!A)
+    setupUniforms(E) {
+      for (const [T, l] of Object.entries(E)) {
+        const g = f[T];
+        if (!g)
           continue;
-        const { type: x, isArray: b, location: h } = A;
-        switch (x) {
+        const { type: R, isArray: A, location: _ } = g;
+        switch (R) {
           case "float":
-            b ? e.uniform1fv(h, m) : e.uniform1f(h, m);
+            A ? t.uniform1fv(_, l) : t.uniform1f(_, l);
             break;
           case "bool":
           case "int":
-            b ? e.uniform1iv(h, m) : e.uniform1i(h, m);
+            A ? t.uniform1iv(_, l) : t.uniform1i(_, l);
             break;
           case "vec2":
-            e.uniform2fv(h, m);
+            t.uniform2fv(_, l);
             break;
           case "vec3":
-            e.uniform3fv(h, m);
+            t.uniform3fv(_, l);
             break;
           case "vec4":
-            e.uniform4fv(h, m);
+            t.uniform4fv(_, l);
             break;
           case "mat2":
-            e.uniformMatrix2fv(h, !1, m);
+            t.uniformMatrix2fv(_, !1, l);
             break;
           case "mat3":
-            e.uniformMatrix3fv(h, !1, m);
+            t.uniformMatrix3fv(_, !1, l);
             break;
           case "mat4":
-            e.uniformMatrix4fv(h, !1, m);
+            t.uniformMatrix4fv(_, !1, l);
             break;
           case "sampler2D":
-            e.bindTexture(
-              e.TEXTURE_2D,
-              ((d = o.resources.get(m)) == null ? void 0 : d.texture) ?? o.glDefaultTexture
-            ), e.uniform1i(h, 0);
+            t.bindTexture(
+              t.TEXTURE_2D,
+              l ?? o.defaultTexture
+            ), t.uniform1i(_, 0);
             break;
         }
       }
     }
   };
-  l && g.setUniforms(l), a.set(c, g);
+  s && h.setupUniforms(s), n.set(r, h);
+}
+function H(o, r, c) {
+  const { context: t, shapes: n, drawModes: d } = o, {
+    type: m = "2d",
+    mode: a = "triangles",
+    buffer: s = new Float32Array([])
+  } = c, e = t.createBuffer();
+  t.bindBuffer(t.ARRAY_BUFFER, e), t.bufferData(t.ARRAY_BUFFER, s, t.STATIC_DRAW), n.set(r, {
+    mode: d[a],
+    count: s.byteLength / s.BYTES_PER_ELEMENT / (m === "2d" ? 2 : 3),
+    buffer: e
+  });
 }
-function I(o, r) {
-  o.singleton("gl", () => {
-    const { view: e } = o, a = e.getContext("webgl", r) || e.getContext("experimental-webgl", r);
-    if (!a)
+function Y(o) {
+  const { entities: r, children: c, components: t, archetypes: n } = o;
+  r.clear(), t.clear(), n.clear();
+  const d = function() {
+    let e = 0;
+    return () => ++e;
+  }(), m = function() {
+    let e = 0;
+    return () => ++e;
+  }();
+  function a(e, i) {
+    var R, A;
+    e.id || (e.id = d());
+    const u = e.id, f = [];
+    for (const _ in e) {
+      let p = t.get(_);
+      p || (p = m(), t.set(_, p)), f.push(p);
+    }
+    const h = P(f), E = h.map((_) => String.fromCharCode(_)).join(""), T = r.get(u);
+    T && ((A = (R = n.get(T.archetypeId)) == null ? void 0 : R.entityIds) == null || A.delete(u));
+    const l = n.get(E);
+    let g = l == null ? void 0 : l.entityIds;
+    l || (g = /* @__PURE__ */ new Set(), n.set(E, {
+      entityIds: g,
+      codePoints: h
+    })), g.add(u), r.set(u, { path: i, archetypeId: E });
+  }
+  function s(e, i) {
+    for (let u = e.length, f = 0; f < u; f++) {
+      const h = e[f], E = [...i, f];
+      a(h, E), h.children && s(h.children, E);
+    }
+  }
+  s(c, []);
+}
+function k(o, r) {
+  const { entities: c, components: t, children: n, archetypes: d } = o;
+  if (!r)
+    return n.flatMap(function i(u) {
+      var f;
+      return [u, (f = u.children) == null ? void 0 : f.flatMap(i)].filter(Boolean);
+    });
+  const m = typeof r == "string" ? [r] : r, a = [];
+  for (let i = m.length, u = 0; u < i; u++) {
+    const f = t.get(m[u]);
+    f && a.push(f);
+  }
+  const s = P(a), e = [];
+  for (const [, { entityIds: i, codePoints: u }] of d.entries())
+    if (u.some((f) => s.some((h) => h & f)))
+      for (const [f] of i.entries()) {
+        const { path: h } = c.get(f);
+        if (!h || !h.length)
+          continue;
+        let E = n[h[0]];
+        for (let T = h.length, l = 1; l < T; l++)
+          E = E[l];
+        e.push(E);
+      }
+  return e;
+}
+function q(o, r, c) {
+  const { context: t, textures: n } = o, d = {
+    loading: !0,
+    value: null,
+    source: c
+  };
+  return n.set(r, d), new Promise((m) => {
+    c instanceof HTMLImageElement ? c.addEventListener("load", a, { once: !0 }) : c instanceof HTMLVideoElement ? (c.addEventListener("canplay", a, { once: !0 }), c.addEventListener("timeupdate", () => {
+      t.bindTexture(t.TEXTURE_2D, d.value), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, c);
+    })) : a();
+    function a() {
+      d.value = t.createTexture(), d.value && (t.bindTexture(t.TEXTURE_2D, d.value), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, c)), d.loading = !1, c instanceof HTMLVideoElement && (c.currentTime = 0.01), m();
+    }
+  });
+}
+function K(o, r) {
+  const { systems: c } = o;
+  c.push(r);
+}
+function z(o = {}) {
+  var a, s;
+  const {
+    view: r = document.createElement("canvas"),
+    children: c = [],
+    plugins: t = []
+  } = o, n = W();
+  n.view = r, n.singleton("context", () => {
+    const { view: e } = n, i = e.getContext("webgl", o) || e.getContext("experimental-webgl", o);
+    if (!i)
       throw new Error("failed to getContext for webgl");
-    return a.pixelStorei(a.UNPACK_FLIP_Y_WEBGL, !0), a.pixelStorei(a.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !0), a.clearColor(0, 0, 0, 0), a.enable(a.DEPTH_TEST), a.enable(a.CULL_FACE), a.enable(a.BLEND), a.blendFunc(a.SRC_ALPHA, a.ONE_MINUS_SRC_ALPHA), a;
-  }), o.singleton("glDefaultTexture", () => {
-    const { gl: e, width: a, height: t } = o, c = e.createTexture();
-    return e.bindTexture(e.TEXTURE_2D, c), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, a, t, 0, e.RGBA, e.UNSIGNED_BYTE, null), c;
-  }), o.singleton("glFramebuffers", () => {
-    const { gl: e } = o;
+    const u = i.drawingBufferWidth, f = i.drawingBufferHeight;
+    return i.viewport(0, 0, u, f), i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL, !0), i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !0), i.clearColor(0, 0, 0, 0), i.enable(i.DEPTH_TEST), i.enable(i.CULL_FACE), i.enable(i.BLEND), i.blendFunc(i.ONE, i.ONE_MINUS_SRC_ALPHA), i.depthMask(!1), i;
+  }), n.singleton("defaultTexture", () => {
+    const { context: e, width: i, height: u } = n, f = e.createTexture();
+    return e.bindTexture(e.TEXTURE_2D, f), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, i, u, 0, e.RGBA, e.UNSIGNED_BYTE, null), f;
+  }), n.singleton("framebuffers", () => {
+    const { context: e } = n;
     return Array.from({ length: 2 }, () => {
-      const a = e.createTexture(), t = e.createFramebuffer(), c = e.createRenderbuffer();
-      function u() {
-        const { width: i, height: l } = o;
-        e.bindTexture(e.TEXTURE_2D, a), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, i, l, 0, e.RGBA, e.UNSIGNED_BYTE, null), e.bindRenderbuffer(e.RENDERBUFFER, c), e.renderbufferStorage(e.RENDERBUFFER, e.DEPTH_COMPONENT16, i, l);
+      const i = e.createTexture(), u = e.createFramebuffer(), f = e.createRenderbuffer();
+      function h() {
+        const { width: E, height: T } = n;
+        e.bindTexture(e.TEXTURE_2D, i), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, E, T, 0, e.RGBA, e.UNSIGNED_BYTE, null), e.bindRenderbuffer(e.RENDERBUFFER, f), e.renderbufferStorage(e.RENDERBUFFER, e.DEPTH_COMPONENT16, E, T);
       }
-      return u(), e.bindTexture(e.TEXTURE_2D, a), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.bindFramebuffer(e.FRAMEBUFFER, t), e.framebufferTexture2D(e.FRAMEBUFFER, e.COLOR_ATTACHMENT0, e.TEXTURE_2D, a, 0), e.bindRenderbuffer(e.RENDERBUFFER, c), e.framebufferRenderbuffer(e.FRAMEBUFFER, e.DEPTH_ATTACHMENT, e.RENDERBUFFER, c), {
-        buffer: t,
-        depthBuffer: c,
-        texture: a,
-        resize: u
+      return h(), e.bindTexture(e.TEXTURE_2D, i), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.bindFramebuffer(e.FRAMEBUFFER, u), e.framebufferTexture2D(e.FRAMEBUFFER, e.COLOR_ATTACHMENT0, e.TEXTURE_2D, i, 0), e.bindRenderbuffer(e.RENDERBUFFER, f), e.framebufferRenderbuffer(e.FRAMEBUFFER, e.DEPTH_ATTACHMENT, e.RENDERBUFFER, f), {
+        buffer: u,
+        depthBuffer: f,
+        texture: i,
+        resize: h
       };
     });
-  }), o.singleton("glDrawModes", () => {
-    const { gl: e } = o;
+  }), n.singleton("drawModes", () => {
+    const { context: e } = n;
     return {
       points: e.POINTS,
       linear: e.LINEAR,
@@ -522,8 +577,8 @@ function I(o, r) {
       triangleStrip: e.TRIANGLE_STRIP,
       triangleFan: e.TRIANGLE_FAN
     };
-  }), o.singleton("glSlTypes", () => {
-    const e = o.gl;
+  }), n.singleton("slTypes", () => {
+    const { context: e } = n;
     return {
       [e.FLOAT]: "float",
       [e.FLOAT_VEC2]: "vec2",
@@ -534,9 +589,9 @@ function I(o, r) {
       [e.INT_VEC3]: "ivec3",
       [e.INT_VEC4]: "ivec4",
       [e.UNSIGNED_INT]: "uint",
-      [e.UNSIGNED_INT_VEC2]: "uvec2",
-      [e.UNSIGNED_INT_VEC3]: "uvec3",
-      [e.UNSIGNED_INT_VEC4]: "uvec4",
+      [e.UNSIGNED_INT_VEC2 ?? -1]: "uvec2",
+      [e.UNSIGNED_INT_VEC3 ?? -1]: "uvec3",
+      [e.UNSIGNED_INT_VEC4 ?? -1]: "uvec4",
       [e.BOOL]: "bool",
       [e.BOOL_VEC2]: "bvec2",
       [e.BOOL_VEC3]: "bvec3",
@@ -545,128 +600,48 @@ function I(o, r) {
       [e.FLOAT_MAT3]: "mat3",
       [e.FLOAT_MAT4]: "mat4",
       [e.SAMPLER_2D]: "sampler2D",
-      [e.INT_SAMPLER_2D]: "sampler2D",
-      [e.UNSIGNED_INT_SAMPLER_2D]: "sampler2D",
+      [e.INT_SAMPLER_2D ?? -1]: "sampler2D",
+      [e.UNSIGNED_INT_SAMPLER_2D ?? -1]: "sampler2D",
       [e.SAMPLER_CUBE]: "samplerCube",
-      [e.INT_SAMPLER_CUBE]: "samplerCube",
-      [e.UNSIGNED_INT_SAMPLER_CUBE]: "samplerCube",
-      [e.SAMPLER_2D_ARRAY]: "sampler2DArray",
-      [e.INT_SAMPLER_2D_ARRAY]: "sampler2DArray",
-      [e.UNSIGNED_INT_SAMPLER_2D_ARRAY]: "sampler2DArray"
+      [e.INT_SAMPLER_CUBE ?? -1]: "samplerCube",
+      [e.UNSIGNED_INT_SAMPLER_CUBE ?? -1]: "samplerCube",
+      [e.SAMPLER_2D_ARRAY ?? -1]: "sampler2DArray",
+      [e.INT_SAMPLER_2D_ARRAY ?? -1]: "sampler2DArray",
+      [e.UNSIGNED_INT_SAMPLER_2D_ARRAY ?? -1]: "sampler2DArray"
     };
-  }), o.singleton("glExtensions", () => ({
-    loseContext: o.gl.getExtension("WEBGL_lose_context")
-  }));
-}
-function B(o, r) {
-  const { gl: e, shapes: a, glDrawModes: t } = o, {
-    name: c,
-    type: u = "2d",
-    mode: i = "triangles",
-    data: l = new Float32Array([])
-  } = r, s = e.createBuffer();
-  e.bindBuffer(e.ARRAY_BUFFER, s), e.bufferData(e.ARRAY_BUFFER, l, e.STATIC_DRAW), a.set(c, {
-    mode: t[i],
-    count: l.byteLength / l.BYTES_PER_ELEMENT / (u === "2d" ? 2 : 3),
-    buffer: s
-  });
-}
-function y(o, r) {
-  const { gl: e, shapes: a, materials: t, nodeRenderers: c } = o, { name: u, shape: i, material: l } = r, s = typeof i == "string" ? i : `${u}-shape`;
-  typeof i != "string" && o.registerShape({ ...i, name: s });
-  const n = typeof l == "string" ? l : `${u}-material`;
-  typeof l != "string" && o.registerMaterial({ ...l, name: n });
-  const f = a.get(s), R = t.get(n);
-  if (!f || !R)
-    return;
-  const { buffer: g } = f;
-  R.setAttributes({ aPosition: g }), c.set(u, {
-    ...r,
-    shape: s,
-    material: n,
-    render: (T, d) => {
-      var p;
-      const E = a.get(s), m = t.get(n);
-      if (!E || !m)
-        return;
-      const { program: A } = m, { mode: x, count: b } = E;
-      e.useProgram(A);
-      const h = (p = r.update) == null ? void 0 : p.call(r, T, d);
-      h && m.setUniforms(h), e.drawArrays(x, 0, b);
+  }), n.singleton("extensions", () => ({
+    loseContext: n.context.getExtension("WEBGL_lose_context")
+  })), n.bind("width", () => n.context.drawingBufferWidth), n.bind("height", () => n.context.drawingBufferHeight), n.plugins = /* @__PURE__ */ new Map(), n.children = c, n.shapes = /* @__PURE__ */ new Map(), n.registerShape = (e, i) => H(n, e, i), n.materials = /* @__PURE__ */ new Map(), n.registerMaterial = (e, i) => V(n, e, i), n.textures = /* @__PURE__ */ new Map(), n.registerTexture = (e, i) => q(n, e, i), n.entities = /* @__PURE__ */ new Map(), n.components = /* @__PURE__ */ new Map(), n.archetypes = /* @__PURE__ */ new Map(), n.systems = [], n.registerSystem = (e) => K(n, e), n.query = (e) => k(n, e), n.setup = () => Y(n), n.load = async () => {
+    var u, f;
+    const { systems: e, textures: i } = n;
+    for (let h = e.length, E = 0; E < h; E++)
+      (f = (u = e[E]).update) == null || f.call(u, 0);
+    for (; Array.from(i.values()).some((h) => h.loading); )
+      await new Promise((h) => setTimeout(h, 100));
+  }, n.renderNode = (e) => $(n, e), n.render = (e) => L(n, e), n.start = () => {
+    let e = 0, i = 0;
+    u(0);
+    function u(f) {
+      requestAnimationFrame(u), L(n, i), f *= 1e-3, i += f - e, e = f;
     }
-  });
-}
-function w(o, r) {
-  const { children: e } = o;
-  function a(t, c = []) {
-    for (let u = t.length - 1; u >= 0; u--) {
-      const i = [...c, u], l = t[u];
-      a(l.children ?? [], i), r(l, i);
-    }
-  }
-  a(e);
-}
-function O(o, r) {
-  const { gl: e, resources: a } = o, { name: t, data: c } = r, u = {
-    loading: !0,
-    texture: null
   };
-  function i() {
-    u.texture = e.createTexture(), u.texture && (e.bindTexture(e.TEXTURE_2D, u.texture), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, c)), u.loading = !1;
-  }
-  c instanceof HTMLImageElement ? c.addEventListener("load", i, { once: !0 }) : i(), a.set(t, u);
-}
-function G(o = {}) {
-  var i, l;
-  const {
-    view: r = document.createElement("canvas"),
-    children: e = [],
-    plugins: a = []
-  } = o, t = C();
-  t.set("view", r), I(t, o), t.bind("width", () => t.gl.drawingBufferWidth), t.bind("height", () => t.gl.drawingBufferHeight), t.singleton("plugins", () => {
-    const s = /* @__PURE__ */ new Map();
-    return a.forEach((n) => {
-      var f;
-      (f = n.register) == null || f.call(n, t), s.set(n.name, n);
-    }), s;
-  }), t.singleton("beforeRenderPlugins", () => Array.from(t.plugins.values()).filter((s) => "beforeRender" in s)), t.singleton("afterRenderPlugins", () => Array.from(t.plugins.values()).filter((s) => "afterRender" in s)), t.set("children", e), t.set("shapes", /* @__PURE__ */ new Map()), t.set("registerShape", (s) => B(t, s)), t.set("materials", /* @__PURE__ */ new Map()), t.set("registerMaterial", (s) => M(t, s)), t.set("resources", /* @__PURE__ */ new Map()), t.set("registerResource", (s) => O(t, s)), t.set("nodeRenderers", /* @__PURE__ */ new Map()), t.set("registerNodeRenderer", (s) => y(t, s)), t.set("forEachNode", (s) => w(t, s)), t.set("load", async () => {
-    t.get("plugins");
-    const s = Array.from(t.nodeRenderers.values());
-    for (t.forEachNode((n, f) => {
-      s.filter((g) => !g.include && !g.exclude || g.include && g.include(n, f) || g.exclude && !g.exclude(n, f)).forEach((g) => {
-        var T;
-        return (T = g.update) == null ? void 0 : T.call(g, n, 0);
-      });
-    }); Array.from(t.resources.values()).some((n) => n.loading); )
-      await new Promise((n) => setTimeout(n, 100));
-    return !0;
-  }), t.set("render", (s) => P(t, s)), t.set("startRenderLoop", () => {
-    let s = 0, n = 0;
-    f(0);
-    function f(R) {
-      requestAnimationFrame(f), P(t, n), R *= 1e-3, n += R - s, s = R;
-    }
-  });
-  function c(s) {
-    s.preventDefault(), setTimeout(() => {
-      var n;
-      t.gl.isContextLost() && ((n = t.glExtensions.loseContext) == null || n.restoreContext());
+  function d(e) {
+    e.preventDefault(), setTimeout(() => {
+      var i;
+      n.context.isContextLost() && ((i = n.extensions.loseContext) == null || i.restoreContext());
     }, 0);
   }
-  function u() {
+  function m() {
   }
-  return (i = r.addEventListener) == null || i.call(r, "webglcontextlost", c, !1), (l = r.addEventListener) == null || l.call(r, "webglcontextrestored", u, !1), t.set("destroy", () => {
-    var s, n, f;
-    (s = r.removeEventListener) == null || s.call(r, "webglcontextlost", c), (n = r.removeEventListener) == null || n.call(r, "webglcontextrestored", u), t.gl.useProgram(null), (f = t.glExtensions.loseContext) == null || f.loseContext();
-  }), t;
+  return (a = r.addEventListener) == null || a.call(r, "webglcontextlost", d, !1), (s = r.addEventListener) == null || s.call(r, "webglcontextrestored", m, !1), n.destroy = () => {
+    var e, i, u;
+    (e = r.removeEventListener) == null || e.call(r, "webglcontextlost", d), (i = r.removeEventListener) == null || i.call(r, "webglcontextrestored", m), n.context.useProgram(null), (u = n.extensions.loseContext) == null || u.loseContext();
+  }, t.forEach((e) => {
+    var i;
+    (i = e.register) == null || i.call(e, n), n.plugins.set(e.name, e);
+  }), n.setup(), n;
 }
 export {
-  U as basePlugin,
-  G as createCanvas,
-  F as fadePlugin,
-  D as nodeImagePlugin,
-  N as nodeTextPlugin,
-  X as plugins,
-  L as selector2dPlugin,
-  S as transform2dPlugin
+  j as Renderer2d,
+  z as createApp
 };