@sequenza/workbench 1.0.3 → 1.0.4

package/dist/sequenza.js

@@ -1,32 +1,32 @@
-import * as z from "twgl.js";
-import { jsx as n, jsxs as p, Fragment as le } from "react/jsx-runtime";
-import { forwardRef as Ge, useRef as R, useEffect as D, useState as y, useCallback as W, createContext as We, useMemo as Q, useContext as ie } from "react";
-import { Handle as Xe, Position as se, getBezierPath as Ee, BaseEdge as Ye, EdgeLabelRenderer as Ke, ReactFlowProvider as Je, applyNodeChanges as Qe, applyEdgeChanges as Ze, addEdge as _e, useReactFlow as en, ReactFlow as nn, Controls as tn, Panel as fe, getOutgoers as Se, getSimpleBezierPath as on } from "@xyflow/react";
-const ye = (e) => {
-  const o = e.replace("#", "");
+import * as L from "twgl.js";
+import { jsx as t, jsxs as m, Fragment as se } from "react/jsx-runtime";
+import { forwardRef as Qe, useRef as $, useEffect as k, useState as y, useCallback as Y, createContext as Ze, useContext as ue, useMemo as re } from "react";
+import { Handle as en, Position as ne, getBezierPath as ke, BaseEdge as nn, EdgeLabelRenderer as tn, ReactFlowProvider as on, applyNodeChanges as rn, applyEdgeChanges as sn, addEdge as Ne, useReactFlow as an, ReactFlow as ln, Controls as cn, Panel as he, getOutgoers as Ie, getSimpleBezierPath as un } from "@xyflow/react";
+const Ee = (n) => {
+  const o = n.replace("#", "");
   return [
     parseInt(o.substring(0, 2), 16),
     parseInt(o.substring(2, 4), 16),
     parseInt(o.substring(4, 6), 16)
   ];
-}, rn = (e, o, r) => {
-  const [t, s, l] = ye(e), [a, u, i] = ye(o), m = Math.round(t + (a - t) * r).toString(16).padStart(2, "0"), h = Math.round(s + (u - s) * r).toString(16).padStart(2, "0"), c = Math.round(l + (i - l) * r).toString(16).padStart(2, "0");
-  return `#${m}${h}${c}`;
-}, ke = (e, o) => {
-  const r = Math.max(0, Math.min(1, o)), t = [...e].sort((i, m) => i.position - m.position);
-  if (t.length === 0) return "#000000";
-  if (t.length === 1 || r <= t[0].position) return t[0].color;
-  if (r >= t[t.length - 1].position)
-    return t[t.length - 1].color;
-  let s = t[0], l = t[t.length - 1];
-  for (let i = 0; i < t.length - 1; i++)
-    if (r >= t[i].position && r <= t[i + 1].position) {
-      s = t[i], l = t[i + 1];
+}, dn = (n, o, r) => {
+  const [s, e, a] = Ee(n), [l, u, i] = Ee(o), c = Math.round(s + (l - s) * r).toString(16).padStart(2, "0"), h = Math.round(e + (u - e) * r).toString(16).padStart(2, "0"), f = Math.round(a + (i - a) * r).toString(16).padStart(2, "0");
+  return `#${c}${h}${f}`;
+}, De = (n, o) => {
+  const r = Math.max(0, Math.min(1, o)), s = [...n].sort((i, c) => i.position - c.position);
+  if (s.length === 0) return "#000000";
+  if (s.length === 1 || r <= s[0].position) return s[0].color;
+  if (r >= s[s.length - 1].position)
+    return s[s.length - 1].color;
+  let e = s[0], a = s[s.length - 1];
+  for (let i = 0; i < s.length - 1; i++)
+    if (r >= s[i].position && r <= s[i + 1].position) {
+      e = s[i], a = s[i + 1];
       break;
     }
-  const a = l.position - s.position, u = a === 0 ? 0 : (r - s.position) / a;
-  return rn(s.color, l.color, u);
-}, sn = (e) => typeof e == "object" && e !== null && e.type === "texture" && "src" in e, an = (e) => typeof e == "object" && e !== null && e.type === "gradient", ln = `#version 300 es
+  const l = a.position - e.position, u = l === 0 ? 0 : (r - e.position) / l;
+  return dn(e.color, a.color, u);
+}, fn = (n) => typeof n == "object" && n !== null && n.type === "texture" && "src" in n, mn = (n) => typeof n == "object" && n !== null && n.type === "gradient", pn = `#version 300 es
 
 precision highp float;
 
@@ -40,7 +40,7 @@ void main() {
     gl_Position = vec4(position, 0.0, 1.0);
 }
 `;
-class cn {
+class hn {
   programs = {};
   fbos = {};
   renderOrder = [];
@@ -57,11 +57,11 @@ class cn {
   onTextureLoaded;
   error = null;
   constructor(o, r) {
-    this.patch = r, this.gl = o, this.defaultTexture = z.createTexture(this.gl, {
+    this.patch = r, this.gl = o, this.defaultTexture = L.createTexture(this.gl, {
       minMag: this.gl.NEAREST,
       wrap: this.gl.CLAMP_TO_EDGE,
       auto: !1
-    }), z.setTextureFromArray(
+    }), L.setTextureFromArray(
       this.gl,
       this.defaultTexture,
       new Uint8Array([0, 0, 0, 255]),
@@ -73,20 +73,20 @@ class cn {
         auto: !1
       }
     );
-    let t = !1;
-    for (let u = 0; u < r.shaders.length && !t; u++) {
+    let s = !1;
+    for (let u = 0; u < r.shaders.length && !s; u++) {
       const i = r.shaders[u];
-      if (this.programs[i.id] = z.createProgramInfo(
+      if (this.programs[i.id] = L.createProgramInfo(
         this.gl,
-        [ln, i.source],
+        [pn, i.source],
         void 0,
-        (m) => {
-          const h = m.match(/ERROR:\s*\d+:(\d+):/), c = h ? parseInt(h[1], 10) : 0;
-          this.error = { message: m, line: c, shaderName: i.name }, t = !0;
+        (c) => {
+          const h = c.match(/ERROR:\s*\d+:(\d+):/), f = h ? parseInt(h[1], 10) : 0;
+          this.error = { message: c, line: f, shaderName: i.name }, s = !0;
         }
-      ), t)
+      ), s)
         break;
-      this.fbos[i.id] = z.createFramebufferInfo(
+      this.fbos[i.id] = L.createFramebufferInfo(
         this.gl,
         [
           {
@@ -101,41 +101,41 @@ class cn {
         i.resolution.height
       );
     }
-    this.quad = z.primitives.createXYQuadBufferInfo(this.gl);
-    const s = {}, l = {};
+    this.quad = L.primitives.createXYQuadBufferInfo(this.gl);
+    const e = {}, a = {};
     this.uniforms = {};
     for (let u = 0; u < this.patch.shaders.length; u++) {
       const i = this.patch.shaders[u];
-      s[i.id] = [], l[i.id] = 0, this.dependencyMapping[i.id] = [], this.uniforms[i.id] = {};
+      e[i.id] = [], a[i.id] = 0, this.dependencyMapping[i.id] = [], this.uniforms[i.id] = {};
     }
     for (const u of this.patch.connections)
-      s[u.from].push(u.to), l[u.to] += 1, this.dependencyMapping[u.to].push({
+      e[u.from].push(u.to), a[u.to] += 1, this.dependencyMapping[u.to].push({
         input: u.input,
         from: u.from
       });
-    const a = [...Object.entries(l)].reduce(
-      (u, [i, m]) => m === 0 ? [...u, i] : u,
+    const l = [...Object.entries(a)].reduce(
+      (u, [i, c]) => c === 0 ? [...u, i] : u,
       []
     );
-    for (; a.length > 0; ) {
-      const u = a.shift();
+    for (; l.length > 0; ) {
+      const u = l.shift();
       this.renderOrder.push(u);
-      for (const i of s[u]) {
-        const m = l[i] - 1;
-        l[i] = m, m === 0 && a.push(i);
+      for (const i of e[u]) {
+        const c = a[i] - 1;
+        a[i] = c, c === 0 && l.push(i);
       }
     }
     if (this.renderOrder.length < this.patch.shaders.length)
-      throw Error("Cycle detected in graph");
+      throw console.log(this.patch, this.renderOrder), Error("Cycle detected in graph");
   }
   _getOrCreateTexture(o) {
     if (!this.textures[o]) {
-      const r = z.createTexture(this.gl, {
+      const r = L.createTexture(this.gl, {
         minMag: this.gl.NEAREST,
         wrap: this.gl.CLAMP_TO_EDGE,
         auto: !1
       });
-      z.setTextureFromArray(this.gl, r, new Uint8Array([0, 0, 0, 255]), {
+      L.setTextureFromArray(this.gl, r, new Uint8Array([0, 0, 0, 255]), {
         width: 1,
         height: 1,
         minMag: this.gl.NEAREST,
@@ -146,50 +146,50 @@ class cn {
     return this.textures[o];
   }
   _updateGradientUniform(o, r) {
-    let t = this.gradientCanvases[o];
-    t || (t = document.createElement("canvas"), t.width = 256, t.height = 1, this.gradientCanvases[o] = t);
-    const s = t.getContext("2d");
-    for (let l = 0; l < 256; l++)
-      s.fillStyle = ke(r.stops, l / 255), s.fillRect(l, 0, 1, 1);
-    return this._updateTextureUniform(o, { type: "texture", src: t });
+    let s = this.gradientCanvases[o];
+    s || (s = document.createElement("canvas"), s.width = 256, s.height = 1, this.gradientCanvases[o] = s);
+    const e = s.getContext("2d");
+    for (let a = 0; a < 256; a++)
+      e.fillStyle = De(r.stops, a / 255), e.fillRect(a, 0, 1, 1);
+    return this._updateTextureUniform(o, { type: "texture", src: s });
   }
   _updateTextureUniform(o, r) {
-    const t = this._getOrCreateTexture(o), s = r.src;
-    if (typeof s == "string") {
-      if (this.textureSrcs[o] !== s) {
-        this.textureSrcs[o] = s;
-        const l = new Image();
-        l.onload = () => {
-          this.textures[o] === t && (z.setTextureFromElement(this.gl, t, l, {
+    const s = this._getOrCreateTexture(o), e = r.src;
+    if (typeof e == "string") {
+      if (this.textureSrcs[o] !== e) {
+        this.textureSrcs[o] = e;
+        const a = new Image();
+        a.onload = () => {
+          this.textures[o] === s && (L.setTextureFromElement(this.gl, s, a, {
             minMag: this.gl.NEAREST,
             wrap: this.gl.CLAMP_TO_EDGE,
             auto: !1
           }), this.onTextureLoaded?.());
-        }, l.src = s;
+        }, a.src = e;
       }
     } else
-      z.setTextureFromElement(this.gl, t, s, {
+      L.setTextureFromElement(this.gl, s, e, {
         minMag: this.gl.NEAREST,
         wrap: this.gl.CLAMP_TO_EDGE,
         auto: !1
       });
-    return t;
+    return s;
   }
   render() {
     if (!this.error)
       for (let o = 0; o < this.renderOrder.length; o++) {
-        const r = this.renderOrder[o], t = this.programs[r], s = { ...this.uniforms[r] };
-        for (const [l, a] of Object.entries(s))
-          sn(a) ? s[l] = this._updateTextureUniform(
-            `${r}::${l}`,
-            a
-          ) : an(a) && (s[l] = this._updateGradientUniform(
-            `${r}::${l}`,
-            a
+        const r = this.renderOrder[o], s = this.programs[r], e = { ...this.uniforms[r] };
+        for (const [a, l] of Object.entries(e))
+          fn(l) ? e[a] = this._updateTextureUniform(
+            `${r}::${a}`,
+            l
+          ) : mn(l) && (e[a] = this._updateGradientUniform(
+            `${r}::${a}`,
+            l
           ));
-        for (const l of this.dependencyMapping[r])
-          s[l.input] = this.fbos[l.from].attachments[0];
-        this.gl.useProgram(t.program), o !== this.renderOrder.length - 1 ? z.bindFramebufferInfo(this.gl, this.fbos[r]) : z.bindFramebufferInfo(this.gl, null), z.setUniforms(t, s), z.setBuffersAndAttributes(this.gl, t, this.quad), z.drawBufferInfo(this.gl, this.quad);
+        for (const a of this.dependencyMapping[r])
+          e[a.input] = this.fbos[a.from].attachments[0];
+        this.gl.useProgram(s.program), o !== this.renderOrder.length - 1 ? L.bindFramebufferInfo(this.gl, this.fbos[r]) : L.bindFramebufferInfo(this.gl, null), L.setUniforms(s, e), L.setBuffersAndAttributes(this.gl, s, this.quad), L.drawBufferInfo(this.gl, this.quad);
       }
   }
   dispose() {
@@ -209,73 +209,73 @@ class cn {
       o.buffer && this.gl.deleteBuffer(o.buffer);
   }
 }
-const Re = Ge(
-  ({ patch: e, uniforms: o, className: r, style: t, width: s = 100, height: l = 100, animate: a, onError: u }, i) => {
-    const m = R(null);
-    return D(() => {
-      if (m.current) {
-        const h = m.current.getContext("webgl2", {
+const Re = Qe(
+  ({ patch: n, uniforms: o, className: r, style: s, width: e = 100, height: a = 100, animate: l, onError: u }, i) => {
+    const c = $(null);
+    return k(() => {
+      if (c.current) {
+        const h = c.current.getContext("webgl2", {
           preserveDrawingBuffer: !0
-        }), c = new cn(h, e);
-        u?.(c.error);
-        let f = null;
-        const b = () => {
-          c.uniforms = o.current, c.render();
+        }), f = new hn(h, n);
+        u?.(f.error);
+        let p = null;
+        const x = () => {
+          f.uniforms = o.current, f.render();
         };
-        return a ? f = requestAnimationFrame(function C() {
-          b(), f = requestAnimationFrame(C);
-        }) : (c.onTextureLoaded = b, b()), () => {
-          f !== null && cancelAnimationFrame(f), c.dispose();
+        return l ? p = requestAnimationFrame(function w() {
+          x(), p = requestAnimationFrame(w);
+        }) : (f.onTextureLoaded = x, x()), () => {
+          p !== null && cancelAnimationFrame(p), f.dispose();
         };
       }
-    }, [e, s, l, a]), /* @__PURE__ */ n(
+    }, [n, e, a, l]), /* @__PURE__ */ t(
       "canvas",
       {
         className: `image-crisp ${r ?? ""}`,
-        style: t,
-        width: s,
-        height: l,
+        style: s,
+        width: e,
+        height: a,
         ref: (h) => {
-          m.current = h, typeof i == "function" ? i(h) : i && (i.current = h);
+          c.current = h, typeof i == "function" ? i(h) : i && (i.current = h);
         }
       }
     );
   }
-), T = "([-\\d.]+)", O = "\\s*,\\s*", ae = (e) => {
-  const o = [], r = e.source.split(`
+), M = "([-\\d.]+)", q = "\\s*,\\s*", ce = (n) => {
+  const o = [], r = n.source.split(`
 `);
-  for (const t of r) {
-    const s = t.trim(), l = s.match(
+  for (const s of r) {
+    const e = s.trim(), a = e.match(
       new RegExp(
-        `^uniform\\s+float\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}${O}${T}\\s*\\]`
+        `^uniform\\s+float\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${M}${q}${M}${q}${M}\\s*\\]`
       )
     );
-    if (l?.[1]) {
-      const v = parseFloat(l[2]), E = parseFloat(l[3]), U = parseFloat(l[4]);
+    if (a?.[1]) {
+      const v = parseFloat(a[2]), C = parseFloat(a[3]), A = parseFloat(a[4]);
       o.push({
-        name: l[1],
+        name: a[1],
         type: "float",
         min: v,
-        max: E,
-        default: U
+        max: C,
+        default: A
       });
       continue;
     }
-    const a = s.match(
+    const l = e.match(
       /^uniform\s+float\s+(\w+)\s*;.*\/\/\s*time\b/
     );
-    if (a?.[1]) {
-      o.push({ name: a[1], type: "float", special: "time" });
+    if (l?.[1]) {
+      o.push({ name: l[1], type: "float", special: "time" });
       continue;
     }
-    const u = s.match(/^uniform\s+float\s+(\w+)\s*;/);
+    const u = e.match(/^uniform\s+float\s+(\w+)\s*;/);
     if (u?.[1]) {
       o.push({ name: u[1], type: "float" });
       continue;
     }
-    const i = s.match(
+    const i = e.match(
       new RegExp(
-        `^uniform\\s+vec2\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}\\s*\\]`
+        `^uniform\\s+vec2\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${M}${q}${M}\\s*\\]`
       )
     );
     if (i?.[1]) {
@@ -286,28 +286,28 @@ const Re = Ge(
       o.push({ name: i[1], type: "vec2", default: v });
       continue;
     }
-    const m = s.match(
+    const c = e.match(
       new RegExp(
-        `^uniform\\s+vec3\\s+(\\w+)\\s*;.*\\/\\/\\s*color(?:\\s*\\[\\s*${T}${O}${T}${O}${T}\\s*\\])?`
+        `^uniform\\s+vec3\\s+(\\w+)\\s*;.*\\/\\/\\s*color(?:\\s*\\[\\s*${M}${q}${M}${q}${M}\\s*\\])?`
       )
     );
-    if (m?.[1]) {
-      const v = m[2] !== void 0 ? [
-        parseFloat(m[2]),
-        parseFloat(m[3]),
-        parseFloat(m[4])
+    if (c?.[1]) {
+      const v = c[2] !== void 0 ? [
+        parseFloat(c[2]),
+        parseFloat(c[3]),
+        parseFloat(c[4])
       ] : void 0;
       o.push({
-        name: m[1],
+        name: c[1],
         type: "vec3",
         color: !0,
         ...v && { default: v }
       });
       continue;
     }
-    const h = s.match(
+    const h = e.match(
       new RegExp(
-        `^uniform\\s+vec3\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}${O}${T}\\s*\\]`
+        `^uniform\\s+vec3\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${M}${q}${M}${q}${M}\\s*\\]`
       )
     );
     if (h?.[1]) {
@@ -319,75 +319,90 @@ const Re = Ge(
       o.push({ name: h[1], type: "vec3", default: v });
       continue;
     }
-    const c = s.match(
+    const f = e.match(
       new RegExp(
-        `^uniform\\s+vec4\\s+(\\w+)\\s*;.*\\/\\/\\s*color(?:\\s*\\[\\s*${T}${O}${T}${O}${T}${O}${T}\\s*\\])?`
+        `^uniform\\s+vec4\\s+(\\w+)\\s*;.*\\/\\/\\s*color(?:\\s*\\[\\s*${M}${q}${M}${q}${M}${q}${M}\\s*\\])?`
       )
     );
-    if (c?.[1]) {
-      const v = c[2] !== void 0 ? [
-        parseFloat(c[2]),
-        parseFloat(c[3]),
-        parseFloat(c[4]),
-        parseFloat(c[5])
+    if (f?.[1]) {
+      const v = f[2] !== void 0 ? [
+        parseFloat(f[2]),
+        parseFloat(f[3]),
+        parseFloat(f[4]),
+        parseFloat(f[5])
       ] : void 0;
       o.push({
-        name: c[1],
+        name: f[1],
         type: "vec4",
         color: !0,
         ...v && { default: v }
       });
       continue;
     }
-    const f = s.match(
+    const p = e.match(
       new RegExp(
-        `^uniform\\s+vec4\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}${O}${T}${O}${T}\\s*\\]`
+        `^uniform\\s+vec4\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${M}${q}${M}${q}${M}${q}${M}\\s*\\]`
       )
     );
-    if (f?.[1]) {
+    if (p?.[1]) {
       const v = [
-        parseFloat(f[2]),
-        parseFloat(f[3]),
-        parseFloat(f[4]),
-        parseFloat(f[5])
+        parseFloat(p[2]),
+        parseFloat(p[3]),
+        parseFloat(p[4]),
+        parseFloat(p[5])
       ];
-      o.push({ name: f[1], type: "vec4", default: v });
+      o.push({ name: p[1], type: "vec4", default: v });
       continue;
     }
-    const b = s.match(
+    const x = e.match(
       /^uniform\s+vec2\s+(\w+)\s*;.*\/\/\s*mouse\b/
     );
-    if (b?.[1]) {
-      o.push({ name: b[1], type: "vec2", special: "mouse" });
+    if (x?.[1]) {
+      o.push({ name: x[1], type: "vec2", special: "mouse" });
       continue;
     }
-    const C = s.match(
+    const w = e.match(
       /^uniform\s+vec2\s+(\w+)\s*;.*\/\/\s*resolution\b/
     );
-    if (C?.[1]) {
-      o.push({ name: C[1], type: "vec2", special: "resolution" });
+    if (w?.[1]) {
+      o.push({ name: w[1], type: "vec2", special: "resolution" });
       continue;
     }
-    const N = s.match(/^uniform\s+(vec[234])\s+(\w+)\s*;/);
-    if (N) {
-      const v = N[1], E = N[2];
-      v === "vec2" ? o.push({ name: E, type: "vec2" }) : v === "vec3" ? o.push({ name: E, type: "vec3" }) : v === "vec4" && o.push({ name: E, type: "vec4" });
+    const E = e.match(/^uniform\s+(vec[234])\s+(\w+)\s*;/);
+    if (E) {
+      const v = E[1], C = E[2];
+      v === "vec2" ? o.push({ name: C, type: "vec2" }) : v === "vec3" ? o.push({ name: C, type: "vec3" }) : v === "vec4" && o.push({ name: C, type: "vec4" });
       continue;
     }
-    const F = s.match(
+    const T = e.match(
       /^uniform\s+sampler2D\s+(\w+)\s*;(?:.*\/\/\s*(texture|gradient)\b)?/
     );
-    if (F?.[1]) {
-      const v = F[2], E = v === "texture" ? "texture" : v === "gradient" ? "gradient" : "input";
+    if (T?.[1]) {
+      const v = T[2], C = v === "texture" ? "texture" : v === "gradient" ? "gradient" : "input";
       o.push({
-        name: F[1],
+        name: T[1],
         type: "sampler2D",
-        source: E
+        source: C
       });
     }
   }
   return o;
-}, un = `import { RendererComponent, type Uniforms, type Patch } from "@sequenza/lib";
+};
+function vn(n) {
+  switch (n.type) {
+    case "float":
+      return n.default ?? 0;
+    case "vec2":
+      return n.default ?? [0, 0];
+    case "vec3":
+      return n.default ?? (n.color ? [1, 1, 1] : [0, 0, 0]);
+    case "vec4":
+      return n.default ?? (n.color ? [1, 1, 1, 1] : [0, 0, 0, 0]);
+    case "sampler2D":
+      return;
+  }
+}
+const gn = `import { RendererComponent, type Uniforms, type Patch } from "@sequenza/lib";
 import "@sequenza/lib/style.css";
 import { useRef } from "react";
 
@@ -415,109 +430,113 @@ function getPatch(): Patch {
   throw new Error("placeholder for patch");
 }
 `;
-function dn(e, o) {
-  let r = un;
-  const t = Object.keys(e).filter((l) => !!o.shaders.find((u) => u.id === l)), s = {};
-  for (const l of t)
-    s[l] = e[l];
+function xn(n, o) {
+  let r = gn;
+  const s = Object.keys(n).filter((a) => !!o.shaders.find((u) => u.id === a)), e = {};
+  for (const a of s)
+    e[a] = n[a];
   return r = r.replace(
     'throw new Error("placeholder for initial uniforms");',
-    `return ${JSON.stringify(s, null, 2)};`
+    `return ${JSON.stringify(e, null, 2)};`
   ), r = r.replace(
     'throw new Error("placeholder for patch");',
     `return ${JSON.stringify(o, null, 2)};`
   ), r;
 }
-const we = 16, Ce = ({ id: e, type: o, position: r }) => {
-  const t = o === "source";
-  let s;
-  return t ? s = "bg-neutral-300 text-neutral-500 hover:border-neutral-500 hover:text-neutral-800 bg-[#78A3C4]" : s = "bg-neutral-300", /* @__PURE__ */ n(
-    Xe,
+const ve = 14, Se = 50, Ue = ({ id: n, type: o, position: r, count: s }) => {
+  const e = o === "source";
+  let a;
+  return e ? a = "bg-neutral-300 text-neutral-500 hover:border-neutral-500 hover:text-neutral-800 bg-[#78A3C4]" : a = "bg-neutral-300", /* @__PURE__ */ t(
+    en,
     {
-      id: e,
+      id: n,
       type: o,
       position: r,
+      className: `${r === ne.Top ? "top-0 -translate-y-1/2" : r === ne.Bottom ? "bottom-0" : ""}`,
       style: {
         background: "none",
         border: "none",
-        width: we,
-        height: we
+        width: ve * 2,
+        height: ve,
+        ...s ? {
+          transform: `translateX(${s.index / (s.total - 1) * Se - Se / 2 - ve}px)`
+        } : {}
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ t(
         "div",
         {
-          className: `absolute inset-0 rounded-full flex items-center justify-center text-xs font-mono leading-none pointer-events-none transition-colors ${s}`
+          className: `absolute inset-0 rounded-full flex items-center justify-center text-xs font-mono leading-none pointer-events-none transition-colors ${a}`
         }
       )
     }
   );
-}, H = ({
-  value: e,
+}, V = ({
+  value: n,
   min: o = -1 / 0,
   max: r = 1 / 0,
-  step: t = 0.01,
-  label: s,
-  onChange: l
+  step: s = 0.01,
+  label: e,
+  onChange: a
 }) => {
-  const a = R(!1), u = R(0), i = R(0), [m, h] = y(!1), [c, f] = y(""), b = R(null), C = R(null), N = (g) => Math.min(r, Math.max(o, g)), F = W(
-    (g) => {
-      m || (a.current = !0, u.current = g.clientX, i.current = e, g.preventDefault());
+  const l = $(!1), u = $(0), i = $(0), [c, h] = y(!1), [f, p] = y(""), x = $(null), w = $(null), E = (_) => Math.min(r, Math.max(o, _)), T = Y(
+    (_) => {
+      c || (l.current = !0, u.current = _.clientX, i.current = n, _.preventDefault());
     },
-    [e, m]
+    [n, c]
   );
-  D(() => {
-    const g = (B) => {
-      if (!a.current) return;
-      const _ = (B.clientX - u.current) * t;
-      l(N(parseFloat((i.current + _).toFixed(6))));
-    }, k = () => {
-      a.current = !1;
+  k(() => {
+    const _ = (I) => {
+      if (!l.current) return;
+      const H = (I.clientX - u.current) * s;
+      a(E(parseFloat((i.current + H).toFixed(6))));
+    }, S = () => {
+      l.current = !1;
     };
-    return window.addEventListener("mousemove", g), window.addEventListener("mouseup", k), () => {
-      window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", k);
+    return window.addEventListener("mousemove", _), window.addEventListener("mouseup", S), () => {
+      window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", S);
     };
-  }, [t, o, r, l]);
+  }, [s, o, r, a]);
   const v = () => {
-    f(String(e)), h(!0), setTimeout(() => b.current?.select(), 0);
-  }, E = () => {
-    const g = parseFloat(c);
-    isNaN(g) || l(N(g)), h(!1);
-  }, U = (g) => {
-    m || (g.key === "Enter" || g.key === " " ? (g.preventDefault(), f(String(e)), h(!0), setTimeout(() => b.current?.select(), 0)) : g.key === "ArrowRight" || g.key === "ArrowUp" ? (g.preventDefault(), l(N(parseFloat((e + t).toFixed(6))))) : (g.key === "ArrowLeft" || g.key === "ArrowDown") && (g.preventDefault(), l(N(parseFloat((e - t).toFixed(6))))));
-  }, S = Number.isInteger(e) ? e.toFixed(1) : e.toFixed(3).replace(/0+$/, "");
-  return /* @__PURE__ */ p("div", { className: "flex items-center w-20 relative nodrag", children: [
-    s && /* @__PURE__ */ n("span", { className: "absolute left-1 z-10 bg-neutral-200 h-4 w-4 grid place-items-center pointer-events-none rounded-sm", children: /* @__PURE__ */ n("p", { className: "text-[11px] font-mono w-3 text-neutral-500 height-3 leading-0 -translate-y-0.5 translate-x-0.5 ", children: s }) }),
-    /* @__PURE__ */ n(
+    p(String(n)), h(!0), setTimeout(() => x.current?.select(), 0);
+  }, C = () => {
+    const _ = parseFloat(f);
+    isNaN(_) || a(E(_)), h(!1);
+  }, A = (_) => {
+    c || (_.key === "Enter" || _.key === " " ? (_.preventDefault(), p(String(n)), h(!0), setTimeout(() => x.current?.select(), 0)) : _.key === "ArrowRight" || _.key === "ArrowUp" ? (_.preventDefault(), a(E(parseFloat((n + s).toFixed(6))))) : (_.key === "ArrowLeft" || _.key === "ArrowDown") && (_.preventDefault(), a(E(parseFloat((n - s).toFixed(6))))));
+  }, U = Number.isInteger(n) ? n.toFixed(1) : n.toFixed(3).replace(/0+$/, "");
+  return /* @__PURE__ */ m("div", { className: "flex items-center w-20 relative nodrag", children: [
+    e && /* @__PURE__ */ t("span", { className: "absolute left-1 z-10 bg-neutral-200 h-4 w-4 grid place-items-center pointer-events-none rounded-sm", children: /* @__PURE__ */ t("p", { className: "text-[11px] font-mono w-3 text-neutral-500 height-3 leading-0 -translate-y-0.5 translate-x-0.5 ", children: e }) }),
+    /* @__PURE__ */ t(
       "div",
       {
-        ref: C,
+        ref: w,
         tabIndex: 0,
-        onMouseDown: F,
+        onMouseDown: T,
         onDoubleClick: v,
-        onKeyDown: U,
+        onKeyDown: A,
         className: [
           "flex items-center justify-center",
           "rounded overflow-hidden select-none w-full h-6",
           "focus:outline-2 focus:outline-neutral-400 focus:outline-offset-1",
-          m ? "cursor-text" : "cursor-ew-resize"
+          c ? "cursor-text" : "cursor-ew-resize"
         ].join(" "),
-        children: m ? /* @__PURE__ */ n(
+        children: c ? /* @__PURE__ */ t(
           "input",
           {
-            ref: b,
-            value: c,
-            onChange: (g) => f(g.target.value),
-            onBlur: E,
-            onKeyDown: (g) => {
-              g.key === "Enter" && E(), g.key === "Escape" && h(!1);
+            ref: x,
+            value: f,
+            onChange: (_) => p(_.target.value),
+            onBlur: C,
+            onKeyDown: (_) => {
+              _.key === "Enter" && C(), _.key === "Escape" && h(!1);
             },
             className: "outline-none text-neutral-500 text-xs font-mono border-neutral-200 pl-5 rounded-sm text-right w-full h-full bg-white"
           }
-        ) : /* @__PURE__ */ n("span", { className: "text-xs font-mono text-neutral-500 pl-5 pointer-events-none border-neutral-200 bg-white rounded-sm w-full h-full flex items-center justify-end px-1", children: /* @__PURE__ */ n("p", { children: S }) })
+        ) : /* @__PURE__ */ t("span", { className: "text-xs font-mono text-neutral-500 pl-5 pointer-events-none border-neutral-200 bg-white rounded-sm w-full h-full flex items-center justify-end px-1", children: /* @__PURE__ */ t("p", { children: U }) })
       }
     )
   ] });
-}, oe = We({
+}, ae = Ze({
   currentTime: { current: 0 },
   mousePosition: { current: [0, 0] },
   shaders: [],
@@ -532,286 +551,292 @@ const we = 16, Ce = ({ id: e, type: o, position: r }) => {
   uniforms: { current: {} },
   handleUpdateUniforms: () => {
   },
-  handleUpdateNode: (e) => e,
+  handleUpdateNode: (n) => n,
   handleInsertShader: () => {
   }
-}), me = (e) => Math.round(Math.min(1, Math.max(0, e)) * 255).toString(16).padStart(2, "0"), pe = (e) => parseInt(e, 16) / 255, Ue = ([e, o, r]) => `#${me(e)}${me(o)}${me(r)}`, Ie = (e) => [
-  pe(e.slice(1, 3)),
-  pe(e.slice(3, 5)),
-  pe(e.slice(5, 7))
-], ve = ({ color: e, onChange: o }) => {
-  const r = R(null);
-  return /* @__PURE__ */ p("div", { className: "relative", children: [
-    /* @__PURE__ */ n(
+}), ge = (n) => Math.round(Math.min(1, Math.max(0, n)) * 255).toString(16).padStart(2, "0"), xe = (n) => parseInt(n, 16) / 255, Fe = ([n, o, r]) => `#${ge(n)}${ge(o)}${ge(r)}`, Pe = (n) => [
+  xe(n.slice(1, 3)),
+  xe(n.slice(3, 5)),
+  xe(n.slice(5, 7))
+], be = ({ color: n, onChange: o }) => {
+  const r = $(null);
+  return /* @__PURE__ */ m("div", { className: "relative", children: [
+    /* @__PURE__ */ t(
       "button",
       {
         onClick: () => r.current?.click(),
         className: "w-8 h-5.5 rounded border-2 border-neutral-200 cursor-pointer",
-        style: { backgroundColor: e },
-        title: e
+        style: { backgroundColor: n },
+        title: n
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "input",
       {
         ref: r,
         type: "color",
-        value: e,
-        onChange: (t) => o(t.target.value),
+        value: n,
+        onChange: (s) => o(s.target.value),
         className: "absolute opacity-0 w-0 h-0 pointer-events-none"
       }
     )
   ] });
-}, K = ({ onClick: e }) => /* @__PURE__ */ n(
+}, Q = ({ onClick: n }) => /* @__PURE__ */ t(
   "button",
   {
-    onClick: e,
+    onClick: n,
     className: "w-6 h-6 flex items-center justify-center text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 rounded-sm select-none shrink-0",
     title: "Reset to default",
     children: "↺"
   }
-), fn = ({ name: e, type: o }) => {
-  const { showStats: r } = ie(oe);
-  return /* @__PURE__ */ p("div", { className: " min-w-40 flex flex-col gap-0.5 items-end", children: [
-    /* @__PURE__ */ n("span", { className: "font-mono text-xs text-neutral-900", children: e.replace("u_", "").replaceAll("_", " ").replace(/\b\w/g, (t) => t.toUpperCase()) }),
-    r && /* @__PURE__ */ n("span", { className: "font-mono text-[10px] text-neutral-500", children: o })
+), _n = ({
+  name: n,
+  type: o
+}) => {
+  const { showStats: r } = ue(ae);
+  return /* @__PURE__ */ m("div", { className: " min-w-40 flex flex-col gap-0.5 items-end", children: [
+    /* @__PURE__ */ t("span", { className: "font-mono text-xs text-neutral-900", children: n.replace("u_", "").replaceAll("_", " ").replace(/\b\w/g, (s) => s.toUpperCase()) }),
+    r && /* @__PURE__ */ t("span", { className: "font-mono text-[10px] text-neutral-500", children: o })
   ] });
-}, mn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
-  const [t, s] = y(o ?? e.default ?? 0), l = (a) => {
-    s(a), r(a);
+}, bn = ({ field: n, initialValue: o, handleUpdateUniformField: r }) => {
+  const [s, e] = y(o);
+  k(() => {
+    e(o), r(o);
+  }, [o]);
+  const a = (l) => {
+    e(l), r(l);
   };
-  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ n(
-      H,
+  return /* @__PURE__ */ m("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ t(
+      V,
       {
-        value: t,
-        min: e.min,
-        max: e.max,
+        value: s,
+        min: n.min,
+        max: n.max,
         step: 0.01,
-        onChange: l
+        onChange: a
       }
     ),
-    e.default !== void 0 && /* @__PURE__ */ n(K, { onClick: () => l(e.default) })
-  ] });
-}, pn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
-  const [t, s] = y(
-    o ?? e.default ?? [0, 0]
-  ), l = (a, u) => {
-    const i = [...t];
-    i[a] = u, s(i), r(i);
-  };
-  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ n("div", { className: "flex gap-2 flex-wrap flex-col", children: ["x", "y"].map((a, u) => /* @__PURE__ */ n(
-      H,
-      {
-        label: a,
-        value: t[u],
-        onChange: (i) => l(u, i)
-      },
-      a
-    )) }),
-    e.default !== void 0 && /* @__PURE__ */ n(
-      K,
-      {
-        onClick: () => {
-          s(e.default), r(e.default);
-        }
-      }
-    )
+    n.default !== void 0 && /* @__PURE__ */ t(Q, { onClick: () => a(n.default) })
   ] });
-}, hn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
-  const [t, s] = y(
-    o ?? e.default ?? [1, 1, 1]
-  ), l = (a) => {
-    s(a), r(a);
+}, yn = ({ handleUpdateUniformField: n }) => {
+  const [o, r] = y(!1), [s, e] = y(0);
+  k(() => {
+    if (!o) return;
+    const l = Date.now() - s * 1e3;
+    let u;
+    const i = () => {
+      const c = (Date.now() - l) / 1e3;
+      e(c), n(c), u = requestAnimationFrame(i);
+    };
+    return u = requestAnimationFrame(i), () => cancelAnimationFrame(u);
+  }, [o]);
+  const a = () => {
+    r(!1), e(0), n(0);
   };
-  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ n(
-      ve,
+  return /* @__PURE__ */ m("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ t(
+      "button",
       {
-        color: Ue(t),
-        onChange: (a) => l(Ie(a))
+        onClick: () => r((l) => !l),
+        className: "text-xs font-mono text-neutral-500 bg-neutral-100 hover:bg-neutral-200 rounded-sm w-6 h-6 flex items-center justify-center select-none",
+        title: o ? "Pause" : "Play",
+        children: o ? "⏸" : "▶"
       }
     ),
-    e.default !== void 0 && /* @__PURE__ */ n(K, { onClick: () => l(e.default) })
+    /* @__PURE__ */ m("span", { className: "font-mono text-xs text-neutral-500 px-2 w-16 text-right tabular-nums", children: [
+      s.toFixed(2),
+      "s"
+    ] }),
+    /* @__PURE__ */ t(Q, { onClick: a })
   ] });
-}, vn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
-  const [t, s] = y(
-    o ?? e.default ?? [1, 1, 1, 1]
-  ), [l, a, u, i] = t, m = (h) => {
-    s(h), r(h);
+}, wn = ({ field: n, initialValue: o, handleUpdateUniformField: r }) => {
+  const [s, e] = y(o);
+  k(() => {
+    e(o), r(o);
+  }, [o]);
+  const a = (u, i) => {
+    const c = [...s];
+    c[u] = i, e(c), r(c);
+  }, l = (u) => {
+    e(u), r(u);
   };
-  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ n(
-      ve,
+  return /* @__PURE__ */ m("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ t("div", { className: "flex gap-2 flex-wrap flex-col", children: ["x", "y"].map((u, i) => /* @__PURE__ */ t(
+      V,
       {
-        color: Ue([l, a, u]),
-        onChange: (h) => {
-          const [c, f, b] = Ie(h);
-          m([c, f, b, i]);
-        }
-      }
-    ),
-    /* @__PURE__ */ n(
-      H,
-      {
-        label: "a",
-        value: i,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        onChange: (h) => m([l, a, u, h])
-      }
-    ),
-    e.default !== void 0 && /* @__PURE__ */ n(K, { onClick: () => m(e.default) })
+        label: u,
+        value: s[i],
+        onChange: (c) => a(i, c)
+      },
+      u
+    )) }),
+    n.default !== void 0 && /* @__PURE__ */ t(Q, { onClick: () => l(n.default) })
   ] });
-}, gn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
-  const [t, s] = y(
-    o ?? e.default ?? [0, 0, 0]
-  ), l = (a, u) => {
-    const i = [...t];
-    i[a] = u, s(i), r(i);
+}, Cn = ({ field: n, initialValue: o, handleUpdateUniformField: r }) => {
+  const [s, e] = y(o);
+  k(() => {
+    e(o), r(o);
+  }, [o]);
+  const a = (u, i) => {
+    const c = [...s];
+    c[u] = i, e(c), r(c);
+  }, l = (u) => {
+    e(u), r(u);
   };
-  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: ["x", "y", "z"].map((a, u) => /* @__PURE__ */ n(
-      H,
+  return /* @__PURE__ */ m("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: ["x", "y", "z"].map((u, i) => /* @__PURE__ */ t(
+      V,
       {
-        label: a,
-        value: t[u],
-        onChange: (i) => l(u, i)
+        label: u,
+        value: s[i],
+        onChange: (c) => a(i, c)
       },
-      a
+      u
     )) }),
-    e.default !== void 0 && /* @__PURE__ */ n(
-      K,
+    n.default !== void 0 && /* @__PURE__ */ t(Q, { onClick: () => l(n.default) })
+  ] });
+}, Nn = ({ field: n, initialValue: o, handleUpdateUniformField: r }) => {
+  const [s, e] = y(o);
+  k(() => {
+    e(o);
+  }, [o]);
+  const a = (l) => {
+    e(l), r(l);
+  };
+  return /* @__PURE__ */ m("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ t(
+      be,
       {
-        onClick: () => {
-          s(e.default), r(e.default);
-        }
+        color: Fe(s),
+        onChange: (l) => a(Pe(l))
       }
-    )
+    ),
+    n.default !== void 0 && /* @__PURE__ */ t(Q, { onClick: () => a(n.default) })
   ] });
-}, xn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
-  const [t, s] = y(
-    o ?? e.default ?? [0, 0, 0, 0]
-  ), l = (a, u) => {
-    const i = [...t];
-    i[a] = u, s(i), r(i);
+}, En = ({ field: n, initialValue: o, handleUpdateUniformField: r }) => {
+  const [s, e] = y(o);
+  k(() => {
+    e(o), r(o);
+  }, [o]);
+  const a = (u, i) => {
+    const c = [...s];
+    c[u] = i, e(c), r(c);
+  }, l = (u) => {
+    e(u), r(u);
   };
-  return /* @__PURE__ */ p("div", { className: "flex items-center gap-2 px-2", children: [
-    /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: ["x", "y", "z", "w"].map((a, u) => /* @__PURE__ */ n(
-      H,
+  return /* @__PURE__ */ m("div", { className: "flex items-center gap-2 px-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: ["x", "y", "z", "w"].map((u, i) => /* @__PURE__ */ t(
+      V,
       {
-        label: a,
-        value: t[u],
-        onChange: (i) => l(u, i)
+        label: u,
+        value: s[i],
+        onChange: (c) => a(i, c)
       },
-      a
+      u
     )) }),
-    e.default !== void 0 && /* @__PURE__ */ n(
-      K,
-      {
-        onClick: () => {
-          s(e.default), r(e.default);
-        }
-      }
-    )
+    n.default !== void 0 && /* @__PURE__ */ t(Q, { onClick: () => l(n.default) })
   ] });
-}, bn = ({ handleUpdateUniformField: e }) => {
-  const [o, r] = y(!1), [t, s] = y(0), l = R(0), a = R(0), u = R(0), i = R(e);
-  i.current = e, D(() => {
-    if (!o) return;
-    a.current = Date.now();
-    const c = () => {
-      const f = l.current + (Date.now() - a.current) / 1e3;
-      s(f), i.current(f), u.current = requestAnimationFrame(c);
-    };
-    return u.current = requestAnimationFrame(c), () => {
-      cancelAnimationFrame(u.current), l.current += (Date.now() - a.current) / 1e3;
-    };
+}, Sn = ({ field: n, initialValue: o, handleUpdateUniformField: r }) => {
+  const [s, e] = y(o);
+  k(() => {
+    e(o);
   }, [o]);
-  const m = () => r((c) => !c), h = () => {
-    r(!1), l.current = 0, s(0), i.current(0);
+  const [a, l, u, i] = s, c = (h) => {
+    e(h), r(h);
   };
-  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ n(
-      "button",
+  return /* @__PURE__ */ m("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ t(
+      be,
       {
-        onClick: m,
-        className: "text-xs font-mono text-neutral-500 bg-neutral-100 hover:bg-neutral-200 rounded-sm w-6 h-6 flex items-center justify-center select-none",
-        title: o ? "Pause" : "Play",
-        children: o ? "⏸" : "▶"
+        color: Fe([a, l, u]),
+        onChange: (h) => {
+          const [f, p, x] = Pe(h);
+          c([f, p, x, i]);
+        }
       }
     ),
-    /* @__PURE__ */ p("span", { className: "font-mono text-xs text-neutral-500 px-2 w-16 text-right tabular-nums", children: [
-      t.toFixed(2),
-      "s"
-    ] }),
-    /* @__PURE__ */ n(K, { onClick: h })
+    /* @__PURE__ */ t(
+      V,
+      {
+        label: "a",
+        value: i,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        onChange: (h) => c([a, l, u, h])
+      }
+    ),
+    n.default !== void 0 && /* @__PURE__ */ t(Q, { onClick: () => c(n.default) })
   ] });
-}, _n = ({ handleUpdateUniformField: e }) => {
-  const { mousePosition: o } = ie(oe), [r, t] = y([0, 0]), s = R(e);
-  return s.current = e, D(() => {
-    let l;
+}, Un = ({ handleUpdateUniformField: n }) => {
+  const { mousePosition: o } = ue(ae), [r, s] = y([0, 0]);
+  return k(() => {
+    let e;
     const a = () => {
-      const u = [
-        o.current[0],
-        o.current[1]
-      ];
-      t(u), s.current(u), l = requestAnimationFrame(a);
+      const l = [o.current[0], o.current[1]];
+      s(l), n(l), e = requestAnimationFrame(a);
     };
-    return l = requestAnimationFrame(a), () => cancelAnimationFrame(l);
-  }, []), /* @__PURE__ */ n("div", { className: "flex items-center ", children: /* @__PURE__ */ n("div", { className: "flex gap-2 flex-col", children: ["x", "y"].map((l, a) => /* @__PURE__ */ p("div", { className: "flex items-center w-20 relative", children: [
-    /* @__PURE__ */ n("span", { className: "absolute left-1 z-10 bg-neutral-200 h-4 w-4 grid place-items-center pointer-events-none rounded-sm", children: /* @__PURE__ */ n("p", { className: "text-[11px] font-mono w-3 text-neutral-500 leading-0 -translate-y-0.5 translate-x-0.5", children: l }) }),
-    /* @__PURE__ */ n("span", { className: "text-xs font-mono text-neutral-500 pl-5 pointer-events-none bg-neutral-100 rounded-sm w-full h-6 flex items-center justify-end px-1 tabular-nums", children: r[a].toFixed(3) })
-  ] }, l)) }) });
-}, yn = ({ initialValue: e, handleUpdateUniformField: o }) => {
-  const [r, t] = y(!1), s = e?.src instanceof HTMLVideoElement ? e.src : null, l = typeof e?.src == "string" ? e.src : s?.src ?? null, a = s !== null, [u, i] = y(l), [m, h] = y(a), [c, f] = y(
-    l ? l.split("/").pop() ?? null : null
-  ), [b, C] = y(() => s && s.readyState >= 1 ? [s.videoWidth, s.videoHeight] : null);
-  D(() => {
-    if (b === null) {
-      if (s) {
-        const v = () => C([s.videoWidth, s.videoHeight]);
-        s.readyState >= 1 ? v() : s.addEventListener("loadedmetadata", v, { once: !0 });
-      } else if (l && !a) {
+    return e = requestAnimationFrame(a), () => cancelAnimationFrame(e);
+  }, [n]), /* @__PURE__ */ t("div", { className: "flex items-center ", children: /* @__PURE__ */ t("div", { className: "flex gap-2 flex-col", children: ["x", "y"].map((e, a) => /* @__PURE__ */ m("div", { className: "flex items-center w-20 relative", children: [
+    /* @__PURE__ */ t("span", { className: "absolute left-1 z-10 bg-neutral-200 h-4 w-4 grid place-items-center pointer-events-none rounded-sm", children: /* @__PURE__ */ t("p", { className: "text-[11px] font-mono w-3 text-neutral-500 leading-0 -translate-y-0.5 translate-x-0.5", children: e }) }),
+    /* @__PURE__ */ t("span", { className: "text-xs font-mono text-neutral-500 pl-5 pointer-events-none bg-neutral-100 rounded-sm w-full h-6 flex items-center justify-end px-1 tabular-nums", children: r[a].toFixed(3) })
+  ] }, e)) }) });
+}, An = ({ width: n, height: o, handleUpdateUniformField: r }) => {
+  const s = $(r);
+  return s.current = r, k(() => {
+    s.current([n, o]);
+  }, [n, o]), /* @__PURE__ */ t("div", { className: "flex items-center ", children: /* @__PURE__ */ t("div", { className: "flex gap-2 flex-col", children: ["w", "h"].map((e, a) => /* @__PURE__ */ m("div", { className: "flex items-center w-20 relative", children: [
+    /* @__PURE__ */ t("span", { className: "absolute left-1 z-10 bg-neutral-200 h-4 w-4 grid place-items-center pointer-events-none rounded-sm", children: /* @__PURE__ */ t("p", { className: "text-[11px] font-mono w-3 text-neutral-500 leading-0 -translate-y-0.5 translate-x-0.5", children: e }) }),
+    /* @__PURE__ */ t("span", { className: "text-xs font-mono text-neutral-500 pl-5 pointer-events-none bg-neutral-100 rounded-sm w-full h-6 flex items-center justify-end px-1 tabular-nums", children: a === 0 ? n : o })
+  ] }, e)) }) });
+}, Tn = ({ value: n, handleUpdateUniformField: o }) => {
+  const [r, s] = y(!1), e = n?.src instanceof HTMLVideoElement ? n.src : null, a = typeof n?.src == "string" ? n.src : e?.src ?? null, l = e !== null, [u, i] = y(a), [c, h] = y(l), [f, p] = y(
+    a ? a.split("/").pop() ?? null : null
+  ), [x, w] = y(() => e && e.readyState >= 1 ? [e.videoWidth, e.videoHeight] : null);
+  k(() => {
+    if (x === null) {
+      if (e) {
+        const v = () => w([e.videoWidth, e.videoHeight]);
+        e.readyState >= 1 ? v() : e.addEventListener("loadedmetadata", v, { once: !0 });
+      } else if (a && !l) {
         const v = new Image();
-        v.onload = () => C([v.naturalWidth, v.naturalHeight]), v.src = l;
+        v.onload = () => w([v.naturalWidth, v.naturalHeight]), v.src = a;
       }
     }
   }, []);
-  const N = R(null), F = (v) => {
+  const E = $(null), T = (v) => {
     if (!v) return;
-    const E = URL.createObjectURL(v), U = v.type.startsWith("video/");
-    if (i(E), h(U), f(v.name), C(null), U) {
-      const S = document.createElement("video");
-      S.autoplay = !0, S.muted = !0, S.loop = !0, S.playsInline = !0, S.onloadedmetadata = () => C([S.videoWidth, S.videoHeight]), S.src = E, S.play(), o({ type: "texture", src: S });
+    const C = URL.createObjectURL(v), A = v.type.startsWith("video/");
+    if (i(C), h(A), p(v.name), w(null), A) {
+      const U = document.createElement("video");
+      U.autoplay = !0, U.muted = !0, U.loop = !0, U.playsInline = !0, U.onloadedmetadata = () => w([U.videoWidth, U.videoHeight]), U.src = C, U.play(), o({ type: "texture", src: U });
     } else {
-      const S = new Image();
-      S.onload = () => C([S.naturalWidth, S.naturalHeight]), S.src = E, o({ type: "texture", src: E });
+      const U = new Image();
+      U.onload = () => w([U.naturalWidth, U.naturalHeight]), U.src = C, o({ type: "texture", src: C });
     }
   };
-  return D(() => {
+  return k(() => {
     if (!r) return;
-    const v = (E) => {
-      if (E.clipboardData) {
-        for (const U of E.clipboardData.items)
-          if (U.type.startsWith("image/") || U.type.startsWith("video/")) {
-            F(U.getAsFile());
+    const v = (C) => {
+      if (C.clipboardData) {
+        for (const A of C.clipboardData.items)
+          if (A.type.startsWith("image/") || A.type.startsWith("video/")) {
+            T(A.getAsFile());
             break;
           }
       }
     };
     return window.addEventListener("paste", v), () => window.removeEventListener("paste", v);
-  }, [r]), /* @__PURE__ */ n("div", { className: "flex items-center ", children: /* @__PURE__ */ p("div", { className: "flex flex-col items-start gap-2", children: [
-    /* @__PURE__ */ n(
+  }, [r]), /* @__PURE__ */ t("div", { className: "flex items-center ", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-start gap-2", children: [
+    /* @__PURE__ */ t(
       "div",
       {
         tabIndex: 0,
-        onFocus: () => t(!0),
-        onBlur: () => t(!1),
+        onFocus: () => s(!0),
+        onBlur: () => s(!1),
         className: `w-32 h-32 rounded overflow-hidden flex flex-col items-center justify-center cursor-pointer select-none transition border-4 text-neutral-500 text-xs font-mono p-2 ${r ? "bg-neutral-50 border-neutral-300" : "bg-neutral-100 border-neutral-50"}`,
-        children: u ? m ? /* @__PURE__ */ n(
+        children: u ? c ? /* @__PURE__ */ t(
           "video",
           {
             src: u,
@@ -821,117 +846,111 @@ const we = 16, Ce = ({ id: e, type: o, position: r }) => {
             loop: !0,
             playsInline: !0
           }
-        ) : /* @__PURE__ */ n("img", { src: u, className: "w-full h-full object-contain" }) : r ? "cmd+V" : /* @__PURE__ */ p(le, { children: [
-          /* @__PURE__ */ n("p", { children: "Paste" }),
-          /* @__PURE__ */ n("p", { children: "Here" })
+        ) : /* @__PURE__ */ t("img", { src: u, className: "w-full h-full object-contain" }) : r ? "cmd+V" : /* @__PURE__ */ m(se, { children: [
+          /* @__PURE__ */ t("p", { children: "Paste" }),
+          /* @__PURE__ */ t("p", { children: "Here" })
         ] })
       }
     ),
-    /* @__PURE__ */ p("div", { className: "flex flex-col items-start gap-0.5", children: [
-      /* @__PURE__ */ n(
+    /* @__PURE__ */ m("div", { className: "flex flex-col items-start gap-0.5", children: [
+      /* @__PURE__ */ t(
         "button",
         {
           className: "button-base",
-          onClick: () => N.current?.click(),
+          onClick: () => E.current?.click(),
           children: u ? "Replace" : "Upload"
         }
       ),
-      c && /* @__PURE__ */ n(
+      f && /* @__PURE__ */ t(
         "span",
         {
           className: "text-[10px] text-neutral-400 font-mono truncate max-w-32",
-          title: c,
-          children: c
+          title: f,
+          children: f
         }
       ),
-      b && /* @__PURE__ */ p("span", { className: "text-[10px] text-neutral-400 font-mono", children: [
-        b[0],
+      x && /* @__PURE__ */ m("span", { className: "text-[10px] text-neutral-400 font-mono", children: [
+        x[0],
         "×",
-        b[1]
+        x[1]
       ] })
     ] }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "input",
       {
-        ref: N,
+        ref: E,
         type: "file",
         accept: "image/*,video/*",
         className: "hidden",
-        onChange: (v) => F(v.target.files?.[0] ?? null)
+        onChange: (v) => T(v.target.files?.[0] ?? null)
       }
     )
   ] }) });
-}, wn = [
+}, Ae = [
   { position: 0, color: "#000000" },
   { position: 1, color: "#ffffff" }
-], Cn = ({ width: e, height: o, handleUpdateUniformField: r }) => {
-  const t = R(r);
-  return t.current = r, D(() => {
-    t.current([e, o]);
-  }, [e, o]), /* @__PURE__ */ n("div", { className: "flex items-center ", children: /* @__PURE__ */ n("div", { className: "flex gap-2 flex-col", children: ["w", "h"].map((s, l) => /* @__PURE__ */ p("div", { className: "flex items-center w-20 relative", children: [
-    /* @__PURE__ */ n("span", { className: "absolute left-1 z-10 bg-neutral-200 h-4 w-4 grid place-items-center pointer-events-none rounded-sm", children: /* @__PURE__ */ n("p", { className: "text-[11px] font-mono w-3 text-neutral-500 leading-0 -translate-y-0.5 translate-x-0.5", children: s }) }),
-    /* @__PURE__ */ n("span", { className: "text-xs font-mono text-neutral-500 pl-5 pointer-events-none bg-neutral-100 rounded-sm w-full h-6 flex items-center justify-end px-1 tabular-nums", children: l === 0 ? e : o })
-  ] }, s)) }) });
-}, Nn = ({ initialValue: e, handleUpdateUniformField: o }) => {
-  const [r, t] = y(
-    e?.stops ?? wn
-  ), s = R(null), l = R(null);
-  D(() => {
-    const c = s.current;
-    if (!c) return;
-    const f = c.getContext("2d");
-    if (f) {
-      for (let b = 0; b < c.width; b++)
-        f.fillStyle = ke(r, b / (c.width - 1)), f.fillRect(b, 0, 1, c.height);
+], kn = ({ value: n, handleUpdateUniformField: o }) => {
+  const [r, s] = y(
+    n?.stops ?? Ae
+  ), e = $(null), a = $(null);
+  k(() => {
+    s(n?.stops ?? Ae);
+  }, [n]), k(() => {
+    const f = e.current;
+    if (!f) return;
+    const p = f.getContext("2d");
+    if (p) {
+      for (let x = 0; x < f.width; x++)
+        p.fillStyle = De(r, x / (f.width - 1)), p.fillRect(x, 0, 1, f.height);
       o({ type: "gradient", stops: r });
     }
   }, [r]);
-  const a = (c) => (f) => {
-    f.preventDefault();
-    const b = l.current;
-    if (!b) return;
-    const C = (F) => {
-      const v = b.getBoundingClientRect(), U = Math.max(0, Math.min(F.clientX - v.left, v.width)) / v.width;
-      t(
-        (S) => S.map((g, k) => k === c ? { ...g, position: U } : g)
+  const l = (f) => (p) => {
+    p.preventDefault();
+    const x = a.current;
+    if (!x) return;
+    const w = (T) => {
+      const v = x.getBoundingClientRect(), A = Math.max(0, Math.min(T.clientX - v.left, v.width)) / v.width;
+      s(
+        (U) => U.map((_, S) => S === f ? { ..._, position: A } : _)
       );
-    }, N = () => {
-      window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", N);
+    }, E = () => {
+      window.removeEventListener("mousemove", w), window.removeEventListener("mouseup", E);
     };
-    window.addEventListener("mousemove", C), window.addEventListener("mouseup", N);
-  }, u = () => t((c) => [...c, { position: 1, color: "#ffffff" }]), i = (c) => {
-    r.length <= 1 || t((f) => f.filter((b, C) => C !== c));
-  }, m = (c, f) => t(
-    (b) => b.map((C, N) => N === c ? { ...C, position: f } : C)
-  ), h = (c, f) => t((b) => b.map((C, N) => N === c ? { ...C, color: f } : C));
-  return /* @__PURE__ */ p("div", { className: "flex flex-col  gap-3 p-2", children: [
-    /* @__PURE__ */ p("div", { ref: l, className: "relative w-32 h-4 nodrag nopan", children: [
-      /* @__PURE__ */ n(
+    window.addEventListener("mousemove", w), window.addEventListener("mouseup", E);
+  }, u = () => s((f) => [...f, { position: 1, color: "#ffffff" }]), i = (f) => {
+    r.length <= 1 || s((p) => p.filter((x, w) => w !== f));
+  }, c = (f, p) => s(
+    (x) => x.map((w, E) => E === f ? { ...w, position: p } : w)
+  ), h = (f, p) => s((x) => x.map((w, E) => E === f ? { ...w, color: p } : w));
+  return /* @__PURE__ */ m("div", { className: "flex flex-col  gap-3 p-2", children: [
+    /* @__PURE__ */ m("div", { ref: a, className: "relative w-32 h-4 nodrag nopan", children: [
+      /* @__PURE__ */ t(
         "canvas",
         {
-          ref: s,
+          ref: e,
           width: 128,
           height: 16,
           className: "w-32 h-4 rounded-sm border-2 border-neutral-200"
         }
       ),
-      r.map((c, f) => /* @__PURE__ */ n(
+      r.map((f, p) => /* @__PURE__ */ t(
         "button",
         {
-          "aria-label": `gradient stop ${f}`,
+          "aria-label": `gradient stop ${p}`,
           className: "absolute w-4 h-4 -translate-x-1/2 -bottom-2 rounded-sm border-2 border-neutral-200 cursor-ew-resize",
           style: {
-            left: `${c.position * 100}%`,
-            backgroundColor: c.color
+            left: `${f.position * 100}%`,
+            backgroundColor: f.color
           },
-          onMouseDown: a(f)
+          onMouseDown: l(p)
         },
-        f
+        p
       ))
     ] }),
-    /* @__PURE__ */ p("div", { className: "flex items-center justify-between w-32", children: [
-      /* @__PURE__ */ n("span", { className: "font-mono text-[10px] text-neutral-500", children: "STOPS" }),
-      /* @__PURE__ */ n(
+    /* @__PURE__ */ m("div", { className: "flex items-center justify-between w-32", children: [
+      /* @__PURE__ */ t("span", { className: "font-mono text-[10px] text-neutral-500", children: "STOPS" }),
+      /* @__PURE__ */ t(
         "button",
         {
           onClick: u,
@@ -940,259 +959,223 @@ const we = 16, Ce = ({ id: e, type: o, position: r }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5", children: r.map((c, f) => /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ n(
-        H,
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: r.map((f, p) => /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t(
+        V,
         {
-          value: c.position,
+          value: f.position,
           min: 0,
           max: 1,
           step: 0.01,
-          onChange: (b) => m(f, b)
+          onChange: (x) => c(p, x)
         }
       ),
-      /* @__PURE__ */ n(
-        ve,
+      /* @__PURE__ */ t(
+        be,
         {
-          color: c.color,
-          onChange: (b) => h(f, b)
+          color: f.color,
+          onChange: (x) => h(p, x)
         }
       ),
-      r.length > 1 && /* @__PURE__ */ n(
+      r.length > 1 && /* @__PURE__ */ t(
         "button",
         {
-          onClick: () => i(f),
+          onClick: () => i(p),
           className: "text-xs text-neutral-400 hover:text-neutral-700 leading-none px-1",
-          "aria-label": `remove stop ${f}`,
+          "aria-label": `remove stop ${p}`,
           children: "×"
         }
       )
-    ] }, f)) })
+    ] }, p)) })
   ] });
-}, En = (e, o) => {
-  const r = {};
-  for (const t of e)
-    switch (t.type) {
-      case "float":
-        r[t.name] = t.default ?? 0;
-        break;
-      case "vec2":
-        r[t.name] = t.default ?? [0, 0];
-        break;
-      case "vec3":
-        r[t.name] = t.default ?? [0, 0, 0];
-        break;
-      case "vec4":
-        r[t.name] = t.default ?? [0, 0, 0, 0];
-        break;
-    }
-  if (o)
-    for (const t of e)
-      t.name in o && (r[t.name] = o[t.name]);
-  return r;
 };
-function Sn(e) {
-  switch (e.type) {
+function In(n) {
+  switch (n.type) {
     case "float":
-      return e.special === "time" ? "float time" : "float";
+      return n.special === "time" ? "float time" : "float";
     case "vec2":
-      return e.special === "mouse" ? "vec2 mouse" : e.special === "resolution" ? "vec2 resolution" : "vec2";
+      return n.special === "mouse" ? "vec2 mouse" : n.special === "resolution" ? "vec2 resolution" : "vec2";
     case "vec3":
-      return e.color ? "vec3 color" : "vec3";
+      return n.color ? "vec3 color" : "vec3";
     case "vec4":
-      return e.color ? "vec4 color" : "vec4";
+      return n.color ? "vec4 color" : "vec4";
     case "sampler2D":
-      return e.source === "gradient" ? "sampler2D gradient" : "sampler2D texture";
+      return n.source === "gradient" ? "sampler2D gradient" : "sampler2D texture";
   }
 }
-const Ae = ({
-  shader: e,
-  initialUniforms: o,
+const Me = ({
+  shader: n,
+  savedUniforms: o,
   handleUpdateUniform: r
 }) => {
-  const t = Q(() => ae(e), [e.source]), s = Q(
-    () => En(t, o),
-    [t]
-  ), l = R(s);
-  return D(() => {
-    l.current = { ...s }, r(l.current);
-  }, [s]), t.length === 0 ? /* @__PURE__ */ p("p", { className: "px-2 py-3 font-mono text-xs", children: [
-    "No uniforms found.",
-    " ",
-    /* @__PURE__ */ p("span", { children: [
-      "Add ",
-      /* @__PURE__ */ n("code", { className: "", children: "// [min, max, default]" }),
-      " comments to float uniforms."
-    ] })
-  ] }) : /* @__PURE__ */ n("div", { className: "rounded flex flex-col gap-1", children: t.map((a) => {
-    const u = `${a.name}-${a.type}`, i = (c) => {
-      l.current[a.name] = c, r(l.current);
-    }, m = (c) => {
-      c === null ? delete l.current[a.name] : l.current[a.name] = c, r(l.current);
-    };
+  const s = re(() => ce(n), [n.source]);
+  return s.filter((e) => !(e.type === "sampler2D" && e.source === "input")).length === 0 ? /* @__PURE__ */ t(se, {}) : /* @__PURE__ */ t("div", { className: "rounded flex flex-col gap-1", children: s.map((e) => {
+    const a = `${e.name}-${e.type}`, l = (f) => r(e.name, f), u = (f) => {
+      r(e.name, f);
+    }, i = o[e.name], c = vn(e);
     let h = null;
-    switch (a.type) {
+    switch (e.type) {
       case "float":
-        h = a.special === "time" ? /* @__PURE__ */ n(
-          bn,
+        h = e.special === "time" ? /* @__PURE__ */ t(
+          yn,
           {
-            field: a,
-            handleUpdateUniformField: i
+            field: e,
+            handleUpdateUniformField: l
           }
-        ) : /* @__PURE__ */ n(
-          mn,
+        ) : /* @__PURE__ */ t(
+          bn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            initialValue: i ?? c,
+            handleUpdateUniformField: l
           }
         );
         break;
       case "vec2":
-        h = a.special === "mouse" ? /* @__PURE__ */ n(
-          _n,
+        h = e.special === "mouse" ? /* @__PURE__ */ t(
+          Un,
           {
-            field: a,
-            handleUpdateUniformField: i
+            field: e,
+            handleUpdateUniformField: l
           }
-        ) : a.special === "resolution" ? /* @__PURE__ */ n(
-          Cn,
+        ) : e.special === "resolution" ? /* @__PURE__ */ t(
+          An,
           {
-            field: a,
-            width: e.resolution.width,
-            height: e.resolution.height,
-            handleUpdateUniformField: i
+            field: e,
+            width: n.resolution.width,
+            height: n.resolution.height,
+            handleUpdateUniformField: l
           }
-        ) : /* @__PURE__ */ n(
-          pn,
+        ) : /* @__PURE__ */ t(
+          wn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            initialValue: i ?? c,
+            handleUpdateUniformField: l
           }
         );
         break;
       case "vec3":
-        h = a.color ? /* @__PURE__ */ n(
-          hn,
+        h = e.color ? /* @__PURE__ */ t(
+          Nn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            initialValue: i ?? c,
+            handleUpdateUniformField: l
           }
-        ) : /* @__PURE__ */ n(
-          gn,
+        ) : /* @__PURE__ */ t(
+          Cn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            initialValue: i ?? c,
+            handleUpdateUniformField: l
           }
         );
         break;
       case "vec4":
-        h = a.color ? /* @__PURE__ */ n(
-          vn,
+        h = e.color ? /* @__PURE__ */ t(
+          Sn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            initialValue: i ?? c,
+            handleUpdateUniformField: l
           }
-        ) : /* @__PURE__ */ n(
-          xn,
+        ) : /* @__PURE__ */ t(
+          En,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            initialValue: i ?? c,
+            handleUpdateUniformField: l
           }
         );
         break;
       case "sampler2D":
-        a.source === "texture" ? h = /* @__PURE__ */ n(
-          yn,
+        e.source === "texture" ? h = /* @__PURE__ */ t(
+          Tn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: m
+            field: e,
+            value: i,
+            handleUpdateUniformField: u
           }
-        ) : a.source === "gradient" && (h = /* @__PURE__ */ n(
-          Nn,
+        ) : e.source === "gradient" && (h = /* @__PURE__ */ t(
+          kn,
           {
-            field: a,
-            initialValue: s[a.name],
-            handleUpdateUniformField: i
+            field: e,
+            value: i,
+            handleUpdateUniformField: l
           }
         ));
         break;
     }
-    return h === null ? null : /* @__PURE__ */ p("div", { className: "flex items-center gap-4 rounded-sm mb-1", children: [
-      /* @__PURE__ */ n(fn, { name: a.name, type: Sn(a) }),
-      /* @__PURE__ */ n("div", { className: "bg-neutral-100 p-1 rounded-md", children: h })
-    ] }, u);
+    return h === null ? null : /* @__PURE__ */ m("div", { className: "flex items-center gap-4 rounded-sm mb-1", children: [
+      /* @__PURE__ */ t(_n, { name: e.name, type: In(e) }),
+      /* @__PURE__ */ t("div", { className: "bg-neutral-100 p-1 rounded-md", children: h })
+    ] }, a);
   }) });
-}, ce = ({
-  children: e,
+}, de = ({
+  children: n,
   open: o,
   className: r,
-  handleOpenChange: t
+  handleOpenChange: s
 }) => {
-  const s = R(null), [l, a] = y(o);
-  return D(() => {
-    a(!!o);
-  }, [o]), D(() => {
-    s.current !== null && (l ? s.current.showModal() : s.current.close()), t(l);
-  }, [l]), /* @__PURE__ */ n(
+  const e = $(null), [a, l] = y(o);
+  return k(() => {
+    l(!!o);
+  }, [o]), k(() => {
+    e.current !== null && (a ? e.current.showModal() : e.current.close()), s(a);
+  }, [a]), /* @__PURE__ */ t(
     "dialog",
     {
-      ref: s,
-      className: `top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3xl h-5/6 border border-neutral-300 rounded-lg starting:opacity-0 opacity-100 transition-all transition-discrete ${l ? "visible" : "hidden"} ${r} nopan nodrag nowheel`,
-      children: e
+      ref: e,
+      className: `top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3xl h-5/6 border border-neutral-300 rounded-lg starting:opacity-0 opacity-100 transition-all transition-discrete ${a ? "visible" : "hidden"} ${r} nopan nodrag nowheel`,
+      children: o && n
     }
   );
-}, Ne = "pnpm i @sequenza/lib", Te = ({
-  uniforms: e,
+}, Te = "pnpm i @sequenza/lib", $e = ({
+  uniforms: n,
   patch: o,
   open: r,
-  onOpenChange: t
+  onOpenChange: s
 }) => {
-  const s = dn(e, o), [l, a] = y("idle"), [u, i] = y("idle");
-  return /* @__PURE__ */ p(
-    ce,
+  const e = xn(n, o), [a, l] = y("idle"), [u, i] = y("idle");
+  return /* @__PURE__ */ m(
+    de,
     {
       open: r,
-      handleOpenChange: t,
+      handleOpenChange: s,
       className: "flex flex-col gap-4 p-6 overflow-y-auto",
       children: [
-        /* @__PURE__ */ p("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ n("h2", { className: "text-sm font-medium text-neutral-800", children: "Integrate shader" }),
-          /* @__PURE__ */ n("button", { className: "button-base", onClick: () => t(!1), children: "Close" })
+        /* @__PURE__ */ m("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ t("h2", { className: "text-sm font-medium text-neutral-800", children: "Integrate shader" }),
+          /* @__PURE__ */ t("button", { className: "button-base", onClick: () => s(!1), children: "Close" })
         ] }),
-        /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ n("p", { className: "text-xs text-neutral-500", children: "Install" }),
-          /* @__PURE__ */ p("div", { className: "flex items-center gap-2 bg-neutral-50 rounded py-4 px-4", children: [
-            /* @__PURE__ */ n("code", { className: "text-xs text-neutral-700 w-full select-all", children: Ne }),
-            /* @__PURE__ */ n("button", { className: "button-base", onClick: () => {
-              navigator.clipboard.writeText(Ne), a("done"), setTimeout(() => a("idle"), 1800);
-            }, children: l === "done" ? "Copied!" : "Copy" })
+        /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ t("p", { className: "text-xs text-neutral-500", children: "Install" }),
+          /* @__PURE__ */ m("div", { className: "flex items-center gap-2 bg-neutral-50 rounded py-4 px-4", children: [
+            /* @__PURE__ */ t("code", { className: "text-xs text-neutral-700 w-full select-all", children: Te }),
+            /* @__PURE__ */ t("button", { className: "button-base", onClick: () => {
+              navigator.clipboard.writeText(Te), l("done"), setTimeout(() => l("idle"), 1800);
+            }, children: a === "done" ? "Copied!" : "Copy" })
           ] })
         ] }),
-        /* @__PURE__ */ p("div", { className: "flex flex-col gap-1 flex-1 min-h-0", children: [
-          /* @__PURE__ */ n("p", { className: "text-xs text-neutral-500", children: "Component" }),
-          /* @__PURE__ */ p("div", { className: "relative flex-1 min-h-0 bg-neutral-50 rounded", children: [
-            /* @__PURE__ */ n(
+        /* @__PURE__ */ m("div", { className: "flex flex-col gap-1 flex-1 min-h-0", children: [
+          /* @__PURE__ */ t("p", { className: "text-xs text-neutral-500", children: "Component" }),
+          /* @__PURE__ */ m("div", { className: "relative flex-1 min-h-0 bg-neutral-50 rounded", children: [
+            /* @__PURE__ */ t(
               "button",
               {
                 className: "absolute top-4 right-4 button-base",
                 onClick: () => {
-                  navigator.clipboard.writeText(s), i("done"), setTimeout(() => i("idle"), 1800);
+                  navigator.clipboard.writeText(e), i("done"), setTimeout(() => i("idle"), 1800);
                 },
                 children: u === "done" ? "Copied!" : "Copy"
               }
             ),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               "textarea",
               {
                 readOnly: !0,
-                value: s,
+                value: e,
                 className: "w-full h-full resize-none bg-transparent text-xs text-neutral-700 font-mono p-4 pr-12 outline-none"
               }
             )
@@ -1201,149 +1184,150 @@ const Ae = ({
       ]
     }
   );
-}, kn = ({
-  open: e,
+}, Dn = ({
+  open: n,
   onOpenChange: o,
   shader: r,
-  patch: t,
-  uniforms: s,
+  patch: s,
+  uniforms: e,
+  savedUniforms: a,
   nodeId: l,
-  handleUpdateUniforms: a,
-  handleUpdateNode: u
+  handleFieldUpdate: u,
+  handleUpdateNode: i
 }) => {
-  const i = R(null), m = R(null), [h, c] = y(!1), [f, b] = y(null), C = (g, k) => {
-    const B = g.split(/\n(?=\d+: )/), _ = {};
-    for (const j of B) {
-      const X = j.match(/^(\d+): ([\s\S]*)/);
-      X && (_[parseInt(X[1], 10)] = X[2].trimEnd());
+  const c = $(null), h = $(null), [f, p] = y(!1), [x, w] = y(null), E = (S, I) => {
+    const H = S.split(/\n(?=\d+: )/), X = {};
+    for (const z of H) {
+      const G = z.match(/^(\d+): ([\s\S]*)/);
+      G && (X[parseInt(G[1], 10)] = G[2].trimEnd());
     }
-    const P = Math.max(1, k - 3), Z = k + 3, G = [];
-    for (let j = P; j <= Z; j++)
-      _[j] !== void 0 && G.push(`${j}: ${_[j]}`);
-    return G.join(`
+    const K = Math.max(1, I - 3), N = I + 3, D = [];
+    for (let z = K; z <= N; z++)
+      X[z] !== void 0 && D.push(`${z}: ${X[z]}`);
+    return D.join(`
 `);
-  }, [N, F] = y({ w: 1, h: 1 }), { width: v, height: E } = r.resolution;
-  D(() => {
-    const g = m.current;
-    if (!g) return;
-    const k = new ResizeObserver(([B]) => {
-      const { width: _, height: P } = B.contentRect;
-      F({ w: _, h: P });
+  }, [T, v] = y({ w: 1, h: 1 }), { width: C, height: A } = r.resolution;
+  k(() => {
+    const S = h.current;
+    if (!S) return;
+    const I = new ResizeObserver(([H]) => {
+      const { width: X, height: K } = H.contentRect;
+      v({ w: X, h: K });
     });
-    return k.observe(g), () => k.disconnect();
+    return I.observe(S), () => I.disconnect();
   }, []);
   const U = () => {
-    i.current?.toBlob((g) => {
-      g && navigator.clipboard.write([new ClipboardItem({ "image/png": g })]);
+    c.current?.toBlob((S) => {
+      S && navigator.clipboard.write([new ClipboardItem({ "image/png": S })]);
     });
-  }, S = () => {
-    const g = i.current?.toDataURL("image/png");
-    if (!g) return;
-    const k = document.createElement("a");
-    k.href = g, k.download = `${r.name}.png`, k.click();
+  }, _ = () => {
+    const S = c.current?.toDataURL("image/png");
+    if (!S) return;
+    const I = document.createElement("a");
+    I.href = S, I.download = `${r.name}.png`, I.click();
   };
-  return /* @__PURE__ */ p(
-    ce,
+  return /* @__PURE__ */ m(
+    de,
     {
-      open: e,
+      open: n,
       handleOpenChange: o,
       className: "flex flex-col w-full h-full",
       children: [
-        /* @__PURE__ */ p("div", { className: "flex items-center justify-between px-6 py-4 shrink-0", children: [
-          /* @__PURE__ */ n("h2", { className: "text-sm font-medium text-neutral-800", children: r.name }),
-          /* @__PURE__ */ n("button", { className: "button-base", onClick: () => o(!1), children: "Close" })
+        /* @__PURE__ */ m("div", { className: "flex items-center justify-between px-6 py-4 shrink-0", children: [
+          /* @__PURE__ */ t("h2", { className: "text-sm font-medium text-neutral-800", children: r.name }),
+          /* @__PURE__ */ t("button", { className: "button-base", onClick: () => o(!1), children: "Close" })
         ] }),
-        /* @__PURE__ */ p("div", { className: "flex gap-16 px-6 pb-6  flex-1 min-h-0 items-center", children: [
-          /* @__PURE__ */ n("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ n(
-            Ae,
+        /* @__PURE__ */ m("div", { className: "flex gap-16 px-6 pb-6  flex-1 min-h-0 items-center", children: [
+          /* @__PURE__ */ t("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ t(
+            Me,
             {
               shader: r,
-              initialUniforms: s.current[r.id],
-              handleUpdateUniform: (g) => a(r.id, g)
+              savedUniforms: a,
+              handleUpdateUniform: u
             }
           ) }) }),
-          /* @__PURE__ */ p("div", { className: "h-full w-full flex flex-col gap-4 ", children: [
-            /* @__PURE__ */ n(
+          /* @__PURE__ */ m("div", { className: "h-full w-full flex flex-col gap-4 ", children: [
+            /* @__PURE__ */ t(
               "div",
               {
-                ref: m,
+                ref: h,
                 className: "flex bg-neutral-50 rounded w-4/5 items-center justify-center h-full",
-                children: /* @__PURE__ */ n(
+                children: /* @__PURE__ */ t(
                   Re,
                   {
-                    ref: i,
+                    ref: c,
                     animate: !0,
-                    width: v,
-                    height: E,
-                    patch: t,
-                    uniforms: s,
-                    className: v / E > N.w / N.h ? "w-full" : "h-full",
-                    onError: (g) => b(g)
+                    width: C,
+                    height: A,
+                    patch: s,
+                    uniforms: e,
+                    className: C / A > T.w / T.h ? "w-full" : "h-full",
+                    onError: (S) => w(S)
                   }
                 )
               }
             ),
-            /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 ", children: [
-              /* @__PURE__ */ p("div", { className: "flex gap-1 bg-neutral-100 p-1 rounded-md w-min", children: [
-                /* @__PURE__ */ n(
-                  H,
+            /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 ", children: [
+              /* @__PURE__ */ m("div", { className: "flex gap-1 bg-neutral-100 p-1 rounded-md w-min", children: [
+                /* @__PURE__ */ t(
+                  V,
                   {
                     label: "w",
-                    value: v,
+                    value: C,
                     min: 1,
                     step: 1,
-                    onChange: (g) => u(l, (k) => ({
-                      ...k,
-                      shader: { ...k.shader, resolution: { width: g, height: E } }
+                    onChange: (S) => i(l, (I) => ({
+                      ...I,
+                      shader: { ...I.shader, resolution: { width: S, height: A } }
                     }))
                   }
                 ),
-                /* @__PURE__ */ n(
-                  H,
+                /* @__PURE__ */ t(
+                  V,
                   {
                     label: "h",
-                    value: E,
+                    value: A,
                     min: 1,
                     step: 1,
-                    onChange: (g) => u(l, (k) => ({
-                      ...k,
-                      shader: { ...k.shader, resolution: { width: v, height: g } }
+                    onChange: (S) => i(l, (I) => ({
+                      ...I,
+                      shader: { ...I.shader, resolution: { width: C, height: S } }
                     }))
                   }
                 )
               ] }),
-              /* @__PURE__ */ p("div", { className: "flex gap-1 h-min w-min", children: [
-                /* @__PURE__ */ n(
+              /* @__PURE__ */ m("div", { className: "flex gap-1 h-min w-min", children: [
+                /* @__PURE__ */ t(
                   "button",
                   {
                     className: "button-base",
-                    onClick: () => c(!0),
+                    onClick: () => p(!0),
                     children: "Export"
                   }
                 ),
-                /* @__PURE__ */ n(
-                  Te,
+                /* @__PURE__ */ t(
+                  $e,
                   {
-                    uniforms: s.current,
-                    patch: t,
-                    open: h,
-                    onOpenChange: c
+                    uniforms: e.current,
+                    patch: s,
+                    open: f,
+                    onOpenChange: p
                   }
                 ),
-                /* @__PURE__ */ n("button", { className: "button-base", onClick: U, children: "Copy" }),
-                /* @__PURE__ */ n("button", { className: "button-base", onClick: S, children: "Save" })
+                /* @__PURE__ */ t("button", { className: "button-base", onClick: U, children: "Copy" }),
+                /* @__PURE__ */ t("button", { className: "button-base", onClick: _, children: "Save" })
               ] })
             ] })
           ] })
         ] }),
-        f && /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 mx-6 mb-6 p-2 bg-white border-2 border-red-100 rounded-md", children: [
-          /* @__PURE__ */ n("p", { className: "text-white w-min text-nowrap bg-red-700 px-2 py-1 rounded text-xs", children: f.shaderName }),
-          /* @__PURE__ */ n("pre", { className: "text-xs text-red-600 font-mono whitespace-pre-wrap break-all", children: C(f.message, f.line) }),
-          /* @__PURE__ */ n(
+        x && /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 mx-6 mb-6 p-2 bg-white border-2 border-red-100 rounded-md", children: [
+          /* @__PURE__ */ t("p", { className: "text-white w-min text-nowrap bg-red-700 px-2 py-1 rounded text-xs", children: x.shaderName }),
+          /* @__PURE__ */ t("pre", { className: "text-xs text-red-600 font-mono whitespace-pre-wrap break-all", children: E(x.message, x.line) }),
+          /* @__PURE__ */ t(
             "button",
             {
               className: "self-start text-xs px-2 py-1 rounded border border-red-200 bg-white text-red-600 hover:bg-red-50 cursor-pointer",
-              onClick: () => navigator.clipboard.writeText(f.message),
+              onClick: () => navigator.clipboard.writeText(x.message),
               children: "Copy error"
             }
           )
@@ -1351,40 +1335,45 @@ const Ae = ({
       ]
     }
   );
-}, Rn = ({ data: e, selected: o, id: r }) => {
+}, Rn = ({ data: n, selected: o, id: r }) => {
   const {
-    patches: t,
-    uniforms: s,
-    handleUpdateUniforms: l,
-    handleUpdateNode: a,
+    patches: s,
+    uniforms: e,
+    handleUpdateUniforms: a,
+    handleUpdateNode: l,
     showStats: u,
     setOpenExportNodeId: i,
-    openPreviewNodeId: m,
+    openPreviewNodeId: c,
     setOpenPreviewNodeId: h
-  } = ie(oe);
-  if (!t || t[e.shader.id] === void 0) return null;
-  const { width: c, height: f } = e.shader.resolution, [b, C] = y(null), N = R(null), [F, v] = y("idle"), [E, U] = y("idle"), S = () => {
-    N.current?.toBlob((_) => {
-      _ && navigator.clipboard.write([new ClipboardItem({ "image/png": _ })]);
-    }), v("done"), setTimeout(() => v("idle"), 1800);
-  }, g = () => {
-    const _ = N.current?.toDataURL("image/png");
-    if (!_) return;
-    const P = document.createElement("a");
-    P.href = _, P.download = `${e.shader.name}.png`, P.click();
-  }, k = Q(() => ae(e.shader).filter((_) => _.type === "sampler2D" && _.source === "input").map((_) => _.name), [e.shader]), B = (_, P) => {
-    const Z = _.split(/\n(?=\d+: )/), G = {};
-    for (const q of Z) {
-      const ne = q.match(/^(\d+): ([\s\S]*)/);
-      ne && (G[parseInt(ne[1], 10)] = ne[2].trimEnd());
+  } = ue(ae), [f, p] = y(
+    () => e.current[n.shader.id] ?? {}
+  ), x = (N, D) => {
+    a(n.shader.id, (z) => ({
+      ...z,
+      [N]: D
+    }));
+  }, { width: w, height: E } = n.shader.resolution, [T, v] = y(null), C = $(null), [A, U] = y("idle"), [_, S] = y("idle"), I = () => {
+    C.current?.toBlob((N) => {
+      N && navigator.clipboard.write([new ClipboardItem({ "image/png": N })]);
+    }), U("done"), setTimeout(() => U("idle"), 1800);
+  }, H = () => {
+    const N = C.current?.toDataURL("image/png");
+    if (!N) return;
+    const D = document.createElement("a");
+    D.href = N, D.download = `${n.shader.name}.png`, D.click();
+  }, X = re(() => ce(n.shader).filter((N) => N.type === "sampler2D" && N.source === "input").map((N) => N.name), [n.shader]), K = (N, D) => {
+    const z = N.split(/\n(?=\d+: )/), G = {};
+    for (const W of z) {
+      const Z = W.match(/^(\d+): ([\s\S]*)/);
+      Z && (G[parseInt(Z[1], 10)] = Z[2].trimEnd());
     }
-    const j = Math.max(1, P - 3), X = P + 3, ee = [];
-    for (let q = j; q <= X; q++)
-      G[q] !== void 0 && ee.push(`${q}: ${G[q]}`);
-    return ee.join(`
+    const te = Math.max(1, D - 3), fe = D + 3, le = [];
+    for (let W = te; W <= fe; W++)
+      G[W] !== void 0 && le.push(`${W}: ${G[W]}`);
+    return le.join(`
 `);
   };
-  return /* @__PURE__ */ p(
+  return !s || s[n.shader.id] === void 0 ? null : /* @__PURE__ */ m(
     "div",
     {
       className: `
@@ -1392,120 +1381,125 @@ const Ae = ({
 				${o ? "outline-4" : "outline-0"}
 			`,
       children: [
-        /* @__PURE__ */ n("p", { className: "text-sm w-min py-1 px-2 bg-neutral-100 rounded-lg text-neutral-500 text-nowrap", children: e.shader.name }),
-        u && /* @__PURE__ */ p(le, { children: [
-          /* @__PURE__ */ p("p", { className: "text-xs text-neutral-500 absolute -top-6", children: [
+        /* @__PURE__ */ t("p", { className: "text-sm w-min py-1 px-2 bg-neutral-100 rounded-lg text-neutral-500 text-nowrap", children: n.shader.name }),
+        u && /* @__PURE__ */ m(se, { children: [
+          /* @__PURE__ */ m("p", { className: "text-xs text-neutral-500 absolute -top-6", children: [
             "ID: ",
-            e.shader.id
+            n.shader.id
           ] }),
-          /* @__PURE__ */ n("p", { className: "text-xs text-neutral-500 absolute -top-10", children: e.shader.name })
+          /* @__PURE__ */ t("p", { className: "text-xs text-neutral-500 absolute -top-10", children: n.shader.name })
         ] }),
-        k.map((_) => /* @__PURE__ */ n(
-          Ce,
+        X.map((N, D) => /* @__PURE__ */ t(
+          Ue,
           {
-            id: _,
+            id: N,
             type: "target",
-            position: se.Top
+            position: ne.Top,
+            count: {
+              total: X.length,
+              index: D
+            }
           },
-          _
+          N
         )),
-        /* @__PURE__ */ p("div", { className: "flex gap-8", children: [
-          /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ n(
-            Ae,
+        /* @__PURE__ */ m("div", { className: "flex gap-8", children: [
+          /* @__PURE__ */ t(
+            Me,
             {
-              shader: e.shader,
-              initialUniforms: s.current[e.shader.id],
-              handleUpdateUniform: (_) => {
-                l(e.shader.id, _);
-              }
+              shader: n.shader,
+              savedUniforms: f,
+              handleUpdateUniform: x
             }
-          ) }),
-          /* @__PURE__ */ p("div", { className: "flex flex-col justify-center items-start gap-4 ", children: [
-            /* @__PURE__ */ p("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ p("div", { className: "relative max-w-96 group", children: [
-                /* @__PURE__ */ p("div", { className: "flex absolute top-2 right-2 gap-2", children: [
-                  /* @__PURE__ */ n(
+          ),
+          /* @__PURE__ */ m("div", { className: "flex flex-col justify-center items-start gap-4 ", children: [
+            /* @__PURE__ */ m("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ m("div", { className: "relative max-w-96 group", children: [
+                /* @__PURE__ */ m("div", { className: "flex absolute top-2 right-2 gap-2", children: [
+                  /* @__PURE__ */ t(
                     "button",
                     {
                       className: "button-base group-hover:opacity-100 opacity-0",
-                      onClick: () => h(r),
+                      onClick: () => {
+                        h(r), p(e.current[n.shader.id] ?? {});
+                      },
                       children: "Expand"
                     }
                   ),
-                  /* @__PURE__ */ n(
-                    kn,
+                  /* @__PURE__ */ t(
+                    Dn,
                     {
-                      open: m === r,
-                      onOpenChange: (_) => {
-                        h(_ ? r : null);
+                      open: c === r,
+                      onOpenChange: (N) => {
+                        p(e.current[n.shader.id] ?? {}), h(N ? r : null);
                       },
-                      shader: e.shader,
-                      patch: t[e.shader.id],
-                      uniforms: s,
+                      shader: n.shader,
+                      patch: s[n.shader.id],
+                      uniforms: e,
+                      savedUniforms: f,
                       nodeId: r,
-                      handleUpdateUniforms: l,
-                      handleUpdateNode: a
+                      handleFieldUpdate: x,
+                      handleUpdateNode: l
                     }
                   ),
-                  /* @__PURE__ */ n(
+                  /* @__PURE__ */ t(
                     "button",
                     {
-                      className: `button-base ${e.paused ? "opacity-100" : "group-hover:opacity-100 opacity-0"}`,
+                      className: `button-base ${n.paused ? "opacity-100" : "group-hover:opacity-100 opacity-0"}`,
                       onClick: () => {
-                        a(r, (_) => ({ ..._, paused: !_.paused }));
+                        l(r, (N) => ({ ...N, paused: !N.paused }));
                       },
-                      children: e.paused ? "Resume" : "Pause"
+                      children: n.paused ? "Resume" : "Pause"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ n(
+                /* @__PURE__ */ t(
                   Re,
                   {
-                    ref: N,
-                    animate: !e.paused,
-                    width: c,
-                    height: f,
-                    patch: t[e.shader.id],
-                    uniforms: s,
+                    ref: C,
+                    animate: !n.paused,
+                    width: w,
+                    height: E,
+                    patch: s[n.shader.id],
+                    uniforms: e,
                     className: "w-full h-auto",
-                    style: { maxWidth: `${c / f * 24}rem` },
-                    onError: (_) => {
-                      C(_);
+                    style: { maxWidth: `${w / E * 24}rem` },
+                    onError: (N) => {
+                      v(N);
                     }
                   }
                 )
               ] }),
-              /* @__PURE__ */ p("div", { className: "flex gap-1 bg-neutral-100 rounded-md p-1 w-min", children: [
-                /* @__PURE__ */ n(
-                  H,
+              /* @__PURE__ */ m("div", { className: "flex gap-1 bg-neutral-100 rounded-md p-1 w-min", children: [
+                /* @__PURE__ */ t(
+                  V,
                   {
                     label: "w",
-                    value: c,
+                    value: w,
                     min: 1,
                     step: 1,
-                    onChange: (_) => a(r, (P) => ({
-                      ...P,
-                      shader: { ...P.shader, resolution: { width: _, height: f } }
+                    onChange: (N) => l(r, (D) => ({
+                      ...D,
+                      shader: { ...D.shader, resolution: { width: N, height: E } }
                     }))
                   }
                 ),
-                /* @__PURE__ */ n(
-                  H,
+                /* @__PURE__ */ t(
+                  V,
                   {
                     label: "h",
-                    value: f,
+                    value: E,
                     min: 1,
                     step: 1,
-                    onChange: (_) => a(r, (P) => ({
-                      ...P,
-                      shader: { ...P.shader, resolution: { width: c, height: _ } }
+                    onChange: (N) => l(r, (D) => ({
+                      ...D,
+                      shader: { ...D.shader, resolution: { width: w, height: N } }
                     }))
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ p("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ n(
+            /* @__PURE__ */ m("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ t(
                 "button",
                 {
                   className: "button-base",
@@ -1513,96 +1507,96 @@ const Ae = ({
                   children: "Export"
                 }
               ),
-              /* @__PURE__ */ n("button", { className: "button-base", onClick: S, children: F === "done" ? "Copied!" : "Copy" }),
-              /* @__PURE__ */ n("button", { className: "button-base", onClick: g, children: "Save" })
+              /* @__PURE__ */ t("button", { className: "button-base", onClick: I, children: A === "done" ? "Copied!" : "Copy" }),
+              /* @__PURE__ */ t("button", { className: "button-base", onClick: H, children: "Save" })
             ] })
           ] })
         ] }),
-        b && /* @__PURE__ */ p("div", { className: "flex flex-col gap-2 p-2 bg-white border-2 border-red-100 rounded-md relative", children: [
-          /* @__PURE__ */ n("p", { className: "text-white w-min text-nowrap bg-red-700 px-2 py-1 rounded text-xs", children: b.shaderName }),
-          /* @__PURE__ */ n("pre", { className: "text-xs text-red-600 font-mono whitespace-pre-wrap break-all", children: B(b.message, b.line) }),
-          /* @__PURE__ */ n(
+        T && /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 p-2 bg-white border-2 border-red-100 rounded-md relative", children: [
+          /* @__PURE__ */ t("p", { className: "text-white w-min text-nowrap bg-red-700 px-2 py-1 rounded text-xs", children: T.shaderName }),
+          /* @__PURE__ */ t("pre", { className: "text-xs text-red-600 font-mono whitespace-pre-wrap break-all", children: K(T.message, T.line) }),
+          /* @__PURE__ */ t(
             "button",
             {
               className: "self-start text-xs px-2 py-1 rounded border border-red-200 bg-white text-red-600 hover:bg-red-50 cursor-pointer",
               onClick: () => {
-                navigator.clipboard.writeText(b.message), U("done"), setTimeout(() => U("idle"), 1800);
+                navigator.clipboard.writeText(T.message), S("done"), setTimeout(() => S("idle"), 1800);
               },
-              children: E === "done" ? "Copied!" : "Copy error"
+              children: _ === "done" ? "Copied!" : "Copy error"
             }
           )
         ] }),
-        /* @__PURE__ */ n(Ce, { id: "out", type: "source", position: se.Bottom })
+        /* @__PURE__ */ t(Ue, { id: "out", type: "source", position: ne.Bottom })
       ]
     }
   );
 };
-function Un({
-  sourceX: e,
+function Fn({
+  sourceX: n,
   sourceY: o,
   targetX: r,
-  targetY: t,
-  sourcePosition: s,
-  targetPosition: l,
-  style: a = {},
+  targetY: s,
+  sourcePosition: e,
+  targetPosition: a,
+  style: l = {},
   markerEnd: u,
   id: i
 }) {
-  const [m, h, c] = Ee({
-    sourceX: e,
+  const [c, h, f] = ke({
+    sourceX: n,
     sourceY: o,
-    sourcePosition: s,
+    sourcePosition: e,
     targetX: r,
-    targetY: t,
-    targetPosition: l
-  }), { shaders: f, handleInsertShader: b } = ie(oe), [C, N] = y(!1), F = () => {
-    console.log("d"), N(!0);
+    targetY: s,
+    targetPosition: a
+  }), { shaders: p, handleInsertShader: x } = ue(ae), [w, E] = y(!1), T = () => {
+    console.log("d"), E(!0);
   };
-  return /* @__PURE__ */ p(le, { children: [
-    /* @__PURE__ */ n(Ye, { path: m, markerEnd: u, style: a }),
-    /* @__PURE__ */ n(Ke, { children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(se, { children: [
+    /* @__PURE__ */ t(nn, { path: c, markerEnd: u, style: l }),
+    /* @__PURE__ */ t(tn, { children: /* @__PURE__ */ m(
       "div",
       {
         className: "absolute -translate-1/2 origin-center pointer-events-auto",
         style: {
-          transform: `translate(${h}px,${c}px)`
+          transform: `translate(${h}px,${f}px)`
         },
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             "button",
             {
               className: "w-6 h-6 bg-neutral-200  rounded-full active:bg-neutral-200 z-10 flex items-center justify-center",
-              onClick: () => F(),
+              onClick: () => T(),
               children: "+"
             }
           ),
-          /* @__PURE__ */ n(
-            ce,
+          /* @__PURE__ */ t(
+            de,
             {
-              open: C,
+              open: w,
               handleOpenChange: (v) => {
-                N(v);
+                E(v);
               },
-              children: /* @__PURE__ */ p("div", { className: "w-full h-full flex flex-col p-4", children: [
-                /* @__PURE__ */ p("div", { className: "w-full flex justify-between", children: [
-                  /* @__PURE__ */ n("p", { children: "Add a Shader" }),
-                  /* @__PURE__ */ n(
+              children: /* @__PURE__ */ m("div", { className: "w-full h-full flex flex-col p-4", children: [
+                /* @__PURE__ */ m("div", { className: "w-full flex justify-between", children: [
+                  /* @__PURE__ */ t("p", { children: "Add a Shader" }),
+                  /* @__PURE__ */ t(
                     "button",
                     {
                       className: "button-base",
                       onClick: () => {
-                        N(!1);
+                        E(!1);
                       },
                       children: "Close"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ n("div", { className: "w-full flex flex-col", children: f.map((v) => /* @__PURE__ */ n(
+                /* @__PURE__ */ t("div", { className: "w-full flex flex-col", children: p.map((v) => /* @__PURE__ */ t(
                   "button",
                   {
                     className: "text-xs flex justify-start p-1 rounded-sm hover:bg-neutral-100 cursor-pointer text-neutral-500",
                     onClick: () => {
-                      b(v, i);
+                      x(v, i);
                     },
                     children: v.id
                   },
@@ -1616,340 +1610,366 @@ function Un({
     ) })
   ] });
 }
-function In({
-  fromX: e,
+function Pn({
+  fromX: n,
   fromY: o,
   toX: r,
-  toY: t,
-  fromPosition: s,
-  toPosition: l,
-  toHandle: a
+  toY: s,
+  fromPosition: e,
+  toPosition: a,
+  toHandle: l
 }) {
-  const [u] = Ee({
-    sourceX: e,
+  const [u] = ke({
+    sourceX: n,
     sourceY: o,
-    sourcePosition: s,
+    sourcePosition: e,
     targetX: r,
-    targetY: t,
-    targetPosition: l
-  }), i = a ? "connect" : "new", m = t - 26, h = 6, c = 16, f = i.length * 6 + h * 2;
-  return /* @__PURE__ */ p("g", { children: [
-    /* @__PURE__ */ n("path", { fill: "none", stroke: "#b1b1b7", strokeWidth: 1.5, d: u }),
-    /* @__PURE__ */ n(
+    targetY: s,
+    targetPosition: a
+  }), i = l ? "connect" : "new", c = s - 26, h = 6, f = 16, p = i.length * 6 + h * 2;
+  return /* @__PURE__ */ m("g", { children: [
+    /* @__PURE__ */ t("path", { fill: "none", stroke: "#b1b1b7", strokeWidth: 1.5, d: u }),
+    /* @__PURE__ */ t(
       "rect",
       {
-        x: r - f / 2,
-        y: m - c / 2,
-        width: f,
-        height: c,
+        x: r - p / 2,
+        y: c - f / 2,
+        width: p,
+        height: f,
         rx: 4,
-        fill: a ? "#404040" : "#e5e5e5",
+        fill: l ? "#404040" : "#e5e5e5",
         style: { pointerEvents: "none" }
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "text",
       {
         x: r,
-        y: m,
+        y: c,
         textAnchor: "middle",
         dominantBaseline: "central",
         fontSize: 10,
         fontFamily: "monospace",
-        fill: a ? "#ffffff" : "#525252",
+        fill: l ? "#ffffff" : "#525252",
         style: { userSelect: "none", pointerEvents: "none" },
         children: i
       }
     ),
-    /* @__PURE__ */ n("foreignObject", { x: r - 8, y: t - 8, width: 16, height: 16, style: { overflow: "visible" }, children: /* @__PURE__ */ n("div", { className: "w-4 h-4 rounded-full bg-neutral-400" }) })
+    /* @__PURE__ */ t("foreignObject", { x: r - 8, y: s - 8, width: 16, height: 16, style: { overflow: "visible" }, children: /* @__PURE__ */ t("div", { className: "w-4 h-4 rounded-full bg-neutral-400" }) })
   ] });
 }
-function he(e, o, r) {
-  const t = new Map(e.map((l) => [l.id, l])), s = [r];
-  for (; s.length > 0; ) {
-    const l = s.shift(), a = t.get(l);
-    if (!a || a.type !== "shader") continue;
-    const u = a, { width: i, height: m } = u.data.shader.resolution, h = Se(
-      a,
-      [...t.values()],
+function _e(n, o, r) {
+  const s = new Map(n.map((a) => [a.id, a])), e = [r];
+  for (; e.length > 0; ) {
+    const a = e.shift(), l = s.get(a);
+    if (!l || l.type !== "shader") continue;
+    const u = l, { width: i, height: c } = u.data.shader.resolution, h = Ie(
+      l,
+      [...s.values()],
       o
     );
-    for (const c of h) {
-      const f = {
-        ...c,
+    for (const f of h) {
+      const p = {
+        ...f,
         data: {
-          ...c.data,
+          ...f.data,
           shader: {
-            ...c.data.shader,
-            resolution: { width: i, height: m }
+            ...f.data.shader,
+            resolution: { width: i, height: c }
           }
         }
       };
-      t.set(c.id, f), s.push(c.id);
+      s.set(f.id, p), e.push(f.id);
     }
   }
-  return [...t.values()];
+  return [...s.values()];
 }
-const An = ({
-  shaders: e,
+const Mn = ({
+  shaders: n,
   initialState: o,
   handleSave: r,
-  className: t,
-  initialShowStats: s,
-  initialShaderPanelOpen: l,
-  initialOpenPreviewNodeId: a,
+  className: s,
+  initialShowStats: e,
+  initialShaderPanelOpen: a,
+  initialOpenPreviewNodeId: l,
   onEditorStateChange: u,
   onOpenPreviewNodeIdChange: i
 }) => {
-  const [m, h] = y(o?.edges ?? []), [c, f] = y(() => {
-    const d = o?.nodes ?? [], x = o?.edges ?? [], w = new Set(x.map((A) => A.target)), M = d.filter((A) => !w.has(A.id)).map((A) => A.id);
-    let I = d;
-    for (const A of M)
-      I = he(I, x, A);
-    return I;
-  }), b = W(
-    (d) => f((x) => Qe(d, x)),
-    [f]
-  ), C = W(
-    (d) => h((x) => Ze(d, x)),
+  const [c, h] = y(o?.edges ?? []), [f, p] = y(() => {
+    const d = o?.nodes ?? [], g = o?.edges ?? [], b = new Set(g.map((P) => P.target)), F = d.filter((P) => !b.has(P.id)).map((P) => P.id);
+    let R = d;
+    for (const P of F)
+      R = _e(R, g, P);
+    return R;
+  }), x = Y(
+    (d) => p((g) => rn(d, g)),
+    [p]
+  ), w = Y(
+    (d) => h((g) => sn(d, g)),
     [h]
-  ), N = W(
+  ), E = Y(
     (d) => {
-      const x = /* @__PURE__ */ new Set(), w = (M) => x.has(M) ? !1 : M === d.source ? !0 : (x.add(M), Se({ id: M }, c, m).some(
-        (I) => w(I.id)
+      const g = /* @__PURE__ */ new Set(), b = (F) => g.has(F) ? !1 : F === d.source ? !0 : (g.add(F), Ie({ id: F }, f, c).some(
+        (R) => b(R.id)
       ));
-      return !w(d.target);
+      return !b(d.target);
     },
-    [c, m]
-  ), F = W(
+    [f, c]
+  ), T = Y(
     (d) => {
-      const x = _e({ ...d, type: "insert" }, m), w = he(
-        c,
-        x,
+      const g = Ne({ ...d, type: "insert" }, c), b = _e(
+        f,
+        g,
         d.source
       );
-      h(x), f(w);
+      h(g), p(b);
     },
-    [m, c]
-  ), { screenToFlowPosition: v } = en(), [E, U] = y(null), S = W(
-    (d, x) => {
-      if (!x.isValid && x.fromNode) {
-        const { clientX: w, clientY: M } = "changedTouches" in d ? d.changedTouches[0] : d;
-        U({
+    [c, f]
+  ), { screenToFlowPosition: v } = an(), [C, A] = y(null), U = Y(
+    (d, g) => {
+      if (!g.isValid && g.fromNode) {
+        const { clientX: b, clientY: F } = "changedTouches" in d ? d.changedTouches[0] : d;
+        A({
           position: v({
-            x: w,
-            y: M
+            x: b,
+            y: F
           }),
-          sourceId: x.fromNode.id
+          sourceId: g.fromNode.id
         });
       }
     },
     [v]
-  ), g = R(
+  ), _ = $(
     o?.uniforms ?? {}
   );
-  D(() => {
-    o?.uniforms && (g.current = o.uniforms);
-  }, [o]);
-  const [k, B] = y(null);
-  D(() => {
-    const d = (x) => {
-      (x.metaKey || x.ctrlKey) && x.key === "s" && (x.preventDefault(), r({ nodes: c, edges: m, uniforms: g.current }), B(/* @__PURE__ */ new Date()));
+  k(() => {
+    o?.uniforms && (_.current = o.uniforms);
+  }, [o]), k(() => {
+    p(
+      (d) => d.map((g) => {
+        if (g.type === "shader") {
+          const b = g;
+          for (const F of n)
+            if (b.data.shader.name === F.name)
+              return {
+                ...b,
+                data: {
+                  ...b.data,
+                  shader: {
+                    ...b.data.shader,
+                    source: F.source
+                  }
+                }
+              };
+          return b;
+        }
+        return g;
+      })
+    );
+  }, [n]);
+  const [S, I] = y(null);
+  k(() => {
+    const d = (g) => {
+      (g.metaKey || g.ctrlKey) && g.key === "s" && (g.preventDefault(), r({ nodes: f, edges: c, uniforms: _.current }), I(/* @__PURE__ */ new Date()));
     };
     return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
-  }, [c, m]);
-  const _ = (d) => {
-    const x = `${Math.random() * 1e5}`, w = { ...d, id: x };
-    return {
-      id: x,
+  }, [f, c]);
+  const H = (d) => {
+    const g = `${Math.random() * 1e5}`, b = { ...d, id: g };
+    return _.current[g] = {}, {
+      id: g,
       position: { x: 0, y: 0 },
       data: {
-        shader: w,
-        uniforms: g,
+        shader: b,
+        uniforms: _,
         paused: !1
       },
       type: "shader"
     };
-  }, P = (d) => {
-    f((x) => [...x, _(d)]);
-  }, Z = (d, x) => {
-    const w = m.find(($) => $.id === x);
-    if (!w) return;
-    const M = w.source, I = w.target, A = c.find(($) => $.id === M), V = c.find(($) => $.id === I), L = w.targetHandle;
-    if (A && V && L) {
-      const $ = _(d), Le = ae($.data.shader);
-      let ue;
-      for (const Y of Le)
-        if (Y.type === "sampler2D" && Y.source === "input") {
-          ue = Y.name;
+  }, X = (d) => {
+    p((g) => [...g, H(d)]);
+  }, K = (d, g) => {
+    const b = c.find((O) => O.id === g);
+    if (!b) return;
+    const F = b.source, R = b.target, P = f.find((O) => O.id === F), B = f.find((O) => O.id === R), j = b.targetHandle;
+    if (P && B && j) {
+      const O = H(d), Ge = ce(O.data.shader);
+      let me;
+      for (const J of Ge)
+        if (J.type === "sampler2D" && J.source === "input") {
+          me = J.name;
           break;
         }
-      if (ue === void 0) return;
-      const [Hn, je, qe] = on({
-        sourceX: A.position.x,
-        sourceY: A.position.y,
-        sourcePosition: se.Bottom,
-        targetX: V.position.x,
-        targetY: V.position.y,
-        targetPosition: se.Top
+      if (me === void 0) return;
+      const [tt, We, Ve] = un({
+        sourceX: P.position.x,
+        sourceY: P.position.y,
+        sourcePosition: ne.Bottom,
+        targetX: B.position.x,
+        targetY: B.position.y,
+        targetPosition: ne.Top
       });
-      $.position.x = je, $.position.y = qe, f((Y) => [...Y, $]), h((Y) => {
-        const de = Y.filter(
-          (Be) => Be.id !== x
-        ), Ve = {
+      O.position.x = We, O.position.y = Ve, p((J) => [...J, O]), h((J) => {
+        const pe = J.filter(
+          (Je) => Je.id !== g
+        ), Ye = {
           id: "" + Math.random() * 1e4,
-          source: A.id,
-          target: $.id,
-          targetHandle: ue,
+          source: P.id,
+          target: O.id,
+          targetHandle: me,
           type: "insert"
-        }, He = {
+        }, Ke = {
           id: "" + Math.random() * 1e4,
-          source: $.id,
-          target: V.id,
-          targetHandle: L,
+          source: O.id,
+          target: B.id,
+          targetHandle: j,
           type: "insert"
         };
-        return de.push(Ve), de.push(He), de;
+        return pe.push(Ye), pe.push(Ke), pe;
       });
     }
-  }, [G, j] = Q(() => {
+  }, [N, D] = re(() => {
     const d = {};
-    for (const w of c)
-      d[w.id] = [];
-    for (const w of m)
-      d[w.target].push({
-        from: w.source,
-        to: w.target,
-        input: w.targetHandle ?? ""
+    for (const b of f)
+      d[b.id] = [];
+    for (const b of c)
+      d[b.target].push({
+        from: b.source,
+        to: b.target,
+        input: b.targetHandle ?? ""
       });
     return [JSON.stringify(d), d];
-  }, [m, c]), [X, ee] = Q(() => {
+  }, [c, f]), [z, G] = re(() => {
     const d = {};
-    for (const x of c)
-      if (x.type === "shader") {
-        const w = x;
-        d[w.id] = w.data.shader;
+    for (const g of f)
+      if (g.type === "shader") {
+        const b = g;
+        d[b.id] = b.data.shader;
       }
     return [JSON.stringify(d), d];
-  }, [c]), q = Q(() => {
+  }, [f]), te = re(() => {
     const d = {};
-    for (const [x, w] of Object.entries(ee)) {
-      d[x] = { shaders: [w], connections: [] };
-      const M = [x];
-      for (; M.length !== 0; ) {
-        const I = M.shift();
-        for (const A of j[I]) {
-          const V = A.from;
-          M.push(V);
-          const L = ee[V];
-          d[x].shaders.push(L), d[x].connections.push(A);
+    for (const [g, b] of Object.entries(G)) {
+      d[g] = { shaders: [b], connections: [] };
+      const F = [g];
+      for (; F.length !== 0; ) {
+        const R = F.shift();
+        for (const P of D[R]) {
+          const B = P.from;
+          F.push(B);
+          const j = G[B];
+          d[g].shaders.find(
+            (O) => O.id === j.id
+          ) || d[g].shaders.push(j), d[g].connections.push(P);
         }
       }
     }
     return d;
-  }, [X, G]), ne = W(
-    (d, x) => {
-      g.current[d] = x;
+  }, [z, N]), fe = Y(
+    (d, g) => {
+      _.current[d] = g(
+        _.current[d]
+      );
     },
     []
-  ), Fe = W(
-    (d, x) => {
-      f((w) => {
-        const M = w.map((I) => {
-          if (I.id === d && I.type === "shader") {
-            const A = I;
-            return { ...A, data: x(A.data) };
+  ), le = Y(
+    (d, g) => {
+      p((b) => {
+        const F = b.map((R) => {
+          if (R.id === d && R.type === "shader") {
+            const P = R;
+            return { ...P, data: g(P.data) };
           }
-          return I;
+          return R;
         });
-        return he(M, m, d);
+        return _e(F, c, d);
       });
     },
-    [m]
-  ), ge = R(0), xe = R([0, 0]);
-  D(() => {
+    [c]
+  ), W = $(0), Z = $([0, 0]);
+  k(() => {
     const d = setInterval(() => {
-      ge.current = Date.now();
-    }, 10), x = (w) => {
-      xe.current = [
-        Math.min(1, w.clientX / window.innerWidth),
-        Math.min(w.clientY / innerHeight, 1)
+      W.current = Date.now();
+    }, 10), g = (b) => {
+      Z.current = [
+        Math.min(1, b.clientX / window.innerWidth),
+        Math.min(b.clientY / innerHeight, 1)
       ];
     };
-    return window.addEventListener("mousemove", x), () => {
-      clearInterval(d), window.removeEventListener("mousemove", x);
+    return window.addEventListener("mousemove", g), () => {
+      clearInterval(d), window.removeEventListener("mousemove", g);
     };
   }, []);
-  const Pe = (d, x, w) => {
-    if (c.find((I) => I.id === x)) {
-      const I = _(d);
-      I.position = w;
-      const A = ae(I.data.shader);
-      let V;
-      for (const L of A)
-        if (L.type === "sampler2D" && L.source === "input") {
-          V = L.name;
+  const Oe = (d, g, b) => {
+    if (f.find((R) => R.id === g)) {
+      const R = H(d);
+      R.position = b;
+      const P = ce(R.data.shader);
+      let B;
+      for (const j of P)
+        if (j.type === "sampler2D" && j.source === "input") {
+          B = j.name;
           break;
         }
-      if (f((L) => [...L, I]), V !== void 0) {
-        const L = {
+      if (p((j) => [...j, R]), B !== void 0) {
+        const j = {
           id: "" + Math.random(),
-          source: x,
-          target: I.id,
-          targetHandle: V,
+          source: g,
+          target: R.id,
+          targetHandle: B,
           type: "insert"
         };
-        h(($) => _e(L, $));
+        h((O) => Ne(j, O));
       }
     }
-  }, [J, Me] = y(s ?? !1), [te, De] = y(
-    l ?? !0
-  ), [re, be] = y(null), [$e, ze] = y(a ?? null), Oe = (d) => {
-    ze(d), i?.(d);
+  }, [ye, Le] = y(""), [we, ze] = y(""), [ee, je] = y(e ?? !1), [oe, qe] = y(
+    a ?? !0
+  ), [ie, Ce] = y(null), [He, Be] = y(l ?? null), Xe = (d) => {
+    Be(d), i?.(d);
   };
-  return D(() => {
-    u?.({ showStats: J, shaderPanelOpen: te });
-  }, [J, te]), /* @__PURE__ */ p("div", { className: `w-full h-full ${t}`, children: [
-    /* @__PURE__ */ n(
-      oe.Provider,
+  return k(() => {
+    u?.({ showStats: ee, shaderPanelOpen: oe });
+  }, [ee, oe]), /* @__PURE__ */ m("div", { className: `w-full h-full ${s}`, children: [
+    /* @__PURE__ */ t(
+      ae.Provider,
       {
         value: {
-          currentTime: ge,
-          mousePosition: xe,
-          shaders: e,
-          patches: q,
-          showStats: J,
-          openExportNodeId: re,
-          setOpenExportNodeId: be,
-          openPreviewNodeId: $e,
-          setOpenPreviewNodeId: Oe,
-          uniforms: g,
-          handleUpdateUniforms: ne,
-          handleUpdateNode: Fe,
-          handleInsertShader: Z
+          currentTime: W,
+          mousePosition: Z,
+          shaders: n,
+          patches: te,
+          showStats: ee,
+          openExportNodeId: ie,
+          setOpenExportNodeId: Ce,
+          openPreviewNodeId: He,
+          setOpenPreviewNodeId: Xe,
+          uniforms: _,
+          handleUpdateUniforms: fe,
+          handleUpdateNode: le,
+          handleInsertShader: K
         },
-        children: /* @__PURE__ */ p(
-          nn,
+        children: /* @__PURE__ */ m(
+          ln,
           {
             panOnScroll: !0,
             proOptions: { hideAttribution: !0 },
-            nodes: c,
+            nodes: f,
             nodeTypes: { shader: Rn },
-            edges: m,
-            edgeTypes: { insert: Un },
-            onNodesChange: b,
-            onEdgesChange: C,
-            onConnect: F,
-            onConnectEnd: S,
-            connectionLineComponent: In,
-            isValidConnection: N,
+            edges: c,
+            edgeTypes: { insert: Fn },
+            onNodesChange: x,
+            onEdgesChange: w,
+            onConnect: T,
+            onConnectEnd: U,
+            connectionLineComponent: Pn,
+            isValidConnection: E,
             style: {
-              background: "#F9F9F9"
+              background: "#F3F3F3"
             },
             fitView: !0,
             children: [
-              /* @__PURE__ */ n(
-                tn,
+              /* @__PURE__ */ t(
+                cn,
                 {
                   style: {
                     "--xy-controls-button-background-color-default": "transparent",
@@ -1957,18 +1977,18 @@ const An = ({
                   }
                 }
               ),
-              /* @__PURE__ */ p(fe, { position: "top-left", className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ n(
+              /* @__PURE__ */ m(he, { position: "top-left", className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ t(
                   "button",
                   {
                     className: "button-base",
-                    onClick: () => Me(!J),
-                    children: J ? "Hide Stats" : "Show Stats"
+                    onClick: () => je(!ee),
+                    children: ee ? "Hide Stats" : "Show Stats"
                   }
                 ),
-                J && /* @__PURE__ */ p(le, { children: [
-                  /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: c.map((d) => /* @__PURE__ */ n("p", { className: "text-xs text-neutral-400", children: d.id }, d.id)) }),
-                  /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: m.map((d) => /* @__PURE__ */ p("p", { className: "text-xs text-neutral-400", children: [
+                ee && /* @__PURE__ */ m(se, { children: [
+                  /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: f.map((d) => /* @__PURE__ */ t("p", { className: "text-xs text-neutral-400", children: d.id }, d.id)) }),
+                  /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: c.map((d) => /* @__PURE__ */ m("p", { className: "text-xs text-neutral-400", children: [
                     d.source,
                     " ",
                     ">",
@@ -1979,109 +1999,137 @@ const An = ({
                   ] }, d.id)) })
                 ] })
               ] }),
-              e.length > 0 && /* @__PURE__ */ n(fe, { position: "bottom-right", children: /* @__PURE__ */ p("div", { className: "w-56 flex flex-col rounded-sm bg-white overflow-hidden", children: [
-                /* @__PURE__ */ p("div", { className: "flex items-center justify-between px-3 py-2", children: [
-                  /* @__PURE__ */ n("p", { className: "text-sm", children: "Add Shader" }),
-                  /* @__PURE__ */ n(
+              n.length > 0 && /* @__PURE__ */ t(he, { position: "bottom-right", children: /* @__PURE__ */ m("div", { className: "w-56 flex flex-col rounded-sm bg-white overflow-hidden", children: [
+                /* @__PURE__ */ m("div", { className: "flex items-center justify-between px-3 py-2", children: [
+                  /* @__PURE__ */ t("p", { className: "text-sm", children: "Add Shader" }),
+                  /* @__PURE__ */ t(
                     "button",
                     {
                       className: "button-base",
-                      onClick: () => De(!te),
-                      children: te ? "Hide" : "Show"
+                      onClick: () => qe(!oe),
+                      children: oe ? "Hide" : "Show"
                     }
                   )
                 ] }),
-                te && /* @__PURE__ */ n("div", { className: "flex flex-col gap-1 px-2 pb-2", children: e.sort((d, x) => d.name.localeCompare(x.name)).map((d) => /* @__PURE__ */ n(
-                  "button",
-                  {
-                    className: "text-xs flex justify-start p-1 rounded-sm hover:bg-neutral-100 cursor-pointer text-neutral-500",
-                    onClick: () => P(d),
-                    children: d.id
-                  },
-                  d.id
-                )) })
+                oe && /* @__PURE__ */ m("div", { className: "flex flex-col gap-1 px-2 pb-2", children: [
+                  /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "text",
+                      value: ye,
+                      onChange: (d) => Le(d.target.value),
+                      placeholder: "Search shaders...",
+                      className: "text-xs p-1 rounded-sm border border-neutral-200 outline-none mb-1"
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "flex flex-col gap-1 pb-2 h-[50vh] overflow-y-auto", children: n.filter(
+                    (d) => d.name.toLowerCase().includes(ye.toLowerCase())
+                  ).sort((d, g) => d.name.localeCompare(g.name)).map((d) => /* @__PURE__ */ t(
+                    "button",
+                    {
+                      className: "text-xs flex justify-start p-1 rounded-sm hover:bg-neutral-100 cursor-pointer text-neutral-500",
+                      onClick: () => X(d),
+                      children: d.id.length > 25 ? `${d.id.slice(0, 11)}...${d.id.slice(-11)}` : d.id
+                    },
+                    d.id
+                  )) })
+                ] })
               ] }) }),
-              k && /* @__PURE__ */ n(fe, { position: "bottom-center", children: /* @__PURE__ */ p("p", { className: "text-xs text-neutral-400", children: [
+              S && /* @__PURE__ */ t(he, { position: "bottom-center", children: /* @__PURE__ */ m("p", { className: "text-xs text-neutral-400", children: [
                 "Last saved at ",
-                k.toLocaleTimeString()
+                S.toLocaleTimeString()
               ] }) })
             ]
           }
         )
       }
     ),
-    re !== null && q[re] && /* @__PURE__ */ n(
-      Te,
+    ie !== null && te[ie] && /* @__PURE__ */ t(
+      $e,
       {
-        uniforms: g.current,
-        patch: q[re],
+        uniforms: _.current,
+        patch: te[ie],
         open: !0,
         onOpenChange: (d) => {
-          d || be(null);
+          d || Ce(null);
         }
       }
     ),
-    /* @__PURE__ */ n(
-      ce,
+    /* @__PURE__ */ t(
+      de,
       {
-        open: E !== null,
+        open: C !== null,
         handleOpenChange: (d) => {
-          d === !1 && U(null);
+          d === !1 && A(null);
         },
-        children: /* @__PURE__ */ p("div", { className: "w-full h-full flex flex-col p-4", children: [
-          /* @__PURE__ */ p("div", { className: "w-full flex justify-between", children: [
-            /* @__PURE__ */ n("p", { children: "Add a Shader" }),
-            /* @__PURE__ */ n(
+        children: /* @__PURE__ */ m("div", { className: "w-full h-full flex flex-col p-4 gap-4", children: [
+          /* @__PURE__ */ m("div", { className: "w-full flex justify-between", children: [
+            /* @__PURE__ */ t("p", { children: "Add a Shader" }),
+            /* @__PURE__ */ t(
               "button",
               {
                 className: "button-base",
                 onClick: () => {
-                  U(null);
+                  A(null);
                 },
                 children: "Close"
               }
             )
           ] }),
-          /* @__PURE__ */ n("div", { className: "w-full flex flex-col", children: e.map((d) => /* @__PURE__ */ n(
-            "button",
-            {
-              className: "text-xs flex justify-start p-1 rounded-sm hover:bg-neutral-100 cursor-pointer text-neutral-500",
-              onClick: () => {
-                E && Pe(
-                  d,
-                  E.sourceId,
-                  E.position
-                ), U(null);
+          /* @__PURE__ */ m("div", { className: "w-full flex flex-col h-full overflow-hidden gap-2", children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "text",
+                value: we,
+                onChange: (d) => ze(d.target.value),
+                placeholder: "Search shaders...",
+                className: "text-xs p-1 rounded-sm border border-neutral-200 outline-none mb-1"
+              }
+            ),
+            /* @__PURE__ */ t("div", { className: "h-full flex flex-col overflow-y-auto", children: n.filter(
+              (d) => d.name.toLowerCase().includes(we.toLowerCase())
+            ).map((d) => /* @__PURE__ */ t(
+              "button",
+              {
+                className: "text-xs flex justify-start p-1 rounded-sm hover:bg-neutral-100 cursor-pointer text-neutral-500",
+                onClick: () => {
+                  C && Oe(
+                    d,
+                    C.sourceId,
+                    C.position
+                  ), A(null);
+                },
+                children: d.id
               },
-              children: d.id
-            },
-            d.id
-          )) })
+              d.id
+            )) })
+          ] })
         ] })
       }
     )
   ] });
-}, Xn = (e) => /* @__PURE__ */ n(Je, { children: /* @__PURE__ */ n(An, { ...e }) });
-function Yn(e, o) {
-  const r = { current: o }, t = e.shaders.map((l, a) => ({
-    id: l.id,
+}, at = (n) => /* @__PURE__ */ t(on, { children: /* @__PURE__ */ t(Mn, { ...n }) });
+function lt(n, o) {
+  const r = { current: o }, s = n.shaders.map((a, l) => ({
+    id: a.id,
     type: "shader",
-    position: { x: 0, y: -a * 500 },
+    position: { x: 0, y: -l * 500 },
     data: {
-      shader: l,
+      shader: a,
       uniforms: r,
       paused: !1
     }
-  })), s = e.connections.map((l, a) => ({
-    id: `edge-${a}`,
-    source: l.from,
-    target: l.to,
-    targetHandle: l.input,
+  })), e = n.connections.map((a, l) => ({
+    id: `edge-${l}`,
+    source: a.from,
+    target: a.to,
+    targetHandle: a.input,
     type: "insert"
   }));
-  return console.log("build", { nodes: t, edges: s, uniforms: o }), { nodes: t, edges: s, uniforms: o };
+  return console.log("build", { nodes: s, edges: e, uniforms: o }), { nodes: s, edges: e, uniforms: o };
 }
-const Tn = `#version 300 es
+const $n = `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture; // input
@@ -2103,7 +2151,7 @@ void main() {
         fragColor = texColor;
     }
 }
-`, Fn = `#version 300 es
+`, On = `#version 300 es
 
 precision highp float;
 
@@ -2378,16 +2426,18 @@ void main()
         ), 
         1.0
     );
-}`, Pn = `#version 300 es
+}`, Ln = `#version 300 es
 precision mediump float;
 
-uniform sampler2D u_texture; // input
-uniform float u_resolution; // [1, 100, 20]
+uniform sampler2D u_texture; 
+uniform vec2 u_resolution; // resolution
 uniform float u_numColors;  // [2, 16, 2]
+uniform float u_dither_size; // [1, 100, 10]
 
 in vec2 vUv;
 out vec4 fragColor;
 
+
 int bayer(int x, int y) {
     int bayer64[64] = int[64](
          0, 32,  8, 40,  2, 34, 10, 42,
@@ -2403,8 +2453,8 @@ int bayer(int x, int y) {
 }
 
 void main() {
-    vec2 cell = floor(vUv * u_resolution);
-    vec2 cellUv = cell / u_resolution;
+    vec2 cell = floor(vUv * u_resolution / u_dither_size);
+    vec2 cellUv = cell / u_resolution * u_dither_size;
 
     vec4 color = texture(u_texture, cellUv);
 
@@ -2416,7 +2466,7 @@ void main() {
 
     fragColor = vec4(dithered, color.a);
 }
-`, Mn = `#version 300 es
+`, zn = `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture; // input
@@ -2455,7 +2505,7 @@ void main() {
 
     fragColor = dist < dotRadius ? cellColor : u_background;
 }
-`, Dn = `#version 300 es
+`, jn = `#version 300 es
 precision highp float;
 
 in vec2 vUv;
@@ -2493,58 +2543,7 @@ void main() {
         vec4(vec3(1.0), 1.0),
         smoothstep(0.6, 0.5, dist)
     );
-}`, $n = `#version 300 es
-precision mediump float;
-
-uniform sampler2D u_texture;
-uniform float u_size; // [1, 100, 5]
-uniform vec2 u_resolution; // resolution
-
-in vec2 vUv;
-out vec4 fragColor;
-
-const float PI = 3.1415926535897932384626433832795;
-
-// Gaussian function
-float gaussian(float x, float sigma) {
-    return exp(-(x * x) / (2.0 * sigma * sigma)) / (sqrt(2.0 * PI) * sigma);
-}
-
-void main() {
-    vec2 texelSize = 1.0 / u_resolution;
-    float sigma = u_size / 3.0; // Standard deviation based on size
-
-    vec4 result = vec4(0.0);
-    float totalWeight = 0.0;
-
-    int kernelRadius = int(ceil(u_size));
-
-    // Two-pass separable Gaussian blur (horizontal + vertical in one pass for simplicity)
-    // For better performance, this should be split into two passes, but for this implementation
-    // we'll do a 2D kernel
-    for (int x = -25; x <= 25; x++) {
-        if (abs(float(x)) > float(kernelRadius)) continue;
-
-        for (int y = -25; y <= 25; y++) {
-            if (abs(float(y)) > float(kernelRadius)) continue;
-
-            vec2 offset = vec2(float(x), float(y)) * texelSize;
-            vec2 sampleCoord = vUv + offset;
-
-            // Clamp to edges
-            sampleCoord = clamp(sampleCoord, vec2(0.0), vec2(1.0));
-
-            float distance = length(vec2(float(x), float(y)));
-            float weight = gaussian(distance, sigma);
-
-            result += texture(u_texture, sampleCoord) * weight;
-            totalWeight += weight;
-        }
-    }
-
-    fragColor = result / totalWeight;
-}
-`, zn = `#version 300 es
+}`, qn = `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture; 
@@ -2561,7 +2560,7 @@ void main() {
 
   fragColor = vec4(gradientColor.rgb, 1.0);
 }
-`, On = `#version 300 es
+`, Hn = `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture; // input
@@ -2633,7 +2632,7 @@ void main() {
 
     fragColor = vec4(hsl2rgb(hsl), color.a);
 }
-`, Ln = `#version 300 es
+`, Bn = `#version 300 es
 precision highp float;
 
 in vec2 vUv;
@@ -2643,44 +2642,7 @@ uniform sampler2D u_image_source; // texture
 
 void main() {
     fragColor = texture(u_image_source, vec2(vUv.x, 1.0-vUv.y));
-}`, jn = `#version 300 es
-precision mediump float;
-
-uniform sampler2D u_texture;
-uniform float u_size; // [1, 100, 5]
-uniform vec2 u_resolution; // resolution
-
-in vec2 vUv;
-out vec4 fragColor;
-
-void main() {
-    vec2 texelSize = 1.0 / u_resolution;
-
-    vec4 result = vec4(0.0);
-    int kernelRadius = int(ceil(u_size));
-    int sampleCount = 0;
-
-    // Box blur - simple average of all pixels in the kernel
-    for (int x = -25; x <= 25; x++) {
-        if (abs(float(x)) > float(kernelRadius)) continue;
-
-        for (int y = -25; y <= 25; y++) {
-            if (abs(float(y)) > float(kernelRadius)) continue;
-
-            vec2 offset = vec2(float(x), float(y)) * texelSize;
-            vec2 sampleCoord = vUv + offset;
-
-            // Clamp to edges
-            sampleCoord = clamp(sampleCoord, vec2(0.0), vec2(1.0));
-
-            result += texture(u_texture, sampleCoord);
-            sampleCount++;
-        }
-    }
-
-    fragColor = result / float(sampleCount);
-}
-`, qn = `#version 300 es
+}`, Xn = `#version 300 es
 precision highp float;
 
 uniform float u_time; // time
@@ -2754,7 +2716,7 @@ void main() {
         }
     }
 
-}`, Vn = `#version 300 es
+}`, Gn = `#version 300 es
 precision mediump float;
 
 uniform sampler2D u_texture; // input
@@ -2768,33 +2730,267 @@ void main() {
     vec3 adjusted = clamp(color.rgb + u_rgbAdjust / 255.0, 0.0, 1.0);
     fragColor = vec4(adjusted, color.a);
 }
-`, Kn = {
-  "chromakey.frag": Tn,
-  "dither_bayer.frag": Pn,
-  "dots.frag": Mn,
-  "daffodil.frag": Fn,
-  "diamonds.frag": Dn,
-  "gaussian.frag": $n,
-  "gradientmap.frag": zn,
-  "hsl.frag": On,
-  "imageViewer.frag": Ln,
-  "linear.frag": jn,
-  "lines.frag": qn,
-  "rgb.frag": Vn
+`, Wn = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_texture_1;
+uniform sampler2D u_texture_2;
+
+void main() {
+    fragColor = clamp(
+        texture(u_texture_1, vUv) + texture(u_texture_2, vUv),
+        vec4(0.),
+        vec4(1.)
+    );
+
+}`, Vn = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_texture_1;
+uniform sampler2D u_texture_2;
+
+void main() {
+    fragColor = clamp(
+        texture(u_texture_1, vUv) - texture(u_texture_2, vUv),
+        vec4(0.),
+        vec4(1.)
+    );
+
+}`, Yn = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_texture_1;
+uniform sampler2D u_texture_2;
+uniform float u_factor; // [0, 1, 0.5]
+
+void main() {
+    fragColor = mix(
+        texture(u_texture_1, vUv),
+        texture(u_texture_2, vUv),
+        u_factor
+    );
+}`, Kn = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_texture_1;
+uniform sampler2D u_texture_2;
+
+void main() {
+    fragColor = clamp(
+        texture(u_texture_1, vUv) * texture(u_texture_2, vUv),
+        vec4(0.),
+        vec4(1.)
+    );
+
+}`, Jn = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_texture_1;
+uniform sampler2D u_texture_2;
+
+void main() {
+    fragColor = clamp(
+        texture(u_texture_1, vUv) / (texture(u_texture_2, vUv) + 0.001),
+        vec4(0.),
+        vec4(1.)
+    );
+}`, Qn = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform float u_blur_radius; // [0, 3, 0.1]
+uniform vec2 u_resolution; // resolution
+uniform vec2 u_center; // [0.5, 0.5]
+uniform float u_blur_sample_count; // [2, 50, 5]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+void main() {
+    vec2 aspect = vec2(u_resolution.x / u_resolution.y, 1.0);
+    vec2 uv = vUv * aspect;
+    vec2 center = u_center * aspect;
+
+    vec2 offset = uv - center;
+    float r = atan(offset.y, offset.x);
+    float dist = length(offset);
+
+    vec4 result = vec4(0.);
+
+    int count = int(floor(u_blur_sample_count));
+    float invCount = 1.0 / float(count);
+
+    for (int i = 0; i < count; i++) {
+        float progress = float(i) * invCount;
+        float angle = r - u_blur_radius * 0.5 + progress * u_blur_radius;
+
+        vec2 rotated = vec2(cos(angle), sin(angle)) * dist;
+
+        vec2 sample_uv = center + rotated;
+        sample_uv /= aspect;
+
+        result += texture(u_texture, sample_uv);
+    }
+
+    fragColor = result * invCount;
+}
+`, Zn = `#version 300 es
+precision mediump float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform sampler2D u_input_tex;
+uniform float u_blur_dist; // [0, 1, 0.1]
+uniform vec2 u_resolution; // resolution
+uniform float u_angle; // [0, 10, 0]
+uniform float u_blur_sample_count; // [2, 50, 5]
+uniform float u_start_offset; // [0, 1, 0.5]
+
+
+mat2 rotate2D(float angle) {
+    float c = cos(angle);
+    float s = sin(angle);
+    return mat2(
+        c, -s, 
+        s,  c  
+    );
+}
+
+void main() {
+    vec2 aspect = vec2(
+        u_resolution.x / u_resolution.y,
+        1.0
+    );
+
+    vec2 uv = vUv * aspect;
+
+    mat2 rot_mat = rotate2D(u_angle);
+    mat2 inv_rot_mat = rotate2D(-u_angle);
+    vec2 rotated_uv = rot_mat * uv;
+
+    int count = int(floor(u_blur_sample_count));
+
+    vec4 result = vec4(0.0);
+
+    float offset_bias = u_blur_dist * u_start_offset;
+
+    for (int i = 0; i < count; i++) {
+        float offset = float(i) / float(count) * u_blur_dist - offset_bias;
+        vec2 target_pos = rotated_uv + vec2(offset, 0.0);
+
+        result += texture(
+            u_input_tex,
+            (inv_rot_mat * target_pos) / aspect
+        );
+    }
+
+    fragColor = result / float(count);
+}`, et = `#version 300 es
+precision mediump float;
+
+// from book of shaders
+
+uniform vec2 u_resolution; // resolution
+
+in vec2 vUv;
+out vec4 fragColor;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        438758.5453123);
+}
+
+void main() {
+    vec2 st = vUv.xy/u_resolution.xy;
+
+    float rnd1 = random(st);
+    float rnd2 = random(st + rnd1);
+    float rnd3 = random(vec2(rnd1, rnd2));
+    float rnd4 = random(vec2(rnd1, rnd3));
+
+    fragColor = vec4(rnd1, rnd3, rnd4,1.0);
+}`, nt = `#version 300 es
+precision mediump float;
+
+
+uniform sampler2D u_input_tex;
+uniform vec2 u_resolution; // resolution
+uniform float disperse_distance; // [0, 1, 0.1]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+float random (vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        438758.5453123);
+}
+
+void main() {
+    vec2 aspect = vec2(
+        u_resolution.x / u_resolution.y,
+        1.0
+    );
+    vec2 uv = vUv.xy * aspect;
+
+    float rnd1 = random(uv);
+    float rnd2 = random(uv.yx);
+
+    fragColor = texture(u_input_tex, 
+        (vec2(rnd1, rnd2) * disperse_distance - disperse_distance * 0.5 + uv) 
+        / aspect
+    ); 
+}`, it = {
+  key: $n,
+  dither: Ln,
+  dots: zn,
+  daffodil: On,
+  diamonds: jn,
+  "gradient map": qn,
+  "hue/saturation/value": Hn,
+  "image viewer": Bn,
+  "blur (radial)": Qn,
+  "blur (linear)": Zn,
+  noise: et,
+  dispersion: nt,
+  lines: Xn,
+  "color adjust": Gn,
+  "mix (add)": Wn,
+  "mix (subtract)": Vn,
+  "mix (multiply)": Kn,
+  "mix (linear)": Yn,
+  "mix (divide)": Jn
 };
 export {
-  Ce as CustomHandle,
-  ce as Dialog,
-  Xn as Editor,
-  oe as EditorContext,
-  Te as ExportDialog,
-  cn as Renderer,
+  Ue as CustomHandle,
+  de as Dialog,
+  at as Editor,
+  ae as EditorContext,
+  $e as ExportDialog,
+  hn as Renderer,
   Re as RendererComponent,
-  H as Scrubber,
+  V as Scrubber,
   Rn as ShaderNode,
-  Ae as UniformForm,
-  Yn as buildEditorState,
-  dn as exportSequenzaPatch,
-  ae as extractFields,
-  Kn as staticShaders
+  Me as UniformForm,
+  lt as buildEditorState,
+  xn as exportSequenzaPatch,
+  ce as extractFields,
+  it as staticShaders
 };