@sequenza/workbench 1.0.2

package/dist/sequenza.js

@@ -0,0 +1,2800 @@
+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("#", "");
+  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];
+      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
+
+precision highp float;
+
+in vec2 position;
+in vec2 texcoord;
+
+out vec2 vUv;
+
+void main() {
+    vUv = vec2(texcoord.x, texcoord.y);
+    gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+class cn {
+  programs = {};
+  fbos = {};
+  renderOrder = [];
+  // corresponds with shader id
+  dependencyMapping = {};
+  quad;
+  textures = {};
+  textureSrcs = {};
+  gradientCanvases = {};
+  defaultTexture;
+  patch;
+  gl;
+  uniforms;
+  onTextureLoaded;
+  error = null;
+  constructor(o, r) {
+    this.patch = r, this.gl = o, this.defaultTexture = z.createTexture(this.gl, {
+      minMag: this.gl.NEAREST,
+      wrap: this.gl.CLAMP_TO_EDGE,
+      auto: !1
+    }), z.setTextureFromArray(
+      this.gl,
+      this.defaultTexture,
+      new Uint8Array([0, 0, 0, 255]),
+      {
+        width: 1,
+        height: 1,
+        minMag: this.gl.NEAREST,
+        wrap: this.gl.CLAMP_TO_EDGE,
+        auto: !1
+      }
+    );
+    let t = !1;
+    for (let u = 0; u < r.shaders.length && !t; u++) {
+      const i = r.shaders[u];
+      if (this.programs[i.id] = z.createProgramInfo(
+        this.gl,
+        [ln, 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;
+        }
+      ), t)
+        break;
+      this.fbos[i.id] = z.createFramebufferInfo(
+        this.gl,
+        [
+          {
+            format: this.gl.RGBA,
+            min: this.gl.NEAREST,
+            mag: this.gl.NEAREST,
+            wrap: this.gl.CLAMP_TO_EDGE,
+            auto: !1
+          }
+        ],
+        i.resolution.width,
+        i.resolution.height
+      );
+    }
+    this.quad = z.primitives.createXYQuadBufferInfo(this.gl);
+    const s = {}, l = {};
+    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] = {};
+    }
+    for (const u of this.patch.connections)
+      s[u.from].push(u.to), l[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,
+      []
+    );
+    for (; a.length > 0; ) {
+      const u = a.shift();
+      this.renderOrder.push(u);
+      for (const i of s[u]) {
+        const m = l[i] - 1;
+        l[i] = m, m === 0 && a.push(i);
+      }
+    }
+    if (this.renderOrder.length < this.patch.shaders.length)
+      throw Error("Cycle detected in graph");
+  }
+  _getOrCreateTexture(o) {
+    if (!this.textures[o]) {
+      const r = z.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]), {
+        width: 1,
+        height: 1,
+        minMag: this.gl.NEAREST,
+        wrap: this.gl.CLAMP_TO_EDGE,
+        auto: !1
+      }), this.textures[o] = r;
+    }
+    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 });
+  }
+  _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, {
+            minMag: this.gl.NEAREST,
+            wrap: this.gl.CLAMP_TO_EDGE,
+            auto: !1
+          }), this.onTextureLoaded?.());
+        }, l.src = s;
+      }
+    } else
+      z.setTextureFromElement(this.gl, t, s, {
+        minMag: this.gl.NEAREST,
+        wrap: this.gl.CLAMP_TO_EDGE,
+        auto: !1
+      });
+    return t;
+  }
+  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
+          ));
+        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);
+      }
+  }
+  dispose() {
+    for (const o of Object.values(this.programs))
+      o && o.program && this.gl.deleteProgram(o.program);
+    this.programs = {};
+    for (const o of Object.values(this.fbos)) {
+      for (const r of o.attachments)
+        r instanceof WebGLTexture ? this.gl.deleteTexture(r) : r instanceof WebGLRenderbuffer && this.gl.deleteRenderbuffer(r);
+      this.gl.deleteFramebuffer(o.framebuffer);
+    }
+    this.fbos = {};
+    for (const o of Object.values(this.textures))
+      this.gl.deleteTexture(o);
+    this.textures = {}, this.textureSrcs = {}, this.gradientCanvases = {}, this.gl.deleteTexture(this.defaultTexture), this.quad.indices && this.gl.deleteBuffer(this.quad.indices);
+    for (const o of Object.values(this.quad.attribs ?? {}))
+      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", {
+          preserveDrawingBuffer: !0
+        }), c = new cn(h, e);
+        u?.(c.error);
+        let f = null;
+        const b = () => {
+          c.uniforms = o.current, c.render();
+        };
+        return a ? f = requestAnimationFrame(function C() {
+          b(), f = requestAnimationFrame(C);
+        }) : (c.onTextureLoaded = b, b()), () => {
+          f !== null && cancelAnimationFrame(f), c.dispose();
+        };
+      }
+    }, [e, s, l, a]), /* @__PURE__ */ n(
+      "canvas",
+      {
+        className: `image-crisp ${r ?? ""}`,
+        style: t,
+        width: s,
+        height: l,
+        ref: (h) => {
+          m.current = h, typeof i == "function" ? i(h) : i && (i.current = h);
+        }
+      }
+    );
+  }
+), T = "([-\\d.]+)", O = "\\s*,\\s*", ae = (e) => {
+  const o = [], r = e.source.split(`
+`);
+  for (const t of r) {
+    const s = t.trim(), l = s.match(
+      new RegExp(
+        `^uniform\\s+float\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}${O}${T}\\s*\\]`
+      )
+    );
+    if (l?.[1]) {
+      const v = parseFloat(l[2]), E = parseFloat(l[3]), U = parseFloat(l[4]);
+      o.push({
+        name: l[1],
+        type: "float",
+        min: v,
+        max: E,
+        default: U
+      });
+      continue;
+    }
+    const a = s.match(
+      /^uniform\s+float\s+(\w+)\s*;.*\/\/\s*time\b/
+    );
+    if (a?.[1]) {
+      o.push({ name: a[1], type: "float", special: "time" });
+      continue;
+    }
+    const u = s.match(/^uniform\s+float\s+(\w+)\s*;/);
+    if (u?.[1]) {
+      o.push({ name: u[1], type: "float" });
+      continue;
+    }
+    const i = s.match(
+      new RegExp(
+        `^uniform\\s+vec2\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}\\s*\\]`
+      )
+    );
+    if (i?.[1]) {
+      const v = [
+        parseFloat(i[2]),
+        parseFloat(i[3])
+      ];
+      o.push({ name: i[1], type: "vec2", default: v });
+      continue;
+    }
+    const m = s.match(
+      new RegExp(
+        `^uniform\\s+vec3\\s+(\\w+)\\s*;.*\\/\\/\\s*color(?:\\s*\\[\\s*${T}${O}${T}${O}${T}\\s*\\])?`
+      )
+    );
+    if (m?.[1]) {
+      const v = m[2] !== void 0 ? [
+        parseFloat(m[2]),
+        parseFloat(m[3]),
+        parseFloat(m[4])
+      ] : void 0;
+      o.push({
+        name: m[1],
+        type: "vec3",
+        color: !0,
+        ...v && { default: v }
+      });
+      continue;
+    }
+    const h = s.match(
+      new RegExp(
+        `^uniform\\s+vec3\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}${O}${T}\\s*\\]`
+      )
+    );
+    if (h?.[1]) {
+      const v = [
+        parseFloat(h[2]),
+        parseFloat(h[3]),
+        parseFloat(h[4])
+      ];
+      o.push({ name: h[1], type: "vec3", default: v });
+      continue;
+    }
+    const c = s.match(
+      new RegExp(
+        `^uniform\\s+vec4\\s+(\\w+)\\s*;.*\\/\\/\\s*color(?:\\s*\\[\\s*${T}${O}${T}${O}${T}${O}${T}\\s*\\])?`
+      )
+    );
+    if (c?.[1]) {
+      const v = c[2] !== void 0 ? [
+        parseFloat(c[2]),
+        parseFloat(c[3]),
+        parseFloat(c[4]),
+        parseFloat(c[5])
+      ] : void 0;
+      o.push({
+        name: c[1],
+        type: "vec4",
+        color: !0,
+        ...v && { default: v }
+      });
+      continue;
+    }
+    const f = s.match(
+      new RegExp(
+        `^uniform\\s+vec4\\s+(\\w+)\\s*;.*\\/\\/\\s*\\[\\s*${T}${O}${T}${O}${T}${O}${T}\\s*\\]`
+      )
+    );
+    if (f?.[1]) {
+      const v = [
+        parseFloat(f[2]),
+        parseFloat(f[3]),
+        parseFloat(f[4]),
+        parseFloat(f[5])
+      ];
+      o.push({ name: f[1], type: "vec4", default: v });
+      continue;
+    }
+    const b = s.match(
+      /^uniform\s+vec2\s+(\w+)\s*;.*\/\/\s*mouse\b/
+    );
+    if (b?.[1]) {
+      o.push({ name: b[1], type: "vec2", special: "mouse" });
+      continue;
+    }
+    const C = s.match(
+      /^uniform\s+vec2\s+(\w+)\s*;.*\/\/\s*resolution\b/
+    );
+    if (C?.[1]) {
+      o.push({ name: C[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" });
+      continue;
+    }
+    const F = s.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";
+      o.push({
+        name: F[1],
+        type: "sampler2D",
+        source: E
+      });
+    }
+  }
+  return o;
+}, un = `import { RendererComponent, type Uniforms, type Patch } from "@sequenza/lib";
+import "@sequenza/lib/style.css";
+import { useRef } from "react";
+
+function SequenzaComponent() {
+  const uniformRef = useRef<Record<string, Uniforms>>(getInitialUniforms());
+
+  return (
+    <RendererComponent
+      patch={getPatch()}
+      uniforms={uniformRef}
+      animate={true}
+      width={100}
+      height={100}
+    ></RendererComponent>
+  );
+}
+
+export default SequenzaComponent;
+
+function getInitialUniforms(): Record<string, Uniforms> {
+  throw new Error("placeholder for initial uniforms");
+}
+
+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];
+  return r = r.replace(
+    'throw new Error("placeholder for initial uniforms");',
+    `return ${JSON.stringify(s, 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,
+    {
+      id: e,
+      type: o,
+      position: r,
+      style: {
+        background: "none",
+        border: "none",
+        width: we,
+        height: we
+      },
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: `absolute inset-0 rounded-full flex items-center justify-center text-xs font-mono leading-none pointer-events-none transition-colors ${s}`
+        }
+      )
+    }
+  );
+}, H = ({
+  value: e,
+  min: o = -1 / 0,
+  max: r = 1 / 0,
+  step: t = 0.01,
+  label: s,
+  onChange: l
+}) => {
+  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());
+    },
+    [e, m]
+  );
+  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;
+    };
+    return window.addEventListener("mousemove", g), window.addEventListener("mouseup", k), () => {
+      window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", k);
+    };
+  }, [t, o, r, l]);
+  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(
+      "div",
+      {
+        ref: C,
+        tabIndex: 0,
+        onMouseDown: F,
+        onDoubleClick: v,
+        onKeyDown: U,
+        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"
+        ].join(" "),
+        children: m ? /* @__PURE__ */ n(
+          "input",
+          {
+            ref: b,
+            value: c,
+            onChange: (g) => f(g.target.value),
+            onBlur: E,
+            onKeyDown: (g) => {
+              g.key === "Enter" && E(), g.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 }) })
+      }
+    )
+  ] });
+}, oe = We({
+  currentTime: { current: 0 },
+  mousePosition: { current: [0, 0] },
+  shaders: [],
+  patches: {},
+  showStats: !1,
+  openExportNodeId: null,
+  setOpenExportNodeId: () => {
+  },
+  openPreviewNodeId: null,
+  setOpenPreviewNodeId: () => {
+  },
+  uniforms: { current: {} },
+  handleUpdateUniforms: () => {
+  },
+  handleUpdateNode: (e) => e,
+  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(
+      "button",
+      {
+        onClick: () => r.current?.click(),
+        className: "w-8 h-5.5 rounded border-2 border-neutral-200 cursor-pointer",
+        style: { backgroundColor: e },
+        title: e
+      }
+    ),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        ref: r,
+        type: "color",
+        value: e,
+        onChange: (t) => o(t.target.value),
+        className: "absolute opacity-0 w-0 h-0 pointer-events-none"
+      }
+    )
+  ] });
+}, K = ({ onClick: e }) => /* @__PURE__ */ n(
+  "button",
+  {
+    onClick: e,
+    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 })
+  ] });
+}, mn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
+  const [t, s] = y(o ?? e.default ?? 0), l = (a) => {
+    s(a), r(a);
+  };
+  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ n(
+      H,
+      {
+        value: t,
+        min: e.min,
+        max: e.max,
+        step: 0.01,
+        onChange: l
+      }
+    ),
+    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);
+        }
+      }
+    )
+  ] });
+}, hn = ({ field: e, initialValue: o, handleUpdateUniformField: r }) => {
+  const [t, s] = y(
+    o ?? e.default ?? [1, 1, 1]
+  ), l = (a) => {
+    s(a), r(a);
+  };
+  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ n(
+      ve,
+      {
+        color: Ue(t),
+        onChange: (a) => l(Ie(a))
+      }
+    ),
+    e.default !== void 0 && /* @__PURE__ */ n(K, { onClick: () => l(e.default) })
+  ] });
+}, 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);
+  };
+  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ n(
+      ve,
+      {
+        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) })
+  ] });
+}, 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);
+  };
+  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,
+      {
+        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);
+        }
+      }
+    )
+  ] });
+}, 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);
+  };
+  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,
+      {
+        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);
+        }
+      }
+    )
+  ] });
+}, 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;
+    };
+  }, [o]);
+  const m = () => r((c) => !c), h = () => {
+    r(!1), l.current = 0, s(0), i.current(0);
+  };
+  return /* @__PURE__ */ p("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        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 ? "⏸" : "▶"
+      }
+    ),
+    /* @__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 })
+  ] });
+}, _n = ({ handleUpdateUniformField: e }) => {
+  const { mousePosition: o } = ie(oe), [r, t] = y([0, 0]), s = R(e);
+  return s.current = e, D(() => {
+    let l;
+    const a = () => {
+      const u = [
+        o.current[0],
+        o.current[1]
+      ];
+      t(u), s.current(u), l = 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) {
+        const v = new Image();
+        v.onload = () => C([v.naturalWidth, v.naturalHeight]), v.src = l;
+      }
+    }
+  }, []);
+  const N = R(null), F = (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 });
+    } else {
+      const S = new Image();
+      S.onload = () => C([S.naturalWidth, S.naturalHeight]), S.src = E, o({ type: "texture", src: E });
+    }
+  };
+  return D(() => {
+    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());
+            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(
+      "div",
+      {
+        tabIndex: 0,
+        onFocus: () => t(!0),
+        onBlur: () => t(!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(
+          "video",
+          {
+            src: u,
+            className: "w-full h-full object-contain",
+            autoPlay: !0,
+            muted: !0,
+            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__ */ p("div", { className: "flex flex-col items-start gap-0.5", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: "button-base",
+          onClick: () => N.current?.click(),
+          children: u ? "Replace" : "Upload"
+        }
+      ),
+      c && /* @__PURE__ */ n(
+        "span",
+        {
+          className: "text-[10px] text-neutral-400 font-mono truncate max-w-32",
+          title: c,
+          children: c
+        }
+      ),
+      b && /* @__PURE__ */ p("span", { className: "text-[10px] text-neutral-400 font-mono", children: [
+        b[0],
+        "×",
+        b[1]
+      ] })
+    ] }),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        ref: N,
+        type: "file",
+        accept: "image/*,video/*",
+        className: "hidden",
+        onChange: (v) => F(v.target.files?.[0] ?? null)
+      }
+    )
+  ] }) });
+}, wn = [
+  { 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);
+      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)
+      );
+    }, N = () => {
+      window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", N);
+    };
+    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(
+        "canvas",
+        {
+          ref: s,
+          width: 128,
+          height: 16,
+          className: "w-32 h-4 rounded-sm border-2 border-neutral-200"
+        }
+      ),
+      r.map((c, f) => /* @__PURE__ */ n(
+        "button",
+        {
+          "aria-label": `gradient stop ${f}`,
+          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
+          },
+          onMouseDown: a(f)
+        },
+        f
+      ))
+    ] }),
+    /* @__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(
+        "button",
+        {
+          onClick: u,
+          className: "font-mono text-[10px] text-neutral-500 hover:text-neutral-800 leading-none",
+          children: "ADD +"
+        }
+      )
+    ] }),
+    /* @__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,
+        {
+          value: c.position,
+          min: 0,
+          max: 1,
+          step: 0.01,
+          onChange: (b) => m(f, b)
+        }
+      ),
+      /* @__PURE__ */ n(
+        ve,
+        {
+          color: c.color,
+          onChange: (b) => h(f, b)
+        }
+      ),
+      r.length > 1 && /* @__PURE__ */ n(
+        "button",
+        {
+          onClick: () => i(f),
+          className: "text-xs text-neutral-400 hover:text-neutral-700 leading-none px-1",
+          "aria-label": `remove stop ${f}`,
+          children: "×"
+        }
+      )
+    ] }, f)) })
+  ] });
+}, 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) {
+    case "float":
+      return e.special === "time" ? "float time" : "float";
+    case "vec2":
+      return e.special === "mouse" ? "vec2 mouse" : e.special === "resolution" ? "vec2 resolution" : "vec2";
+    case "vec3":
+      return e.color ? "vec3 color" : "vec3";
+    case "vec4":
+      return e.color ? "vec4 color" : "vec4";
+    case "sampler2D":
+      return e.source === "gradient" ? "sampler2D gradient" : "sampler2D texture";
+  }
+}
+const Ae = ({
+  shader: e,
+  initialUniforms: 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);
+    };
+    let h = null;
+    switch (a.type) {
+      case "float":
+        h = a.special === "time" ? /* @__PURE__ */ n(
+          bn,
+          {
+            field: a,
+            handleUpdateUniformField: i
+          }
+        ) : /* @__PURE__ */ n(
+          mn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        );
+        break;
+      case "vec2":
+        h = a.special === "mouse" ? /* @__PURE__ */ n(
+          _n,
+          {
+            field: a,
+            handleUpdateUniformField: i
+          }
+        ) : a.special === "resolution" ? /* @__PURE__ */ n(
+          Cn,
+          {
+            field: a,
+            width: e.resolution.width,
+            height: e.resolution.height,
+            handleUpdateUniformField: i
+          }
+        ) : /* @__PURE__ */ n(
+          pn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        );
+        break;
+      case "vec3":
+        h = a.color ? /* @__PURE__ */ n(
+          hn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        ) : /* @__PURE__ */ n(
+          gn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        );
+        break;
+      case "vec4":
+        h = a.color ? /* @__PURE__ */ n(
+          vn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        ) : /* @__PURE__ */ n(
+          xn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        );
+        break;
+      case "sampler2D":
+        a.source === "texture" ? h = /* @__PURE__ */ n(
+          yn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: m
+          }
+        ) : a.source === "gradient" && (h = /* @__PURE__ */ n(
+          Nn,
+          {
+            field: a,
+            initialValue: s[a.name],
+            handleUpdateUniformField: i
+          }
+        ));
+        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);
+  }) });
+}, ce = ({
+  children: e,
+  open: o,
+  className: r,
+  handleOpenChange: t
+}) => {
+  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(
+    "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
+    }
+  );
+}, Ne = "pnpm i @sequenza/lib", Te = ({
+  uniforms: e,
+  patch: o,
+  open: r,
+  onOpenChange: t
+}) => {
+  const s = dn(e, o), [l, a] = y("idle"), [u, i] = y("idle");
+  return /* @__PURE__ */ p(
+    ce,
+    {
+      open: r,
+      handleOpenChange: t,
+      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__ */ 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__ */ 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(
+              "button",
+              {
+                className: "absolute top-4 right-4 button-base",
+                onClick: () => {
+                  navigator.clipboard.writeText(s), i("done"), setTimeout(() => i("idle"), 1800);
+                },
+                children: u === "done" ? "Copied!" : "Copy"
+              }
+            ),
+            /* @__PURE__ */ n(
+              "textarea",
+              {
+                readOnly: !0,
+                value: s,
+                className: "w-full h-full resize-none bg-transparent text-xs text-neutral-700 font-mono p-4 pr-12 outline-none"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}, kn = ({
+  open: e,
+  onOpenChange: o,
+  shader: r,
+  patch: t,
+  uniforms: s,
+  nodeId: l,
+  handleUpdateUniforms: a,
+  handleUpdateNode: u
+}) => {
+  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 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(`
+`);
+  }, [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 });
+    });
+    return k.observe(g), () => k.disconnect();
+  }, []);
+  const U = () => {
+    i.current?.toBlob((g) => {
+      g && navigator.clipboard.write([new ClipboardItem({ "image/png": g })]);
+    });
+  }, 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();
+  };
+  return /* @__PURE__ */ p(
+    ce,
+    {
+      open: e,
+      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__ */ 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,
+            {
+              shader: r,
+              initialUniforms: s.current[r.id],
+              handleUpdateUniform: (g) => a(r.id, g)
+            }
+          ) }) }),
+          /* @__PURE__ */ p("div", { className: "h-full w-full flex flex-col gap-4 ", children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                ref: m,
+                className: "flex bg-neutral-50 rounded w-4/5 items-center justify-center h-full",
+                children: /* @__PURE__ */ n(
+                  Re,
+                  {
+                    ref: i,
+                    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)
+                  }
+                )
+              }
+            ),
+            /* @__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,
+                  {
+                    label: "w",
+                    value: v,
+                    min: 1,
+                    step: 1,
+                    onChange: (g) => u(l, (k) => ({
+                      ...k,
+                      shader: { ...k.shader, resolution: { width: g, height: E } }
+                    }))
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  H,
+                  {
+                    label: "h",
+                    value: E,
+                    min: 1,
+                    step: 1,
+                    onChange: (g) => u(l, (k) => ({
+                      ...k,
+                      shader: { ...k.shader, resolution: { width: v, height: g } }
+                    }))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ p("div", { className: "flex gap-1 h-min w-min", children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: "button-base",
+                    onClick: () => c(!0),
+                    children: "Export"
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  Te,
+                  {
+                    uniforms: s.current,
+                    patch: t,
+                    open: h,
+                    onOpenChange: c
+                  }
+                ),
+                /* @__PURE__ */ n("button", { className: "button-base", onClick: U, children: "Copy" }),
+                /* @__PURE__ */ n("button", { className: "button-base", onClick: S, 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(
+            "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),
+              children: "Copy error"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, Rn = ({ data: e, selected: o, id: r }) => {
+  const {
+    patches: t,
+    uniforms: s,
+    handleUpdateUniforms: l,
+    handleUpdateNode: a,
+    showStats: u,
+    setOpenExportNodeId: i,
+    openPreviewNodeId: m,
+    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());
+    }
+    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(`
+`);
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: `
+				flex flex-col gap-4 bg-white rounded-lg p-6 relative transition-[outline] outline-neutral-200 duration-75
+				${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: [
+            "ID: ",
+            e.shader.id
+          ] }),
+          /* @__PURE__ */ n("p", { className: "text-xs text-neutral-500 absolute -top-10", children: e.shader.name })
+        ] }),
+        k.map((_) => /* @__PURE__ */ n(
+          Ce,
+          {
+            id: _,
+            type: "target",
+            position: se.Top
+          },
+          _
+        )),
+        /* @__PURE__ */ p("div", { className: "flex gap-8", children: [
+          /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ n(
+            Ae,
+            {
+              shader: e.shader,
+              initialUniforms: s.current[e.shader.id],
+              handleUpdateUniform: (_) => {
+                l(e.shader.id, _);
+              }
+            }
+          ) }),
+          /* @__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(
+                    "button",
+                    {
+                      className: "button-base group-hover:opacity-100 opacity-0",
+                      onClick: () => h(r),
+                      children: "Expand"
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    kn,
+                    {
+                      open: m === r,
+                      onOpenChange: (_) => {
+                        h(_ ? r : null);
+                      },
+                      shader: e.shader,
+                      patch: t[e.shader.id],
+                      uniforms: s,
+                      nodeId: r,
+                      handleUpdateUniforms: l,
+                      handleUpdateNode: a
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    "button",
+                    {
+                      className: `button-base ${e.paused ? "opacity-100" : "group-hover:opacity-100 opacity-0"}`,
+                      onClick: () => {
+                        a(r, (_) => ({ ..._, paused: !_.paused }));
+                      },
+                      children: e.paused ? "Resume" : "Pause"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n(
+                  Re,
+                  {
+                    ref: N,
+                    animate: !e.paused,
+                    width: c,
+                    height: f,
+                    patch: t[e.shader.id],
+                    uniforms: s,
+                    className: "w-full h-auto",
+                    style: { maxWidth: `${c / f * 24}rem` },
+                    onError: (_) => {
+                      C(_);
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ p("div", { className: "flex gap-1 bg-neutral-100 rounded-md p-1 w-min", children: [
+                /* @__PURE__ */ n(
+                  H,
+                  {
+                    label: "w",
+                    value: c,
+                    min: 1,
+                    step: 1,
+                    onChange: (_) => a(r, (P) => ({
+                      ...P,
+                      shader: { ...P.shader, resolution: { width: _, height: f } }
+                    }))
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  H,
+                  {
+                    label: "h",
+                    value: f,
+                    min: 1,
+                    step: 1,
+                    onChange: (_) => a(r, (P) => ({
+                      ...P,
+                      shader: { ...P.shader, resolution: { width: c, height: _ } }
+                    }))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ p("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  className: "button-base",
+                  onClick: () => i(r),
+                  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" })
+            ] })
+          ] })
+        ] }),
+        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(
+            "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);
+              },
+              children: E === "done" ? "Copied!" : "Copy error"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(Ce, { id: "out", type: "source", position: se.Bottom })
+      ]
+    }
+  );
+};
+function Un({
+  sourceX: e,
+  sourceY: o,
+  targetX: r,
+  targetY: t,
+  sourcePosition: s,
+  targetPosition: l,
+  style: a = {},
+  markerEnd: u,
+  id: i
+}) {
+  const [m, h, c] = Ee({
+    sourceX: e,
+    sourceY: o,
+    sourcePosition: s,
+    targetX: r,
+    targetY: t,
+    targetPosition: l
+  }), { shaders: f, handleInsertShader: b } = ie(oe), [C, N] = y(!1), F = () => {
+    console.log("d"), N(!0);
+  };
+  return /* @__PURE__ */ p(le, { children: [
+    /* @__PURE__ */ n(Ye, { path: m, markerEnd: u, style: a }),
+    /* @__PURE__ */ n(Ke, { children: /* @__PURE__ */ p(
+      "div",
+      {
+        className: "absolute -translate-1/2 origin-center pointer-events-auto",
+        style: {
+          transform: `translate(${h}px,${c}px)`
+        },
+        children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "w-6 h-6 bg-neutral-200  rounded-full active:bg-neutral-200 z-10 flex items-center justify-center",
+              onClick: () => F(),
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ n(
+            ce,
+            {
+              open: C,
+              handleOpenChange: (v) => {
+                N(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(
+                    "button",
+                    {
+                      className: "button-base",
+                      onClick: () => {
+                        N(!1);
+                      },
+                      children: "Close"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ n("div", { className: "w-full flex flex-col", children: f.map((v) => /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: "text-xs flex justify-start p-1 rounded-sm hover:bg-neutral-100 cursor-pointer text-neutral-500",
+                    onClick: () => {
+                      b(v, i);
+                    },
+                    children: v.id
+                  },
+                  v.id
+                )) })
+              ] })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function In({
+  fromX: e,
+  fromY: o,
+  toX: r,
+  toY: t,
+  fromPosition: s,
+  toPosition: l,
+  toHandle: a
+}) {
+  const [u] = Ee({
+    sourceX: e,
+    sourceY: o,
+    sourcePosition: s,
+    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(
+      "rect",
+      {
+        x: r - f / 2,
+        y: m - c / 2,
+        width: f,
+        height: c,
+        rx: 4,
+        fill: a ? "#404040" : "#e5e5e5",
+        style: { pointerEvents: "none" }
+      }
+    ),
+    /* @__PURE__ */ n(
+      "text",
+      {
+        x: r,
+        y: m,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fontSize: 10,
+        fontFamily: "monospace",
+        fill: a ? "#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" }) })
+  ] });
+}
+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()],
+      o
+    );
+    for (const c of h) {
+      const f = {
+        ...c,
+        data: {
+          ...c.data,
+          shader: {
+            ...c.data.shader,
+            resolution: { width: i, height: m }
+          }
+        }
+      };
+      t.set(c.id, f), s.push(c.id);
+    }
+  }
+  return [...t.values()];
+}
+const An = ({
+  shaders: e,
+  initialState: o,
+  handleSave: r,
+  className: t,
+  initialShowStats: s,
+  initialShaderPanelOpen: l,
+  initialOpenPreviewNodeId: a,
+  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)),
+    [h]
+  ), N = W(
+    (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)
+      ));
+      return !w(d.target);
+    },
+    [c, m]
+  ), F = W(
+    (d) => {
+      const x = _e({ ...d, type: "insert" }, m), w = he(
+        c,
+        x,
+        d.source
+      );
+      h(x), f(w);
+    },
+    [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({
+          position: v({
+            x: w,
+            y: M
+          }),
+          sourceId: x.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()));
+    };
+    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,
+      position: { x: 0, y: 0 },
+      data: {
+        shader: w,
+        uniforms: g,
+        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;
+          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
+      });
+      $.position.x = je, $.position.y = qe, f((Y) => [...Y, $]), h((Y) => {
+        const de = Y.filter(
+          (Be) => Be.id !== x
+        ), Ve = {
+          id: "" + Math.random() * 1e4,
+          source: A.id,
+          target: $.id,
+          targetHandle: ue,
+          type: "insert"
+        }, He = {
+          id: "" + Math.random() * 1e4,
+          source: $.id,
+          target: V.id,
+          targetHandle: L,
+          type: "insert"
+        };
+        return de.push(Ve), de.push(He), de;
+      });
+    }
+  }, [G, j] = Q(() => {
+    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 ?? ""
+      });
+    return [JSON.stringify(d), d];
+  }, [m, c]), [X, ee] = Q(() => {
+    const d = {};
+    for (const x of c)
+      if (x.type === "shader") {
+        const w = x;
+        d[w.id] = w.data.shader;
+      }
+    return [JSON.stringify(d), d];
+  }, [c]), q = Q(() => {
+    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);
+        }
+      }
+    }
+    return d;
+  }, [X, G]), ne = W(
+    (d, x) => {
+      g.current[d] = x;
+    },
+    []
+  ), 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) };
+          }
+          return I;
+        });
+        return he(M, m, d);
+      });
+    },
+    [m]
+  ), ge = R(0), xe = R([0, 0]);
+  D(() => {
+    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)
+      ];
+    };
+    return window.addEventListener("mousemove", x), () => {
+      clearInterval(d), window.removeEventListener("mousemove", x);
+    };
+  }, []);
+  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;
+          break;
+        }
+      if (f((L) => [...L, I]), V !== void 0) {
+        const L = {
+          id: "" + Math.random(),
+          source: x,
+          target: I.id,
+          targetHandle: V,
+          type: "insert"
+        };
+        h(($) => _e(L, $));
+      }
+    }
+  }, [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);
+  };
+  return D(() => {
+    u?.({ showStats: J, shaderPanelOpen: te });
+  }, [J, te]), /* @__PURE__ */ p("div", { className: `w-full h-full ${t}`, children: [
+    /* @__PURE__ */ n(
+      oe.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
+        },
+        children: /* @__PURE__ */ p(
+          nn,
+          {
+            panOnScroll: !0,
+            proOptions: { hideAttribution: !0 },
+            nodes: c,
+            nodeTypes: { shader: Rn },
+            edges: m,
+            edgeTypes: { insert: Un },
+            onNodesChange: b,
+            onEdgesChange: C,
+            onConnect: F,
+            onConnectEnd: S,
+            connectionLineComponent: In,
+            isValidConnection: N,
+            style: {
+              background: "#F9F9F9"
+            },
+            fitView: !0,
+            children: [
+              /* @__PURE__ */ n(
+                tn,
+                {
+                  style: {
+                    "--xy-controls-button-background-color-default": "transparent",
+                    "--xy-controls-box-shadow-default": "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ p(fe, { position: "top-left", className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: "button-base",
+                    onClick: () => Me(!J),
+                    children: J ? "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: [
+                    d.source,
+                    " ",
+                    ">",
+                    " ",
+                    d.target,
+                    " ",
+                    d.targetHandle
+                  ] }, 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(
+                    "button",
+                    {
+                      className: "button-base",
+                      onClick: () => De(!te),
+                      children: te ? "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
+                )) })
+              ] }) }),
+              k && /* @__PURE__ */ n(fe, { position: "bottom-center", children: /* @__PURE__ */ p("p", { className: "text-xs text-neutral-400", children: [
+                "Last saved at ",
+                k.toLocaleTimeString()
+              ] }) })
+            ]
+          }
+        )
+      }
+    ),
+    re !== null && q[re] && /* @__PURE__ */ n(
+      Te,
+      {
+        uniforms: g.current,
+        patch: q[re],
+        open: !0,
+        onOpenChange: (d) => {
+          d || be(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      ce,
+      {
+        open: E !== null,
+        handleOpenChange: (d) => {
+          d === !1 && U(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(
+              "button",
+              {
+                className: "button-base",
+                onClick: () => {
+                  U(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);
+              },
+              children: 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,
+    type: "shader",
+    position: { x: 0, y: -a * 500 },
+    data: {
+      shader: l,
+      uniforms: r,
+      paused: !1
+    }
+  })), s = e.connections.map((l, a) => ({
+    id: `edge-${a}`,
+    source: l.from,
+    target: l.to,
+    targetHandle: l.input,
+    type: "insert"
+  }));
+  return console.log("build", { nodes: t, edges: s, uniforms: o }), { nodes: t, edges: s, uniforms: o };
+}
+const Tn = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture; // input
+uniform vec3 u_sourceColor; // color
+uniform vec4 u_targetColor; // color [0, 0, 0, 0]
+uniform float u_threshold; // [0, 1, 0.1]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+void main() {
+    vec4 texColor = texture(u_texture, vUv);
+
+    float colorDiff = distance(texColor.rgb, u_sourceColor) / 2.0;
+
+    if (colorDiff < u_threshold) {
+        fragColor = u_targetColor;
+    } else {
+        fragColor = texColor;
+    }
+}
+`, Fn = `#version 300 es
+
+precision highp float;
+
+
+uniform float u_time; // time
+uniform vec2 u_resolution; // resolution
+uniform vec3 u_notes;
+uniform vec2 u_mouse;  //mouse
+
+uniform float u_flower_count; // [1, 10, 5]
+uniform float u_flower_rotation; // [-6, 10, 5]
+
+uniform float u_ring_radius; // [-1, 10, 2]
+uniform float u_rotation_offset; // [1, 10, 5]
+uniform float u_mouse_rotation; // [0, 2, 0.1]
+uniform float u_mouse_scale_factor; // [0, 1, 0.1]
+uniform vec3 u_origin; // [0, 0.5, -20]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+float sdSphere(vec3 p, float r)
+{
+    return length(p) - r;
+}
+
+float sdCappedCylinder(vec3 p, float h, float r)
+{
+    vec2 d = abs(vec2(length(p.xz), p.y)) - vec2(r, h);
+    return min(max(d.x,d.y),0.0) + length(max(d,0.0));
+}
+
+float sdCappedCone( vec3 p, float h, float r1, float r2 )
+{
+  vec2 q = vec2( length(p.xz), p.y );
+  vec2 k1 = vec2(r2,h);
+  vec2 k2 = vec2(r2-r1,2.0*h);
+  vec2 ca = vec2(q.x-min(q.x,(q.y<0.0)?r1:r2), abs(q.y)-h);
+  vec2 cb = q - k1 + k2*clamp( dot(k1-q,k2)/dot(k2, k2), 0.0, 1.0 );
+  float s = (cb.x<0.0 && ca.y<0.0) ? -1.0 : 1.0;
+  return s*sqrt( min(dot(ca, ca),dot(cb, cb)) );
+}
+
+float sdEllipsoid(vec3 p, vec3 r)
+{
+    return (length(p/r) - 1.0) * min(min(r.x,r.y),r.z);
+}
+
+float smin(float a, float b, float k)
+{
+    if (k <= 0.00001) return min(a, b);
+    float h = clamp(0.5 + 0.5*(b-a)/k, 0.0, 1.0);
+    return mix(b, a, h) - k*h*(1.0-h);
+}
+
+
+float gain( float x, float k ) 
+{
+    float a = 0.5*pow(2.0*((x<0.5)?x:1.0-x), k);
+    return (x<0.5)?a:1.0-a;
+}
+
+vec3 rotateAroundAxis(vec3 v, vec3 axis, float angle) {
+    axis = normalize(axis);
+    float s = sin(angle);
+    float c = cos(angle);
+    float oc = 1.0 - c;
+
+    return v * c +
+           cross(axis, v) * s +
+           axis * dot(axis, v) * oc;
+}
+
+float petals(vec3 p) 
+{
+    float petals = 1000.0;
+    const int PETAL_COUNT = 6;
+    for(int i = 0; i < PETAL_COUNT; i++)
+    {
+        float angle = float(i) / float(PETAL_COUNT) * 6.28318;
+        vec3 rp = p;
+        
+        float c = cos(angle);
+        float s = sin(angle);
+        rp.xz = mat2(c, -s, s, c) * rp.xz;
+
+        float dist_from_center = length(rp.xz) * 7.0;
+
+        // adds dip near stem
+        rp.y -= 2.0 / pow(1.3 - (1.0-u_mouse.y * u_mouse_scale_factor) / 10.0, dist_from_center + abs(rp.x) * 5.0);
+
+        // adds tilt between leaves
+        rp.y += smoothstep(-0.9, 0.9, rp.x / 4.0) + 1.0;
+
+        // pushes petal tip out
+        rp.z += 1.0/(abs(rp.x) + 1.5) + 0.5 + (1.0-u_mouse.y * u_mouse_scale_factor) / 2.0;
+
+        float petal = sdEllipsoid(rp, vec3(0.1 + (1.0-u_mouse.y * u_mouse_scale_factor) / 10.0, 0.02, 0.2 + (1.0-u_mouse.y * u_mouse_scale_factor) / 10.0));
+        petals = smin(petals, petal, 0.1);
+    }
+    return petals;
+}
+
+float trumpet(vec3 p) 
+{
+    float dist_from_center = length(p.xz);
+    vec3 p_base = p;
+    p_base.y +=1.0;
+    float trumpetbase = sdCappedCone(p_base, 0.6 + (1.0-u_mouse.y * u_mouse_scale_factor), 0.3, 0.1);
+
+    vec3 p_flare = p;
+    p_flare.y -= 1.0 / (dist_from_center + 0.4) - 3.2 - (1.0-u_mouse.y * u_mouse_scale_factor);
+
+    float r = length(p_flare.xz);
+    float angle = atan(p_flare.z, p_flare.x);
+
+
+    float hyper = 1.0 / (r + 10.0);
+
+
+    p_flare.y += hyper * sin(angle * (angle - 1.6) * 2.0);
+
+
+    float flare = sdEllipsoid(p_flare, vec3(0.09 + (1.0-u_mouse.y * u_mouse_scale_factor) / 20.0, 0.01, 0.09 + (1.0-u_mouse.y * u_mouse_scale_factor) / 20.0));
+    float trumpet = smin(trumpetbase, flare, 0.6 + (1.0-u_mouse.y * u_mouse_scale_factor) / 2.0);
+
+    return trumpet;
+}
+
+float leaves(vec3 p) {
+    float leaves = 1000.0;
+    const int LEAF_COUNT = 5;
+    for(int i = 0; i < LEAF_COUNT; i++)
+    {
+        float angle = float(i) / float(LEAF_COUNT) * 6.28318;
+        vec3 rp = p;
+        
+        float c = cos(angle);
+        float s = sin(angle);
+        rp.xz = mat2(c, -s, s, c) * rp.xz;
+
+        float dist_from_center = length(rp.xz);
+
+        rp.y += smoothstep(0.0,4.0, dist_from_center) * 20.0 - 15.0; 
+        rp.z += angle / 4.0;
+
+        float leaf = sdEllipsoid(rp, vec3(0.5, 2.0, 0.5 + (1.0-u_mouse.y * u_mouse_scale_factor) / 2.0));
+        leaves = smin(leaves, leaf, (1.0-u_mouse.y * u_mouse_scale_factor));
+    }
+    return leaves;
+}
+
+float single_flower(vec3 p)
+{
+    float scaledTime = u_time / 2.0;
+
+    float bendStart = 7.0;  
+    float bendEnd   = 0.0;  
+
+    float h = clamp((p.y - bendStart) / (bendEnd - bendStart), 0.0, 1.0);
+
+    h = h * h;
+
+    float maxBend = sin(u_time / 2.0) / 10.0 + 0.6 - (gain(u_notes.x - u_notes.z / 2.0, 2.0)-0.5) / 5.0; 
+
+    float bendAngle = h * maxBend;
+
+    //p = rotateAroundAxis(p, vec3(1.0, 0.0, 0.0), 0.2);
+    p = rotateAroundAxis(p, vec3(0.0, 1.0, 0.0), u_flower_rotation);
+
+    p = rotateAroundAxis(p, vec3(1.0, 0.0, 0.0), -bendAngle);
+
+    //p.xz += vec2(sin(p.y * 0.2+ scaledTime), cos(p.y * 0.20 + scaledTime)) * smoothstep(-1.0, 0.0, p.y) / 2.0;
+
+    vec3 stemP = p;
+    stemP.y -= 6.0;
+    float stem = sdCappedCylinder(stemP, 7.0, 0.01);
+
+    float flower = smin(smin(petals(p), trumpet(p), 0.0), leaves(p), 0.0);
+
+    float scene = smin(flower, stem, 1.0);
+
+    return scene;
+}
+
+float sceneSDF(vec3 p)
+{
+    float radius = u_ring_radius + (1.0-u_mouse.y * u_mouse_scale_factor) * 3.0;           
+
+    p = rotateAroundAxis(p, vec3(1.0, 0.0, 0.0), -0.5);
+    float angle = atan(p.z, p.x) +.4 + (sin(u_time / 4.0) ) / 10.0 - (gain(u_mouse.x, 1.2) - 0.5) * u_mouse_rotation + u_rotation_offset;
+    float r = length(p.xz);
+
+    float sectorAngle = 6.28318 / u_flower_count;
+
+    float id = floor((angle + 3.14159) / sectorAngle);
+
+    float centerAngle = id * sectorAngle + sectorAngle * 0.5 - 3.14159;
+
+    float localAngle = angle - centerAngle;
+
+    vec3 localP;
+
+    localP.x = r * cos(localAngle) - radius;
+    localP.z = r * sin(localAngle);
+    localP.y = p.y;
+
+    float variation = sin(id * 12.37);
+
+    localP = rotateAroundAxis(localP, vec3(0.0,1.0,0.0), centerAngle);
+
+    localP.y += sin(id * 5.17) * 0.35;
+
+    return single_flower(localP);
+}
+
+
+
+void main()
+{
+    vec2 uv = vec2(vUv.x * 2.0 - 1.0, (1.0 -vUv.y) * 2.0 - 1.0);
+    float aspect = u_resolution.x / u_resolution.y;
+    vec2 resolution = vec2(uv.x * aspect, uv.y) * 0.5;
+
+    vec3 ray_origin = vec3(0, (1.0-u_mouse.y * u_mouse_scale_factor) * 1.0, (1.0-u_mouse.y * u_mouse_scale_factor) * 7.0) + u_origin;
+    vec3 ray_direction = normalize(vec3(resolution, 1.0));
+
+    float MAX_DIST = 20.0 + 10.0 * (1.0-u_mouse.y * u_mouse_scale_factor);
+    const int MAX_STEPS = 100;
+    float dist_traveled = 0.0;
+    int steps = 0;
+    int intersected = 0;
+    float min_dist = 100.0;
+
+    for(int i = 0; i < MAX_STEPS; i++)
+    {
+        vec3 current_pos = ray_origin + ray_direction * dist_traveled;
+
+        float distance = sceneSDF(current_pos);
+
+        min_dist = min(distance, min_dist);
+
+        if(distance < 0.1)
+        {
+            intersected = 1;
+            break;
+        }
+
+        if(dist_traveled > MAX_DIST)
+            break;
+
+        dist_traveled += distance * 0.5;
+        steps += 1;
+    }
+
+    fragColor = vec4(
+        mix(
+            vec3(
+                //0.0,
+                //pow(max(0.0,1.0 - float(min_dist)), 2.0 * u_notes.x + 1.0),
+                pow(max(0.0,1.0 - float(min_dist)), 0.5 * u_notes.x + 1.0) * 1.2
+                //pow(1.0 - float(steps) / float(MAX_STEPS), 2.0),
+                //1.0
+                ), 
+                vec3(
+                pow(max(0.0,1.0 - dist_traveled / MAX_DIST), 1.0) 
+                //pow(1.0 - float(steps) / float(MAX_STEPS), 2.0)
+                //1.0
+                ), 
+                pow(min(1.0,(1.0 - u_notes.x - u_notes.z + u_notes.y) + 0.4), 2.0)
+            //float(intersected)
+        ), 
+        1.0
+    );
+}`, Pn = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture; // input
+uniform float u_resolution; // [1, 100, 20]
+uniform float u_numColors;  // [2, 16, 2]
+
+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,
+        48, 16, 56, 24, 50, 18, 58, 26,
+        12, 44,  4, 36, 14, 46,  6, 38,
+        60, 28, 52, 20, 62, 30, 54, 22,
+         3, 35, 11, 43,  1, 33,  9, 41,
+        51, 19, 59, 27, 49, 17, 57, 25,
+        15, 47,  7, 39, 13, 45,  5, 37,
+        63, 31, 55, 23, 61, 29, 53, 21
+    );
+    return bayer64[(y % 8) * 8 + (x % 8)];
+}
+
+void main() {
+    vec2 cell = floor(vUv * u_resolution);
+    vec2 cellUv = cell / u_resolution;
+
+    vec4 color = texture(u_texture, cellUv);
+
+    float threshold = (float(bayer(int(cell.x), int(cell.y))) + 0.5) / 64.0 - 0.5;
+
+    float n = max(2.0, u_numColors);
+    float step = 1.0 / (n - 1.0);
+    vec3 dithered = clamp(round((color.rgb + threshold * step) / step) * step, 0.0, 1.0);
+
+    fragColor = vec4(dithered, color.a);
+}
+`, Mn = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture; // input
+uniform float u_frequency;  // [1, 100, 20]
+uniform float u_radius;     // [0, 1, 0.5]
+uniform float u_rotation;   // [0, 6.28, 0]
+uniform float u_constantSize; // [0, 1, 0]
+uniform vec4 u_background;  // color [1, 1, 1, 1]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+vec2 rot(vec2 v, float a) {
+    float c = cos(a), s = sin(a);
+    return mat2(c, -s, s, c) * v;
+}
+
+void main() {
+    // rotate UV space around center
+    vec2 rotUv = rot(vUv - 0.5, u_rotation) + 0.5;
+
+    // find nearest grid cell center in rotated space
+    vec2 cellUv = rotUv * u_frequency;
+    vec2 cellId = round(cellUv);
+
+    // unrotate cell center to sample from original texture
+    vec2 sampleUv = rot(cellId / u_frequency - 0.5, -u_rotation) + 0.5;
+    vec4 cellColor = texture(u_texture, clamp(sampleUv, 0.0, 1.0));
+
+    // luminance drives dot radius unless constant size is toggled
+    float lum = dot(cellColor.rgb, vec3(0.299, 0.587, 0.114));
+    float dotRadius = u_radius * mix(lum, 1.0, step(0.5, u_constantSize));
+
+    // distance from current pixel to nearest cell center (in cell-space units)
+    float dist = length(cellUv - cellId) / u_frequency * u_frequency;
+
+    fragColor = dist < dotRadius ? cellColor : u_background;
+}
+`, Dn = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+uniform vec2 u_resolution; // [100, 100]
+uniform float u_time; // time
+uniform float u_mod_size; // [0, 2, 1]
+uniform float u_tile_factor; // [1,  100, 10]
+uniform vec2 u_translation; // [0,0]
+
+float modSigned(float x, float y) {
+    return x - y * sign(x) * floor(abs(x/y));
+}
+
+void main() {
+    // Map UV coordinates to RGB
+    float aspect = u_resolution.x / u_resolution.y;
+    vec2 uv = vec2(
+        (vUv.x + sin((u_translation.x +vUv.x) * 10.0) * sin(vUv.y + u_translation.y + u_time / 100.0) * .01 ) * aspect,
+        vUv.y + sin((u_translation.y+vUv.y) * 7.0) * 0.05 * sin(vUv.x + u_translation.x + u_time / 100.)) * u_tile_factor + u_translation;
+
+    vec2 localUv = vec2(
+            mod(uv.x, u_mod_size),
+            mod(uv.y,u_mod_size)
+        );
+
+    float dist = length(
+        localUv - (u_mod_size / 2.0)
+    );
+
+
+    fragColor = mix(
+        vec4(1.0 - localUv.x, localUv.y,1., 1.0),
+        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
+precision mediump float;
+
+uniform sampler2D u_texture; 
+uniform sampler2D u_gradientTexture; // gradient
+in vec2 vUv;
+out vec4 fragColor;
+
+void main() {
+  vec4 color = texture(u_texture, vUv);
+
+  float brightness = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+
+  vec4 gradientColor = texture(u_gradientTexture, vec2(brightness, 0.5));
+
+  fragColor = vec4(gradientColor.rgb, 1.0);
+}
+`, On = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture; // input
+uniform vec3 u_hslAdjust; // H (degrees), S (0-1), L (0-1) — [0, 0, 0]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+vec3 rgb2hsl(vec3 color) {
+    float maxC = max(max(color.r, color.g), color.b);
+    float minC = min(min(color.r, color.g), color.b);
+    float delta = maxC - minC;
+
+    float h = 0.0;
+    float s = 0.0;
+    float l = (maxC + minC) / 2.0;
+
+    if (delta != 0.0) {
+        s = l > 0.5 ? delta / (2.0 - maxC - minC) : delta / (maxC + minC);
+
+        if (color.r == maxC) {
+            h = (color.g - color.b) / delta + (color.g < color.b ? 6.0 : 0.0);
+        } else if (color.g == maxC) {
+            h = (color.b - color.r) / delta + 2.0;
+        } else {
+            h = (color.r - color.g) / delta + 4.0;
+        }
+        h /= 6.0;
+    }
+
+    return vec3(h, s, l);
+}
+
+float hue2rgb(float p, float q, float t) {
+    if (t < 0.0) t += 1.0;
+    if (t > 1.0) t -= 1.0;
+    if (t < 1.0/6.0) return p + (q - p) * 6.0 * t;
+    if (t < 1.0/2.0) return q;
+    if (t < 2.0/3.0) return p + (q - p) * (2.0/3.0 - t) * 6.0;
+    return p;
+}
+
+vec3 hsl2rgb(vec3 hsl) {
+    float h = hsl.x;
+    float s = hsl.y;
+    float l = hsl.z;
+
+    if (s == 0.0) {
+        return vec3(l);
+    }
+
+    float q = l < 0.5 ? l * (1.0 + s) : l + s - l * s;
+    float p = 2.0 * l - q;
+    return vec3(
+        hue2rgb(p, q, h + 1.0/3.0),
+        hue2rgb(p, q, h),
+        hue2rgb(p, q, h - 1.0/3.0)
+    );
+}
+
+void main() {
+    vec4 color = texture(u_texture, vUv);
+
+    vec3 hsl = rgb2hsl(color.rgb);
+
+    hsl.x = mod(hsl.x + u_hslAdjust.x / 360.0, 1.0);
+    hsl.y = clamp(hsl.y + u_hslAdjust.y, 0.0, 1.0);
+    hsl.z = clamp(hsl.z + u_hslAdjust.z, 0.0, 1.0);
+
+    fragColor = vec4(hsl2rgb(hsl), color.a);
+}
+`, Ln = `#version 300 es
+precision highp float;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+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
+precision highp float;
+
+uniform float u_time; // time
+uniform vec2 u_resolution; // resolution
+uniform vec2 u_mouse;
+uniform float u_amplitude;
+
+uniform float u_rotation; // [0, 6.28, 0]
+uniform float u_density;  // [10, 200, 30]
+uniform float u_threshold;
+uniform vec4 u_line_color; // color [0,0,0,0]
+
+uniform sampler2D u_input_tex;
+uniform float u_mode; // [0, 1, 1]
+
+
+in vec2 vUv;
+out vec4 fragColor;
+
+const float PI = 3.1415926535897932384626433832795;
+
+/*
+angle is in radians
+*/
+vec2 rotate(vec2 uv, float angle) {
+    float c = cos(angle);
+    float s = sin(angle);
+    return mat2(c, -s, s, c) * uv;
+}
+
+vec2 invRotate(vec2 uv, float angle) {
+    float c = cos(angle);
+    float s = sin(angle);
+    return mat2(c, s, -s, c) * uv;
+}
+
+vec2 rotateCenter(vec2 uv, float angle) {
+    return rotate(uv - vec2(.5), u_rotation) + vec2(.5);
+}
+
+void main() {
+    vec2 uv = vec2(vUv.x, vUv.y);
+    vec2 uvInRotatedSpace = invRotate(uv, u_rotation);
+    vec2 targetPixInRot = vec2(floor(uvInRotatedSpace.x * u_density + 0.5)/u_density, uvInRotatedSpace.y);
+    vec2 targetPixInRot2 = vec2(floor((uvInRotatedSpace.x) * u_density + 0.5)/u_density, uvInRotatedSpace.y  + sin(u_mouse) / 20.0);
+
+    float distanceFromTargetInRot = smoothstep(0.0, 1.0, abs(targetPixInRot.x - uvInRotatedSpace.x) * 1.2) * 15.0 / (1.0 + u_amplitude * 5.0);
+    float maxDist = 1.0 / u_density;
+
+    vec2 targetInCart = invRotate(targetPixInRot, -u_rotation);
+    vec2 targetInCart2 = invRotate(targetPixInRot2, -u_rotation);
+    vec4 targetColor = (texture(u_input_tex, targetInCart) + texture(u_input_tex, targetInCart2)) * 0.5;
+
+    float targetLum = pow(dot(targetColor.rgb, vec3(0.299, 0.587, 0.114)), 2.0);
+
+    // 1.0 is solid; should be shaded. 0.0 should be white space
+    float solidMask = clamp(targetLum, 0.0, 1.0) < distanceFromTargetInRot * u_density ? 1.0 : 0.0;
+
+
+    if (u_mode > 0.5) {
+        if (solidMask < 0.5) {
+            fragColor = vec4(vec3(u_line_color), 1.0);
+        } else {
+            fragColor = vec4(1.0);
+        }
+    } else {
+        if (solidMask > 0.5) {
+            fragColor = vec4(vec3(u_line_color), 1.0);
+        } else {
+            fragColor = vec4(1.0);
+        }
+    }
+
+}`, Vn = `#version 300 es
+precision mediump float;
+
+uniform sampler2D u_texture; // input
+uniform vec3 u_rgbAdjust; // RGB offset in [−255, 255] — [0, 0, 0]
+
+in vec2 vUv;
+out vec4 fragColor;
+
+void main() {
+    vec4 color = texture(u_texture, vUv);
+    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
+};
+export {
+  Ce as CustomHandle,
+  ce as Dialog,
+  Xn as Editor,
+  oe as EditorContext,
+  Te as ExportDialog,
+  cn as Renderer,
+  Re as RendererComponent,
+  H as Scrubber,
+  Rn as ShaderNode,
+  Ae as UniformForm,
+  Yn as buildEditorState,
+  dn as exportSequenzaPatch,
+  ae as extractFields,
+  Kn as staticShaders
+};