diff --git a/.github/workflows/cli-e2e.yml b/.github/workflows/cli-e2e.yml
index 62ff6db1..d9a84aec 100644
--- a/.github/workflows/cli-e2e.yml
+++ b/.github/workflows/cli-e2e.yml
@@ -51,9 +51,15 @@ jobs:
           sudo apt-get update
           sudo apt-get install -y love squashfs-tools
 
-      - name: Install squashfs-tools (macOS)
+      - name: Install LÖVE and squashfs-tools (macOS)
         if: runner.os == 'macOS'
-        run: brew install squashfs
+        run: |
+          curl -L https://github.com/love2d/love/releases/download/11.5/love-11.5-macos.zip -o love-macos.zip
+          ditto -x -k love-macos.zip love-macos
+          sudo cp -R love-macos/love.app /Applications/love.app
+          sudo ln -sf /Applications/love.app/Contents/MacOS/love /usr/local/bin/love
+          love --version
+          brew install squashfs
 
       - name: Install dependencies
         run: npm ci
diff --git a/.gitignore b/.gitignore
index c655af86..d8351015 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,8 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-showcase
+.showcase-vendor
 dist-ssr
 *.local
 
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100644
index 00000000..4d5a02ac
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+set -eu
+
+if [ "${SKIP_PRE_PUSH_TESTS:-}" = "1" ]; then
+  echo "[feather] SKIP_PRE_PUSH_TESTS=1 set; skipping pre-push tests."
+  exit 0
+fi
+
+npm run test:cli:e2e
+npm run test:lua:e2e
+npm run test:app:e2e
+npm run test:showcase:e2e
diff --git a/CHANGELOG.md b/CHANGELOG.md
index da4fd9bf..d2e537e9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - CLI Fastlane draft support
 - Lua plugin unit tests
 - Lua callback bus with priority overrides
+- Standalone Showcase build for trying Shader Graph and Particle System Playground in the browser without connecting a game.
+- Static love.js preview bridge for standalone shader and particle previews, including showcase build/preview scripts and a publishing workflow.
+- Shader Graph custom function, texture input, texture uniform color, texture upload, and preview texture support.
+- Expanded Shader Graph node library with complex math, quaternion operations, symmetry, random, pixel-perfect primitives, patterns, halftone, Lab color helpers, composite, Truchet tiles, improved SDF nodes, and broader vertex shader authoring.
+- Added Shader Graph vector math nodes for component-wise `vec2`/`vec3`/`vec4` add, subtract, multiply, divide, and scalar scaling.
+- Added Shader Graph right-click node insertion, preset insertion, dirty preset replacement confirmation, graph-local subgraph instances, and deterministic link suggestions.
+- Shader Graph preset and UI improvements for graph authoring, node inspection, code preview, and standalone preview controls.
+- Session Replay checkpoints, seeking, baseline restore, sparse state deltas, and Lua E2E coverage for replay flows.
+- Pre-push hook that runs CLI E2E, Lua E2E, app Playwright E2E, and showcase Playwright E2E before pushing.
 
 ### Changed
 
@@ -29,6 +38,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved CLI Linux vendoring
 - Updated roadmap
 - Shim hooks on load
+- Improved standalone Shader Graph and Particle System Playground ergonomics, including local in-browser state for showcase mode.
+- Improved Shader Graph WebGL preview adaptation for LÖVE shader syntax and precision-qualified uniforms.
+- Improved Particle System Playground preview payload handling and emitter list behavior.
+- Improved Lua E2E reliability in headless CI by disabling audio for E2E runs and making the Lua E2E timeout configurable.
+- Improved audio-debug behavior when `love.audio` is unavailable, allowing headless smoke tests to run.
+- Improved doctor reporting for dangerous installed plugins even when bundled catalog data is unavailable or stale.
+- Moved standalone showcase deployment toward Railway hosting so love.js previews can be served with COOP/COEP/CSP headers.
 
 ### Fixed
 
@@ -36,6 +52,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed optimistic plugin updates
 - Fixed input replay
 - Fixed stack overflow on LÖVE hooks
+- Fixed Shader Graph `u_time` precision mismatch between vertex and fragment shaders in love.js/WebGL.
+- Fixed Shader Graph rounded functions and generated GLSL/WebGL preview handling.
+- Fixed standalone showcase Playwright coverage so the showcase test runs only in the dedicated showcase config and uses current preview iframe selectors.
+- Fixed CLI Linux AppImage vendor extraction fallback to use `unsquashfs -offset` when direct AppImage execution fails or is non-native.
+- Fixed CI-only Lua E2E ALSA/audio startup failures in xvfb environments.
+- Fixed doctor E2E fixture setup for dangerous bundled plugin trust checks.
+
+### Tests
+
+- Added standalone showcase Playwright smoke test and dedicated showcase Playwright config.
+- Added Lua plugin E2E smoke coverage, including session replay flows.
+- Added CLI doctor trust coverage for unknown and dangerous installed plugins.
+- Added CLI Linux AppImage fallback tests for `unsquashfs` offset detection and actionable extraction errors.
+- Added pre-push local verification for CLI, Lua, app, and showcase E2E lanes.
 
 ## [v1.2.0] - 2026-05-19 - The one with the shader and particles playground
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ccfa8b30..4914dec6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -183,6 +183,17 @@ Focused guidance:
 
 If `love`, `luacheck`, Android SDK, Xcode, Fastlane, or other local tooling is missing, document that in the PR or final handoff. Do not pretend the check passed.
 
+The pre-push hook runs the heavier local test lanes before pushing:
+
+```sh
+npm run test:cli:e2e
+npm run test:lua:e2e
+npm run test:app:e2e
+npm run test:showcase:e2e
+```
+
+When you need to push from a machine that cannot run those tools, use `SKIP_PRE_PUSH_TESTS=1 git push` and call out the skipped checks.
+
 ## Generated Files
 
 Some files are generated and must stay in sync:
diff --git a/cli/src/commands/doctor/index.ts b/cli/src/commands/doctor/index.ts
index 8b61f31a..451828ef 100644
--- a/cli/src/commands/doctor/index.ts
+++ b/cli/src/commands/doctor/index.ts
@@ -257,7 +257,8 @@ export async function doctorCommand(gamePath?: string, opts: DoctorOptions = {})
     add(checks, 'Project', 'feather.config.lua', 'warn', 'missing', 'Run `feather init` to create a shared config.');
   }
 
-  const managedMode = configSource ? parseManagedValue(configSource, 'mode') : null;
+  const configManagedMode = typeof config?.managed === 'string' ? config.managed : null;
+  const managedMode = (configSource ? parseManagedValue(configSource, 'mode') : null) ?? configManagedMode;
   const managedInstallDir = configSource ? parseManagedValue(configSource, 'installDir') : null;
   const effectiveInstallDir = normalizeInstallDir(opts.installDir ?? managedInstallDir ?? installDir);
   const mode = typeof config?.mode === 'string' ? config.mode : 'socket';
@@ -386,7 +387,7 @@ export async function doctorCommand(gamePath?: string, opts: DoctorOptions = {})
     }
     for (const dir of pluginDirs) {
       const manifest = readPluginManifest(dir);
-      if (!manifest?.id || !knownPluginIds.has(manifest.id)) continue;
+      if (!manifest?.id) continue;
       const trust = classifyPluginTrust(manifest, pluginCatalogById.get(manifest.id));
       if (dangerousPluginIds.has(manifest.id)) {
         add(
@@ -398,6 +399,7 @@ export async function doctorCommand(gamePath?: string, opts: DoctorOptions = {})
           `Remove before shipping with \`feather plugin remove ${manifest.id} --dir ${projectDirArg} --install-dir ${installDirArg} --yes\`.`,
         );
       } else {
+        if (!knownPluginIds.has(manifest.id)) continue;
         add(checks, 'Plugins', `Plugin ${manifest.id} trust`, trust === 'bundled-opt-in' ? 'info' : 'pass', pluginTrustLabel(trust));
       }
     }
diff --git a/cli/src/lib/build/vendor.ts b/cli/src/lib/build/vendor.ts
index ab22c31a..75319234 100644
--- a/cli/src/lib/build/vendor.ts
+++ b/cli/src/lib/build/vendor.ts
@@ -445,18 +445,27 @@ async function installDesktopRuntime(target: 'windows' | 'macos' | 'linux' | 'st
   const result = spawnSync(loveAppImage, ['--appimage-extract'], { cwd: targetPath, encoding: 'utf8' });
   if (!result.error) {
     if (result.status === 0 && existsSync(join(squashfsRoot, 'bin', 'love'))) return;
-    throw new Error((result.stderr || result.stdout || 'Failed to extract LÖVE AppImage.').trim());
+    const offset = findSquashFsOffset(loveAppImage);
+    if (offset < 0) {
+      throw new Error((result.stderr || result.stdout || 'Failed to extract LÖVE AppImage.').trim());
+    }
+    tryExtractAppImageWithUnsquashfs(loveAppImage, squashfsRoot, targetPath, offset);
+    return;
   }
 
   const code = (result.error as NodeJS.ErrnoException).code;
-  if (code !== 'ENOEXEC' && code !== 'ENOENT' && code !== 'EACCES') {
+  const offset = findSquashFsOffset(loveAppImage);
+  if (code !== 'ENOEXEC' && code !== 'ENOENT' && code !== 'EACCES' && offset < 0) {
     throw new Error(`Failed to extract LÖVE AppImage: ${result.error.message}`);
   }
 
   // Not on Linux — try unsquashfs with explicit SquashFS offset (squashfs-tools >= 4.4).
   // The macOS port doesn't auto-detect the offset, so we scan for the magic bytes ourselves.
+  tryExtractAppImageWithUnsquashfs(loveAppImage, squashfsRoot, targetPath, offset);
+}
+
+function tryExtractAppImageWithUnsquashfs(loveAppImage: string, squashfsRoot: string, targetPath: string, offset: number): void {
   if (existsSync(squashfsRoot)) rmSync(squashfsRoot, { recursive: true });
-  const offset = findSquashFsOffset(loveAppImage);
   const unsquashArgs = offset >= 0
     ? ['-offset', String(offset), '-d', squashfsRoot, loveAppImage]
     : ['-d', squashfsRoot, loveAppImage];
diff --git a/cli/test/commands/doctor.test.mjs b/cli/test/commands/doctor.test.mjs
index 43e250e2..86e45221 100644
--- a/cli/test/commands/doctor.test.mjs
+++ b/cli/test/commands/doctor.test.mjs
@@ -46,8 +46,7 @@ test('doctor --json reports dangerous bundled plugin trust', () => {
   writeGame(dir);
   writeMinimalRuntime(dir);
   writeFileSync(join(dir, 'feather.config.lua'), 'return { appId = "feather-app-test-1234567890" }\n');
-  const result = run(['plugin', 'install', 'console', '--local-src', LOCAL_SRC, '--dir', dir]);
-  assert.equal(result.exitCode, 0, outputOf(result));
+  writeLocalPluginSource(join(dir, 'feather'), 'console', { name: 'Console' });
 
   const parsed = parseDoctorJson(dir);
   const labels = new Map(parsed.checks.map((check) => [check.label, check]));
@@ -105,6 +104,28 @@ return {
   assert.equal(labels.has('Plugin shader-graph'), false);
 });
 
+test('doctor --json treats managed = cli as bundled without legacy metadata comments', () => {
+  const dir = makeTmp();
+  writeGame(dir);
+  writeFileSync(
+    join(dir, 'feather.config.lua'),
+    `return {
+  appId = "feather-app-test-1234567890",
+  managed = "cli",
+  include = { "console", "shader-graph" },
+}
+`,
+  );
+
+  const parsed = parseDoctorJson(dir);
+  const labels = new Map(parsed.checks.map((check) => [check.label, check]));
+  assert.equal(labels.get('Embedded Feather runtime').severity, 'info');
+  assert.equal(labels.get('CLI-managed plugins').severity, 'pass');
+  assert.equal(labels.get('CLI-managed plugins').detail, '2 included from bundled runtime');
+  assert.equal(labels.has('Plugin console'), false);
+  assert.equal(labels.has('Plugin shader-graph'), false);
+});
+
 test('doctor --json reports malformed plugin manifests with recovery text', () => {
   const dir = makeTmp();
   writeGame(dir);
diff --git a/docs/standalone-showcase.md b/docs/standalone-showcase.md
new file mode 100644
index 00000000..996344ba
--- /dev/null
+++ b/docs/standalone-showcase.md
@@ -0,0 +1,12 @@
+# Standalone Showcase
+
+The standalone showcase is a browser-hosted version of Feather's visual authoring
+tools. It lets you try the Shader Graph and Particle System Playground without
+starting the desktop app or connecting a local LÖVE project.
+
+[Open the standalone showcase](https://feather-showcase.up.railway.app/)
+
+Use it to experiment with shader nodes, preview generated GLSL, tune particle
+emitters, and see how the tools feel before wiring them into a running game. The
+showcase runs separately from the documentation site so its LÖVE preview can use
+the browser isolation headers required by love.js.
diff --git a/e2e/showcase.spec.ts b/e2e/showcase.spec.ts
new file mode 100644
index 00000000..cbf8cfce
--- /dev/null
+++ b/e2e/showcase.spec.ts
@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test';
+
+test('standalone showcase loads the landing page and tools', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('heading', { name: /browser-native authoring tools/i })).toBeVisible();
+
+  await page.locator('header').getByRole('button', { name: /^shader graph$/i }).click();
+  await expect(page.getByRole('heading', { name: 'Shader Graph' })).toBeVisible();
+  await expect(page.getByText('GLSL Output')).toBeVisible();
+  await expect(page.frameLocator('iframe[title="Shader Preview"]').locator('canvas')).toBeVisible();
+
+  const nodesBeforeInsert = await page.locator('.react-flow__node').count();
+  await page.getByTestId('shader-canvas').click({ button: 'right', position: { x: 300, y: 220 } });
+  await expect(page.getByTestId('shader-node-picker').getByPlaceholder('Search nodes')).toBeVisible();
+  await page.getByTestId('shader-node-picker').getByPlaceholder('Search nodes').fill('time');
+  await page.getByTestId('shader-node-picker').getByRole('button', { name: /^time input$/i }).click();
+  await expect(page.locator('.react-flow__node')).toHaveCount(nodesBeforeInsert + 1);
+  await page.getByTestId('shader-canvas').click({ button: 'right', position: { x: 420, y: 220 } });
+  await page.getByTestId('shader-node-picker').getByPlaceholder('Search nodes').fill('float');
+  await page.getByTestId('shader-node-picker').getByRole('button', { name: /^float input$/i }).click();
+  await expect(page.locator('.react-flow__node')).toHaveCount(nodesBeforeInsert + 2);
+  await page.getByTestId('shader-canvas').click({ button: 'right', position: { x: 260, y: 320 } });
+  await page.getByTestId('shader-node-picker').getByPlaceholder('Search nodes').fill('float parameter');
+  await page.getByTestId('shader-node-picker').getByRole('button', { name: /^float parameter input$/i }).click();
+  await expect(page.locator('.react-flow__node')).toHaveCount(nodesBeforeInsert + 3);
+  await expect(page.getByText(/extern number u_param_/i)).toBeVisible();
+  await page.getByTestId('shader-canvas').click({ button: 'right', position: { x: 380, y: 320 } });
+  await page.getByTestId('shader-node-picker').getByPlaceholder('Search nodes').fill('color parameter');
+  await page.getByTestId('shader-node-picker').getByRole('button', { name: /^color parameter input$/i }).click();
+  await expect(page.locator('.react-flow__node')).toHaveCount(nodesBeforeInsert + 4);
+  await expect(page.getByText(/extern vec4 u_param_/i)).toBeVisible();
+  await page.keyboard.press('Control+C');
+  await page.keyboard.press('Control+V');
+  await expect(page.locator('.react-flow__node')).toHaveCount(nodesBeforeInsert + 5);
+  await expect(page.getByRole('button', { name: /unlink linked node/i })).toHaveCount(1);
+  await page.keyboard.press('Control+D');
+  await expect(page.locator('.react-flow__node')).toHaveCount(nodesBeforeInsert + 6);
+  await expect(page.getByRole('button', { name: /unlink linked node/i })).toHaveCount(2);
+  page.once('dialog', async (dialog) => {
+    expect(dialog.message()).toContain('Unlink this node?');
+    await dialog.accept();
+  });
+  await page.getByRole('button', { name: /unlink linked node/i }).first().click();
+  await expect(page.getByRole('button', { name: /unlink linked node/i })).toHaveCount(1);
+
+  const nodesBeforePreset = await page.locator('.react-flow__node').count();
+  await page.getByText('Insert preset').click();
+  await page.getByRole('option', { name: /texture pass/i }).click();
+  await expect.poll(() => page.locator('.react-flow__node').count()).toBeGreaterThan(nodesBeforePreset);
+
+  await page.locator('header').getByRole('button', { name: /particle playground/i }).click();
+  await expect(page.getByRole('heading', { name: 'Particles Playground' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Emitter Properties' })).toBeVisible();
+  await expect(page.getByText('Rate')).toBeVisible();
+  await expect(page.frameLocator('iframe[title="Particle Preview"]').locator('canvas')).toBeVisible();
+});
diff --git a/mkdocs.yml b/mkdocs.yml
index 241a102d..c1655d47 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -41,6 +41,7 @@ nav:
   - Assets: assets.md
   - Particle System Playground: particle-system-playground.md
   - Shader Graph: shader-graph.md
+  - Standalone Showcase: standalone-showcase.md
   - Time Travel: time-travel.md
   - Session Replay: session-replay.md
   - Recommendations: recommendations.md
diff --git a/package-lock.json b/package-lock.json
index 8e65ea81..d2a239d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -84,7 +84,7 @@
     },
     "cli": {
       "name": "@kyonru/feather",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "license": "EPL-2.0",
       "dependencies": {
         "chalk": "5.3.0",
@@ -13003,7 +13003,7 @@
     },
     "vscode-extension": {
       "name": "feather-vscode",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "license": "EPL-2.0",
       "devDependencies": {
         "@types/node": "22.15.0",
diff --git a/package.json b/package.json
index 2bf38c40..282e7469 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "test:cli:e2e": "npm run cli:build && node --test cli/test/commands/*.test.mjs",
     "test:lua:e2e": "node scripts/lua-e2e.mjs",
     "test:app:e2e": "playwright test",
+    "test:showcase:e2e": "playwright test -c playwright.showcase.config.ts",
     "test:tauri:e2e": "cargo test --manifest-path src-tauri/Cargo.toml ws_server",
     "extension:prepare": "npm run cli:build && npm run bundle:lua --workspace=cli && node vscode-extension/scripts/prepare.mjs",
     "extension:build": "npm run extension:prepare && tsc -p vscode-extension/tsconfig.json",
@@ -29,6 +30,11 @@
     "lua": "sh ./scripts/watch-lua.sh",
     "web": "vite",
     "build": "tsc && vite build",
+    "showcase:dev": "vite --config vite.showcase.config.ts",
+    "showcase:build": "tsc --noEmit -p tsconfig.json --composite false && vite build --config vite.showcase.config.ts && node scripts/prepare-showcase-lovejs.mjs && node scripts/build-showcase-love.mjs",
+    "showcase:prepare-lovejs": "node scripts/prepare-showcase-lovejs.mjs",
+    "showcase:preview": "vite preview --config vite.showcase.config.ts",
+    "showcase:start": "node scripts/serve-showcase.mjs",
     "preview": "vite preview",
     "typecheck:web": "tsc --noEmit -p tsconfig.json --composite false",
     "typecheck:lua": "luacheck src-lua",
diff --git a/playwright.config.ts b/playwright.config.ts
index 0455e794..70434348 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,6 +2,7 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './e2e',
+  testIgnore: /showcase\.spec\.ts/,
   timeout: 30_000,
   expect: {
     timeout: 5_000,
diff --git a/playwright.showcase.config.ts b/playwright.showcase.config.ts
new file mode 100644
index 00000000..a0fb49fd
--- /dev/null
+++ b/playwright.showcase.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: /showcase\.spec\.ts/,
+  timeout: 30_000,
+  expect: {
+    timeout: 5_000,
+  },
+  fullyParallel: true,
+  // @ts-expect-error process is only defined in Node.js environment, and this config file is not bundled
+  reporter: process?.env.CI ? [['github'], ['list']] : 'list',
+  use: {
+    baseURL: 'http://127.0.0.1:4174',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  webServer: {
+    command: 'npm run showcase:build && npm run showcase:preview -- --host 127.0.0.1',
+    url: 'http://127.0.0.1:4174',
+    // @ts-expect-error process is only defined in Node.js environment, and this config file is not bundled
+    reuseExistingServer: !process?.env.CI,
+    timeout: 120_000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
diff --git a/public/showcase-lovejs/index.html b/public/showcase-lovejs/index.html
new file mode 100644
index 00000000..268c62f5
--- /dev/null
+++ b/public/showcase-lovejs/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Feather love.js Preview</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <script src="./player.js?g=showcase.love&v=11.5"></script>
+  </body>
+</html>
diff --git a/public/showcase-lovejs/player.js b/public/showcase-lovejs/player.js
new file mode 100644
index 00000000..dda9fa5f
--- /dev/null
+++ b/public/showcase-lovejs/player.js
@@ -0,0 +1,116 @@
+(() => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  document.body.appendChild(canvas);
+
+  let payload = { tool: 'idle' };
+  let tick = 0;
+
+  function resize() {
+    const scale = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(window.innerWidth * scale));
+    canvas.height = Math.max(1, Math.floor(window.innerHeight * scale));
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    ctx.setTransform(scale, 0, 0, scale, 0, 0);
+  }
+
+  function drawGrid(width, height) {
+    ctx.strokeStyle = 'rgba(148, 163, 184, 0.13)';
+    ctx.lineWidth = 1;
+    for (let x = 0; x < width; x += 32) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, height);
+      ctx.stroke();
+    }
+    for (let y = 0; y < height; y += 32) {
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+  }
+
+  function drawShaderPreview(width, height) {
+    const size = Math.min(width, height) * 0.44;
+    const x = width * 0.5;
+    const y = height * 0.5;
+    const shape = payload.previewShape || 'circle';
+    const color = payload.previewColor || '#38bdf8';
+    const pad = size * 0.22;
+
+    ctx.fillStyle = color;
+    ctx.strokeStyle = color;
+
+    if (shape === 'rectangle') {
+      ctx.fillRect(x - size / 2 + pad, y - size / 2 + pad, size - pad * 2, size - pad * 2);
+    } else if (shape === 'line') {
+      ctx.lineWidth = Math.max(6, size * 0.12);
+      ctx.beginPath();
+      ctx.moveTo(x - size / 2 + pad, y + size / 2 - pad);
+      ctx.lineTo(x + size / 2 - pad, y - size / 2 + pad);
+      ctx.stroke();
+    } else {
+      ctx.beginPath();
+      ctx.arc(x, y, size * 0.3, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    ctx.fillStyle = 'rgba(255,255,255,0.9)';
+    ctx.font = '12px ui-monospace, SFMono-Regular, Menlo, monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText(String(payload.shaderName || 'shader graph'), x, y + size * 0.3 + 28);
+  }
+
+  function drawParticles(width, height) {
+    const system = payload.activeSystem || {};
+    const rate = Number(system.properties?.emissionRate || 80);
+    const count = Math.max(24, Math.min(180, Math.floor(rate)));
+    const cx = width * 0.5 + Number(system.x || 0);
+    const cy = height * 0.56 + Number(system.y || 0);
+    const speed = Number(system.properties?.speedMax || 140);
+    ctx.globalCompositeOperation = system.blendMode === 'add' ? 'lighter' : 'source-over';
+    for (let i = 0; i < count; i += 1) {
+      const p = (i / count + tick * 0.00008 * (speed / 120)) % 1;
+      const angle = i * 2.399 + tick * 0.001;
+      const spread = 26 + p * Math.min(220, speed);
+      const x = cx + Math.cos(angle) * spread * (0.25 + p);
+      const y = cy - p * 210 + Math.sin(angle * 1.7) * spread * 0.18;
+      const alpha = Math.max(0, 1 - p);
+      ctx.fillStyle = `rgba(255, ${Math.floor(140 + 90 * alpha)}, ${Math.floor(40 + 120 * p)}, ${alpha})`;
+      ctx.beginPath();
+      ctx.arc(x, y, 2 + 8 * alpha, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+
+  function draw() {
+    tick += 16;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = '#05070a';
+    ctx.fillRect(0, 0, width, height);
+    drawGrid(width, height);
+
+    if (payload.tool === 'particle-system-playground') drawParticles(width, height);
+    else drawShaderPreview(width, height);
+
+    ctx.fillStyle = 'rgba(215, 221, 232, 0.72)';
+    ctx.font = '11px Inter, ui-sans-serif, system-ui';
+    ctx.textAlign = 'left';
+    ctx.fillText('Feather standalone preview bridge', 12, 22);
+    requestAnimationFrame(draw);
+  }
+
+  window.addEventListener('resize', resize);
+  window.addEventListener('message', (event) => {
+    if (event.data?.source !== 'feather-showcase' || event.data?.type !== 'preview:update') return;
+    payload = event.data.payload || payload;
+  });
+
+  resize();
+  draw();
+})();
diff --git a/public/showcase-lovejs/style.css b/public/showcase-lovejs/style.css
new file mode 100644
index 00000000..3e72ea99
--- /dev/null
+++ b/public/showcase-lovejs/style.css
@@ -0,0 +1,18 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #05070a;
+  color: #d7dde8;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
diff --git a/railway.toml b/railway.toml
new file mode 100644
index 00000000..64afcdcc
--- /dev/null
+++ b/railway.toml
@@ -0,0 +1,8 @@
+[build]
+builder = "RAILPACK"
+buildCommand = "npm run showcase:build"
+
+[deploy]
+startCommand = "npm run showcase:start"
+healthcheckPath = "/"
+restartPolicyType = "ON_FAILURE"
diff --git a/scripts/build-showcase-love.mjs b/scripts/build-showcase-love.mjs
new file mode 100644
index 00000000..77c1cb76
--- /dev/null
+++ b/scripts/build-showcase-love.mjs
@@ -0,0 +1,40 @@
+import { copyFile, mkdir, readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { zipSync, strToU8 } from 'fflate';
+
+const root = process.cwd();
+const sourceDir = path.join(root, 'src-lua/example/showcase_preview');
+const outDir = path.join(root, 'dist-showcase/showcase-lovejs');
+
+const files = {
+  'main.lua': await readFile(path.join(sourceDir, 'main.lua'), 'utf8'),
+  'conf.lua': await readFile(path.join(sourceDir, 'conf.lua'), 'utf8'),
+};
+
+await mkdir(outDir, { recursive: true });
+await copyFile(path.join(root, 'dist-showcase/showcase.html'), path.join(root, 'dist-showcase/index.html'));
+await copyFile(path.join(root, 'dist-showcase/showcase.html'), path.join(root, 'dist-showcase/404.html'));
+await writeFile(
+  path.join(outDir, 'showcase.love'),
+  zipSync(
+    Object.fromEntries(Object.entries(files).map(([name, content]) => [name, strToU8(content)])),
+    { level: 9 },
+  ),
+);
+await writeFile(
+  path.join(outDir, 'README.md'),
+  [
+    '# Feather Showcase Static Build',
+    '',
+    'This branch contains generated static files for the Feather standalone showcase.',
+    '',
+    'The `./showcase-lovejs/` path is the isolated LÖVE preview boundary. When replacing the included bridge with the full 2dengine love.js player, serve this path with:',
+    '',
+    '- `Cross-Origin-Opener-Policy: same-origin`',
+    '- `Cross-Origin-Embedder-Policy: require-corp`',
+    "- `Content-Security-Policy: script-src 'self' 'unsafe-eval'` or an equivalent policy that allows love.js WASM startup.",
+    '',
+    'Sources: https://github.com/2dengine/love.js/ and https://2dengine.com/doc/lovejs.html',
+    '',
+  ].join('\n'),
+);
diff --git a/scripts/lua-e2e.mjs b/scripts/lua-e2e.mjs
index 6bebcec1..e4d5063c 100644
--- a/scripts/lua-e2e.mjs
+++ b/scripts/lua-e2e.mjs
@@ -29,6 +29,7 @@ if (!love) {
 
 const pluginSelector = process.argv[2];
 const args = [gamePath, '--e2e'];
+const timeoutMs = Number.parseInt(process.env.LUA_E2E_TIMEOUT_MS ?? '45000', 10);
 
 if (pluginSelector) {
   args.push(`--plugin-e2e=${pluginSelector}`);
@@ -52,7 +53,7 @@ const result = spawnSync(command, commandArgs, {
     FEATHER_GAME_PATH: gamePath,
   },
   encoding: 'utf8',
-  timeout: 15000,
+  timeout: Number.isFinite(timeoutMs) && timeoutMs > 0 ? timeoutMs : 45000,
 });
 
 const output = `${result.stdout ?? ''}${result.stderr ?? ''}`;
diff --git a/scripts/prepare-showcase-lovejs.mjs b/scripts/prepare-showcase-lovejs.mjs
new file mode 100644
index 00000000..e99fd217
--- /dev/null
+++ b/scripts/prepare-showcase-lovejs.mjs
@@ -0,0 +1,109 @@
+/* eslint-disable no-undef */
+import { spawnSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { cp, mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+const root = process.cwd();
+const outDir = path.join(root, 'dist-showcase/showcase-lovejs');
+const cacheDir = path.join(root, '.showcase-vendor/love.js');
+const repo = 'https://github.com/2dengine/love.js';
+
+const envVendor = process.env.SHOWCASE_LOVEJS_DIR ? path.resolve(root, process.env.SHOWCASE_LOVEJS_DIR) : undefined;
+
+const candidates = [envVendor, path.join(root, 'vendor/love.js'), cacheDir].filter(Boolean);
+
+let vendorDir = candidates.find((candidate) => isLoveJsVendor(candidate));
+
+if (!vendorDir && process.env.SHOWCASE_LOVEJS_SKIP_FETCH !== '1') {
+  await mkdir(path.dirname(cacheDir), { recursive: true });
+  if (!existsSync(cacheDir)) {
+    const result = spawnSync('git', ['clone', '--depth', '1', repo, cacheDir], {
+      cwd: root,
+      stdio: 'pipe',
+      encoding: 'utf8',
+    });
+    if (result.status !== 0) {
+      const detail = result.stderr.trim() || result.stdout.trim() || 'git clone failed';
+      console.warn(`[showcase] Could not fetch love.js automatically: ${detail}`);
+    }
+  }
+  if (isLoveJsVendor(cacheDir)) {
+    vendorDir = cacheDir;
+  }
+}
+
+if (!vendorDir) {
+  console.warn('[showcase] Real love.js player not found; keeping the bridge preview from public/showcase-lovejs/.');
+  console.warn(
+    '[showcase] Set SHOWCASE_LOVEJS_DIR=/path/to/love.js or run `feather build vendor add web --dir .` to use the real player.',
+  );
+  process.exit(0);
+}
+
+await rm(outDir, { recursive: true, force: true });
+await mkdir(path.dirname(outDir), { recursive: true });
+await cp(vendorDir, outDir, {
+  recursive: true,
+  dereference: true,
+  filter: (source) => !source.includes(`${path.sep}.git${path.sep}`) && !source.endsWith(`${path.sep}.git`),
+});
+await patchIndex(outDir);
+await patchPlayer(outDir);
+console.log(`[showcase] Copied love.js player from ${path.relative(root, vendorDir) || vendorDir}`);
+
+function isLoveJsVendor(dir) {
+  return (
+    Boolean(dir) &&
+    existsSync(path.join(dir, 'index.html')) &&
+    (existsSync(path.join(dir, 'player.js')) ||
+      existsSync(path.join(dir, 'player.min.js')) ||
+      existsSync(path.join(dir, 'love.js')))
+  );
+}
+
+async function patchPlayer(dir) {
+  const bridge = [
+    '',
+    '// Feather showcase bridge: store postMessage preview payload for love.js.eval() polling',
+    'window._featherPayload = null;',
+    'window.addEventListener(\'message\', function(e) {',
+    '  if (!e.data || e.data.source !== \'feather-showcase\' || e.data.type !== \'preview:update\') return;',
+    '  window._featherPayload = e.data.payload || null;',
+    '});',
+    '',
+  ].join('\n');
+  const candidates = ['player.min.js', 'player.js'].map((f) => path.join(dir, f));
+  const target = candidates.find((f) => existsSync(f));
+  if (!target) return;
+  const existing = await readFile(target, 'utf8');
+  if (existing.includes('_featherPayload')) return;
+  await writeFile(target, existing + bridge);
+}
+
+async function patchIndex(dir) {
+  const indexPath = path.join(dir, 'index.html');
+  const playerScript = existsSync(path.join(dir, 'player.min.js')) ? 'player.min.js' : 'player.js';
+  const fallback = [
+    '<!doctype html>',
+    '<html lang="en">',
+    '<head><meta charset="utf-8"><title>Feather love.js Preview</title></head>',
+    `<body><canvas id="canvas"></canvas><script src="./${playerScript}?g=showcase.love&v=11.5"></script></body>`,
+    '</html>',
+    '',
+  ].join('\n');
+
+  const existing = existsSync(indexPath) ? await readFile(indexPath, 'utf8') : fallback;
+  let next = existing
+    .replace(/<title>[\s\S]*?<\/title>/i, '<title>Feather love.js Preview</title>')
+    .replace(/<base\s+href=["'][^"']*["']\s*\/?>/i, '<base href="./">')
+    .replace(/player(?:\.min)?\.js(?:\?g=[^"']*)?/g, `${playerScript}?g=showcase.love&v=11.5`);
+
+  if (!/<title>/i.test(next)) {
+    next = next.replace(/<head[^>]*>/i, (match) => `${match}<title>Feather love.js Preview</title>`);
+  }
+  if (!/\?g=showcase\.love/.test(next)) {
+    next = next.replace('</body>', `<script src="./${playerScript}?g=showcase.love&v=11.5"></script></body>`);
+  }
+  await writeFile(indexPath, next);
+}
diff --git a/scripts/serve-showcase.mjs b/scripts/serve-showcase.mjs
new file mode 100644
index 00000000..41ce989d
--- /dev/null
+++ b/scripts/serve-showcase.mjs
@@ -0,0 +1,100 @@
+/* eslint-disable no-undef */
+import { createReadStream, existsSync } from 'node:fs';
+import { stat } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const publicDir = path.join(root, 'dist-showcase');
+const port = Number(process.env.PORT || 3000);
+const host = process.env.HOST || '0.0.0.0';
+
+const contentTypes = new Map([
+  ['.css', 'text/css; charset=utf-8'],
+  ['.gif', 'image/gif'],
+  ['.html', 'text/html; charset=utf-8'],
+  ['.ico', 'image/x-icon'],
+  ['.jpg', 'image/jpeg'],
+  ['.jpeg', 'image/jpeg'],
+  ['.js', 'text/javascript; charset=utf-8'],
+  ['.json', 'application/json; charset=utf-8'],
+  ['.love', 'application/octet-stream'],
+  ['.map', 'application/json; charset=utf-8'],
+  ['.png', 'image/png'],
+  ['.svg', 'image/svg+xml; charset=utf-8'],
+  ['.wasm', 'application/wasm'],
+  ['.webp', 'image/webp'],
+  ['.worker.js', 'text/javascript; charset=utf-8'],
+]);
+
+const sharedHeaders = {
+  'Cross-Origin-Opener-Policy': 'same-origin',
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  'Cross-Origin-Resource-Policy': 'same-origin',
+  'Content-Security-Policy':
+    "default-src 'self'; script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' blob: data:; worker-src 'self' blob:; child-src 'self' blob:; frame-src 'self' blob:; object-src 'none'; base-uri 'self'",
+};
+
+if (!existsSync(publicDir)) {
+  console.error('[showcase] dist-showcase does not exist. Run `npm run showcase:build` before starting the server.');
+  process.exit(1);
+}
+
+const server = createServer(async (request, response) => {
+  try {
+    const filePath = await resolvePath(request.url || '/');
+    const extension = path.extname(filePath);
+    const type = filePath.endsWith('.worker.js')
+      ? contentTypes.get('.worker.js')
+      : contentTypes.get(extension) || 'application/octet-stream';
+
+    response.writeHead(200, {
+      ...sharedHeaders,
+      'Content-Type': type,
+      'Cache-Control': extension === '.html' ? 'no-cache' : 'public, max-age=31536000, immutable',
+    });
+    createReadStream(filePath).pipe(response);
+  } catch (error) {
+    const status = error?.code === 'ENOENT' ? 404 : 500;
+    response.writeHead(status, {
+      ...sharedHeaders,
+      'Content-Type': 'text/plain; charset=utf-8',
+      'Cache-Control': 'no-cache',
+    });
+    response.end(status === 404 ? 'Not found\n' : 'Internal server error\n');
+  }
+});
+
+server.listen(port, host, () => {
+  console.log(`[showcase] Serving ${publicDir} on http://${host}:${port}`);
+});
+
+async function resolvePath(rawUrl) {
+  const pathname = new URL(rawUrl, 'http://localhost').pathname;
+  const decoded = decodeURIComponent(pathname);
+  const requested = decoded.endsWith('/') ? `${decoded}index.html` : decoded;
+  const candidate = path.resolve(publicDir, `.${requested}`);
+
+  if (!candidate.startsWith(`${publicDir}${path.sep}`) && candidate !== publicDir) {
+    const error = new Error('Path escapes public directory');
+    error.code = 'ENOENT';
+    throw error;
+  }
+
+  try {
+    const info = await stat(candidate);
+    if (info.isFile()) return candidate;
+  } catch {
+    // Fall through to SPA fallback.
+  }
+
+  if (!path.extname(candidate)) {
+    const fallback = path.join(publicDir, 'index.html');
+    if (existsSync(fallback)) return fallback;
+  }
+
+  const error = new Error('File not found');
+  error.code = 'ENOENT';
+  throw error;
+}
diff --git a/showcase.html b/showcase.html
new file mode 100644
index 00000000..eeed532c
--- /dev/null
+++ b/showcase.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Feather Showcase</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/showcase/main.tsx"></script>
+  </body>
+</html>
diff --git a/src-lua/conf.lua b/src-lua/conf.lua
index 71e3643f..df024124 100644
--- a/src-lua/conf.lua
+++ b/src-lua/conf.lua
@@ -22,4 +22,11 @@ function love.conf(t)
   t.window.width = 800
   t.window.height = 600
   t.console = false
+
+  for _, value in ipairs(arg or {}) do
+    if value == "--e2e" then
+      t.modules.audio = false
+      break
+    end
+  end
 end
diff --git a/src-lua/example/e2e/conf.lua b/src-lua/example/e2e/conf.lua
index e40a0e95..fd7b5859 100644
--- a/src-lua/example/e2e/conf.lua
+++ b/src-lua/example/e2e/conf.lua
@@ -3,4 +3,5 @@ function love.conf(t)
   t.window.width = 640
   t.window.height = 480
   t.console = false
+  t.modules.audio = false
 end
diff --git a/src-lua/example/showcase_preview/conf.lua b/src-lua/example/showcase_preview/conf.lua
new file mode 100644
index 00000000..94fcb24a
--- /dev/null
+++ b/src-lua/example/showcase_preview/conf.lua
@@ -0,0 +1,6 @@
+function love.conf(t)
+  t.identity = "feather_showcase_preview"
+  t.window.title = "Feather Showcase Preview"
+  t.window.width = 960
+  t.window.height = 540
+end
diff --git a/src-lua/example/showcase_preview/main.lua b/src-lua/example/showcase_preview/main.lua
new file mode 100644
index 00000000..03ca9b0d
--- /dev/null
+++ b/src-lua/example/showcase_preview/main.lua
@@ -0,0 +1,629 @@
+-- Standalone LÖVE preview target for the Feather showcase.
+-- Polls window._featherPayload (set by the postMessage bridge in player.js)
+-- via love.js.eval and renders live shader graph and particle system previews.
+
+pcall(require, "normalize1")
+pcall(require, "normalize2")
+
+local _loveJs = type(love) == "table" and rawget(love, "js") or nil
+local isLoveJs = type(_loveJs) == "table" and type(rawget(_loveJs, "eval")) == "function"
+local _jsEval = isLoveJs and _loveJs.eval or nil
+
+-- Base64 decoder
+
+local B64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+local B64_LUT = {}
+for i = 1, #B64_CHARS do
+  B64_LUT[B64_CHARS:sub(i, i)] = i - 1
+end
+
+local function decodeBase64(data)
+  data = tostring(data or ""):gsub("%s+", "")
+  local out = {}
+  local n = 1
+  for i = 1, #data, 4 do
+    local c1 = data:sub(i, i)
+    local c2 = data:sub(i + 1, i + 1)
+    local c3 = data:sub(i + 2, i + 2)
+    local c4 = data:sub(i + 3, i + 3)
+    local n1 = B64_LUT[c1]
+    local n2 = B64_LUT[c2]
+    local n3 = c3 ~= "=" and B64_LUT[c3] or nil
+    local n4 = c4 ~= "=" and B64_LUT[c4] or nil
+    if not n1 or not n2 then
+      break
+    end
+    out[n] = string.char(n1 * 4 + math.floor(n2 / 16))
+    n = n + 1
+    if n3 then
+      out[n] = string.char((n2 % 16) * 16 + math.floor(n3 / 4))
+      n = n + 1
+    end
+    if n3 and n4 then
+      out[n] = string.char((n3 % 4) * 64 + n4)
+      n = n + 1
+    end
+  end
+  return table.concat(out)
+end
+
+-- Minimal JSON parser
+
+local function parseJson(src)
+  local pos = 1
+  local function skip()
+    while pos <= #src and src:byte(pos) <= 32 do
+      pos = pos + 1
+    end
+  end
+  local parseValue
+  local function parseStr()
+    pos = pos + 1
+    local buf = {}
+    while pos <= #src do
+      local c = src:sub(pos, pos)
+      if c == '"' then
+        pos = pos + 1
+        break
+      elseif c == "\\" then
+        local e = src:sub(pos + 1, pos + 1)
+        if e == "n" then
+          buf[#buf + 1] = "\n"
+        elseif e == "t" then
+          buf[#buf + 1] = "\t"
+        elseif e == "r" then
+          buf[#buf + 1] = "\r"
+        elseif e == '"' then
+          buf[#buf + 1] = '"'
+        elseif e == "\\" then
+          buf[#buf + 1] = "\\"
+        elseif e == "/" then
+          buf[#buf + 1] = "/"
+        else
+          buf[#buf + 1] = e
+        end
+        pos = pos + 2
+      else
+        buf[#buf + 1] = c
+        pos = pos + 1
+      end
+    end
+    return table.concat(buf)
+  end
+  local function parseObj()
+    pos = pos + 1
+    skip()
+    local obj = {}
+    if src:sub(pos, pos) == "}" then
+      pos = pos + 1
+      return obj
+    end
+    while true do
+      skip()
+      local k = parseStr()
+      skip()
+      pos = pos + 1
+      skip()
+      obj[k] = parseValue()
+      skip()
+      if src:sub(pos, pos) == "}" then
+        pos = pos + 1
+        break
+      end
+      pos = pos + 1
+    end
+    return obj
+  end
+  local function parseArr()
+    pos = pos + 1
+    skip()
+    local arr = {}
+    if src:sub(pos, pos) == "]" then
+      pos = pos + 1
+      return arr
+    end
+    while true do
+      skip()
+      arr[#arr + 1] = parseValue()
+      skip()
+      if src:sub(pos, pos) == "]" then
+        pos = pos + 1
+        break
+      end
+      pos = pos + 1
+    end
+    return arr
+  end
+  parseValue = function()
+    skip()
+    local c = src:sub(pos, pos)
+    if c == '"' then
+      return parseStr()
+    elseif c == "{" then
+      return parseObj()
+    elseif c == "[" then
+      return parseArr()
+    elseif src:sub(pos, pos + 3) == "true" then
+      pos = pos + 4
+      return true
+    elseif src:sub(pos, pos + 4) == "false" then
+      pos = pos + 5
+      return false
+    elseif src:sub(pos, pos + 3) == "null" then
+      pos = pos + 4
+      return nil
+    else
+      local num, np = src:match("^(-?%d+%.?%d*[eE]?[+-]?%d*)()", pos)
+      if num then
+        pos = np
+        return tonumber(num)
+      end
+    end
+  end
+  local ok, v = pcall(parseValue)
+  return ok and v or nil
+end
+
+-- Utilities
+
+local function hexToRgba(hex)
+  hex = tostring(hex or ""):gsub("^#", "")
+  if #hex >= 6 then
+    return tonumber(hex:sub(1, 2), 16) / 255, tonumber(hex:sub(3, 4), 16) / 255, tonumber(hex:sub(5, 6), 16) / 255, 1
+  end
+  return 1, 1, 1, 1
+end
+
+local function parseCsvNumbers(s)
+  local vals = {}
+  for part in tostring(s or ""):gmatch("[^,]+") do
+    local n = tonumber(part)
+    if n then
+      vals[#vals + 1] = n
+    end
+  end
+  return vals
+end
+
+-- Grid
+
+local function drawGrid(w, h)
+  love.graphics.setColor(0.58, 0.64, 0.72, 0.12)
+  love.graphics.setLineWidth(1)
+  for x = 0, w, 32 do
+    love.graphics.line(x, 0, x, h)
+  end
+  for y = 0, h, 32 do
+    love.graphics.line(0, y, w, y)
+  end
+end
+
+-- Preset particle textures
+
+local TWO_PI = math.pi * 2
+local presetImageCache = {}
+
+local function generatePresetImage(name)
+  if presetImageCache[name] then
+    return presetImageCache[name]
+  end
+  local size = 64
+  local data = love.image.newImageData(size, size)
+  local cx, cy = (size - 1) / 2, (size - 1) / 2
+  local radius = size / 2 - 1
+  data:mapPixel(function(x, y)
+    local dx, dy = x - cx, y - cy
+    local dist = math.sqrt(dx * dx + dy * dy)
+    local angle = math.atan2(dy, dx)
+    local alpha
+    if name == "ring" then
+      alpha = (dist > radius * 0.62 and dist < radius * 0.9) and 1 or 0
+    elseif name == "light" then
+      local t = math.min(1, dist / radius)
+      alpha = (1 - t) * (1 - t)
+    elseif name == "star" then
+      local wave = (math.cos(angle * 5) + 1) / 2
+      local edge = radius * (0.48 + wave * 0.42)
+      alpha = dist <= edge and 1 or 0
+    elseif name == "spiral" then
+      local t = dist / radius
+      local target = t * TWO_PI * 2.6
+      local delta = math.abs(((angle - target + math.pi) % TWO_PI) - math.pi)
+      alpha = (delta < 0.2 and t < 0.96) and 1 or 0
+    else
+      alpha = dist <= radius and 1 or 0
+    end
+    return 1, 1, 1, math.max(0, math.min(1, alpha or 0))
+  end)
+  local img = love.graphics.newImage(data)
+  presetImageCache[name] = img
+  return img
+end
+
+-- Shader preview
+
+local shaderState = {
+  shader = nil,
+  drawable = nil,
+  shape = "circle",
+  name = "shader graph",
+}
+
+local function makePreviewCanvas(shape, r, g, b, a)
+  local size = 256
+  local canvas = love.graphics.newCanvas(size, size)
+  local prevCanvas = love.graphics.getCanvas()
+  local prevShader = love.graphics.getShader()
+  local prevBlend, prevAlpha = love.graphics.getBlendMode()
+  local pr, pg, pb, pa = love.graphics.getColor()
+  local prevLW = love.graphics.getLineWidth()
+
+  love.graphics.setCanvas(canvas)
+  love.graphics.origin()
+  love.graphics.clear(0, 0, 0, 0)
+  love.graphics.setShader()
+  love.graphics.setBlendMode("alpha")
+  love.graphics.setColor(r, g, b, a)
+
+  local pad = size * 0.22
+  if shape == "rectangle" then
+    love.graphics.rectangle("fill", pad, pad, size - pad * 2, size - pad * 2)
+  elseif shape == "line" then
+    love.graphics.setLineWidth(math.max(6, size * 0.12))
+    love.graphics.line(pad, size - pad, size - pad, pad)
+  else
+    love.graphics.circle("fill", size / 2, size / 2, size * 0.3)
+  end
+
+  love.graphics.setCanvas(prevCanvas)
+  love.graphics.setShader(prevShader)
+  love.graphics.setBlendMode(prevBlend, prevAlpha)
+  love.graphics.setColor(pr, pg, pb, pa)
+  love.graphics.setLineWidth(prevLW)
+  return canvas
+end
+
+local function applyShaderPayload(payload)
+  local pixel = tostring(payload.pixel or "")
+  local vertex = tostring(payload.vertex or "")
+  local shape = tostring(payload.previewShape or "circle")
+  local r, g, b, a = hexToRgba(payload.previewColor or "#ffffff")
+  local name = tostring(payload.shaderName or "shader graph")
+
+  local shader = nil
+  if pixel ~= "" then
+    if vertex ~= "" then
+      local ok, s = pcall(love.graphics.newShader, pixel .. "\n" .. vertex)
+      if ok then
+        shader = s
+      else
+        local ok2, s2 = pcall(love.graphics.newShader, pixel)
+        if ok2 then
+          shader = s2
+        end
+      end
+    else
+      local ok, s = pcall(love.graphics.newShader, pixel)
+      if ok then
+        shader = s
+      end
+    end
+  end
+
+  local drawable = nil
+  local bt = payload.baseTexture
+  if type(bt) == "table" and type(bt.dataBase64) == "string" and bt.dataBase64 ~= "" then
+    local raw = decodeBase64(bt.dataBase64)
+    if raw and raw ~= "" then
+      local fn = tostring(bt.filename or "preview-texture.png")
+      local okFd, fd = pcall(love.filesystem.newFileData, raw, fn)
+      if okFd and fd then
+        local okImg, img = pcall(love.graphics.newImage, fd)
+        if okImg and img then
+          pcall(img.setFilter, img, "nearest", "nearest")
+          drawable = img
+        end
+      end
+    end
+  end
+
+  if not drawable then
+    local ok, cv = pcall(makePreviewCanvas, shape, r, g, b, a)
+    if ok then
+      drawable = cv
+    end
+  end
+
+  shaderState.shader = shader
+  shaderState.drawable = drawable
+  shaderState.shape = shape
+  shaderState.name = name
+end
+
+local function drawShaderPreview(w, h)
+  local drawable = shaderState.drawable
+  local shader = shaderState.shader
+
+  if not drawable then
+    local r = math.min(w, h) * 0.22
+    local x, y = w * 0.5, h * 0.5
+    love.graphics.setColor(0.22, 0.74, 0.97, 1)
+    love.graphics.circle("fill", x, y, r)
+    love.graphics.setColor(0.49, 0.23, 0.93, 0.55)
+    love.graphics.circle("fill", x + r * 0.18, y + r * 0.12, r * 0.7)
+    love.graphics.setColor(1, 1, 1, 0.9)
+    love.graphics.printf(shaderState.name, x - r, y + r + 18, r * 2, "center")
+    return
+  end
+
+  local prevBlend, prevAlphaMode = love.graphics.getBlendMode()
+  local prevShader = love.graphics.getShader()
+  local pr, pg, pb, pa = love.graphics.getColor()
+  local prevLW = love.graphics.getLineWidth()
+
+  local previewSize = math.min(280, math.max(128, math.min(w, h) * 0.42))
+  local dw = drawable:getWidth()
+  local scale = previewSize / (dw > 0 and dw or 256)
+  local x = (w - previewSize) / 2
+  local y = (h - previewSize) / 2
+
+  love.graphics.push()
+  love.graphics.origin()
+  love.graphics.setShader()
+  love.graphics.setBlendMode("alpha")
+  love.graphics.setColor(0.04, 0.05, 0.07, 0.74)
+  love.graphics.rectangle("fill", x - 10, y - 10, previewSize + 20, previewSize + 42, 6, 6)
+  love.graphics.setColor(1, 1, 1, 0.22)
+  love.graphics.setLineWidth(1)
+  love.graphics.rectangle("line", x - 10, y - 10, previewSize + 20, previewSize + 42, 6, 6)
+
+  if shader then
+    if love.timer then
+      pcall(shader.send, shader, "u_time", love.timer.getTime())
+    end
+    love.graphics.setShader(shader)
+  end
+  love.graphics.setColor(1, 1, 1, 1)
+  love.graphics.draw(drawable, x, y, 0, scale, scale)
+
+  love.graphics.setShader()
+  love.graphics.setColor(1, 1, 1, 0.72)
+  love.graphics.print("Shader Preview: " .. shaderState.shape, x - 4, y + previewSize + 12)
+
+  love.graphics.setBlendMode(prevBlend, prevAlphaMode)
+  love.graphics.setShader(prevShader)
+  love.graphics.setColor(pr, pg, pb, pa)
+  love.graphics.setLineWidth(prevLW)
+  love.graphics.pop()
+end
+
+-- Particle system preview
+
+local particleState = {
+  systems = {},
+}
+
+local function applySystemProperties(ps, props)
+  pcall(ps.setEmissionRate, ps, tonumber(props.emissionRate) or 100)
+  pcall(ps.setEmitterLifetime, ps, tonumber(props.emitterLifetime) or -1)
+  pcall(
+    ps.setParticleLifetime,
+    ps,
+    tonumber(props.particleLifetimeMin) or 0.35,
+    tonumber(props.particleLifetimeMax) or 1.3
+  )
+  pcall(ps.setDirection, ps, tonumber(props.direction) or (-math.pi / 2))
+  pcall(ps.setSpread, ps, tonumber(props.spread) or (math.pi / 3))
+  pcall(ps.setSpeed, ps, tonumber(props.speedMin) or 40, tonumber(props.speedMax) or 140)
+  pcall(
+    ps.setLinearAcceleration,
+    ps,
+    tonumber(props.linearAccelXMin) or 0,
+    tonumber(props.linearAccelYMin) or 0,
+    tonumber(props.linearAccelXMax) or 0,
+    tonumber(props.linearAccelYMax) or 0
+  )
+  pcall(ps.setRadialAcceleration, ps, tonumber(props.radialAccelMin) or 0, tonumber(props.radialAccelMax) or 0)
+  pcall(
+    ps.setTangentialAcceleration,
+    ps,
+    tonumber(props.tangentialAccelMin) or 0,
+    tonumber(props.tangentialAccelMax) or 0
+  )
+  pcall(ps.setLinearDamping, ps, tonumber(props.linearDampingMin) or 0, tonumber(props.linearDampingMax) or 0)
+  pcall(ps.setSizeVariation, ps, tonumber(props.sizeVariation) or 0)
+  pcall(ps.setRotation, ps, tonumber(props.rotationMin) or 0, tonumber(props.rotationMax) or 0)
+  pcall(ps.setRelativeRotation, ps, props.relativeRotation == true)
+  pcall(ps.setSpin, ps, tonumber(props.spinMin) or 0, tonumber(props.spinMax) or 0)
+  pcall(ps.setSpinVariation, ps, tonumber(props.spinVariation) or 0)
+  pcall(ps.setOffset, ps, tonumber(props.offsetX) or 0, tonumber(props.offsetY) or 0)
+  pcall(ps.setInsertMode, ps, tostring(props.insertMode or "top"))
+
+  local sizes = parseCsvNumbers(props.sizes)
+  if #sizes > 0 then
+    pcall(ps.setSizes, ps, unpack(sizes))
+  end
+
+  local colors = parseCsvNumbers(props.colors)
+  if #colors >= 4 then
+    pcall(ps.setColors, ps, unpack(colors))
+  end
+
+  local emDist = tostring(props.emissionAreaDist or "none")
+  if emDist ~= "none" and emDist ~= "" then
+    pcall(
+      ps.setEmissionArea,
+      ps,
+      emDist,
+      tonumber(props.emissionAreaDx) or 0,
+      tonumber(props.emissionAreaDy) or 0,
+      tonumber(props.emissionAreaAngle) or 0,
+      props.emissionAreaRelative == true
+    )
+  end
+end
+
+local function applyParticlePayload(payload)
+  for _, entry in ipairs(particleState.systems) do
+    if entry.ps then
+      pcall(entry.ps.release, entry.ps)
+    end
+  end
+  particleState.systems = {}
+
+  local composite = payload.composite
+  if type(composite) ~= "table" then
+    return
+  end
+
+  local systems = composite.systems
+  if type(systems) ~= "table" then
+    return
+  end
+
+  for _, sysData in ipairs(systems) do
+    if type(sysData) == "table" then
+      local preset = tostring(sysData.texturePreset or "circle")
+      local ok0, img = pcall(generatePresetImage, preset)
+      if not ok0 or not img then
+        ok0, img = pcall(generatePresetImage, "circle")
+      end
+      if ok0 and img then
+        local bufSize = math.max(
+          100,
+          math.min(
+            5000,
+            tonumber((type(sysData.properties) == "table" and sysData.properties.bufferSize) or 1000) or 1000
+          )
+        )
+        local okPs, ps = pcall(love.graphics.newParticleSystem, img, bufSize)
+        if okPs and ps then
+          if type(sysData.properties) == "table" then
+            pcall(applySystemProperties, ps, sysData.properties)
+          end
+          pcall(ps.start, ps)
+          local emitAtStart = tonumber(sysData.emitAtStart) or 0
+          if emitAtStart > 0 then
+            pcall(ps.emit, ps, emitAtStart)
+          end
+          particleState.systems[#particleState.systems + 1] = {
+            ps = ps,
+            blendMode = tostring(sysData.blendMode or "alpha"),
+            x = tonumber(sysData.x) or 0,
+            y = tonumber(sysData.y) or 0,
+          }
+        end
+      end
+    end
+  end
+end
+
+local function drawParticlePreview(w, h)
+  local cx = w * 0.5
+  local cy = h * 0.56
+
+  if #particleState.systems == 0 then
+    love.graphics.setColor(1, 0.45 + 0.35, 0.12, 0.6)
+    local r = math.min(w, h) * 0.04
+    for i = 1, 24 do
+      local angle = i * 2.399
+      local spread = 30 + r * 2
+      local px = cx + math.cos(angle) * spread
+      local py = cy - spread * 0.5 + math.sin(angle * 1.7) * spread * 0.18
+      love.graphics.circle("fill", px, py, r)
+    end
+    return
+  end
+
+  local prevBlend, prevAlphaMode = love.graphics.getBlendMode()
+  local pr, pg, pb, pa = love.graphics.getColor()
+
+  for _, entry in ipairs(particleState.systems) do
+    if entry.ps then
+      if entry.blendMode == "add" then
+        love.graphics.setBlendMode("add")
+      else
+        love.graphics.setBlendMode("alpha")
+      end
+      love.graphics.setColor(1, 1, 1, 1)
+      love.graphics.draw(entry.ps, cx + entry.x, cy + entry.y)
+    end
+  end
+
+  love.graphics.setBlendMode(prevBlend, prevAlphaMode)
+  love.graphics.setColor(pr, pg, pb, pa)
+end
+
+-- Payload polling
+
+local pollState = {
+  tool = "idle",
+  time = 0,
+  pollTimer = 0,
+  lastPayloadJson = "",
+}
+
+local function pollPayload()
+  if not _jsEval then
+    return
+  end
+  local ok, json = pcall(_jsEval, "JSON.stringify(window._featherPayload || null)")
+  if not ok or not json or json == "" or json == "null" then
+    return
+  end
+  if json == pollState.lastPayloadJson then
+    return
+  end
+  pollState.lastPayloadJson = json
+
+  local payload = parseJson(json)
+  if type(payload) ~= "table" then
+    return
+  end
+
+  local tool = tostring(payload.tool or "idle")
+  pollState.tool = tool
+  if tool == "shader-graph" then
+    pcall(applyShaderPayload, payload)
+  elseif tool == "particle-system-playground" then
+    pcall(applyParticlePayload, payload)
+  end
+end
+
+-- love callbacks
+
+---@diagnostic disable-next-line: duplicate-set-field
+function love.update(dt)
+  pollState.time = pollState.time + dt
+  pollState.pollTimer = pollState.pollTimer + dt
+  if pollState.pollTimer >= 0.12 then
+    pollState.pollTimer = 0
+    pollPayload()
+  end
+  for _, entry in ipairs(particleState.systems) do
+    if entry.ps then
+      pcall(entry.ps.update, entry.ps, dt)
+    end
+  end
+end
+
+---@diagnostic disable-next-line: duplicate-set-field
+function love.draw()
+  local w, h = love.graphics.getDimensions()
+  love.graphics.clear(0.02, 0.03, 0.05, 1)
+  drawGrid(w, h)
+
+  if pollState.tool == "particle-system-playground" then
+    drawParticlePreview(w, h)
+  elseif pollState.tool == "shader-graph" then
+    drawShaderPreview(w, h)
+  else
+    love.graphics.setColor(0.84, 0.87, 0.91, 0.35)
+    local r = math.min(w, h) * 0.22
+    love.graphics.setLineWidth(1)
+    love.graphics.circle("line", w * 0.5, h * 0.5, r)
+  end
+
+  love.graphics.setColor(0.84, 0.87, 0.91, 0.72)
+  love.graphics.print("Feather standalone preview target", 12, 12)
+end
diff --git a/src-lua/plugins/audio-debug/init.lua b/src-lua/plugins/audio-debug/init.lua
index 40a0be7e..0c7d404a 100644
--- a/src-lua/plugins/audio-debug/init.lua
+++ b/src-lua/plugins/audio-debug/init.lua
@@ -27,9 +27,9 @@ local AudioDebugPlugin = Class({
     self._hooked = false
     self._origNewSource = nil
     self.showStopped = self.options.showStopped ~= false
-    self.masterVolume = love.audio.getVolume()
+    self.masterVolume = love.audio and love.audio.getVolume() or 1
 
-    if self.options.autoHook ~= false then
+    if love.audio and self.options.autoHook ~= false then
       self:hookNewSource()
     end
   end,
@@ -37,7 +37,7 @@ local AudioDebugPlugin = Class({
 
 --- Hook love.audio.newSource to automatically track all created sources.
 function AudioDebugPlugin:hookNewSource()
-  if self._hooked then
+  if self._hooked or not love.audio then
     return
   end
   self._origNewSource = love.audio.newSource
@@ -55,7 +55,7 @@ function AudioDebugPlugin:unhookNewSource()
   if not self._hooked then
     return
   end
-  if self._origNewSource then
+  if self._origNewSource and love.audio then
     love.audio.newSource = self._origNewSource
     self._origNewSource = nil
   end
@@ -147,6 +147,10 @@ function AudioDebugPlugin:handleRequest()
 end
 
 function AudioDebugPlugin:handleActionRequest(request)
+  if not love.audio then
+    return nil, "love.audio is not available"
+  end
+
   local action = request.params and request.params.action
   if action == "stop-all" then
     love.audio.stop()
@@ -160,7 +164,7 @@ end
 
 function AudioDebugPlugin:handleParamsUpdate(request)
   local params = request.params or {}
-  if params.masterVolume ~= nil then
+  if params.masterVolume ~= nil and love.audio then
     local v = tonumber(params.masterVolume)
     if v then
       v = math.max(0, math.min(1, v))
@@ -175,11 +179,15 @@ function AudioDebugPlugin:handleParamsUpdate(request)
 end
 
 function AudioDebugPlugin:getConfig()
-  local activeCount = love.audio.getActiveSourceCount()
-  local lx, ly, lz = love.audio.getPosition()
-  local distModel = love.audio.getDistanceModel()
-  local dopplerScale = love.audio.getDopplerScale()
-  local effectsSupported = love.audio.isEffectsSupported()
+  local audioAvailable = love.audio ~= nil
+  local activeCount = audioAvailable and love.audio.getActiveSourceCount() or 0
+  local lx, ly, lz = 0, 0, 0
+  if audioAvailable then
+    lx, ly, lz = love.audio.getPosition()
+  end
+  local distModel = audioAvailable and love.audio.getDistanceModel() or "unavailable"
+  local dopplerScale = audioAvailable and love.audio.getDopplerScale() or 0
+  local effectsSupported = audioAvailable and love.audio.isEffectsSupported() or false
   local maxSceneEffects = 0
   local maxSourceEffects = 0
   if effectsSupported then
@@ -260,8 +268,8 @@ function AudioDebugPlugin:getConfig()
         key = "masterVolume",
         icon = "volume-2",
         type = "input",
-        value = string.format("%.2f", love.audio.getVolume()),
-        props = { type = "number", min = 0, max = 1, step = 0.05 },
+        value = string.format("%.2f", audioAvailable and love.audio.getVolume() or self.masterVolume),
+        props = { type = "number", min = 0, max = 1, step = 0.05, disabled = not audioAvailable },
         group = "Settings",
       },
 
diff --git a/src-lua/plugins/particle-system-playground/init.lua b/src-lua/plugins/particle-system-playground/init.lua
index d5d9852a..a21c3314 100644
--- a/src-lua/plugins/particle-system-playground/init.lua
+++ b/src-lua/plugins/particle-system-playground/init.lua
@@ -817,6 +817,7 @@ local function createDefaultSystem(index, template)
     title = "Emitter " .. tostring(index),
     blendMode = "alpha",
     shader = nil,
+    shaderTextures = {},
     shaderPath = "",
     shaderFilename = "",
     shaderSource = "",
@@ -1065,6 +1066,11 @@ function ParticleSystemPlaygroundPlugin:onDraw()
           pcall(love.graphics.setBlendMode, system.blendMode or "alpha")
           if system.shader and system.shader.send and love.timer then
             pcall(system.shader.send, system.shader, "u_time", love.timer.getTime())
+            if type(system.shaderTextures) == "table" then
+              for uniform, image in pairs(system.shaderTextures) do
+                pcall(system.shader.send, system.shader, uniform, image)
+              end
+            end
           end
           love.graphics.setShader(system.shader)
           love.graphics.setColor(1, 1, 1, 1)
@@ -1341,7 +1347,63 @@ function ParticleSystemPlaygroundPlugin:_applyShader(name, index, params)
     return nil, tostring(shader)
   end
 
+  local shaderTextures = {}
+  if type(params.textures) == "table" then
+    for _, texture in ipairs(params.textures) do
+      if type(texture) == "table" then
+        local uniform = safeString(texture.uniform, "")
+        local dataBase64 = safeString(texture.dataBase64, "")
+        if uniform ~= "" and dataBase64 ~= "" then
+          local raw = decodeBase64(dataBase64)
+          if not raw then
+            return nil, "Shader texture data is not valid base64"
+          end
+          local texFilename = sanitizeFilename(texture.filename, uniform .. ".png")
+          local okData, fileData = pcall(love.filesystem.newFileData, raw, texFilename)
+          if not okData or not fileData then
+            return nil, "Could not create shader texture file data"
+          end
+          local okImage, image = pcall(love.graphics.newImage, fileData)
+          if not okImage or not image then
+            return nil, "Could not create shader texture image"
+          end
+          pcall(image.setFilter, image, "nearest", "nearest")
+          shaderTextures[uniform] = image
+          pcall(shader.send, shader, uniform, image)
+        end
+      end
+    end
+  end
+
+  if type(params.parameters) == "table" then
+    for _, parameter in ipairs(params.parameters) do
+      if type(parameter) == "table" then
+        local uniform = safeString(parameter.uniform, "")
+        local parameterType = safeString(parameter.type, "")
+        local value = parameter.defaultValue
+        if uniform ~= "" and parameterType ~= "texture" then
+          if parameterType == "boolean" then
+            value = value and tonumber(value) ~= 0 and 1 or 0
+          elseif parameterType == "float" then
+            value = tonumber(value) or 0
+          elseif parameterType == "vec2" then
+            value = type(value) == "table" and value or {}
+            value = { tonumber(value[1]) or 0, tonumber(value[2]) or 0 }
+          elseif parameterType == "vec3" then
+            value = type(value) == "table" and value or {}
+            value = { tonumber(value[1]) or 0, tonumber(value[2]) or 0, tonumber(value[3]) or 0 }
+          elseif parameterType == "vec4" or parameterType == "color" then
+            value = type(value) == "table" and value or {}
+            value = { tonumber(value[1]) or 0, tonumber(value[2]) or 0, tonumber(value[3]) or 0, tonumber(value[4]) or 1 }
+          end
+          pcall(shader.send, shader, uniform, value)
+        end
+      end
+    end
+  end
+
   sys.shader = shader
+  sys.shaderTextures = shaderTextures
   sys.shaderPath = path
   sys.shaderFilename = filename
   sys.shaderSource = source
@@ -1413,6 +1475,20 @@ function ParticleSystemPlaygroundPlugin:handleActionRequest(request)
     return true
   end
 
+  if action == "reorder-system" then
+    if entry.kind ~= "scratch" then
+      return nil, "Only scratch composites can be reordered"
+    end
+    local fromIdx = math.max(1, safeNumber(params.fromIndex, 0))
+    local toIdx   = math.max(1, safeNumber(params.toIndex,   0))
+    if fromIdx == toIdx or fromIdx < 1 or toIdx < 1 or fromIdx > #entry.systems or toIdx > #entry.systems then
+      return true
+    end
+    local moved = table.remove(entry.systems, fromIdx)
+    table.insert(entry.systems, toIdx, moved)
+    return true
+  end
+
   if action == "set-texture" then
     return self:_applyTexture(name, index, params)
   end
diff --git a/src-lua/plugins/shader-graph/README.md b/src-lua/plugins/shader-graph/README.md
index 9f09c0d4..5c07d964 100644
--- a/src-lua/plugins/shader-graph/README.md
+++ b/src-lua/plugins/shader-graph/README.md
@@ -6,7 +6,7 @@ The desktop editor owns the graph UI and GLSL code generation. This runtime plug
 
 The node library is inspired by common visual shader graph systems, including Unity Shader Graph's category model: Artistic, Channel, Input, Math, Procedural, Utility, and UV. Feather's implementation is intentionally smaller and LÖVE-focused.
 
-Several higher-level nodes and presets are also inspired by common VFX Shader Graph recipes, including texture strength, opacity, dissolve masks, and vertex displacement. The water displacement nodes are inspired by Alex Griffith's LÖVE shader write-up, adapted to use procedural noise so Feather graphs stay self-contained. Unity-specific camera depth effects are not copied directly because LÖVE 2D shaders do not expose Unity's scene depth buffer in the same way.
+Several higher-level nodes and presets are also inspired by common VFX Shader Graph recipes, including texture strength, opacity, dissolve masks, water displacement, and vertex displacement. Feather includes both a self-contained procedural water preset and a texture-noise water preset that uses an uploaded color noise texture. Unity-specific camera depth effects are not copied directly because LÖVE 2D shaders do not expose Unity's scene depth buffer in the same way.
 
 ## Workflow
 
@@ -15,27 +15,52 @@ Several higher-level nodes and presets are also inspired by common VFX Shader Gr
 3. Drag nodes from the palette onto the canvas.
 4. Connect compatible ports by type.
 5. Connect the final `vec4` color into **Fragment Output**.
-6. Use **Validate** to compile in the running LÖVE game.
-7. Use **Apply** to send the generated shader to the selected Particle System Playground emitter.
-8. Export/import `.feathershgh` files when you want to save or share editable graph projects.
+6. Use **Custom Function** when a graph needs a small hand-written GLSL function. Function parameters become input ports; the return value and `out` parameters become output ports.
+7. Use **Validate** to compile in the running LÖVE game.
+8. Toggle **Preview On** to draw the shader on a temporary circle, line, or rectangle in the center of the running game when you are not ready to apply it to particles. Upload a preview texture when the shader should run against a real sprite instead of a generated shape. While preview is enabled, graph edits, shape changes, preview color changes, and uploaded texture changes re-apply automatically.
+9. Use **Apply** to send the generated shader to the selected Particle System Playground emitter.
+10. Export/import `.feathershgh` files when you want to save or share editable graph projects.
 
 Select a node and edit **Node Name** in the inspector when a graph needs more descriptive labels. Renaming a node changes the canvas label only; the original node type stays visible in the inspector and code generation is unchanged.
 
 ## Node Types
 
+### Custom
+
+Use **Custom Function** for small GLSL snippets that are easier to express as code than as node chains.
+
+```glsl
+vec4 custom_tint(vec4 color, float strength) {
+  return vec4(color.rgb * strength, color.a);
+}
+```
+
+The editor parses the function signature in the node modal. Regular parameters become inputs, a non-`void` return value becomes a `Result` output, and `out` parameters become additional outputs:
+
+```glsl
+void custom_mask(vec2 uv, out float mask, out vec4 color) {
+  mask = smoothstep(0.45, 0.5, length(uv - vec2(0.5)));
+  color = vec4(vec3(mask), 1.0);
+}
+```
+
+Keep custom functions self-contained and pass values in through ports. The node validates the signature and braces before saving, then the final shader should still be compiled with **Validate** against the connected LÖVE runtime.
+
 ### Input
 
 Use input nodes as the raw data source for a shader.
 
-| Node | Output | Use |
-|---|---|---|
-| Texture Color | `vec4` | Current texture sample: `Texel(tex, texture_coords)` |
-| Texture Coords | `vec2` | UV coordinates, usually the starting point for distortion effects |
-| Screen Coords | `vec2` | Pixel/screen position, useful for screen-space patterns |
-| Vertex Color | `vec4` | LÖVE color/tint passed into the shader |
-| Time | `float` | Animated effects; emits `extern number u_time` |
-| Resolution | `vec2` | Uses `love_ScreenSize.xy` |
-| Float / Vec2 / Vec3 / Vec4 | typed constants | Editable values for colors, thresholds, speed, etc. |
+| Node                       | Output          | Use                                                                                      |
+| -------------------------- | --------------- | ---------------------------------------------------------------------------------------- |
+| Texture Color              | `vec4`          | Current texture sample: `Texel(tex, texture_coords)`                                     |
+| Texture Input              | `Image`         | Uploaded auxiliary texture uniform; add one node per extra texture                       |
+| Texture Uniform Color      | `vec4`          | Compatibility helper that samples an uploaded auxiliary `Image` uniform at a supplied UV |
+| Texture Coords             | `vec2`          | UV coordinates, usually the starting point for distortion effects                        |
+| Screen Coords              | `vec2`          | Pixel/screen position, useful for screen-space patterns                                  |
+| Vertex Color               | `vec4`          | LÖVE color/tint passed into the shader                                                   |
+| Time                       | `float`         | Animated effects; emits `extern highp number u_time`                                     |
+| Resolution                 | `vec2`          | Uses `love_ScreenSize.xy`                                                                |
+| Float / Vec2 / Vec3 / Vec4 | typed constants | Editable values for colors, thresholds, speed, etc.                                      |
 
 ### Math
 
@@ -51,6 +76,49 @@ Math nodes shape scalar values. They are most useful for masks, thresholds, anim
 - `Min`, `Max`, `Modulo`, `Negate`, `Saturate`: scalar shaping and bounds.
 - `Remap`: convert one scalar range into another, useful for mask tuning.
 
+### Complex
+
+Complex nodes treat a `vec2` as a complex number, where `x` is the real component and `y` is the imaginary component. They are useful for procedural UV warps, conformal-style transforms, spirals, inversions, and math-driven pattern generation.
+
+- `Complex Conjugate`: outputs `(x, -y)`.
+- `Complex Reciprocal`: outputs `1 / A`.
+- `Complex Multiply`: multiplies two complex values.
+- `Complex Divide`: divides one complex value by another.
+- `Complex Exp`: complex exponential.
+- `Complex Log`: complex logarithm.
+- `Complex Power`: raises one complex value to another.
+
+### Quaternion
+
+Quaternion nodes treat a `vec4` as a quaternion, where `xyz` is the vector component and `w` is the scalar component. They are useful for building orientation math, rotating 3D vectors, and driving procedural 2D UV rotation through a Z-axis quaternion.
+
+- `Quaternion Inverse`: inverse/conjugate for undoing a rotation.
+- `Quaternion From Euler`: builds a quaternion from Euler angles in degrees.
+- `Quaternion From Angle Axis`: builds a quaternion from an angle in degrees and an axis vector.
+- `Quaternion To Angle Axis`: extracts angle and axis values from a quaternion.
+- `Quaternion From To Rotation`: builds the rotation from one direction vector to another.
+- `Quaternion Multiply`: combines two quaternion rotations.
+- `Quaternion Rotate Vector`: rotates a `vec3` by a quaternion.
+- `Quaternion Slerp`: spherical interpolation between two quaternions.
+
+### Symmetry
+
+Symmetry nodes fold or tile UV coordinates before sampling. They are useful for kaleidoscope effects, mirrored sprites, repeating motifs, procedural tiles, and compact pattern authoring.
+
+- `Reflection Symmetry`: mirrors UVs across a line defined by position and direction, with optional glide offset.
+- `Rotation Symmetry`: folds UVs into radial sectors around a position. `Order` controls the number of repeated sectors.
+- `Tiling Symmetry`: maps UVs into local tile coordinates and also outputs cell index and cell position. `Mode` is stepped from `0` to `3`: `0` Square, `1` Hexagon, `2` Triangle, `3` Herringbone.
+
+### Random
+
+Random nodes generate deterministic pseudo-random values from a `vec2` seed. They are useful when combined with tile indices, screen positions, UV cells, or other stable values.
+
+- `Random Integer Range`: deterministic integer-like float between `Min` and `Max`.
+- `Random Circle`: random point inside or on a unit circle. `Mode` is stepped from `0` to `1`: `0` In, `1` On.
+- `Random Sphere`: random point inside or on a unit sphere. `Mode` is stepped from `0` to `1`: `0` In, `1` On.
+- `Random Rotation`: random quaternion rotation.
+- `Random Color`: random HSV color within editable min/max HSV ranges; outputs both RGB and HSV.
+
 ### Vector
 
 Vector nodes convert between packed colors/vectors and scalar channels.
@@ -63,6 +131,8 @@ Vector nodes convert between packed colors/vectors and scalar channels.
 - `Swizzle Vec2`: get `xy` and `yx` variants.
 - `Normalize`, `Length`, `Dot`: `vec4` RGB utility operations.
 - `Distance Vec2`, `Length Vec2`, `Normalize Vec2`, `Dot Vec2`: UV/vector math for 2D masks.
+- `Add`, `Subtract`, `Multiply`, and `Divide` variants for `vec2`, `vec3`, and `vec4`: component-wise vector math.
+- `Scale Vec2`, `Scale Vec3`, `Scale Vec4`: multiply a vector by a scalar.
 
 ### Color
 
@@ -75,16 +145,59 @@ Color nodes transform an existing `vec4`.
 - `Contrast`: adjust contrast around 0.5.
 - `Posterize`: reduce colors to a fixed number of bands.
 - `Multiply Color`: multiply two `vec4` values.
+- `Lab Convert`: converts a `vec4` between RGB, Lab, and LCH. `From` and `To` use `0` RGB, `1` Lab, `2` LCH.
+- `Lab Complementary`: returns the perceptual complementary color by flipping the Lab `a` and `b` axes.
+- `Lab Split Scheme`: outputs two colors offset around the LCH hue circle by an editable angle.
+- `Lab Dual Scheme`: outputs a rectangle/tetradic color scheme from the source color and angle.
+
+### Composite
+
+Composite nodes combine two straight-alpha `vec4` colors using Porter-Duff alpha compositing equations.
+
+- `Composite`: combines color `A` and color `B`. `Mode` is stepped from `0` to `4`: `0` Over, `1` In, `2` Out, `3` Atop, `4` Xor.
 
 ### Noise
 
 Noise nodes create procedural variation.
 
 - `Simple Noise`: deterministic hash noise from UV.
+- `Truchet Tiles`: procedural Truchet tiling with square, triangle, and hex layout modes; supports randomized rotation, reflection, and optional time-based scrolling; outputs tile UV, tile index, and a line mask.
 - `Ripple`: UV distortion using sine waves.
 - `Voronoi Cells`: cellular mask for sparks, shields, energy, and organic breakup.
 - `Checkerboard`: alternating square mask.
 
+### Pattern
+
+Pattern nodes create anti-aliased geometric masks from UVs.
+
+- `Zig Zag`: stripe mask bent into triangular zig zags.
+- `Sine Waves`: stripe mask following sine waves.
+- `Round Waves`: stripe mask made from arc segments.
+- `Dots`: repeating dot grid with row offset and radius controls.
+- `Spiral`: Archimedean spiral mask.
+- `Whirl`: radial stripe mask twisted around the center.
+
+### Halftone
+
+Halftone nodes create print-style dot patterns from grayscale or RGB input.
+
+- `Halftone Mono`: converts a scalar base value into a halftone mask.
+- `Halftone Color`: applies separate red, green, and blue halftone screens. `Mode` is stepped from `0` to `2`: `0` Circle, `1` Smooth, `2` Square.
+  `Scale` controls dot density: higher values make smaller, denser dots; lower values make larger, more separated dots.
+
+### Pixel Perfect
+
+Pixel Perfect nodes create derivative-based one-pixel primitive masks. They are useful for crisp procedural guides, outlines, reticles, scan marks, debug overlays, and pixel-art effects. Use `Pixelate` when you want chunky texture sampling; use these nodes when you want exact single-pixel marks.
+
+- `Pixel Point`: one-pixel mask at a UV position.
+- `Pixel Point Grid`: repeating one-pixel point grid.
+- `Pixel Ray`: one-pixel infinite ray.
+- `Pixel Rays`: repeated parallel one-pixel rays.
+- `Pixel Line`: one-pixel line segment between two UV points.
+- `Pixel Lines`: repeated one-pixel line segments.
+- `Pixel Circle`: one-pixel circular outline.
+- `Pixel Polygon`: one-pixel regular polygon outline.
+
 ### UV
 
 UV nodes transform texture coordinates before sampling.
@@ -94,26 +207,51 @@ UV nodes transform texture coordinates before sampling.
 - `Twirl UV`: swirl UVs toward the center.
 - `Polar Coordinates`: convert UVs into radius/angle space.
 
+### SDF
+
+Signed distance field nodes create crisp procedural shape masks from UVs. Feather's SDF set follows the common primitive/sample/boolean structure used by Shader Graph SDF node collections.
+
+**Primitives**
+
+- `SDF Line`: vertical line mask with position and width controls.
+- `SDF Circle`: circle centered at a position with a radius.
+- `SDF Rectangle`: rectangle centered at a position with width, height, and corner radius.
+- `SDF Polygon`: regular polygon with position, radius, side count, and corner radius.
+
+**Sampling**
+
+- `SDF Sample`: converts an SDF value into an anti-aliased filled mask.
+- `SDF Sample Strip`: converts a distance range into an anti-aliased outline/ring mask.
+
+**Booleans**
+
+- `SDF Boolean`: outputs hard union, intersection, and difference.
+- `SDF Soft Boolean`: outputs smoothed union, intersection, and difference with a smoothing control.
+
+SDF primitives include centered defaults, so a newly dropped circle, rectangle, polygon, or sampled strip produces a visible shape before every input is wired manually.
+
 ### Effect
 
 Effect nodes are higher-level building blocks for common 2D game shaders.
 
-| Node | Use |
-|---|---|
-| Sample Texture | Samples the texture at a supplied UV, useful after UV distortion |
-| Texture Strength | Sharpens texture alpha and boosts color intensity, useful for cracks, glows, and impact marks |
-| Opacity | Multiplies texture alpha by a scalar fade value |
-| Centered UV | Converts UV into `uv - 0.5` and distance from center |
-| Fresnel / Rim 2D | Radial edge mask for glow/rim effects on sprites and particles |
-| Alpha Outline | Samples neighboring alpha to create sprite outlines |
-| Wave Distort | Animated UV wave for water, heat, magic, flags |
-| Water Displace | Procedural animated noise displacement for water, heat shimmer, and magic surfaces |
-| Masked Water | Water displacement constrained by texture alpha, useful when only opaque regions should move |
-| Dissolve | Noise threshold dissolve with a colored edge |
-| Hit Flash | Mixes texture color toward a flash color |
-| Vignette | Darkens or fades toward UV edges |
-| Pixelate | Snaps UVs to a lower-resolution grid |
-| Chromatic Aberration | Splits red/blue samples away from center |
+| Node                 | Use                                                                                                    |
+| -------------------- | ------------------------------------------------------------------------------------------------------ |
+| Sample Texture       | Samples the texture at a supplied UV, useful after UV distortion                                       |
+| Texture Strength     | Sharpens texture alpha and boosts color intensity, useful for cracks, glows, and impact marks          |
+| Opacity              | Multiplies texture alpha by a scalar fade value                                                        |
+| Centered UV          | Converts UV into `uv - 0.5` and distance from center                                                   |
+| Fresnel / Rim 2D     | Radial edge mask for glow/rim effects on sprites and particles                                         |
+| Sprite Outline       | Samples neighboring alpha around the current sprite to create a configurable outline color             |
+| Wave Distort         | Animated UV wave for water, heat, magic, flags                                                         |
+| Water Displace       | Procedural animated noise displacement for water, heat shimmer, and magic surfaces                     |
+| Masked Water         | Water displacement constrained by texture alpha, useful when only opaque regions should move           |
+| Water Noise UV     | Scrolls tiled noise UVs using sprite width, noise width, speed, and time                              |
+| Water Displace V2  | Displaces UVs from RGB noise texture channels                                                         |
+| Dissolve             | Noise threshold dissolve with a colored edge                                                           |
+| Hit Flash            | Mixes texture color toward a flash color                                                               |
+| Vignette             | Darkens or fades toward UV edges                                                                       |
+| Pixelate             | Snaps UVs to a lower-resolution grid                                                                   |
+| Chromatic Aberration | Splits red/blue samples away from an adjustable center offset                                          |
 
 ### Output
 
@@ -140,17 +278,33 @@ The Shader Graph page includes complete preset graphs:
 - **Hit Flash**: damage/selection flash.
 - **Rim Glow**: 2D fresnel-style edge glow.
 - **Pixelate**: retro low-resolution sampling.
-- **Chromatic Aberration**: RGB channel split.
+- **Pixel Perfect Circle**: one-pixel circular ink line over the source texture.
+- **Chromatic Aberration**: RGB channel split with an editable center offset.
+- **Alpha Composite**: Porter-Duff compositing between overlapping procedural shapes.
+- **Lab Complementary**: perceptual complementary color mix using Lab/LCH color space.
 - **Posterize**: toon/retro color bands.
+- **Halftone Dots**: comic-print treatment with posterized color, RGB dot screens, warm paper tint, and vignette.
 - **Twirl Portal**: centered UV swirl.
+- **Complex Power Warp**: bends centered UVs with complex-number power math.
 - **Rotating Texture**: time-driven UV rotation.
+- **Quaternion UV Rotate**: rotates centered UVs through a generated Z-axis quaternion.
+- **Symmetry Kaleidoscope**: folds UVs through rotation and reflection symmetry before sampling.
+- **Random Color Tiles**: uses tile cell indices as stable random seeds for deterministic HSV colors.
 - **Checker Flash**: checker mask mixed into a flash color.
+- **Pattern Whirl**: radial procedural whirl mask mixed into the texture.
 - **Voronoi Energy**: cellular energy/shield mask.
+- **Truchet Tiles**: animated procedural randomized arc tiles mixed into the texture.
 - **Tiled Offset**: tiled UV sampling.
 - **Texture Strength**: alpha/intensity shaping for marks, cracks, and glows.
 - **Opacity Fade**: straightforward alpha fade control.
 - **Vertex Wave**: vertex-stage wobble with a normal texture pass.
 - **Water Shimmer**: self-contained procedural UV displacement.
+- **Texture Noise Water**: texture-noise water shader with uploaded `water.png` as the preview texture and uploaded `simplex-noise-64.png` bound to `simplex`.
+- **SDF Circle Mask**: soft procedural circle clip.
+- **SDF Rounded Rectangle**: rounded rectangle clip using an SDF primitive.
+- **SDF Ring Glow**: procedural ring highlight using SDF strip sampling.
+- **SDF Hex Badge**: visibly clips the texture with a smaller regular polygon mask.
+- **SDF Crescent**: difference of two circle fields.
 - **Masked Water Shimmer**: alpha-constrained displacement that keeps transparent edges stable.
 
 Load a preset, validate it, then inspect how the nodes are connected. Presets are intended as editable starting points, not black boxes.
@@ -186,6 +340,16 @@ Add `Time`, `FloatConstant` amplitude, frequency, and speed inputs to animate it
 
 This is the self-contained version of the classic LÖVE water displacement pattern: scroll noise, convert it into an XY offset, then sample the texture at the displaced UV. Use low amplitude values such as `0.01` to `0.04`; texture-space displacement gets strong quickly.
 
+### Texture Noise Water
+
+Load the **Texture Noise Water** preset to reproduce a texture-noise water shader. Upload `water.png` as the preview texture, then upload `simplex-noise-64.png` for the `simplex` texture uniform. The graph follows this structure:
+
+`Texture Coords + Time + Noise Width + Sprite Width + Speed -> Water Noise UV -> Texture Input(simplex) -> Sample Texture -> Water Displace V2 -> Sample Texture -> Fragment Output`
+
+This preset is based on Alex J. Griffith's LÖVE water shader post: [alexjgriffith.com/3.html](https://alexjgriffith.com/3.html). Feather keeps the node and preset names generic, while preserving the article's `water.png` plus `simplex-noise-64.png` texture-noise approach.
+
+The original `simplex-noise-64.png` is a color noise texture, so Feather samples it through a `Texture Input` node instead of trying to replace it with scalar procedural noise. That keeps the red, green, and blue channel displacement behavior intact, and the same pattern works for future multi-texture shaders.
+
 ### Masked Water
 
 `Texture Color + Texture Coords + Time + speed + amplitude + scale + mask threshold -> Masked Water -> Fragment Output`
@@ -200,9 +364,9 @@ Use this for portals, rotating particles, scrolling texture strips, and tiled ma
 
 ### Outline
 
-`Texture Color + Texture Coords + Float thickness + Vec4 outline color -> Alpha Outline -> Fragment Output`
+`Texture Color + Texture Coords + Float thickness + Vec4 outline color -> Sprite Outline -> Fragment Output`
 
-Good for sprites, interactable objects, and particle silhouettes.
+Good for sprites, interactable objects, and particle silhouettes. The outline node paints transparent pixels adjacent to sprite alpha, so the original sprite remains unchanged while the outline color fills the silhouette edge.
 
 ### Dissolve
 
@@ -226,7 +390,7 @@ Keep this near the end of a graph when you want a simple overall fade.
 
 `Vertex Position + Time + amplitude + frequency -> Vertex Wave 2D -> Vertex Output`
 
-Pair it with a normal fragment path such as `Texture Color -> Fragment Output`. It works best on sprites or meshes with enough vertices to show deformation; a single quad will wobble at its corners.
+Pair it with a normal fragment path such as `Texture Color -> Fragment Output`. Vertex Output expects local/object-space vertex positions; Shader Graph applies LÖVE's `transform_projection` matrix automatically. It works best on sprites or meshes with enough vertices to show deformation; a single quad will wobble at its corners.
 
 ### Rim Glow
 
@@ -240,6 +404,18 @@ Feed texture color and a glow color into `Hit Flash`.
 
 Feed texture color and a highlight color into `Hit Flash`. This is a quick way to prototype shield, scan, grid, glitch, or energy effects.
 
+### Truchet Tiles
+
+`Texture Coords + tile size + mode + seed + line width + time + scroll speed -> Truchet Tiles mask -> Hit Flash amount`
+
+The Truchet node creates randomized procedural tiles. `Tile Mode` follows the source-style Truchet layout options: `0` square, `1` triangle, `2` hexagon. The default preset stays on `0` because that is the classic quarter-circle Truchet pattern shown in most references. The preset wires `Time` and a `Scroll Speed` vector so the pattern moves over time. It also outputs per-tile UVs and a tile index for more advanced procedural recipes, but the `Mask` output is the fastest path for visible arc patterns.
+
+### Chromatic Aberration
+
+`Texture Coords + amount + center offset -> Chromatic Aberration -> Fragment Output`
+
+The offset input shifts the split center from `vec2(0.5)`. Use small values such as `vec2(0.08, 0.0)` to bias the red/blue separation toward one side of a sprite or screen effect.
+
 ### About Depth Fade
 
 Depth fade is a useful Unity particle technique for softening intersections against scene geometry. Feather does not include a depth fade node yet because LÖVE's standard 2D shader path does not provide the same camera depth texture. For now, approximate soft edges with texture alpha, `Opacity`, `Vignette`, dissolve masks, or custom game-provided shader uniforms.
@@ -252,9 +428,9 @@ Attempts to compile the provided GLSL source using `love.graphics.newShader`. Re
 
 **Params**
 
-| Field | Type | Description |
-|-------|------|-------------|
-| `pixelSource` | `string` | GLSL pixel (fragment) shader source |
+| Field          | Type     | Description                          |
+| -------------- | -------- | ------------------------------------ |
+| `pixelSource`  | `string` | GLSL pixel (fragment) shader source  |
 | `vertexSource` | `string` | GLSL vertex shader source (optional) |
 
 **Response**
@@ -269,9 +445,39 @@ Attempts to compile the provided GLSL source using `love.graphics.newShader`. Re
 
 `pixelError` / `vertexError` are `nil` when that stage compiled successfully.
 
+### `preview-shader`
+
+Compiles the provided GLSL source, creates a temporary padded shape texture, and draws it in-game with the shader until preview is cleared. This is useful for sprite shaders, especially outline graphs, before applying the shader to a Particle System Playground emitter.
+
+**Params**
+
+| Field          | Type       | Description                                                      |
+| -------------- | ---------- | ---------------------------------------------------------------- |
+| `pixelSource`  | `string`   | GLSL pixel (fragment) shader source                              |
+| `vertexSource` | `string`   | GLSL vertex shader source (optional)                             |
+| `shape`        | `string`   | `circle`, `line`, or `rectangle`; defaults to `circle`           |
+| `color`        | `number[]` | Preview element RGBA color, normalized `0..1`; defaults to white |
+| `size`         | `number`   | Temporary texture size in pixels; defaults to `128`              |
+
+**Response**
+
+```lua
+-- success
+{ status = "ok", shape = "circle", color = { 1, 1, 1, 1 } }
+
+-- failure
+{ status = "error", pixelError = "...", vertexError = "..." }
+```
+
+### `clear-preview`
+
+Clears the active temporary shader preview.
+
 ## Notes
 
 - Validation runs on the game process — a live LÖVE session must be connected.
 - The plugin uses `pcall` so a bad shader never crashes the game.
-- No draw calls are made; the shader object is discarded immediately after compilation.
+- Validation discards shader objects immediately; previews keep the shader and temporary shape canvas only for the preview window.
 - When vertex source is provided, validation compiles the combined pixel + vertex source because Feather applies shader graph output as a single LÖVE shader source.
+- Runtime preview is drawn by the Shader Graph plugin itself, so it does not require a Particle System Playground target.
+- Shader graph input definitions may provide `defaultValue`, `min`, `max`, and `step` metadata; the inspector uses those values for disconnected input editors.
diff --git a/src-lua/plugins/shader-graph/init.lua b/src-lua/plugins/shader-graph/init.lua
index 4b4fb1f6..87b02f1d 100644
--- a/src-lua/plugins/shader-graph/init.lua
+++ b/src-lua/plugins/shader-graph/init.lua
@@ -1,10 +1,275 @@
 local Class = require(FEATHER_PATH .. ".lib.class")
 local Base = require(FEATHER_PATH .. ".core.base")
+local base64 = require(FEATHER_PATH .. ".lib.base64")
 
 local ShaderGraphPlugin = Class({ __includes = Base })
 
-function ShaderGraphPlugin:initialize(feather)
-  Base.initialize(self, feather)
+local PREVIEW_SHAPES = {
+  circle = true,
+  line = true,
+  rectangle = true,
+}
+
+local DEFAULT_PREVIEW_SIZE = 128
+local B64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+local B64_LOOKUP = {}
+for i = 1, #B64_CHARS do
+  B64_LOOKUP[B64_CHARS:sub(i, i)] = i - 1
+end
+
+local function decodeBase64(data)
+  data = tostring(data or ""):gsub("%s+", "")
+  if data == "" then
+    return nil
+  end
+
+  if type(base64.decode) == "function" then
+    local ok, decoded = pcall(base64.decode, data)
+    if ok then
+      return decoded
+    end
+  end
+
+  local out = {}
+  local index = 1
+  for i = 1, #data, 4 do
+    local c1 = data:sub(i, i)
+    local c2 = data:sub(i + 1, i + 1)
+    local c3 = data:sub(i + 2, i + 2)
+    local c4 = data:sub(i + 3, i + 3)
+    local n1 = B64_LOOKUP[c1]
+    local n2 = B64_LOOKUP[c2]
+    local n3 = c3 ~= "=" and B64_LOOKUP[c3] or nil
+    local n4 = c4 ~= "=" and B64_LOOKUP[c4] or nil
+
+    if not n1 or not n2 then
+      return nil
+    end
+
+    out[index] = string.char(n1 * 4 + math.floor(n2 / 16))
+    index = index + 1
+    if n3 then
+      out[index] = string.char((n2 % 16) * 16 + math.floor(n3 / 4))
+      index = index + 1
+    end
+    if n3 and n4 then
+      out[index] = string.char((n3 % 4) * 64 + n4)
+      index = index + 1
+    end
+  end
+
+  return table.concat(out)
+end
+
+local function restoreCanvas(canvas)
+  if canvas then
+    love.graphics.setCanvas(canvas)
+  else
+    love.graphics.setCanvas()
+  end
+end
+
+local function clamp01(value, fallback)
+  value = tonumber(value)
+  if value == nil then
+    return fallback
+  end
+  if value < 0 then
+    return 0
+  end
+  if value > 1 then
+    return 1
+  end
+  return value
+end
+
+local function previewColor(value)
+  if type(value) ~= "table" then
+    return { 1, 1, 1, 1 }
+  end
+  return {
+    clamp01(value[1] or value.r, 1),
+    clamp01(value[2] or value.g, 1),
+    clamp01(value[3] or value.b, 1),
+    clamp01(value[4] or value.a, 1),
+  }
+end
+
+local function buildShader(pixelSource, vertexSource)
+  pixelSource = pixelSource or ""
+  vertexSource = vertexSource or ""
+
+  local pixelOk, pixelShaderOrErr = pcall(function()
+    return love.graphics.newShader(pixelSource)
+  end)
+
+  if not pixelOk then
+    return nil, tostring(pixelShaderOrErr), nil
+  end
+
+  if vertexSource ~= "" then
+    local combinedOk, combinedShaderOrErr = pcall(function()
+      return love.graphics.newShader(pixelSource .. "\n" .. vertexSource)
+    end)
+    if not combinedOk then
+      return nil, nil, tostring(combinedShaderOrErr)
+    end
+    return combinedShaderOrErr
+  end
+
+  return pixelShaderOrErr
+end
+
+local function makePreviewCanvas(shape, size, color)
+  size = tonumber(size) or DEFAULT_PREVIEW_SIZE
+  if size < 32 then
+    size = 32
+  elseif size > 512 then
+    size = 512
+  end
+
+  local canvas = love.graphics.newCanvas(size, size)
+  local previousCanvas = love.graphics.getCanvas()
+  local previousShader = love.graphics.getShader()
+  local previousBlend, previousAlphaMode = love.graphics.getBlendMode()
+  local previousLineWidth = love.graphics.getLineWidth()
+  local r, g, b, a = love.graphics.getColor()
+  local pad = size * 0.22
+
+  love.graphics.push()
+  love.graphics.setCanvas(canvas)
+  love.graphics.origin()
+  love.graphics.clear(0, 0, 0, 0)
+  love.graphics.setShader()
+  love.graphics.setBlendMode("alpha")
+  love.graphics.setColor(color[1], color[2], color[3], color[4])
+
+  if shape == "rectangle" then
+    love.graphics.rectangle("fill", pad, pad, size - pad * 2, size - pad * 2)
+  elseif shape == "line" then
+    love.graphics.setLineWidth(math.max(6, size * 0.12))
+    love.graphics.line(pad, size - pad, size - pad, pad)
+  else
+    love.graphics.circle("fill", size / 2, size / 2, size * 0.3)
+  end
+
+  restoreCanvas(previousCanvas)
+  love.graphics.pop()
+  love.graphics.setShader(previousShader)
+  love.graphics.setBlendMode(previousBlend, previousAlphaMode)
+  love.graphics.setLineWidth(previousLineWidth)
+  love.graphics.setColor(r, g, b, a)
+
+  return canvas
+end
+
+local function imageFromUpload(upload, fallbackName)
+  if type(upload) ~= "table" then
+    return nil, "Texture upload is missing"
+  end
+  local raw = decodeBase64(upload.dataBase64)
+  if not raw then
+    return nil, "Texture data is not valid base64"
+  end
+  local filename = tostring(upload.filename or fallbackName or "texture.png")
+  local okData, fileData = pcall(love.filesystem.newFileData, raw, filename)
+  if not okData or not fileData then
+    return nil, "Could not create texture file data"
+  end
+  local okImage, image = pcall(love.graphics.newImage, fileData)
+  if not okImage or not image then
+    return nil, "Could not create image from uploaded texture"
+  end
+  pcall(image.setFilter, image, "nearest", "nearest")
+  return image
+end
+
+local function makeFallbackTexture(size)
+  size = size or 64
+  local imageData = love.image.newImageData(size, size)
+  for y = 0, size - 1 do
+    for x = 0, size - 1 do
+      local v = ((x * 37 + y * 17) % 255) / 255
+      imageData:setPixel(x, y, v, 1 - v, ((x + y) % 255) / 255, 1)
+    end
+  end
+  local image = love.graphics.newImage(imageData)
+  pcall(image.setFilter, image, "nearest", "nearest")
+  return image
+end
+
+local function sendTextureUniforms(shader, uniforms, uploads)
+  local retained = {}
+  local byUniform = {}
+  if type(uploads) == "table" then
+    for _, upload in ipairs(uploads) do
+      if type(upload) == "table" and upload.uniform then
+        byUniform[tostring(upload.uniform)] = upload
+      end
+    end
+  end
+
+  if type(uniforms) == "table" then
+    for _, info in ipairs(uniforms) do
+      local uniform = type(info) == "table" and tostring(info.uniform or "") or ""
+      if uniform ~= "" then
+        local image = nil
+        local upload = byUniform[uniform]
+        if upload then
+          image = imageFromUpload(upload, tostring(upload.filename or uniform .. ".png"))
+        end
+        if not image then
+          image = makeFallbackTexture(64)
+        end
+        local ok, err = pcall(shader.send, shader, uniform, image)
+        if not ok then
+          return nil, "Could not bind texture uniform `" .. uniform .. "`: " .. tostring(err)
+        end
+        retained[#retained + 1] = image
+      end
+    end
+  end
+
+  return retained
+end
+
+local function cloneShaderParameterValue(value, parameterType)
+  if parameterType == "boolean" then
+    return value and tonumber(value) ~= 0 and 1 or 0
+  end
+  if parameterType == "float" then
+    return tonumber(value) or 0
+  end
+  if parameterType == "vec2" then
+    value = type(value) == "table" and value or {}
+    return { tonumber(value[1]) or 0, tonumber(value[2]) or 0 }
+  end
+  if parameterType == "vec3" then
+    value = type(value) == "table" and value or {}
+    return { tonumber(value[1]) or 0, tonumber(value[2]) or 0, tonumber(value[3]) or 0 }
+  end
+  if parameterType == "vec4" or parameterType == "color" then
+    value = type(value) == "table" and value or {}
+    return { tonumber(value[1]) or 0, tonumber(value[2]) or 0, tonumber(value[3]) or 0, tonumber(value[4]) or 1 }
+  end
+  return value
+end
+
+local function sendShaderParameters(shader, parameters)
+  if type(parameters) ~= "table" then
+    return true
+  end
+  for _, parameter in ipairs(parameters) do
+    if type(parameter) == "table" then
+      local uniform = tostring(parameter.uniform or "")
+      local parameterType = tostring(parameter.type or "")
+      if uniform ~= "" and parameterType ~= "texture" then
+        local value = cloneShaderParameterValue(parameter.defaultValue, parameterType)
+        pcall(shader.send, shader, uniform, value)
+      end
+    end
+  end
+  return true
 end
 
 local function compileShader(params)
@@ -37,6 +302,114 @@ local function compileShader(params)
   return { status = "ok" }
 end
 
+function ShaderGraphPlugin:init(config)
+  Base.init(self, config)
+  self.preview = nil
+end
+
+function ShaderGraphPlugin:_previewShader(params)
+  if not love or not love.graphics then
+    return { status = "error", pixelError = "Shader preview requires love.graphics." }
+  end
+
+  local shape = tostring(params.shape or "circle")
+  if not PREVIEW_SHAPES[shape] then
+    shape = "circle"
+  end
+
+  local shader, pixelError, vertexError = buildShader(params.pixelSource, params.vertexSource)
+  if not shader then
+    return { status = "error", pixelError = pixelError, vertexError = vertexError }
+  end
+
+  local color = previewColor(params.color)
+  local drawable
+  local baseTexture = params.baseTexture
+  if type(baseTexture) == "table" and baseTexture.dataBase64 then
+    local image, imageErr = imageFromUpload(baseTexture, "preview-texture.png")
+    if not image then
+      return { status = "error", pixelError = imageErr }
+    end
+    drawable = image
+  else
+    local okCanvas, canvasOrErr = pcall(makePreviewCanvas, shape, params.size, color)
+    if not okCanvas then
+      return { status = "error", pixelError = tostring(canvasOrErr) }
+    end
+    drawable = canvasOrErr
+  end
+
+  local textures, textureErr = sendTextureUniforms(shader, params.textureUniforms, params.textures)
+  if not textures then
+    return { status = "error", pixelError = textureErr }
+  end
+  local parametersOk, parameterErr = sendShaderParameters(shader, params.parameters)
+  if not parametersOk then
+    return { status = "error", pixelError = parameterErr }
+  end
+
+  self.preview = {
+    shader = shader,
+    drawable = drawable,
+    shape = shape,
+    color = color,
+    baseTexture = type(baseTexture) == "table" and baseTexture.filename or nil,
+    textures = textures,
+    updatedAt = love.timer and love.timer.getTime() or os.clock(),
+  }
+
+  return { status = "ok", shape = shape, color = color }
+end
+
+function ShaderGraphPlugin:onDraw()
+  if not self.preview or not love or not love.graphics then
+    return
+  end
+
+  local drawable = self.preview.drawable
+  local shader = self.preview.shader
+  if not drawable or not shader then
+    return
+  end
+
+  local previousBlend, previousAlphaMode = love.graphics.getBlendMode()
+  local previousShader = love.graphics.getShader()
+  local r, g, b, a = love.graphics.getColor()
+  local previousLineWidth = love.graphics.getLineWidth()
+  local width = love.graphics.getWidth()
+  local height = love.graphics.getHeight()
+  local previewSize = math.min(280, math.max(128, math.min(width, height) * 0.42))
+  local scale = previewSize / drawable:getWidth()
+  local x = (width - previewSize) / 2
+  local y = (height - previewSize) / 2
+
+  love.graphics.push()
+  love.graphics.origin()
+  love.graphics.setShader()
+  love.graphics.setBlendMode("alpha")
+  love.graphics.setColor(0.04, 0.05, 0.07, 0.74)
+  love.graphics.rectangle("fill", x - 10, y - 10, previewSize + 20, previewSize + 42, 6, 6)
+  love.graphics.setColor(1, 1, 1, 0.22)
+  love.graphics.setLineWidth(1)
+  love.graphics.rectangle("line", x - 10, y - 10, previewSize + 20, previewSize + 42, 6, 6)
+  love.graphics.setColor(1, 1, 1, 0.72)
+  local label = self.preview.baseTexture or self.preview.shape
+  love.graphics.print("Shader Preview: " .. label, x - 4, y + previewSize + 12)
+
+  if shader.send and love.timer then
+    pcall(shader.send, shader, "u_time", love.timer.getTime())
+  end
+  love.graphics.setShader(shader)
+  love.graphics.setColor(1, 1, 1, 1)
+  love.graphics.draw(drawable, x, y, 0, scale, scale)
+
+  love.graphics.setBlendMode(previousBlend, previousAlphaMode)
+  love.graphics.setShader(previousShader)
+  love.graphics.setColor(r, g, b, a)
+  love.graphics.setLineWidth(previousLineWidth)
+  love.graphics.pop()
+end
+
 function ShaderGraphPlugin:handleActionRequest(request)
   local params = request.params or {}
   local action = params.action
@@ -45,6 +418,15 @@ function ShaderGraphPlugin:handleActionRequest(request)
     return compileShader(params)
   end
 
+  if action == "preview-shader" then
+    return self:_previewShader(params)
+  end
+
+  if action == "clear-preview" then
+    self.preview = nil
+    return { status = "ok" }
+  end
+
   return { status = "error", pixelError = "Unknown shader graph action: " .. tostring(action) }
 end
 
@@ -52,6 +434,12 @@ function ShaderGraphPlugin:getConfig()
   return {
     type = "shader-graph",
     icon = "blend",
+    preview = self.preview and {
+      shape = self.preview.shape,
+      color = self.preview.color,
+      baseTexture = self.preview.baseTexture,
+      active = true,
+    } or nil,
   }
 end
 
diff --git a/src/components/code.tsx b/src/components/code.tsx
index 41ca5d41..b0bde172 100644
--- a/src/components/code.tsx
+++ b/src/components/code.tsx
@@ -46,7 +46,6 @@ export function TraceViewer({
   onFileClick?: (file: string, line?: number) => void;
   trace: string;
 }) {
-
   const highlightLine = (line: string, index: number) => {
     // Clickable file:line pattern
     const filePattern = /([\w./\\-]+\.lua):(\d+)/g;
diff --git a/src/components/ui/glsl-code-input.tsx b/src/components/ui/glsl-code-input.tsx
new file mode 100644
index 00000000..78024975
--- /dev/null
+++ b/src/components/ui/glsl-code-input.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useRef, type CSSProperties } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { useTheme } from '@/hooks/use-theme';
+import oneLight from '@/assets/theme/light';
+import onDark from '@/assets/theme/dark';
+import { cn } from '@/utils/styles';
+
+interface GlslCodeInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+  className?: string;
+  maxHeight?: number;
+}
+
+const sharedStyle: CSSProperties = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: '0.75rem',
+  lineHeight: '1.55',
+  padding: '10px 12px',
+};
+
+export function GlslCodeInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+  className,
+  maxHeight = 420,
+}: GlslCodeInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const theme = useTheme();
+  const highlightTheme = theme === 'dark' ? onDark : oneLight;
+
+  const resize = () => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px';
+  };
+
+  useEffect(() => {
+    resize();
+  }, [value, maxHeight]);
+
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-md border bg-background shadow-sm',
+        'focus-within:ring-1 focus-within:ring-ring',
+        className,
+      )}
+    >
+      <div aria-hidden className="pointer-events-none absolute inset-0 overflow-auto">
+        <SyntaxHighlighter
+          language="glsl"
+          style={{
+            ...highlightTheme,
+            hljs: {
+              ...(highlightTheme as Record<string, CSSProperties>).hljs,
+              background: 'transparent',
+              padding: 0,
+            },
+          }}
+          customStyle={{
+            ...sharedStyle,
+            background: 'transparent',
+            margin: 0,
+            minHeight: 180,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            overflow: 'visible',
+          }}
+          showLineNumbers={false}
+          wrapLines
+        >
+          {value + ' '}
+        </SyntaxHighlighter>
+      </div>
+      <textarea
+        ref={textareaRef}
+        autoFocus={autoFocus}
+        value={value}
+        rows={8}
+        spellCheck={false}
+        placeholder={placeholder}
+        onChange={(e) => {
+          onChange(e.target.value);
+          resize();
+        }}
+        className={cn(
+          'relative z-10 min-h-[180px] w-full resize-none bg-transparent font-mono text-xs',
+          'text-transparent [caret-color:var(--foreground)]',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none',
+        )}
+        style={sharedStyle}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ui/lua-code-input.tsx b/src/components/ui/lua-code-input.tsx
index 2aec3f76..ccf5cf11 100644
--- a/src/components/ui/lua-code-input.tsx
+++ b/src/components/ui/lua-code-input.tsx
@@ -81,6 +81,7 @@ export function LuaCodeInput({
             overflow: 'visible',
           }}
           showLineNumbers={false}
+          wrapLines
         >
           {/* Trailing space ensures the backdrop has height even when value is empty */}
           {value + ' '}
diff --git a/src/hooks/use-particle-system-playground.ts b/src/hooks/use-particle-system-playground.ts
index 83f811a2..bb264f40 100644
--- a/src/hooks/use-particle-system-playground.ts
+++ b/src/hooks/use-particle-system-playground.ts
@@ -283,6 +283,19 @@ export function useParticleSystemPlayground() {
     deleteComposite: () => refreshAfterAction('delete-composite'),
     addSystem: () => refreshAfterAction('add-system'),
     removeSystem: (systemIndex: number) => refreshAfterAction('remove-system', { systemIndex }),
+    reorderSystem: (fromIndex: number, toIndex: number) => {
+      queryClient.setQueryData<ParticleSystemPlaygroundData>(pluginQueryKey, (current) => {
+        if (!current?.data) return current;
+        const systems = [...current.data.systems];
+        const fromPos = systems.findIndex((s) => s.index === fromIndex);
+        const toPos = systems.findIndex((s) => s.index === toIndex);
+        if (fromPos === -1 || toPos === -1 || fromPos === toPos) return current;
+        const [moved] = systems.splice(fromPos, 1);
+        systems.splice(toPos, 0, moved);
+        return { ...current, data: { ...current.data, systems } };
+      });
+      refreshAfterAction('reorder-system', { fromIndex, toIndex });
+    },
     emit: (all = false, count = 100) => refreshAfterAction(all ? 'emit-all' : 'emit', { count }),
     reset: (all = false) => refreshAfterAction(all ? 'reset-all' : 'reset'),
     kickStart: () => refreshAfterAction('kick-start'),
diff --git a/src/hooks/use-shader-graph.ts b/src/hooks/use-shader-graph.ts
index d50c2b99..90de4551 100644
--- a/src/hooks/use-shader-graph.ts
+++ b/src/hooks/use-shader-graph.ts
@@ -5,10 +5,18 @@ import { useSessionStore } from '@/store/session';
 import { useShaderGraphStore } from '@/store/shader-graph';
 import { sessionQueryKey } from './use-ws-connection';
 import { codegen } from '@/pages/shader-graph/codegen';
+import type { GeneratedGlsl, ShaderParameter, ShaderTextureUpload } from '@/types/shader-graph';
 
 const PLUGIN_ID = 'particle-system-playground';
 const SHADER_GRAPH_PLUGIN = 'shader-graph';
 
+export type ShaderPreviewShape = 'circle' | 'line' | 'rectangle';
+export type ShaderPreviewColor = [number, number, number, number];
+export type ShaderPreviewTextureUpload = ShaderTextureUpload & {
+  uniform?: string;
+};
+export type ShaderPreviewParameter = ShaderParameter;
+
 type CompilePayload = { status: 'ok' | 'error'; pixelError?: string; vertexError?: string };
 type CompileResponse = {
   status?: 'success' | 'error' | 'ok';
@@ -29,7 +37,7 @@ export function useShaderGraph() {
   });
 
   const generateAndStore = useCallback(() => {
-    const glsl = codegen(store.nodes, store.edges);
+    const glsl = codegen(store.nodes, store.edges, store.subgraphs);
     store.setLastGlsl(glsl);
     return glsl;
   }, [store]);
@@ -52,7 +60,7 @@ export function useShaderGraph() {
     }
   }, [generateAndStore, sessionId, store]);
 
-  const applyToPlayground = useCallback(async () => {
+  const applyToPlayground = useCallback(async (textures: ShaderPreviewTextureUpload[] = []) => {
     const target = store.playgroundTarget;
     if (!target || !sessionId) return;
     const glsl = generateAndStore();
@@ -66,10 +74,62 @@ export function useShaderGraph() {
         systemIndex: target.systemIndex,
         shaderSource,
         filename: `${store.shaderName}.glsl`,
+        textures,
+        parameters: glsl.parameters ?? [],
       },
     });
   }, [generateAndStore, sessionId, store]);
 
+  const sendShaderPreview = useCallback(
+    async (
+      glsl: GeneratedGlsl,
+      shape: ShaderPreviewShape,
+      color: ShaderPreviewColor,
+      options: { baseTexture?: ShaderPreviewTextureUpload | null; textures?: ShaderPreviewTextureUpload[]; parameters?: ShaderPreviewParameter[] } = {},
+    ) => {
+      if (!sessionId) return;
+      await sendCommand(sessionId, {
+        type: 'cmd:plugin:action',
+        plugin: SHADER_GRAPH_PLUGIN,
+        action: 'preview-shader',
+        params: {
+          pixelSource: glsl.pixel,
+          vertexSource: glsl.vertex ?? '',
+          shape,
+          color,
+          textureUniforms: glsl.textures ?? [],
+          parameters: options.parameters ?? glsl.parameters ?? [],
+          baseTexture: options.baseTexture,
+          textures: options.textures ?? [],
+        },
+      });
+    },
+    [sessionId],
+  );
+
+  const previewShader = useCallback(
+    async (
+      shape: ShaderPreviewShape,
+      color: ShaderPreviewColor,
+      options: { baseTexture?: ShaderPreviewTextureUpload | null; textures?: ShaderPreviewTextureUpload[]; parameters?: ShaderPreviewParameter[] } = {},
+    ) => {
+      if (!sessionId) return;
+      const glsl = generateAndStore();
+      await sendShaderPreview(glsl, shape, color, options);
+    },
+    [generateAndStore, sendShaderPreview, sessionId],
+  );
+
+  const clearPreview = useCallback(async () => {
+    if (!sessionId) return;
+    await sendCommand(sessionId, {
+      type: 'cmd:plugin:action',
+      plugin: SHADER_GRAPH_PLUGIN,
+      action: 'clear-preview',
+      params: {},
+    });
+  }, [sessionId]);
+
   const compileResult = compileQuery.data;
 
   useEffect(() => {
@@ -95,5 +155,5 @@ export function useShaderGraph() {
     });
   }, [compileResult, store]);
 
-  return { ...store, generateAndStore, validateShader, applyToPlayground };
+  return { ...store, generateAndStore, validateShader, applyToPlayground, previewShader, sendShaderPreview, clearPreview };
 }
diff --git a/src/pages/console/index.tsx b/src/pages/console/index.tsx
index 43123fb3..4dd95a2d 100644
--- a/src/pages/console/index.tsx
+++ b/src/pages/console/index.tsx
@@ -46,6 +46,7 @@ function ConsoleOutput({ entry, response }: { entry: ConsoleEntry; response?: Ev
               wordBreak: 'break-all',
             }}
             showLineNumbers={false}
+            wrapLines
           >
             {entry.input}
           </SyntaxHighlighter>
diff --git a/src/pages/debugger/index.tsx b/src/pages/debugger/index.tsx
index fc1b1f33..0d8502d0 100644
--- a/src/pages/debugger/index.tsx
+++ b/src/pages/debugger/index.tsx
@@ -889,8 +889,8 @@ export default function DebuggerPage() {
                 ? !hotReloadPlugin.enabled
                   ? 'Hot reload plugin is disabled. Enable it with the switch first.'
                   : selectedModule
-                  ? `Development only: send Lua source for ${selectedModule} into the running game`
-                  : 'Select an allowlisted Lua module. Hot reload is development-only remote code execution.'
+                    ? `Development only: send Lua source for ${selectedModule} into the running game`
+                    : 'Select an allowlisted Lua module. Hot reload is development-only remote code execution.'
                 : 'Hot reload is disabled. Include the hot-reload plugin and configure debugger.hotReload only for trusted development sessions.'
             }
           >
diff --git a/src/pages/particle-system-playground/components/EmitterList.tsx b/src/pages/particle-system-playground/components/EmitterList.tsx
index 55fb1cd4..42ff481f 100644
--- a/src/pages/particle-system-playground/components/EmitterList.tsx
+++ b/src/pages/particle-system-playground/components/EmitterList.tsx
@@ -1,8 +1,11 @@
+import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/utils/styles';
 import type { ParticleSystemPlaygroundSystem } from '@/types/particle-system-playground';
-import { PlusIcon, Trash2Icon } from 'lucide-react';
+import { GripVerticalIcon, PlusIcon, Trash2Icon } from 'lucide-react';
+
+const DND_KEY = 'emitter-index';
 
 type Props = {
   systems: ParticleSystemPlaygroundSystem[];
@@ -11,21 +14,83 @@ type Props = {
   onSelect: (index: number) => void;
   onAdd: () => void;
   onRemove: (index: number) => void;
+  onReorder: (fromIndex: number, toIndex: number) => void;
 };
 
-export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, onAdd, onRemove }: Props) {
+export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, onAdd, onRemove, onReorder }: Props) {
+  const [overIndex, setOverIndex] = useState<number | null>(null);
+
+  function handleDragStart(e: React.DragEvent, index: number) {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(DND_KEY, String(index));
+  }
+
+  function handleDragOver(e: React.DragEvent, index: number) {
+    if (!e.dataTransfer.types.includes(DND_KEY)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setOverIndex(index);
+  }
+
+  function handleDragLeave(e: React.DragEvent) {
+    // Only clear when leaving the row entirely, not when entering a child element
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) {
+      setOverIndex(null);
+    }
+  }
+
+  function handleDrop(e: React.DragEvent, toSystemIndex: number) {
+    e.preventDefault();
+    setOverIndex(null);
+    const raw = e.dataTransfer.getData(DND_KEY);
+    if (!raw) return;
+    const fromSystemIndex = Number(raw);
+    if (fromSystemIndex !== toSystemIndex) {
+      onReorder(fromSystemIndex, toSystemIndex);
+      onSelect(toSystemIndex);
+      setTimeout(() => {
+        onSelect(toSystemIndex);
+      }, 0); // Delay to allow state update before selecting
+    }
+  }
+
+  function handleDragEnd() {
+    setOverIndex(null);
+  }
+
   return (
     <div className="grid gap-1 p-2">
       {systems.map((system) => {
         const active = system.index === activeIndex;
+        const isDragTarget = overIndex === system.index;
         return (
           <div
             key={system.index}
+            draggable={!isGameComposite}
+            onDragStart={(e) => handleDragStart(e, system.index)}
+            onDragOver={(e) => handleDragOver(e, system.index)}
+            onDragLeave={handleDragLeave}
+            onDrop={(e) => handleDrop(e, system.index)}
+            onDragEnd={handleDragEnd}
             className={cn(
-              'group grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded text-xs',
-              active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+              'group grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded text-xs transition-colors',
+              active
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+              isDragTarget && 'ring-2 ring-primary ring-offset-1',
             )}
           >
+            {!isGameComposite && (
+              <span
+                className={cn(
+                  'ml-1 flex size-5 shrink-0 cursor-grab items-center justify-center rounded opacity-0 group-hover:opacity-60 active:cursor-grabbing',
+                  active && 'opacity-60',
+                )}
+              >
+                <GripVerticalIcon className="size-3.5" />
+              </span>
+            )}
+            {isGameComposite && <span className="ml-1 w-1" />}
             <button
               className="grid min-w-0 grid-cols-[1.5rem_minmax(0,1fr)_auto] items-center gap-2 px-2 py-2 text-left"
               onClick={() => onSelect(system.index)}
@@ -35,11 +100,19 @@ export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, o
               </span>
               <span className="min-w-0">
                 <span className="block truncate font-medium">{system.title}</span>
-                <span className={cn('block truncate text-[10px]', active ? 'text-primary-foreground/70' : 'text-muted-foreground')}>
+                <span
+                  className={cn(
+                    'block truncate text-[10px]',
+                    active ? 'text-primary-foreground/70' : 'text-muted-foreground',
+                  )}
+                >
                   {system.properties.count ?? 0} / {system.properties.bufferSize ?? 0}
                 </span>
               </span>
-              <Badge variant="outline" className={cn('h-5 px-1.5 text-[10px]', active && 'border-primary-foreground/40')}>
+              <Badge
+                variant="outline"
+                className={cn('h-5 px-1.5 text-[10px]', active && 'border-primary-foreground/40')}
+              >
                 {system.blendMode}
               </Badge>
             </button>
@@ -49,7 +122,9 @@ export function EmitterList({ systems, activeIndex, isGameComposite, onSelect, o
                 variant="ghost"
                 className={cn(
                   'mr-1 size-7 shrink-0',
-                  active ? 'text-primary-foreground/80 hover:text-primary-foreground' : 'text-muted-foreground hover:text-destructive',
+                  active
+                    ? 'text-primary-foreground/80 hover:text-primary-foreground'
+                    : 'text-muted-foreground hover:text-destructive',
                 )}
                 title={systems.length > 1 ? 'Delete emitter' : 'A composite needs at least one emitter'}
                 disabled={systems.length <= 1}
diff --git a/src/pages/particle-system-playground/components/ShaderCodeInput.tsx b/src/pages/particle-system-playground/components/ShaderCodeInput.tsx
index 0f6699df..cb7dd62a 100644
--- a/src/pages/particle-system-playground/components/ShaderCodeInput.tsx
+++ b/src/pages/particle-system-playground/components/ShaderCodeInput.tsx
@@ -78,6 +78,7 @@ export function ShaderCodeInput({ value, onChange, placeholder, className }: Pro
             overflow: 'visible',
           }}
           showLineNumbers={false}
+          wrapLines
         >
           {value + ' '}
         </SyntaxHighlighter>
diff --git a/src/pages/particle-system-playground/index.tsx b/src/pages/particle-system-playground/index.tsx
index 914547aa..119ed820 100644
--- a/src/pages/particle-system-playground/index.tsx
+++ b/src/pages/particle-system-playground/index.tsx
@@ -13,6 +13,8 @@ import { PropertiesPanel } from './components/PropertiesPanel';
 import { ShaderEditor } from './components/ShaderEditor';
 import { TextureImporter } from './components/TextureImporter';
 
+export type ParticleSystemPlaygroundController = ReturnType<typeof useParticleSystemPlayground>;
+
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <section className="grid gap-3 rounded-md border bg-card p-3">
@@ -22,8 +24,17 @@ function Section({ title, children }: { title: string; children: React.ReactNode
   );
 }
 
-export default function ParticleSystemPlaygroundPage() {
-  const playground = useParticleSystemPlayground();
+export default function ParticleSystemPlaygroundPage({
+  playgroundOverride,
+  standalone = false,
+  preview,
+}: {
+  playgroundOverride?: ParticleSystemPlaygroundController;
+  standalone?: boolean;
+  preview?: React.ReactNode;
+} = {}) {
+  const livePlayground = useParticleSystemPlayground();
+  const playground = playgroundOverride ?? livePlayground;
   const pluginControl = usePluginControl('particle-system-playground');
   const composite = playground.composite;
   const system = playground.activeSystem;
@@ -50,7 +61,9 @@ export default function ParticleSystemPlaygroundPage() {
           <AlertTriangleIcon className="size-8 text-muted-foreground" />
           <h1 className="text-lg font-semibold">Particles Playground is disabled</h1>
           <p className="text-sm text-muted-foreground">
-            Enable the built-in plugin for this session to author particle effects.
+            {standalone
+              ? 'The standalone showcase keeps this tool enabled with local sample data.'
+              : 'Enable the built-in plugin for this session to author particle effects.'}
           </p>
           <Button
             size="sm"
@@ -72,7 +85,7 @@ export default function ParticleSystemPlaygroundPage() {
 
   return (
     <div className="grid min-h-0 flex-1 grid-cols-[18rem_minmax(0,1fr)] overflow-hidden">
-      <aside className="min-h-0 border-r bg-muted/20">
+      <aside className="flex min-h-0 flex-col border-r bg-muted/20">
         <CompositeSelector
           composites={playground.composites}
           activeComposite={playground.activeComposite}
@@ -81,7 +94,7 @@ export default function ParticleSystemPlaygroundPage() {
           onCreate={playground.createComposite}
           onDelete={playground.deleteComposite}
         />
-        <ScrollArea className="h-[calc(100vh-9rem)]">
+        <ScrollArea className="flex-1 min-h-0">
           {composite ? (
             <EmitterList
               systems={composite.systems}
@@ -90,6 +103,7 @@ export default function ParticleSystemPlaygroundPage() {
               onSelect={playground.selectSystem}
               onAdd={playground.addSystem}
               onRemove={playground.removeSystem}
+              onReorder={playground.reorderSystem}
             />
           ) : (
             <div className="grid gap-3 p-4 text-sm text-muted-foreground">
@@ -103,8 +117,8 @@ export default function ParticleSystemPlaygroundPage() {
         </ScrollArea>
       </aside>
 
-      <main className="min-h-0 overflow-hidden">
-        <ScrollArea className="h-full">
+      <main className="flex  flex-1 min-h-0 max-h-[calc(100vh-4rem)] overflow-hidden">
+        <ScrollArea>
           <div className="grid gap-3 p-4">
             <header className="flex flex-wrap items-center justify-between gap-3">
               <div>
@@ -142,6 +156,8 @@ export default function ParticleSystemPlaygroundPage() {
               )}
             </header>
 
+            {preview}
+
             {!system || !composite ? (
               <div className="grid min-h-72 place-items-center rounded-md border bg-card p-8 text-center text-sm text-muted-foreground">
                 <div className="grid justify-items-center gap-3">
@@ -163,8 +179,12 @@ export default function ParticleSystemPlaygroundPage() {
 
                 <Tabs defaultValue="emitter" className="gap-3">
                   <TabsList className="grid h-8 w-full grid-cols-2 rounded-md lg:w-fit lg:min-w-72">
-                    <TabsTrigger value="emitter" className="text-xs">Emitter</TabsTrigger>
-                    <TabsTrigger value="preview-assets" className="text-xs">Preview &amp; Assets</TabsTrigger>
+                    <TabsTrigger value="emitter" className="text-xs">
+                      Emitter
+                    </TabsTrigger>
+                    <TabsTrigger value="preview-assets" className="text-xs">
+                      Preview &amp; Assets
+                    </TabsTrigger>
                   </TabsList>
 
                   <TabsContent value="emitter" className="mt-0">
diff --git a/src/pages/shader-graph/CodePreview.tsx b/src/pages/shader-graph/CodePreview.tsx
index 4f0e4069..0af2439c 100644
--- a/src/pages/shader-graph/CodePreview.tsx
+++ b/src/pages/shader-graph/CodePreview.tsx
@@ -1,35 +1,104 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { useShaderGraph } from '@/hooks/use-shader-graph';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { type ShaderPreviewColor, type ShaderPreviewShape, useShaderGraph } from '@/hooks/use-shader-graph';
+import type { ShaderParameter } from '@/types/shader-graph';
 import { useSessionStore } from '@/store/session';
 import { useTheme } from '@/hooks/use-theme';
 import oneLight from '@/assets/theme/light';
 import onDark from '@/assets/theme/dark';
 import { cn } from '@/utils/styles';
-import { CheckIcon, CopyIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon, FolderOpenIcon, XIcon } from 'lucide-react';
+import { codegen } from './codegen';
+import { pickShaderTexture } from './textureUpload';
 
-export function CodePreview() {
+function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setDebouncedValue(value);
+    }, delayMs);
+
+    return () => window.clearTimeout(timeout);
+  }, [delayMs, value]);
+
+  return debouncedValue;
+}
+
+function colorFromHex(value: string): ShaderPreviewColor {
+  const match = value.match(/^#?([0-9a-f]{6})$/i);
+  if (!match) return [1, 1, 1, 1];
+  const int = Number.parseInt(match[1], 16);
+  return [((int >> 16) & 255) / 255, ((int >> 8) & 255) / 255, (int & 255) / 255, 1];
+}
+
+type PreviewParams = {
+  shape: ShaderPreviewShape;
+  color: string;
+  baseTexture: { filename: string; dataBase64: string } | null;
+  parameters: ShaderParameter[];
+};
+
+export function CodePreview({
+  standalone,
+  onPreviewParamsChange,
+}: {
+  standalone?: boolean;
+  onPreviewParamsChange?: (params: PreviewParams) => void;
+} = {}) {
   const sessionId = useSessionStore((s) => s.sessionId);
+  const previewAvailable = !!sessionId || !!standalone;
   const {
     lastGeneratedGlsl,
     validationStatus,
     validationErrors,
+    nodes,
+    edges,
+    subgraphs,
+    textureUploads,
     generateAndStore,
     validateShader,
     applyToPlayground,
+    sendShaderPreview,
+    clearPreview,
     playgroundTarget,
   } = useShaderGraph();
   const theme = useTheme();
   const hlTheme = theme === 'dark' ? onDark : oneLight;
   const [copied, setCopied] = useState(false);
+  const [previewShape, setPreviewShape] = useState<ShaderPreviewShape>('circle');
+  const [previewColor, setPreviewColor] = useState('#ffffff');
+  const [previewEnabled, setPreviewEnabled] = useState(false);
+  const [baseTexture, setBaseTexture] = useState<{ filename: string; dataBase64: string } | null>(null);
+  const sendShaderPreviewRef = useRef(sendShaderPreview);
+  const onPreviewParamsChangeRef = useRef(onPreviewParamsChange);
+  const debouncedNodes = useDebouncedValue(nodes, 180);
+  const debouncedEdges = useDebouncedValue(edges, 180);
+  const debouncedPreviewShape = useDebouncedValue(previewShape, 180);
+  const debouncedPreviewColor = useDebouncedValue(previewColor, 180);
 
-  const glsl = lastGeneratedGlsl ?? generateAndStore();
-  const fullSource = glsl.vertex
-    ? `${glsl.pixel}\n\n// ── Vertex ──\n${glsl.vertex}`
-    : glsl.pixel;
+  const glsl = useMemo(
+    () => lastGeneratedGlsl ?? codegen(nodes, edges, subgraphs),
+    [edges, lastGeneratedGlsl, nodes, subgraphs],
+  );
+  const textureUniforms = useMemo(() => glsl.textures ?? [], [glsl.textures]);
+  const uploadedUniformTextures = useMemo(
+    () =>
+      textureUniforms
+        .map((texture) => {
+          const upload = textureUploads[texture.nodeId];
+          return upload ? { ...upload, uniform: texture.uniform } : null;
+        })
+        .filter((texture): texture is { filename: string; dataBase64: string; uniform: string } => !!texture),
+    [textureUniforms, textureUploads],
+  );
+  const hasMissingTextureUploads = textureUniforms.some((texture) => !textureUploads[texture.nodeId]);
+  const fullSource = glsl.vertex ? `${glsl.pixel}\n\n// -- Vertex \n${glsl.vertex}` : glsl.pixel;
 
   function handleCopy() {
     navigator.clipboard.writeText(fullSource).then(() => {
@@ -38,6 +107,66 @@ export function CodePreview() {
     });
   }
 
+  async function handlePreviewToggle() {
+    if (!previewAvailable) return;
+    if (previewEnabled) {
+      if (sessionId) await clearPreview();
+      setPreviewEnabled(false);
+      return;
+    }
+    setPreviewEnabled(true);
+  }
+
+  function handlePreviewShapeChange(value: string) {
+    const nextShape = value as ShaderPreviewShape;
+    setPreviewShape(nextShape);
+  }
+
+  async function uploadBaseTexture() {
+    const texture = await pickShaderTexture();
+    if (!texture) return;
+    setBaseTexture(texture);
+    toast.success(`Preview texture loaded: ${texture.filename}`);
+  }
+
+  useEffect(() => {
+    sendShaderPreviewRef.current = sendShaderPreview;
+  }, [sendShaderPreview]);
+
+  useEffect(() => {
+    onPreviewParamsChangeRef.current = onPreviewParamsChange;
+  }, [onPreviewParamsChange]);
+
+  useEffect(() => {
+    if (!sessionId && !standalone) {
+      setPreviewEnabled(false);
+    }
+  }, [sessionId, standalone]);
+
+  useEffect(() => {
+    if (!standalone) return;
+    onPreviewParamsChangeRef.current?.({ shape: previewShape, color: previewColor, baseTexture, parameters: glsl.parameters ?? [] });
+  }, [previewShape, previewColor, baseTexture, standalone]);
+
+  useEffect(() => {
+    if (!sessionId || !previewEnabled) return;
+    const nextGlsl = codegen(debouncedNodes, debouncedEdges, subgraphs);
+    void sendShaderPreviewRef.current(nextGlsl, debouncedPreviewShape, colorFromHex(debouncedPreviewColor), {
+      baseTexture,
+      textures: uploadedUniformTextures,
+    });
+  }, [
+    baseTexture,
+    debouncedEdges,
+    debouncedNodes,
+    debouncedPreviewColor,
+    debouncedPreviewShape,
+    previewEnabled,
+    sessionId,
+    subgraphs,
+    uploadedUniformTextures,
+  ]);
+
   const statusColor = {
     idle: 'bg-muted text-muted-foreground',
     validating: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400',
@@ -48,13 +177,9 @@ export function CodePreview() {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       <div className="flex items-center justify-between gap-2 px-3 py-2 border-b shrink-0">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-          GLSL Output
-        </span>
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">GLSL Output</span>
         <div className="flex items-center gap-2">
-          <Badge className={cn('text-[9px] h-4 px-1.5 rounded-full', statusColor)}>
-            {validationStatus}
-          </Badge>
+          <Badge className={cn('text-[9px] h-4 px-1.5 rounded-full', statusColor)}>{validationStatus}</Badge>
           <button
             onClick={handleCopy}
             className="flex items-center justify-center size-5 rounded hover:bg-muted text-muted-foreground transition-colors"
@@ -68,6 +193,7 @@ export function CodePreview() {
       <ScrollArea className="flex-1 min-h-0">
         <SyntaxHighlighter
           language="glsl"
+          breakLines
           style={{
             ...hlTheme,
             hljs: {
@@ -83,6 +209,7 @@ export function CodePreview() {
             padding: '12px',
             background: 'transparent',
             margin: 0,
+            width: '100%',
           }}
           showLineNumbers
           wrapLines
@@ -107,12 +234,7 @@ export function CodePreview() {
       )}
 
       <div className="border-t px-3 py-2 flex gap-2 shrink-0">
-        <Button
-          size="sm"
-          variant="outline"
-          className="h-7 text-xs flex-1"
-          onClick={() => generateAndStore()}
-        >
+        <Button size="sm" variant="outline" className="h-7 text-xs flex-1" onClick={() => generateAndStore()}>
           Generate
         </Button>
         <Button
@@ -127,12 +249,95 @@ export function CodePreview() {
         <Button
           size="sm"
           className="h-7 text-xs flex-1"
-          disabled={!sessionId || !playgroundTarget}
-          onClick={() => applyToPlayground()}
+          disabled={!sessionId || !playgroundTarget || hasMissingTextureUploads}
+          title={
+            hasMissingTextureUploads
+              ? 'Upload all texture inputs in the node inspector before applying this shader'
+              : undefined
+          }
+          onClick={() => applyToPlayground(uploadedUniformTextures)}
         >
           Apply
         </Button>
       </div>
+
+      <div className="border-t px-3 py-2 flex items-center gap-2 shrink-0">
+        <Select value={previewShape} onValueChange={handlePreviewShapeChange} disabled={!previewAvailable}>
+          <SelectTrigger className="h-7 min-w-0 flex-1 text-xs">
+            <SelectValue aria-label={previewShape} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="circle">Circle</SelectItem>
+            <SelectItem value="line">Line</SelectItem>
+            <SelectItem value="rectangle">Rectangle</SelectItem>
+          </SelectContent>
+        </Select>
+        <label
+          className="relative size-7 shrink-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-colors hover:bg-muted"
+          title="Preview element color"
+        >
+          <span className="sr-only">Preview element color</span>
+          <span className="absolute inset-1 rounded-sm" style={{ backgroundColor: previewColor }} />
+          <input
+            type="color"
+            value={previewColor}
+            disabled={!previewAvailable}
+            onChange={(event) => setPreviewColor(event.target.value)}
+            className="absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+          />
+        </label>
+        <Button
+          size="sm"
+          variant={previewEnabled ? 'default' : 'outline'}
+          className="h-7 text-xs px-2 min-w-24"
+          disabled={!previewAvailable}
+          onClick={() => void handlePreviewToggle()}
+          title={
+            standalone
+              ? 'Toggle shader preview in the isolated preview frame'
+              : 'Toggle shader preview on a temporary shape in the running game'
+          }
+        >
+          {previewEnabled ? <EyeOffIcon className="size-3.5" /> : <EyeIcon className="size-3.5" />}
+          {previewEnabled ? 'Preview Off' : 'Preview On'}
+        </Button>
+      </div>
+
+      <div className="border-t px-3 py-2 grid gap-2 shrink-0">
+        <div className="flex items-center justify-between gap-2">
+          <div className="min-w-0">
+            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              Preview Texture
+            </div>
+            <div className="truncate text-[10px] text-muted-foreground">
+              {baseTexture?.filename ?? 'Temporary shape texture'}
+            </div>
+          </div>
+          <div className="flex gap-1">
+            {baseTexture && (
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-7"
+                title="Clear preview texture"
+                onClick={() => setBaseTexture(null)}
+              >
+                <XIcon className="size-3.5" />
+              </Button>
+            )}
+            <Button
+              size="icon"
+              variant="outline"
+              className="size-7"
+              title="Upload preview texture"
+              disabled={!previewAvailable}
+              onClick={() => void uploadBaseTexture()}
+            >
+              <FolderOpenIcon className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/shader-graph/NodeInspector.tsx b/src/pages/shader-graph/NodeInspector.tsx
index eb2862d7..7603b979 100644
--- a/src/pages/shader-graph/NodeInspector.tsx
+++ b/src/pages/shader-graph/NodeInspector.tsx
@@ -1,26 +1,245 @@
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { GlslCodeInput } from '@/components/ui/glsl-code-input';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useShaderGraphStore } from '@/store/shader-graph';
-import { NODE_DEFS } from './nodeDefs';
-import type { NodeType } from '@/types/shader-graph';
-import { Trash2Icon } from 'lucide-react';
+import { getNodeDef, PORT_TYPE_COLORS } from './nodeDefs';
+import type { NodeType, PortDef } from '@/types/shader-graph';
+import { Code2Icon, FolderOpenIcon, Trash2Icon, XIcon } from 'lucide-react';
+import { useState } from 'react';
+import { shaderParameterUniformName, shaderTextureUniformName } from './glslUtils';
+import { pickShaderTexture } from './textureUpload';
+import { toast } from 'sonner';
+import { customFunctionNodeDef, customFunctionSource, validateCustomFunctionSource } from './customNode';
+
+function clamp01(value: number) {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(1, value));
+}
+
+function vec4Value(value: unknown): [number, number, number, number] {
+  const raw = Array.isArray(value) ? value : [0, 0, 0, 1];
+  return [
+    clamp01(Number(raw[0] ?? 0)),
+    clamp01(Number(raw[1] ?? 0)),
+    clamp01(Number(raw[2] ?? 0)),
+    clamp01(Number(raw[3] ?? 1)),
+  ];
+}
+
+function vec4ToHex(value: [number, number, number, number]) {
+  const part = (channel: number) =>
+    Math.round(clamp01(channel) * 255)
+      .toString(16)
+      .padStart(2, '0');
+  return `#${part(value[0])}${part(value[1])}${part(value[2])}`;
+}
+
+function hexToRgb(value: string) {
+  const match = value.match(/^#?([0-9a-f]{6})$/i);
+  if (!match) return null;
+  const int = Number.parseInt(match[1], 16);
+  return [((int >> 16) & 255) / 255, ((int >> 8) & 255) / 255, (int & 255) / 255] as const;
+}
+
+function defaultPortValue(port: PortDef): number | number[] {
+  if (port.defaultValue !== undefined) return port.defaultValue;
+  if (port.type === 'vec2') return [0, 0];
+  if (port.type === 'vec3') return [0, 0, 0];
+  if (port.type === 'vec4') return [0, 0, 0, 1];
+  return 0;
+}
+
+function clampValue(value: number, port: PortDef): number {
+  if (!Number.isFinite(value)) return 0;
+  if (port.min !== undefined && value < port.min) return port.min;
+  if (port.max !== undefined && value > port.max) return port.max;
+  return value;
+}
+
+function finiteValue(value: unknown, fallback = 0): number {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+}
+
+function optionalFiniteValue(value: unknown): number | undefined {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : undefined;
+}
+
+function portStep(port: PortDef): number {
+  return port.step ?? 0.01;
+}
+
+const PARAMETER_NODE_TYPES = new Set<NodeType>([
+  'FloatParameter',
+  'Vec2Parameter',
+  'Vec3Parameter',
+  'Vec4Parameter',
+  'ColorParameter',
+  'BooleanParameter',
+  'TextureParameter',
+]);
+
+function isParameterNode(nodeType: NodeType): boolean {
+  return PARAMETER_NODE_TYPES.has(nodeType);
+}
+
+function PortBadge({ port }: { port: PortDef }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded border border-border/70 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px]">
+      <span
+        className="size-2 rounded-full"
+        style={{ backgroundColor: PORT_TYPE_COLORS[port.type] }}
+      />
+      <span className="font-sans text-foreground">{port.label}</span>
+      <span className="text-muted-foreground">{port.type}</span>
+    </span>
+  );
+}
 
 export function NodeInspector() {
   const {
     nodes,
     edges,
+    subgraphs,
+    activeSubgraphId,
     selectedNodeId,
     selectedEdgeId,
+    textureUploads,
     updateNodeData,
+    setEdges,
+    setTextureUpload,
+    clearTextureUpload,
     setShaderName,
     shaderName,
     removeNode,
     removeEdge,
   } = useShaderGraphStore();
+  const [vec4EditMode, setVec4EditMode] = useState<'vector' | 'color'>('vector');
+  const [customModalOpen, setCustomModalOpen] = useState(false);
+  const [customDraft, setCustomDraft] = useState('');
+
+  const activeSubgraph = activeSubgraphId ? subgraphs.find((subgraph) => subgraph.id === activeSubgraphId) : null;
+  const graphNodes = activeSubgraph?.nodes ?? nodes;
+  const graphEdges = activeSubgraph?.edges ?? edges;
+  const selected = selectedNodeId ? graphNodes.find((n) => n.id === selectedNodeId) : null;
+  const def = selected ? getNodeDef(selected.data) : null;
+  const selectedEdge = selectedEdgeId ? graphEdges.find((e) => e.id === selectedEdgeId) : null;
+  const selectedVec4 = selected ? vec4Value(selected.data.values?.val) : [0, 0, 0, 1] as [number, number, number, number];
+  const selectedTextureUpload = selected ? textureUploads[selected.id] : null;
+  const customDraftValidation = validateCustomFunctionSource(customDraft);
+
+  function updateSelectedVec4(next: [number, number, number, number]) {
+    if (!selected) return;
+    updateNodeData(selected.id, { values: { ...selected.data.values, val: next } });
+  }
+
+  function updateSelectedInput(port: PortDef, next: number | number[]) {
+    if (!selected) return;
+    updateNodeData(selected.id, { values: { ...selected.data.values, [port.id]: next } });
+  }
+
+  async function uploadSelectedTexture() {
+    if (!selected) return;
+    const texture = await pickShaderTexture();
+    if (!texture) return;
+    setTextureUpload(selected.id, texture);
+    toast.success(`${selected.data.label || 'Texture'} loaded: ${texture.filename}`);
+  }
+
+  function openCustomFunctionModal() {
+    if (!selected) return;
+    setCustomDraft(customFunctionSource(selected.data));
+    setCustomModalOpen(true);
+  }
+
+  function saveCustomFunction() {
+    if (!selected) return;
+    const validation = validateCustomFunctionSource(customDraft);
+    if (!validation.signature) {
+      toast.error(validation.errors[0] ?? 'Custom function is not valid.');
+      return;
+    }
+
+    const nextData = { ...selected.data, customCode: customDraft };
+    const nextDef = customFunctionNodeDef(nextData);
+    const inputIds = new Set(nextDef.inputs.map((port) => port.id));
+    const outputIds = new Set(nextDef.outputs.map((port) => port.id));
+
+    setEdges(
+      graphEdges.filter((edge) => {
+        if (edge.target === selected.id && edge.targetHandle && !inputIds.has(edge.targetHandle)) return false;
+        if (edge.source === selected.id && edge.sourceHandle && !outputIds.has(edge.sourceHandle)) return false;
+        return true;
+      }),
+    );
+    updateNodeData(selected.id, { customCode: customDraft });
+    setCustomModalOpen(false);
+    toast.success('Custom function updated');
+  }
+
+  function renderPortValueEditor(port: PortDef) {
+    if (!selected) return null;
+
+    const rawValue = selected.data.values?.[port.id] ?? defaultPortValue(port);
+    const inputProps = {
+      min: port.min,
+      max: port.max,
+      step: portStep(port),
+    };
+
+    if (port.type === 'float') {
+      return (
+        <Input
+          className="h-7 text-xs"
+          type="number"
+          {...inputProps}
+          value={finiteValue(rawValue)}
+          onChange={(e) => updateSelectedInput(port, clampValue(parseFloat(e.target.value), port))}
+        />
+      );
+    }
+
+    if (port.type === 'image') {
+      return (
+        <p className="text-[10px] text-muted-foreground">
+          Uses the main sprite texture unless a texture input is connected.
+        </p>
+      );
+    }
+
+    if (port.type === 'vec2' || port.type === 'vec3' || port.type === 'vec4') {
+      const count = port.type === 'vec2' ? 2 : port.type === 'vec3' ? 3 : 4;
+      const fallback = defaultPortValue(port) as number[];
+      const value = Array.isArray(rawValue) ? rawValue : fallback;
+      const gridClass = count === 2 ? 'grid grid-cols-2 gap-1' : count === 3 ? 'grid grid-cols-3 gap-1' : 'grid grid-cols-2 gap-1';
+      return (
+        <div className={gridClass}>
+          {Array.from({ length: count }).map((_, idx) => (
+            <Input
+              key={idx}
+              aria-label={`${port.label} ${idx + 1}`}
+              className="h-7 text-xs"
+              type="number"
+              {...inputProps}
+              value={finiteValue(value[idx], finiteValue(fallback[idx]))}
+              onChange={(e) => {
+                const next = [...value];
+                next[idx] = clampValue(parseFloat(e.target.value), port);
+                updateSelectedInput(port, next);
+              }}
+            />
+          ))}
+        </div>
+      );
+    }
 
-  const selected = selectedNodeId ? nodes.find((n) => n.id === selectedNodeId) : null;
-  const def = selected ? NODE_DEFS[selected.data.nodeType as NodeType] : null;
-  const selectedEdge = selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null;
+    return null;
+  }
 
   return (
     <div className="flex flex-col gap-3 p-3 text-xs">
@@ -67,26 +286,74 @@ export function NodeInspector() {
             />
           </div>
 
-          {selected.data.nodeType === 'FloatConstant' && (
+          {isParameterNode(selected.data.nodeType) && selected.data.nodeType !== 'TextureParameter' && (
+            <div className="grid gap-1">
+              <Label className="text-[10px] text-muted-foreground">Uniform Name</Label>
+              <Input
+                className="h-7 text-xs font-mono"
+                value={String(selected.data.uniformName ?? '')}
+                placeholder={shaderParameterUniformName(selected.id)}
+                onChange={(e) => updateNodeData(selected.id, { uniformName: shaderParameterUniformName(selected.id, e.target.value) })}
+              />
+            </div>
+          )}
+
+          {selected.data.nodeType === 'CustomFunction' && (
+            <div className="grid gap-2 rounded border border-border/70 p-2">
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <div className="text-[10px] font-medium text-muted-foreground">Function</div>
+                  <div className="truncate font-mono text-[10px] text-muted-foreground">
+                    {validateCustomFunctionSource(customFunctionSource(selected.data)).signature?.functionName ?? 'Invalid custom function'}
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-7 gap-1.5 px-2 text-xs"
+                  onClick={openCustomFunctionModal}
+                >
+                  <Code2Icon className="size-3.5" />
+                  Edit
+                </Button>
+              </div>
+              <p className="text-[10px] text-muted-foreground">
+                Parameters become input ports. A return value and `out` parameters become output ports.
+              </p>
+            </div>
+          )}
+
+          {(selected.data.nodeType === 'FloatConstant' || selected.data.nodeType === 'FloatParameter') && (
             <div className="grid gap-1">
-              <Label className="text-[10px] text-muted-foreground">Value</Label>
+              <Label className="text-[10px] text-muted-foreground">{selected.data.nodeType === 'FloatParameter' ? 'Default Value' : 'Value'}</Label>
               <Input
                 className="h-7 text-xs"
                 type="number"
-                step={0.01}
-                value={(selected.data.values?.val as number) ?? 0}
+                min={optionalFiniteValue(selected.data.min)}
+                max={optionalFiniteValue(selected.data.max)}
+                step={optionalFiniteValue(selected.data.step) ?? 0.01}
+                value={finiteValue(selected.data.values?.val)}
                 onChange={(e) =>
                   updateNodeData(selected.id, {
-                    values: { ...selected.data.values, val: parseFloat(e.target.value) },
+                    values: {
+                      ...selected.data.values,
+                      val: clampValue(parseFloat(e.target.value), {
+                        id: 'val',
+                        label: 'Value',
+                        type: 'float',
+                        min: optionalFiniteValue(selected.data.min),
+                        max: optionalFiniteValue(selected.data.max),
+                      }),
+                    },
                   })
                 }
               />
             </div>
           )}
 
-          {selected.data.nodeType === 'Vec2Constant' && (
+          {(selected.data.nodeType === 'Vec2Constant' || selected.data.nodeType === 'Vec2Parameter') && (
             <div className="grid gap-1">
-              <Label className="text-[10px] text-muted-foreground">X / Y</Label>
+              <Label className="text-[10px] text-muted-foreground">{selected.data.nodeType === 'Vec2Parameter' ? 'Default X / Y' : 'X / Y'}</Label>
               <div className="flex gap-1">
                 {[0, 1].map((idx) => (
                   <Input
@@ -107,9 +374,9 @@ export function NodeInspector() {
             </div>
           )}
 
-          {selected.data.nodeType === 'Vec3Constant' && (
+          {(selected.data.nodeType === 'Vec3Constant' || selected.data.nodeType === 'Vec3Parameter') && (
             <div className="grid gap-1">
-              <Label className="text-[10px] text-muted-foreground">X / Y / Z</Label>
+              <Label className="text-[10px] text-muted-foreground">{selected.data.nodeType === 'Vec3Parameter' ? 'Default X / Y / Z' : 'X / Y / Z'}</Label>
               <div className="grid grid-cols-3 gap-1">
                 {[0, 1, 2].map((idx) => (
                   <Input
@@ -130,40 +397,159 @@ export function NodeInspector() {
             </div>
           )}
 
-          {selected.data.nodeType === 'Vec4Constant' && (
+          {(selected.data.nodeType === 'Vec4Constant' || selected.data.nodeType === 'Vec4Parameter' || selected.data.nodeType === 'ColorParameter') && (
             <div className="grid gap-1">
-              <Label className="text-[10px] text-muted-foreground">R / G / B / A</Label>
-              <div className="grid grid-cols-2 gap-1">
-                {[0, 1, 2, 3].map((idx) => (
-                  <Input
-                    key={idx}
-                    className="h-7 text-xs"
-                    type="number"
-                    step={0.01}
-                    min={0}
-                    max={1}
-                    value={((selected.data.values?.val as number[]) ?? [0, 0, 0, 1])[idx]}
-                    onChange={(e) => {
-                      const prev = (selected.data.values?.val as number[]) ?? [0, 0, 0, 1];
-                      const next = [...prev] as [number, number, number, number];
-                      next[idx] = parseFloat(e.target.value);
-                      updateNodeData(selected.id, { values: { ...selected.data.values, val: next } });
-                    }}
-                  />
-                ))}
+              <div className="flex items-center justify-between gap-2">
+                <Label className="text-[10px] text-muted-foreground">{selected.data.nodeType === 'ColorParameter' ? 'Default Color' : selected.data.nodeType === 'Vec4Parameter' ? 'Default Vec4 Value' : 'Vec4 Value'}</Label>
+                <span
+                  className="size-5 rounded border border-input"
+                  style={{ backgroundColor: vec4ToHex(selectedVec4), opacity: selectedVec4[3] }}
+                />
+              </div>
+              <Tabs value={vec4EditMode} onValueChange={(value) => setVec4EditMode(value as 'vector' | 'color')}>
+                <TabsList className="h-7 w-full rounded-md">
+                  <TabsTrigger className="h-5 text-[10px]" value="vector">Vector</TabsTrigger>
+                  <TabsTrigger className="h-5 text-[10px]" value="color">Color</TabsTrigger>
+                </TabsList>
+                <TabsContent value="vector" className="mt-1">
+                  <div className="grid grid-cols-2 gap-1">
+                    {[0, 1, 2, 3].map((idx) => (
+                      <Input
+                        key={idx}
+                        aria-label={['R', 'G', 'B', 'A'][idx]}
+                        className="h-7 text-xs"
+                        type="number"
+                        step={0.01}
+                        min={0}
+                        max={1}
+                        value={selectedVec4[idx]}
+                        onChange={(e) => {
+                          const next = [...selectedVec4] as [number, number, number, number];
+                          next[idx] = clamp01(parseFloat(e.target.value));
+                          updateSelectedVec4(next);
+                        }}
+                      />
+                    ))}
+                  </div>
+                </TabsContent>
+                <TabsContent value="color" className="mt-1">
+                  <div className="flex items-center gap-2">
+                    <label
+                      className="relative size-8 shrink-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-colors hover:bg-muted"
+                      title="Edit RGB as color"
+                    >
+                      <span className="sr-only">Edit RGB as color</span>
+                      <span
+                        className="absolute inset-1 rounded-sm"
+                        style={{ backgroundColor: vec4ToHex(selectedVec4) }}
+                      />
+                      <input
+                        type="color"
+                        value={vec4ToHex(selectedVec4)}
+                        onChange={(event) => {
+                          const rgb = hexToRgb(event.target.value);
+                          if (!rgb) return;
+                          updateSelectedVec4([rgb[0], rgb[1], rgb[2], selectedVec4[3]]);
+                        }}
+                        className="absolute inset-0 size-full cursor-pointer opacity-0"
+                      />
+                    </label>
+                    <Input
+                      aria-label="Alpha"
+                      className="h-8 text-xs"
+                      type="number"
+                      step={0.01}
+                      min={0}
+                      max={1}
+                      value={selectedVec4[3]}
+                      onChange={(e) =>
+                        updateSelectedVec4([selectedVec4[0], selectedVec4[1], selectedVec4[2], clamp01(parseFloat(e.target.value))])
+                      }
+                    />
+                  </div>
+                </TabsContent>
+              </Tabs>
+            </div>
+          )}
+
+          {selected.data.nodeType === 'BooleanParameter' && (
+            <div className="flex items-center justify-between gap-2 rounded border border-border/70 p-2">
+              <Label className="text-[10px] text-muted-foreground">Default Enabled</Label>
+              <Switch
+                checked={finiteValue(selected.data.values?.val) >= 0.5}
+                onCheckedChange={(checked) => updateNodeData(selected.id, { values: { ...selected.data.values, val: checked ? 1 : 0 } })}
+              />
+            </div>
+          )}
+
+          {(selected.data.nodeType === 'TextureInput' || selected.data.nodeType === 'TextureUniformColor' || selected.data.nodeType === 'TextureParameter') && (
+            <div className="grid gap-2 rounded border border-border/70 p-2">
+              <div className="grid gap-1">
+                <Label className="text-[10px] text-muted-foreground">Uniform Name</Label>
+                <Input
+                  className="h-7 text-xs font-mono"
+                  value={String(selected.data.uniformName ?? '')}
+                  placeholder={selected.data.nodeType === 'TextureParameter' ? shaderParameterUniformName(selected.id) : shaderTextureUniformName(selected.id)}
+                  onChange={(e) => updateNodeData(selected.id, {
+                    uniformName: selected.data.nodeType === 'TextureParameter'
+                      ? shaderParameterUniformName(selected.id, e.target.value)
+                      : e.target.value,
+                  })}
+                />
+              </div>
+              <div className="flex items-center justify-between gap-2">
+                <div className="min-w-0">
+                  <div className="text-[10px] font-medium text-muted-foreground">Texture File</div>
+                  <div className="truncate text-[10px] text-muted-foreground">
+                    {selectedTextureUpload?.filename ?? 'Fallback texture until a file is loaded'}
+                  </div>
+                </div>
+                <div className="flex gap-1">
+                  {selectedTextureUpload && (
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="size-7"
+                      title="Clear texture file"
+                      onClick={() => clearTextureUpload(selected.id)}
+                    >
+                      <XIcon className="size-3.5" />
+                    </Button>
+                  )}
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    className="size-7"
+                    title="Upload texture file"
+                    onClick={() => void uploadSelectedTexture()}
+                  >
+                    <FolderOpenIcon className="size-3.5" />
+                  </Button>
+                </div>
               </div>
+              <p className="text-[10px] text-muted-foreground">
+                Preview and runtime uploads bind this texture by name. Use one node for each extra texture.
+              </p>
             </div>
           )}
 
           {def.inputs.length > 0 && (
-            <div className="grid gap-0.5">
+            <div className="grid gap-2">
               <div className="text-[10px] text-muted-foreground font-medium mb-0.5">Inputs</div>
-              {def.inputs.map((port) => (
-                <div key={port.id} className="flex items-center justify-between">
-                  <span className="text-[10px] text-muted-foreground">{port.label}</span>
-                  <span className="text-[10px] font-mono text-muted-foreground/60">{port.type}</span>
-                </div>
-              ))}
+              {def.inputs.map((port) => {
+                const connected = graphEdges.some((edge) => edge.target === selected.id && edge.targetHandle === port.id);
+                return (
+                  <div key={port.id} className="grid gap-1 rounded border border-border/70 p-2">
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-[10px] text-muted-foreground">{port.label}</span>
+                      <span className="text-[10px] font-mono text-muted-foreground/60">
+                        {connected ? 'connected' : port.type}
+                      </span>
+                    </div>
+                    {!connected && renderPortValueEditor(port)}
+                  </div>
+                );
+              })}
             </div>
           )}
           {def.outputs.length > 0 && (
@@ -207,6 +593,70 @@ export function NodeInspector() {
           Select a node or edge to inspect it.
         </p>
       )}
+
+      <Dialog open={customModalOpen} onOpenChange={setCustomModalOpen}>
+        <DialogContent className="max-h-[90vh] overflow-hidden sm:max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>Custom GLSL Function</DialogTitle>
+            <DialogDescription>
+              Write one GLSL function. Input parameters become graph inputs; the return value and `out` parameters become outputs.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid min-h-0 gap-3">
+            <GlslCodeInput
+              value={customDraft}
+              onChange={setCustomDraft}
+              autoFocus
+              placeholder="vec4 my_node(vec4 color, float amount) { return color * amount; }"
+              maxHeight={420}
+            />
+
+            <div className="grid gap-2 rounded border border-border/70 p-2">
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                Validation
+              </div>
+              {customDraftValidation.signature ? (
+                <div className="grid gap-1 text-[10px] text-muted-foreground">
+                  <div>
+                    <span className="font-medium text-foreground">{customDraftValidation.signature.functionName}</span>
+                    <span className="font-mono"> returns {customDraftValidation.signature.returnType}</span>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-1">
+                    Inputs:{' '}
+                    {customDraftValidation.signature.inputs.length
+                      ? customDraftValidation.signature.inputs.map((port) => <PortBadge key={port.id} port={port} />)
+                      : 'none'}
+                  </div>
+                  <div className="flex flex-wrap items-center gap-1">
+                    Outputs:{' '}
+                    {customDraftValidation.signature.outputs.length
+                      ? customDraftValidation.signature.outputs.map((port) => <PortBadge key={port.id} port={port} />)
+                      : 'none'}
+                  </div>
+                </div>
+              ) : (
+                <div className="grid gap-1">
+                  {customDraftValidation.errors.map((error) => (
+                    <p key={error} className="font-mono text-[10px] text-red-600 dark:text-red-400">
+                      {error}
+                    </p>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button size="sm" variant="outline" onClick={() => setCustomModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button size="sm" disabled={!customDraftValidation.signature} onClick={saveCustomFunction}>
+              Save Function
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/shader-graph/ShaderCanvas.tsx b/src/pages/shader-graph/ShaderCanvas.tsx
index 843680ae..bb58208c 100644
--- a/src/pages/shader-graph/ShaderCanvas.tsx
+++ b/src/pages/shader-graph/ShaderCanvas.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ReactFlow,
   Background,
@@ -13,64 +13,135 @@ import {
   type Edge,
   type Node,
   type ReactFlowInstance,
+  type OnSelectionChangeParams,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import type { ShaderNodeData, NodeType } from '@/types/shader-graph';
 import { useShaderGraphStore } from '@/store/shader-graph';
-import { NODE_DEFS } from './nodeDefs';
+import { getNodeDef, NODE_DEFS } from './nodeDefs';
 import { nodeTypes } from './nodes';
-import { Redo2Icon, Undo2Icon } from 'lucide-react';
+import { ArrowLeftIcon, CombineIcon, Redo2Icon, SearchIcon, Undo2Icon } from 'lucide-react';
+import { toast } from 'sonner';
+import { useTheme } from '@/hooks/use-theme';
+import {
+  addNodeAt,
+  cloneGraphFragment,
+  cloneShaderNodeData,
+  defaultNodeData,
+  inferSubgraphFromSelection,
+  linkSuggestions,
+  portRefs,
+  type LinkSuggestion,
+  type PortRef,
+} from './graphUtils';
+
+type ShaderClipboard = {
+  type: 'feather.shader-graph-fragment';
+  nodes: Node<ShaderNodeData>[];
+  edges: Edge[];
+};
+
+let shaderClipboard: ShaderClipboard | null = null;
 
-let idCounter = Date.now();
-function nextId() {
-  return `node-${++idCounter}`;
+// Hex equivalents of the Tailwind *-500 colors used in CATEGORY_COLORS
+const CATEGORY_HEX: Record<string, string> = {
+  Custom: '#71717a',
+  Input: '#3b82f6',
+  Math: '#f97316',
+  Complex: '#f59e0b',
+  Quaternion: '#d946ef',
+  Symmetry: '#8b5cf6',
+  Random: '#78716c',
+  Vector: '#a855f7',
+  Color: '#ec4899',
+  Composite: '#f43f5e',
+  Noise: '#22c55e',
+  Pattern: '#10b981',
+  Halftone: '#84cc16',
+  'Pixel Perfect': '#0ea5e9',
+  UV: '#6366f1',
+  Effect: '#06b6d4',
+  Output: '#ef4444',
+  Vertex: '#eab308',
+  SDF: '#14b8a6',
+};
+
+function miniMapNodeColor(node: Node<ShaderNodeData>): string {
+  const def = getNodeDef(node.data);
+  return CATEGORY_HEX[def?.category ?? ''] ?? '#71717a';
 }
 
 export function ShaderCanvas() {
   const nodes = useShaderGraphStore((s) => s.nodes);
   const edges = useShaderGraphStore((s) => s.edges);
+  const subgraphs = useShaderGraphStore((s) => s.subgraphs);
+  const activeSubgraphId = useShaderGraphStore((s) => s.activeSubgraphId);
   const setNodes = useShaderGraphStore((s) => s.setNodes);
   const setEdges = useShaderGraphStore((s) => s.setEdges);
   const addNode = useShaderGraphStore((s) => s.addNode);
+  const addNodesAndEdges = useShaderGraphStore((s) => s.addNodesAndEdges);
+  const replaceSelectionWithSubgraph = useShaderGraphStore((s) => s.replaceSelectionWithSubgraph);
   const removeNode = useShaderGraphStore((s) => s.removeNode);
   const removeEdge = useShaderGraphStore((s) => s.removeEdge);
+  const unlinkNode = useShaderGraphStore((s) => s.unlinkNode);
   const selectNode = useShaderGraphStore((s) => s.selectNode);
   const selectEdge = useShaderGraphStore((s) => s.selectEdge);
   const selectedNodeId = useShaderGraphStore((s) => s.selectedNodeId);
   const selectedEdgeId = useShaderGraphStore((s) => s.selectedEdgeId);
   const undo = useShaderGraphStore((s) => s.undo);
   const redo = useShaderGraphStore((s) => s.redo);
+  const enterSubgraph = useShaderGraphStore((s) => s.enterSubgraph);
+  const exitSubgraph = useShaderGraphStore((s) => s.exitSubgraph);
   const canUndo = useShaderGraphStore((s) => s.undoStack.length > 0);
   const canRedo = useShaderGraphStore((s) => s.redoStack.length > 0);
+  const [nodePicker, setNodePicker] = useState<{ x: number; y: number; position: { x: number; y: number }; search: string } | null>(null);
+  const [suggestionMenu, setSuggestionMenu] = useState<{ x: number; y: number; port: PortRef; items: LinkSuggestion[] } | null>(null);
+  const [selectedNodeIds, setSelectedNodeIds] = useState<Set<string>>(new Set());
+  const [subgraphDialogOpen, setSubgraphDialogOpen] = useState(false);
+  const [subgraphName, setSubgraphName] = useState('Subgraph');
+  const pasteOffsetRef = useRef(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   // Captured via onInit — avoids calling useReactFlow() at the same level as <ReactFlow>
   const rfRef = useRef<ReactFlowInstance<Node<ShaderNodeData>> | null>(null);
+  const activeSubgraph = activeSubgraphId ? subgraphs.find((subgraph) => subgraph.id === activeSubgraphId) : null;
+  const graphNodes = activeSubgraph?.nodes ?? nodes;
+  const graphEdges = activeSubgraph?.edges ?? edges;
+
+  useEffect(() => {
+    setSelectedNodeIds(new Set());
+  }, [activeSubgraphId]);
 
   const onNodesChange = useCallback(
     (changes: NodeChange<Node<ShaderNodeData>>[]) => {
-      setNodes(applyNodeChanges(changes, nodes));
+      setNodes(applyNodeChanges(changes, graphNodes));
     },
-    [nodes, setNodes],
+    [graphNodes, setNodes],
   );
 
   const onEdgesChange = useCallback(
     (changes: EdgeChange[]) => {
-      setEdges(applyEdgeChanges(changes, edges));
+      setEdges(applyEdgeChanges(changes, graphEdges));
     },
-    [edges, setEdges],
+    [graphEdges, setEdges],
   );
 
   const onConnect = useCallback(
     (connection: Connection) => {
-      setEdges(addEdge(connection, edges));
+      setEdges(addEdge(connection, graphEdges));
     },
-    [edges, setEdges],
+    [graphEdges, setEdges],
   );
 
   const onNodeClick = useCallback(
-    (_: React.MouseEvent, node: Node) => {
+    (event: React.MouseEvent, node: Node) => {
+      if (event.shiftKey || event.metaKey || event.ctrlKey) return;
       selectNode(node.id);
+      setSelectedNodeIds(new Set([node.id]));
     },
     [selectNode],
   );
@@ -82,26 +153,49 @@ export function ShaderCanvas() {
     [selectEdge],
   );
 
+  const onNodeDoubleClick = useCallback(
+    (_: React.MouseEvent, node: Node<ShaderNodeData>) => {
+      if (node.data.nodeType !== 'SubgraphInstance' || !node.data.subgraphId) return;
+      enterSubgraph(String(node.data.subgraphId));
+      setSelectedNodeIds(new Set());
+    },
+    [enterSubgraph],
+  );
+
   const onPaneClick = useCallback(() => {
     selectNode(null);
+    setSelectedNodeIds(new Set());
   }, [selectNode]);
 
+  const onSelectionChange = useCallback(
+    ({ nodes: selectedNodes }: OnSelectionChangeParams<Node<ShaderNodeData>, Edge>) => {
+      const nextIds = new Set(selectedNodes.map((node) => node.id));
+      setSelectedNodeIds(nextIds);
+      if (nextIds.size === 1) {
+        selectNode(selectedNodes[0].id);
+      } else if (nextIds.size === 0) {
+        selectNode(null);
+      }
+    },
+    [selectNode],
+  );
+
   const isValidConnection = useCallback(
     (connection: Connection | Edge) => {
       if (!connection.source || !connection.target) return false;
       if (connection.source === connection.target) return false;
-      const sourceNode = nodes.find((n) => n.id === connection.source);
-      const targetNode = nodes.find((n) => n.id === connection.target);
+      const sourceNode = graphNodes.find((n) => n.id === connection.source);
+      const targetNode = graphNodes.find((n) => n.id === connection.target);
       if (!sourceNode || !targetNode) return false;
-      const sourceDef = NODE_DEFS[sourceNode.data.nodeType as NodeType];
-      const targetDef = NODE_DEFS[targetNode.data.nodeType as NodeType];
+      const sourceDef = getNodeDef(sourceNode.data);
+      const targetDef = getNodeDef(targetNode.data);
       if (!sourceDef || !targetDef) return false;
       const sourcePort = sourceDef.outputs.find((p) => p.id === connection.sourceHandle);
       const targetPort = targetDef.inputs.find((p) => p.id === connection.targetHandle);
       if (!sourcePort || !targetPort) return false;
       return sourcePort.type === targetPort.type;
     },
-    [nodes],
+    [graphNodes],
   );
 
   // Drop handler lives on the wrapper div so it fires regardless of ReactFlow internals
@@ -117,19 +211,266 @@ export function ShaderCanvas() {
         : { x: event.clientX, y: event.clientY };
 
       const def = NODE_DEFS[nodeType];
-      const id = nextId();
+      const id = `node-${Date.now()}-${Math.round(Math.random() * 100000)}`;
 
       addNode({
         id,
         type: 'shaderNode',
         position,
-        data: { label: def.label, nodeType },
+        data: defaultNodeData(nodeType, def.label),
       });
       selectNode(id);
     },
     [addNode, selectNode],
   );
 
+  const insertNode = useCallback(
+    (nodeType: NodeType, position: { x: number; y: number }) => {
+      const node = addNodeAt(nodeType, position);
+      addNode(node);
+      selectNode(node.id);
+      setNodePicker(null);
+      return node;
+    },
+    [addNode, selectNode],
+  );
+
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const handler = (e: MouseEvent) => {
+      e.preventDefault();
+      const rf = rfRef.current;
+      const position = rf
+        ? rf.screenToFlowPosition({ x: e.clientX, y: e.clientY })
+        : { x: e.clientX, y: e.clientY };
+      const rect = el.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const x = cx + 256 > rect.width ? Math.max(0, cx - 256) : cx;
+      const y = cy + 340 > rect.height ? Math.max(0, cy - 340) : cy;
+      setSuggestionMenu(null);
+      setNodePicker({ x, y, position, search: '' });
+    };
+    el.addEventListener('contextmenu', handler);
+    return () => el.removeEventListener('contextmenu', handler);
+  }, []);
+
+  const nodePickerItems = useMemo(() => {
+    const query = nodePicker?.search.trim().toLowerCase() ?? '';
+    return Object.entries(NODE_DEFS)
+      .filter(([nodeType, def]) => nodeType !== 'SubgraphInstance' && (!query || def.label.toLowerCase().includes(query) || def.category.toLowerCase().includes(query)))
+      .slice(0, 40) as Array<[NodeType, (typeof NODE_DEFS)[NodeType]]>;
+  }, [nodePicker?.search]);
+
+  const getSelectedIds = useCallback(() => {
+    const selectedIds = new Set([...selectedNodeIds, ...graphNodes.filter((node) => node.selected).map((node) => node.id)]);
+    if (selectedNodeId) selectedIds.add(selectedNodeId);
+    return selectedIds;
+  }, [graphNodes, selectedNodeId, selectedNodeIds]);
+
+  const openSubgraphDialog = useCallback(() => {
+    if (getSelectedIds().size < 2) {
+      toast.info('Select at least two nodes to create a subgraph.');
+      return;
+    }
+    setSubgraphName('Subgraph');
+    setSubgraphDialogOpen(true);
+  }, [getSelectedIds]);
+
+  const createSubgraph = useCallback(() => {
+    const name = subgraphName.trim();
+    if (!name) return;
+    const selectedIds = getSelectedIds();
+    if (selectedIds.size < 2) return;
+    const result = inferSubgraphFromSelection(graphNodes, graphEdges, selectedIds, name);
+    if (!result) return;
+    replaceSelectionWithSubgraph({
+      subgraph: result.subgraph,
+      nodes: result.nodes,
+      edges: result.edges,
+      selectedNodeId: result.instance.id,
+    });
+    setSelectedNodeIds(new Set([result.instance.id]));
+    setSubgraphDialogOpen(false);
+  }, [getSelectedIds, graphEdges, graphNodes, replaceSelectionWithSubgraph, subgraphName]);
+
+  const selectedFragment = useCallback((): ShaderClipboard | null => {
+    const selectedIds = getSelectedIds();
+    if (selectedIds.size === 0) return null;
+    const selectedNodes = graphNodes.filter((node) => selectedIds.has(node.id));
+    if (selectedNodes.length === 0) return null;
+    return {
+      type: 'feather.shader-graph-fragment',
+      nodes: selectedNodes.map((node) => ({ ...node, selected: false, data: cloneShaderNodeData(node.data) })),
+      edges: graphEdges
+        .filter((edge) => selectedIds.has(edge.source) && selectedIds.has(edge.target))
+        .map((edge) => ({ ...edge })),
+    };
+  }, [getSelectedIds, graphEdges, graphNodes]);
+
+  const copySelection = useCallback(() => {
+    const fragment = selectedFragment();
+    if (!fragment) return;
+    shaderClipboard = fragment;
+    pasteOffsetRef.current = 0;
+    void navigator.clipboard?.writeText(JSON.stringify(fragment)).catch(() => undefined);
+    toast.success(fragment.nodes.length === 1 ? 'Copied node' : `Copied ${fragment.nodes.length} nodes`);
+  }, [selectedFragment]);
+
+  const pasteFragment = useCallback(
+    (fragment: ShaderClipboard, duplicate = false) => {
+      if (fragment.nodes.length === 0) return;
+      const minX = Math.min(...fragment.nodes.map((node) => node.position.x));
+      const minY = Math.min(...fragment.nodes.map((node) => node.position.y));
+      const offset = duplicate ? 40 : 40 + pasteOffsetRef.current * 28;
+      const rf = rfRef.current;
+      const viewportCenter = rf
+        ? rf.screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 })
+        : { x: minX + offset, y: minY + offset };
+      const position = duplicate ? { x: minX + offset, y: minY + offset } : viewportCenter;
+      const cloned = cloneGraphFragment(fragment.nodes, fragment.edges, position);
+      const pastedIds = new Set(cloned.nodes.map((node) => node.id));
+      addNodesAndEdges(
+        cloned.nodes.map((node, index) => {
+          const source = fragment.nodes[index];
+          return {
+            ...node,
+            selected: pastedIds.has(node.id),
+            data: {
+              ...node.data,
+              linkedSourceNodeId: source?.data.linkedSourceNodeId ?? source?.id ?? null,
+              linkedSourceLabel: source?.data.linkedSourceLabel ?? source?.data.label ?? null,
+            },
+          };
+        }),
+        cloned.edges,
+        cloned.firstNodeId,
+      );
+      setSelectedNodeIds(pastedIds);
+      if (!duplicate) pasteOffsetRef.current += 1;
+    },
+    [addNodesAndEdges],
+  );
+
+  const pasteSelection = useCallback(() => {
+    const paste = (fragment: ShaderClipboard | null) => {
+      if (!fragment) {
+        toast.info('Copy a node first.');
+        return;
+      }
+      pasteFragment(fragment);
+    };
+
+    if (shaderClipboard) {
+      paste(shaderClipboard);
+      return;
+    }
+
+    void navigator.clipboard?.readText()
+      .then((text) => {
+        const parsed = JSON.parse(text) as Partial<ShaderClipboard>;
+        paste(parsed.type === 'feather.shader-graph-fragment' && Array.isArray(parsed.nodes) && Array.isArray(parsed.edges)
+          ? { type: 'feather.shader-graph-fragment', nodes: parsed.nodes, edges: parsed.edges }
+          : null);
+      })
+      .catch(() => paste(null));
+  }, [pasteFragment]);
+
+  const duplicateSelection = useCallback(() => {
+    const fragment = selectedFragment();
+    if (!fragment) return;
+    pasteFragment(fragment, true);
+  }, [pasteFragment, selectedFragment]);
+
+  useEffect(() => {
+    const onSuggest = (event: Event) => {
+      const detail = (event as CustomEvent<{ nodeId: string; portId: string; direction: 'input' | 'output'; x: number; y: number }>).detail;
+      const port = portRefs(graphNodes, detail.direction).find((candidate) => candidate.nodeId === detail.nodeId && candidate.portId === detail.portId);
+      if (!port) return;
+      const rect = wrapperRef.current?.getBoundingClientRect();
+      const cx = detail.x - (rect?.left ?? 0);
+      const cy = detail.y - (rect?.top ?? 0);
+      const cw = rect?.width ?? 9999;
+      const ch = rect?.height ?? 9999;
+      const x = cx + 288 > cw ? Math.max(0, cx - 288) : cx;
+      const y = cy + 380 > ch ? Math.max(0, cy - 380) : cy;
+      setNodePicker(null);
+      setSuggestionMenu({ x, y, port, items: linkSuggestions(graphNodes, port) });
+    };
+    window.addEventListener('shader-graph:port-suggest', onSuggest);
+    return () => window.removeEventListener('shader-graph:port-suggest', onSuggest);
+  }, [graphNodes]);
+
+  useEffect(() => {
+    const onUnlink = (event: Event) => {
+      const detail = (event as CustomEvent<{ nodeId: string }>).detail;
+      if (!detail?.nodeId) return;
+      const node = graphNodes.find((item) => item.id === detail.nodeId);
+      if (!node?.data.linkedSourceNodeId) return;
+      const confirmed = window.confirm('Unlink this node? It will become its own independent node.');
+      if (!confirmed) return;
+      unlinkNode(detail.nodeId);
+      toast.success('Node unlinked');
+    };
+    window.addEventListener('shader-graph:unlink-node', onUnlink);
+    return () => window.removeEventListener('shader-graph:unlink-node', onUnlink);
+  }, [graphNodes, unlinkNode]);
+
+  const applySuggestion = useCallback(
+    (suggestion: LinkSuggestion) => {
+      if (!suggestionMenu) return;
+      const active = suggestionMenu.port;
+      if (suggestion.kind === 'connect') {
+        const source = active.direction === 'output' ? active : suggestion.target;
+        const target = active.direction === 'input' ? active : suggestion.target;
+        setEdges(addEdge({
+          source: source.nodeId,
+          sourceHandle: source.portId,
+          target: target.nodeId,
+          targetHandle: target.portId,
+        }, graphEdges));
+        setSuggestionMenu(null);
+        return;
+      }
+
+      const rf = rfRef.current;
+      const position = rf
+        ? rf.screenToFlowPosition({ x: suggestionMenu.x + 36, y: suggestionMenu.y - 12 })
+        : { x: suggestionMenu.x + 36, y: suggestionMenu.y - 12 };
+      const def = NODE_DEFS[suggestion.nodeType];
+      const bridge = {
+        id: `node-${Date.now()}-${Math.round(Math.random() * 100000)}`,
+        type: 'shaderNode',
+        position,
+        data: defaultNodeData(suggestion.nodeType, def.label),
+      };
+      const input = def.inputs.find((port) => port.type === active.type) ?? def.inputs[0];
+      const output = def.outputs.find((port) => port.type === active.type) ?? def.outputs[0];
+      const nextEdges = [...graphEdges];
+      if (active.direction === 'output' && input) {
+        nextEdges.push({
+          id: `${active.nodeId}:${active.portId}->${bridge.id}:${input.id}`,
+          source: active.nodeId,
+          sourceHandle: active.portId,
+          target: bridge.id,
+          targetHandle: input.id,
+        });
+      } else if (active.direction === 'input' && output) {
+        nextEdges.push({
+          id: `${bridge.id}:${output.id}->${active.nodeId}:${active.portId}`,
+          source: bridge.id,
+          sourceHandle: output.id,
+          target: active.nodeId,
+          targetHandle: active.portId,
+        });
+      }
+      addNodesAndEdges([bridge], nextEdges.filter((edge) => !graphEdges.some((existing) => existing.id === edge.id)), bridge.id);
+      setSuggestionMenu(null);
+    },
+    [addNodesAndEdges, graphEdges, setEdges, suggestionMenu],
+  );
+
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       const tag = (e.target as HTMLElement).tagName;
@@ -148,6 +489,21 @@ export function ShaderCanvas() {
         redo();
         return;
       }
+      if (modifier && key === 'c') {
+        e.preventDefault();
+        copySelection();
+        return;
+      }
+      if (modifier && key === 'v') {
+        e.preventDefault();
+        pasteSelection();
+        return;
+      }
+      if (modifier && key === 'd') {
+        e.preventDefault();
+        duplicateSelection();
+        return;
+      }
 
       if (e.key !== 'Delete' && e.key !== 'Backspace') return;
       if (selectedNodeId) removeNode(selectedNodeId);
@@ -155,34 +511,70 @@ export function ShaderCanvas() {
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [selectedNodeId, selectedEdgeId, removeNode, removeEdge, redo, undo]);
+  }, [copySelection, duplicateSelection, pasteSelection, selectedNodeId, selectedEdgeId, removeNode, removeEdge, redo, undo]);
 
   const onDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
     event.dataTransfer.dropEffect = 'copy';
   }, []);
 
+  const theme = useTheme();
+
   return (
-    <div className="h-full w-full" style={{ height: '100%', width: '100%' }} onDrop={onDrop} onDragOver={onDragOver}>
+    <div
+      ref={wrapperRef}
+      data-testid="shader-canvas"
+      className="relative h-full w-full"
+      style={{ height: '100%', width: '100%' }}
+      onDrop={onDrop}
+      onDragOver={onDragOver}
+
+      onClick={() => {
+        setNodePicker(null);
+        setSuggestionMenu(null);
+      }}
+    >
       <ReactFlow
-        nodes={nodes}
-        edges={edges}
+        key={activeSubgraphId ?? 'root'}
+        nodes={graphNodes}
+        edges={graphEdges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         onNodeClick={onNodeClick}
+        onNodeDoubleClick={onNodeDoubleClick}
         onEdgeClick={onEdgeClick}
         onPaneClick={onPaneClick}
+        onSelectionChange={onSelectionChange}
         isValidConnection={isValidConnection}
         onInit={(instance) => {
           rfRef.current = instance;
         }}
+        proOptions={{ hideAttribution: true }}
         nodeTypes={nodeTypes}
         fitView
         deleteKeyCode={null}
-        className="bg-background"
+        selectionOnDrag
+        panOnDrag={[1, 2]}
+        colorMode={theme}
       >
         <div className="absolute left-3 top-3 z-10 flex gap-1 rounded-md border bg-card/95 p-1 shadow-sm">
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-7"
+            disabled={!activeSubgraph}
+            aria-label="Back to parent graph"
+            title="Back to parent graph"
+            onClick={exitSubgraph}
+          >
+            <ArrowLeftIcon className="size-4" />
+          </Button>
+          {activeSubgraph && (
+            <div className="flex h-7 items-center px-2 text-xs font-medium text-muted-foreground">
+              {activeSubgraph.name}
+            </div>
+          )}
           <Button
             size="icon"
             variant="ghost"
@@ -203,11 +595,131 @@ export function ShaderCanvas() {
           >
             <Redo2Icon className="size-4" />
           </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-7"
+            aria-label="Create subgraph from selection"
+            title="Create subgraph from selection"
+            onPointerDown={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              openSubgraphDialog();
+            }}
+          >
+            <CombineIcon className="size-4" />
+          </Button>
         </div>
-        <Background gap={20} size={1} className="!text-muted-foreground/20" />
-        <Controls className="[&>button]:bg-card [&>button]:border-border [&>button]:text-foreground" />
-        <MiniMap className="!bg-card !border !border-border" nodeColor="hsl(var(--muted))" />
+        <Background gap={20} size={1} className="text-muted-foreground/20!" />
+        <Controls className="[&>button]:bg-card [&>button]:border-border [&>button]:text-background" />
+        <MiniMap
+          zoomable
+          pannable
+          nodeStrokeWidth={3}
+          className="bg-card! border! border-border!"
+          nodeColor={miniMapNodeColor}
+        />
       </ReactFlow>
+      {nodePicker && (
+        <div
+          data-testid="shader-node-picker"
+          className="absolute z-50 w-64 rounded-md border bg-popover p-2 text-popover-foreground shadow-md"
+          style={{ left: nodePicker.x, top: nodePicker.y }}
+          onClick={(event) => event.stopPropagation()}
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          <div className="mb-2 flex items-center gap-2 rounded border bg-background px-2">
+            <SearchIcon className="size-3.5 text-muted-foreground" />
+            <Input
+              autoFocus
+              className="h-7 border-0 px-0 text-xs shadow-none focus-visible:ring-0"
+              placeholder="Search nodes"
+              value={nodePicker.search}
+              onChange={(event) => setNodePicker({ ...nodePicker, search: event.target.value })}
+            />
+          </div>
+          <div className="max-h-72 overflow-y-auto">
+            {nodePickerItems.map(([nodeType, def]) => (
+              <button
+                key={nodeType}
+                type="button"
+                className="flex w-full items-center justify-between rounded px-2 py-1.5 text-left text-xs hover:bg-accent"
+                onClick={() => insertNode(nodeType, nodePicker.position)}
+              >
+                <span>{def.label}</span>
+                <span className="text-[10px] text-muted-foreground">{def.category}</span>
+              </button>
+            ))}
+            {nodePickerItems.length === 0 && (
+              <div className="px-2 py-4 text-center text-xs text-muted-foreground">No nodes found</div>
+            )}
+          </div>
+        </div>
+      )}
+      {suggestionMenu && (
+        <div
+          data-testid="shader-link-suggestions"
+          className="absolute z-50 w-72 rounded-md border bg-popover p-2 text-popover-foreground shadow-md"
+          style={{ left: suggestionMenu.x, top: suggestionMenu.y }}
+          onClick={(event) => event.stopPropagation()}
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          <div className="mb-2 px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            Suggestions for {suggestionMenu.port.nodeLabel} · {suggestionMenu.port.portLabel}
+          </div>
+          <div className="max-h-80 overflow-y-auto">
+            {suggestionMenu.items.map((item, index) => (
+              <button
+                key={`${item.kind}-${item.label}-${index}`}
+                type="button"
+                className="grid w-full gap-0.5 rounded px-2 py-1.5 text-left text-xs hover:bg-accent"
+                onClick={() => applySuggestion(item)}
+              >
+                <span>{item.label}</span>
+                <span className="text-[10px] text-muted-foreground">
+                  {item.kind === 'connect' ? 'Connect directly' : item.kind === 'recipe' ? 'Insert recipe bridge' : 'Insert helper node'}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      <Dialog open={subgraphDialogOpen} onOpenChange={setSubgraphDialogOpen}>
+        <DialogContent className="sm:max-w-sm" onClick={(event) => event.stopPropagation()}>
+          <DialogHeader>
+            <DialogTitle>Create Subgraph</DialogTitle>
+            <DialogDescription>Name the reusable graph block created from the selected nodes.</DialogDescription>
+          </DialogHeader>
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              createSubgraph();
+            }}
+          >
+            <div className="space-y-2">
+              <Label htmlFor="shader-subgraph-name">Name</Label>
+              <Input
+                id="shader-subgraph-name"
+                autoFocus
+                value={subgraphName}
+                onChange={(event) => setSubgraphName(event.target.value)}
+              />
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setSubgraphDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={!subgraphName.trim()}>
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/shader-graph/ShaderPreviewCanvas.tsx b/src/pages/shader-graph/ShaderPreviewCanvas.tsx
new file mode 100644
index 00000000..cd2d86c1
--- /dev/null
+++ b/src/pages/shader-graph/ShaderPreviewCanvas.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { cn } from '@/utils/styles';
+import { createWebGLPreview } from './webglPreview';
+
+type Props = {
+  pixelGlsl: string;
+  className?: string;
+};
+
+export function ShaderPreviewCanvas({ pixelGlsl, className }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const glslRef = useRef(pixelGlsl);
+  glslRef.current = pixelGlsl;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const preview = createWebGLPreview(canvas, glslRef.current);
+    let rafId = 0;
+    const startTime = performance.now();
+
+    function loop() {
+      rafId = requestAnimationFrame(loop);
+      preview.render((performance.now() - startTime) / 1000);
+    }
+    rafId = requestAnimationFrame(loop);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      preview.destroy();
+    };
+    // Re-create WebGL program when GLSL changes
+  }, [pixelGlsl]);
+
+  return <canvas ref={canvasRef} className={cn('block h-full w-full', className)} />;
+}
diff --git a/src/pages/shader-graph/codegen.ts b/src/pages/shader-graph/codegen.ts
index 3465fa0f..bc7d7e28 100644
--- a/src/pages/shader-graph/codegen.ts
+++ b/src/pages/shader-graph/codegen.ts
@@ -1,6 +1,7 @@
-import type { ShaderNodeInstance, ShaderEdge, GeneratedGlsl, ShaderNodeData } from '@/types/shader-graph';
-import { NODE_DEFS } from './nodeDefs';
-import { glslFloat } from './glslUtils';
+import type { ShaderNodeInstance, ShaderEdge, GeneratedGlsl, ShaderNodeData, PortDef, ShaderSubgraph, ShaderParameter } from '@/types/shader-graph';
+import { getNodeDef, NODE_DEFS } from './nodeDefs';
+import { glslFloat, shaderParameterUniformName, shaderTextureUniformName } from './glslUtils';
+import { customFunctionSource, validateCustomFunctionSource } from './customNode';
 
 export const PASSTHROUGH_PIXEL = [
   'vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {',
@@ -14,12 +15,57 @@ const NOISE_HELPER = [
   '}',
 ].join('\n');
 
+const LAB_COLOR_HELPER = [
+  'vec3 feather_lab_f(vec3 t) {',
+  '  return mix(7.7870370374 * t + vec3(0.13793103448), pow(max(t, vec3(0.0)), vec3(0.3333333333)), step(vec3(0.00885645167), t));',
+  '}',
+  'vec3 feather_lab_f_inv(vec3 t) {',
+  '  return mix(0.12841854934 * (t - vec3(0.13793103448)), t * t * t, step(vec3(0.20689655172), t));',
+  '}',
+  'vec3 feather_rgb_to_lab(vec3 rgb) {',
+  '  mat3 rgbToXyz = mat3(0.4124564, 0.2126729, 0.0193339, 0.3575761, 0.7151522, 0.1191920, 0.1804375, 0.0721750, 0.9503041);',
+  '  vec3 xyz = (rgbToXyz * clamp(rgb, 0.0, 1.0)) / vec3(0.95047, 1.0, 1.08883);',
+  '  vec3 f = feather_lab_f(xyz);',
+  '  return vec3(116.0 * f.y - 16.0, 500.0 * (f.x - f.y), 200.0 * (f.y - f.z));',
+  '}',
+  'vec3 feather_lab_to_rgb(vec3 lab) {',
+  '  mat3 xyzToRgb = mat3(3.2404542, -0.9692660, 0.0556434, -1.5371385, 1.8760108, -0.2040259, -0.4985314, 0.0415560, 1.0572252);',
+  '  vec3 f = vec3(lab.y / 500.0, 0.0, -lab.z / 200.0) + vec3((lab.x + 16.0) / 116.0);',
+  '  vec3 xyz = vec3(0.95047, 1.0, 1.08883) * feather_lab_f_inv(f);',
+  '  return clamp(xyzToRgb * xyz, 0.0, 1.0);',
+  '}',
+  'vec3 feather_lab_to_lch(vec3 lab) {',
+  '  return vec3(lab.x, length(lab.yz), atan(lab.z, lab.y));',
+  '}',
+  'vec3 feather_lch_to_lab(vec3 lch) {',
+  '  return vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));',
+  '}',
+].join('\n');
+
+type ShaderStage = 'pixel' | 'vertex';
+
+const SUBGRAPH_CONTEXT: Record<ShaderStage, { args: string[]; params: string[] }> = {
+  pixel: {
+    args: ['tex', 'texture_coords', 'screen_coords', 'color'],
+    params: ['Image tex', 'vec2 texture_coords', 'vec2 screen_coords', 'vec4 color'],
+  },
+  vertex: {
+    args: ['transform_projection', 'vertex_position'],
+    params: ['mat4 transform_projection', 'vec4 vertex_position'],
+  },
+};
+
+function subgraphFunctionName(subgraph: ShaderSubgraph, stage: ShaderStage): string {
+  return `${subgraph.functionName}_${stage}`;
+}
+
 function varName(nodeId: string, portId: string): string {
   return `v_${nodeId.replace(/[^a-zA-Z0-9_]/g, '_')}_${portId.replace(/[^a-zA-Z0-9_]/g, '_')}`;
 }
 
-function defaultValue(type: string, nodeData: ShaderNodeData, portId: string): string {
-  const val = nodeData.values?.[portId];
+function defaultValue(port: PortDef, nodeData: ShaderNodeData): string {
+  const type = port.type;
+  const val = nodeData.values?.[port.id] ?? port.defaultValue;
 
   switch (type) {
     case 'float':
@@ -38,21 +84,144 @@ function defaultValue(type: string, nodeData: ShaderNodeData, portId: string): s
     }
     case 'mat4':
       return 'mat4(1.0)';
+    case 'image':
+      return 'tex';
     default:
       return '0.0';
   }
 }
 
-function buildNodeBody(node: ShaderNodeInstance, edges: ShaderEdge[]): string[] {
-  const def = NODE_DEFS[node.data.nodeType];
+function outputExpression(nodeMap: Map<string, ShaderNodeInstance>, nodeId: string, portId: string): string {
+  const node = nodeMap.get(nodeId);
+  if (node?.data.nodeType === 'TextureParameter' && portId === 'texture') {
+    return shaderParameterUniformName(node.id, node.data.uniformName);
+  }
+  if (node?.data.nodeType === 'TextureInput' && portId === 'texture') {
+    return shaderTextureUniformName(node.id, node.data.uniformName);
+  }
+  return varName(nodeId, portId);
+}
+
+function outputExpressionWithOverrides(
+  nodeMap: Map<string, ShaderNodeInstance>,
+  nodeId: string,
+  portId: string,
+  outputOverrides: Map<string, string>,
+): string {
+  return outputOverrides.get(`${nodeId}:${portId}`) ?? outputExpression(nodeMap, nodeId, portId);
+}
+
+function collectTextureUniform(node: ShaderNodeInstance, textureMap: Map<string, { nodeId: string; uniform: string; label: string }>, externSet: Set<string>) {
+  if (node.data.nodeType !== 'TextureInput' && node.data.nodeType !== 'TextureUniformColor' && node.data.nodeType !== 'TextureParameter') return;
+  const uniform = node.data.nodeType === 'TextureParameter'
+    ? shaderParameterUniformName(node.id, node.data.uniformName)
+    : shaderTextureUniformName(node.id, node.data.uniformName);
+  externSet.add(`extern Image ${uniform};`);
+  textureMap.set(uniform, {
+    nodeId: node.id,
+    uniform,
+    label: String(node.data.label || NODE_DEFS[node.data.nodeType].label),
+  });
+}
+
+function parameterType(node: ShaderNodeInstance): ShaderParameter['type'] | null {
+  if (node.data.nodeType === 'FloatParameter') return 'float';
+  if (node.data.nodeType === 'Vec2Parameter') return 'vec2';
+  if (node.data.nodeType === 'Vec3Parameter') return 'vec3';
+  if (node.data.nodeType === 'Vec4Parameter') return 'vec4';
+  if (node.data.nodeType === 'ColorParameter') return 'color';
+  if (node.data.nodeType === 'BooleanParameter') return 'boolean';
+  if (node.data.nodeType === 'TextureParameter') return 'texture';
+  return null;
+}
+
+function parameterGlslType(type: ShaderParameter['type']): 'number' | 'vec2' | 'vec3' | 'vec4' | 'Image' {
+  if (type === 'vec2') return 'vec2';
+  if (type === 'vec3') return 'vec3';
+  if (type === 'vec4' || type === 'color') return 'vec4';
+  if (type === 'texture') return 'Image';
+  return 'number';
+}
+
+function cloneDefaultValue(value: number | number[] | undefined): number | number[] | undefined {
+  return Array.isArray(value) ? [...value] : value;
+}
+
+function collectShaderParameter(
+  node: ShaderNodeInstance,
+  parameterMap: Map<string, ShaderParameter>,
+  externSet: Set<string>,
+) {
+  const type = parameterType(node);
+  if (!type) return;
+  const uniform = type === 'texture'
+    ? shaderParameterUniformName(node.id, node.data.uniformName)
+    : shaderParameterUniformName(node.id, node.data.uniformName);
+  if (type !== 'texture') externSet.add(`extern ${parameterGlslType(type)} ${uniform};`);
+  parameterMap.set(uniform, {
+    nodeId: node.id,
+    uniform,
+    type,
+    label: String(node.data.label || NODE_DEFS[node.data.nodeType].label),
+    defaultValue: cloneDefaultValue(node.data.values?.val),
+  });
+}
+
+function collectRootParameterDeclarations(
+  nodes: ShaderNodeInstance[],
+  externSet: Set<string>,
+  parameterMap: Map<string, ShaderParameter>,
+) {
+  for (const node of nodes) {
+    const type = parameterType(node);
+    if (!type || type === 'texture') continue;
+    collectShaderParameter(node, parameterMap, externSet);
+  }
+}
+
+function buildNodeBody(
+  node: ShaderNodeInstance,
+  edges: ShaderEdge[],
+  nodeMap: Map<string, ShaderNodeInstance>,
+  subgraphMap: Map<string, ShaderSubgraph>,
+  inputOverrides = new Map<string, string>(),
+  outputOverrides = new Map<string, string>(),
+  stage: ShaderStage = 'pixel',
+): string[] {
+  const def = getNodeDef(node.data);
   if (!def?.emitGlsl) return [];
 
+  if (node.data.nodeType === 'SubgraphInstance') {
+    const subgraph = node.data.subgraphId ? subgraphMap.get(node.data.subgraphId) : null;
+    if (!subgraph) return [`// Missing subgraph: ${String(node.data.subgraphId ?? 'unknown')}`];
+    const inputArgs = subgraph.inputs.map((port) => {
+      const edge = edges.find((e) => e.target === node.id && e.targetHandle === port.id);
+      return edge?.sourceHandle
+        ? outputExpressionWithOverrides(nodeMap, edge.source, edge.sourceHandle, outputOverrides)
+        : defaultValue(port, node.data);
+    });
+    const outVars: Record<string, string> = {};
+    for (const port of subgraph.outputs) outVars[port.id] = varName(node.id, port.id);
+    const functionName = subgraphFunctionName(subgraph, stage);
+    const contextArgs = SUBGRAPH_CONTEXT[stage].args;
+
+    if (subgraph.outputs.length === 1) {
+      const output = subgraph.outputs[0];
+      return [`${output.type} ${outVars[output.id]} = ${functionName}(${[...contextArgs, ...inputArgs].join(', ')});`];
+    }
+
+    const declarations = subgraph.outputs.map((port) => `${port.type} ${outVars[port.id]};`);
+    const outArgs = subgraph.outputs.map((port) => outVars[port.id]);
+    return [...declarations, `${functionName}(${[...contextArgs, ...inputArgs, ...outArgs].join(', ')});`];
+  }
+
   const inVars: Record<string, string> = {};
   for (const port of def.inputs) {
     const edge = edges.find((e) => e.target === node.id && e.targetHandle === port.id);
-    inVars[port.id] = edge?.sourceHandle
-      ? varName(edge.source, edge.sourceHandle)
-      : defaultValue(port.type, node.data, port.id);
+    inVars[port.id] = inputOverrides.get(`${node.id}:${port.id}`) ??
+      (edge?.sourceHandle
+        ? outputExpressionWithOverrides(nodeMap, edge.source, edge.sourceHandle, outputOverrides)
+        : defaultValue(port, node.data));
   }
 
   const outVars: Record<string, string> = {};
@@ -60,11 +229,18 @@ function buildNodeBody(node: ShaderNodeInstance, edges: ShaderEdge[]): string[]
     outVars[port.id] = varName(node.id, port.id);
   }
 
-  const glsl = def.emitGlsl(inVars, outVars, node.data);
+  const glsl = def.emitGlsl(inVars, outVars, { ...node.data, __nodeId: node.id });
   return glsl ? glsl.split('\n').map((s) => s.trim()).filter(Boolean) : [];
 }
 
-function collectReachable(startId: string, nodes: ShaderNodeInstance[], edges: ShaderEdge[]): ShaderNodeInstance[] {
+function collectCustomFunction(node: ShaderNodeInstance, customFunctionSet: Set<string>) {
+  if (node.data.nodeType !== 'CustomFunction') return;
+  const source = customFunctionSource(node.data);
+  if (!validateCustomFunctionSource(source).signature) return;
+  customFunctionSet.add(source);
+}
+
+function collectReachable(startId: string, nodes: ShaderNodeInstance[], edges: ShaderEdge[], stopAt = new Set<string>()): ShaderNodeInstance[] {
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const visited = new Set<string>();
   const ordered: ShaderNodeInstance[] = [];
@@ -72,8 +248,10 @@ function collectReachable(startId: string, nodes: ShaderNodeInstance[], edges: S
   function dfs(id: string) {
     if (visited.has(id)) return;
     visited.add(id);
-    for (const edge of edges) {
-      if (edge.target === id) dfs(edge.source);
+    if (!stopAt.has(id)) {
+      for (const edge of edges) {
+        if (edge.target === id) dfs(edge.source);
+      }
     }
     const node = nodeMap.get(id);
     if (node) ordered.push(node);
@@ -83,6 +261,118 @@ function collectReachable(startId: string, nodes: ShaderNodeInstance[], edges: S
   return ordered;
 }
 
+function collectGraphMetadata(
+  nodes: ShaderNodeInstance[],
+  externSet: Set<string>,
+  helperKeys: Set<string>,
+  customFunctionSet: Set<string>,
+  textureMap: Map<string, { nodeId: string; uniform: string; label: string }>,
+  parameterMap: Map<string, ShaderParameter>,
+) {
+  for (const node of nodes) {
+    const def = getNodeDef(node.data);
+    def?.externs?.forEach((e) => externSet.add(e));
+    if (def?.helperKey) helperKeys.add(def.helperKey);
+    collectTextureUniform(node, textureMap, externSet);
+    collectShaderParameter(node, parameterMap, externSet);
+    collectCustomFunction(node, customFunctionSet);
+  }
+}
+
+function createMetadataSets() {
+  return {
+    externSet: new Set<string>(),
+    helperKeys: new Set<string>(),
+    customFunctionSet: new Set<string>(),
+  };
+}
+
+function buildSubgraphFunction(
+  subgraph: ShaderSubgraph,
+  subgraphMap: Map<string, ShaderSubgraph>,
+  stage: ShaderStage,
+  stack = new Set<string>(),
+): string {
+  if (stack.has(subgraph.id)) {
+    return `// Subgraph cycle detected: ${subgraph.name}`;
+  }
+  stack.add(subgraph.id);
+  const nodeMap = new Map(subgraph.nodes.map((node) => [node.id, node]));
+  const inputOverrides = new Map(
+    Object.entries(subgraph.inputMappings).map(([inputId, mapping]) => [`${mapping.nodeId}:${mapping.portId}`, `sg_in_${inputId}`]),
+  );
+  const outputOverrides = new Map<string, string>();
+  const reachableIds = new Set<string>();
+  const orderedNodes: ShaderNodeInstance[] = [];
+  for (const mapping of Object.values(subgraph.outputMappings)) {
+    for (const node of collectReachable(mapping.nodeId, subgraph.nodes, subgraph.edges, new Set())) {
+      if (reachableIds.has(node.id)) continue;
+      reachableIds.add(node.id);
+      orderedNodes.push(node);
+    }
+  }
+  const bodyLines: string[] = [];
+  for (const node of orderedNodes) {
+    bodyLines.push(...buildNodeBody(node, subgraph.edges, nodeMap, subgraphMap, inputOverrides, outputOverrides, stage));
+  }
+
+  if (subgraph.outputs.length === 1) {
+    const output = subgraph.outputs[0];
+    const mapping = subgraph.outputMappings[output.id];
+    const returnExpr = mapping
+      ? outputExpressionWithOverrides(nodeMap, mapping.nodeId, mapping.portId, outputOverrides)
+      : defaultValue(output, { label: subgraph.name, nodeType: 'SubgraphInstance' });
+    const args = [...SUBGRAPH_CONTEXT[stage].params, ...subgraph.inputs.map((port) => `${port.type} sg_in_${port.id}`)];
+    stack.delete(subgraph.id);
+    return [
+      `${output.type} ${subgraphFunctionName(subgraph, stage)}(${args.join(', ')}) {`,
+      ...bodyLines.map((line) => `  ${line}`),
+      `  return ${returnExpr};`,
+      '}',
+    ].join('\n');
+  }
+
+  for (const [outputId, mapping] of Object.entries(subgraph.outputMappings)) {
+    bodyLines.push(`sg_out_${outputId} = ${outputExpressionWithOverrides(nodeMap, mapping.nodeId, mapping.portId, outputOverrides)};`);
+  }
+  const args = [
+    ...SUBGRAPH_CONTEXT[stage].params,
+    ...subgraph.inputs.map((port) => `${port.type} sg_in_${port.id}`),
+    ...subgraph.outputs.map((port) => `out ${port.type} sg_out_${port.id}`),
+  ];
+  stack.delete(subgraph.id);
+  return [
+    `void ${subgraphFunctionName(subgraph, stage)}(${args.join(', ')}) {`,
+    ...bodyLines.map((line) => `  ${line}`),
+    '}',
+  ].join('\n');
+}
+
+function buildPrelude(
+  externSet: Set<string>,
+  helperKeys: Set<string>,
+  customFunctionSet: Set<string>,
+  usedSubgraphs: Set<string>,
+  subgraphMap: Map<string, ShaderSubgraph>,
+  stage: ShaderStage,
+): string[] {
+  const parts: string[] = [];
+  if (externSet.size) parts.push([...externSet].join('\n'));
+  if (helperKeys.has('noise')) parts.push(NOISE_HELPER);
+  if (helperKeys.has('lab-color')) parts.push(LAB_COLOR_HELPER);
+  if (customFunctionSet.size) parts.push([...customFunctionSet].join('\n\n'));
+  if (usedSubgraphs.size) {
+    parts.push(
+      [...usedSubgraphs]
+        .map((id) => subgraphMap.get(id))
+        .filter((subgraph): subgraph is ShaderSubgraph => Boolean(subgraph))
+        .map((subgraph) => buildSubgraphFunction(subgraph, subgraphMap, stage))
+        .join('\n\n'),
+    );
+  }
+  return parts;
+}
+
 function buildEffect(bodyLines: string[], returnExpr: string): string {
   return [
     'vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords) {',
@@ -96,54 +386,82 @@ function buildPosition(bodyLines: string[], returnExpr: string): string {
   return [
     'vec4 position(mat4 transform_projection, vec4 vertex_position) {',
     ...bodyLines.map((l) => `  ${l}`),
-    `  return ${returnExpr};`,
+    `  return transform_projection * ${returnExpr};`,
     '}',
   ].join('\n');
 }
 
-export function codegen(nodes: ShaderNodeInstance[], edges: ShaderEdge[]): GeneratedGlsl {
+function collectUsedSubgraphs(
+  nodes: ShaderNodeInstance[],
+  subgraphMap: Map<string, ShaderSubgraph>,
+  used = new Set<string>(),
+  visiting = new Set<string>(),
+): Set<string> {
+  for (const node of nodes) {
+    if (node.data.nodeType !== 'SubgraphInstance' || !node.data.subgraphId || used.has(node.data.subgraphId)) continue;
+    const subgraph = subgraphMap.get(node.data.subgraphId);
+    if (!subgraph) continue;
+    if (visiting.has(subgraph.id)) {
+      used.add(subgraph.id);
+      continue;
+    }
+    visiting.add(subgraph.id);
+    collectUsedSubgraphs(subgraph.nodes, subgraphMap, used, visiting);
+    visiting.delete(subgraph.id);
+    used.add(subgraph.id);
+  }
+  return used;
+}
+
+export function codegen(nodes: ShaderNodeInstance[], edges: ShaderEdge[], subgraphs: ShaderSubgraph[] = []): GeneratedGlsl {
   const fragOut = nodes.find((n) => n.data.nodeType === 'FragmentOutput');
   const vertOut = nodes.find((n) => n.data.nodeType === 'VertexOutput');
+  const subgraphMap = new Map(subgraphs.map((subgraph) => [subgraph.id, subgraph]));
 
   if (!nodes.length || !fragOut) {
-    return { pixel: PASSTHROUGH_PIXEL, vertex: null, hash: 'passthrough' };
+    return { pixel: PASSTHROUGH_PIXEL, vertex: null, hash: 'passthrough', textures: [], parameters: [] };
   }
 
   const reachable = collectReachable(fragOut.id, nodes, edges);
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
 
-  const externSet = new Set<string>();
-  let needsNoise = false;
-  for (const node of reachable) {
-    const def = NODE_DEFS[node.data.nodeType];
-    def?.externs?.forEach((e) => externSet.add(e));
-    if (def?.helperKey === 'noise') needsNoise = true;
-  }
+  const pixelMeta = createMetadataSets();
+  const vertexMeta = createMetadataSets();
+  const textureMap = new Map<string, { nodeId: string; uniform: string; label: string }>();
+  const parameterMap = new Map<string, ShaderParameter>();
+  collectGraphMetadata(reachable, pixelMeta.externSet, pixelMeta.helperKeys, pixelMeta.customFunctionSet, textureMap, parameterMap);
+  collectRootParameterDeclarations(nodes, pixelMeta.externSet, parameterMap);
 
   let vertReachable: ShaderNodeInstance[] = [];
   if (vertOut) {
     vertReachable = collectReachable(vertOut.id, nodes, edges);
-    for (const node of vertReachable) {
-      const def = NODE_DEFS[node.data.nodeType];
-      def?.externs?.forEach((e) => externSet.add(e));
-      if (def?.helperKey === 'noise') needsNoise = true;
-    }
+    collectGraphMetadata(vertReachable, vertexMeta.externSet, vertexMeta.helperKeys, vertexMeta.customFunctionSet, textureMap, parameterMap);
+  }
+
+  const usedPixelSubgraphs = collectUsedSubgraphs(reachable, subgraphMap);
+  for (const subgraphId of usedPixelSubgraphs) {
+    const subgraph = subgraphMap.get(subgraphId);
+    if (subgraph) collectGraphMetadata(subgraph.nodes, pixelMeta.externSet, pixelMeta.helperKeys, pixelMeta.customFunctionSet, textureMap, parameterMap);
+  }
+  const usedVertexSubgraphs = collectUsedSubgraphs(vertReachable, subgraphMap);
+  for (const subgraphId of usedVertexSubgraphs) {
+    const subgraph = subgraphMap.get(subgraphId);
+    if (subgraph) collectGraphMetadata(subgraph.nodes, vertexMeta.externSet, vertexMeta.helperKeys, vertexMeta.customFunctionSet, textureMap, parameterMap);
   }
 
   const bodyLines: string[] = [];
   for (const node of reachable) {
     if (node.data.nodeType !== 'FragmentOutput') {
-      bodyLines.push(...buildNodeBody(node, edges));
+      bodyLines.push(...buildNodeBody(node, edges, nodeMap, subgraphMap));
     }
   }
 
   const fragColorEdge = edges.find((e) => e.target === fragOut.id && e.targetHandle === 'color');
   const returnExpr = fragColorEdge?.sourceHandle
-    ? varName(fragColorEdge.source, fragColorEdge.sourceHandle)
+    ? outputExpression(nodeMap, fragColorEdge.source, fragColorEdge.sourceHandle)
     : 'Texel(tex, texture_coords)';
 
-  const parts: string[] = [];
-  if (externSet.size) parts.push([...externSet].join('\n'));
-  if (needsNoise) parts.push(NOISE_HELPER);
+  const parts: string[] = buildPrelude(pixelMeta.externSet, pixelMeta.helperKeys, pixelMeta.customFunctionSet, usedPixelSubgraphs, subgraphMap, 'pixel');
   parts.push(buildEffect(bodyLines, returnExpr));
 
   const pixel = parts.join('\n\n');
@@ -153,17 +471,20 @@ export function codegen(nodes: ShaderNodeInstance[], edges: ShaderEdge[]): Gener
     const vertLines: string[] = [];
     for (const node of vertReachable) {
       if (node.data.nodeType !== 'VertexOutput') {
-        vertLines.push(...buildNodeBody(node, edges));
+        vertLines.push(...buildNodeBody(node, edges, nodeMap, subgraphMap, new Map(), new Map(), 'vertex'));
       }
     }
     const posEdge = edges.find((e) => e.target === vertOut.id && e.targetHandle === 'pos');
     const vertReturn = posEdge?.sourceHandle
-      ? varName(posEdge.source, posEdge.sourceHandle)
-      : 'transform_projection * vertex_position';
+      ? outputExpression(nodeMap, posEdge.source, posEdge.sourceHandle)
+      : 'vertex_position';
 
-    vertex = buildPosition(vertLines, vertReturn);
+    vertex = [
+      ...buildPrelude(vertexMeta.externSet, vertexMeta.helperKeys, vertexMeta.customFunctionSet, usedVertexSubgraphs, subgraphMap, 'vertex'),
+      buildPosition(vertLines, vertReturn),
+    ].join('\n\n');
   }
 
   const hash = btoa(pixel.slice(0, 64)).slice(0, 16);
-  return { pixel, vertex, hash };
+  return { pixel, vertex, hash, textures: [...textureMap.values()], parameters: [...parameterMap.values()] };
 }
diff --git a/src/pages/shader-graph/customNode.ts b/src/pages/shader-graph/customNode.ts
new file mode 100644
index 00000000..d31d66f9
--- /dev/null
+++ b/src/pages/shader-graph/customNode.ts
@@ -0,0 +1,303 @@
+import type { GlslType, NodeDef, PortDef, ShaderNodeData } from '@/types/shader-graph';
+
+const CUSTOM_GLSL_TYPES = ['float', 'vec2', 'vec3', 'vec4', 'mat4'] as const;
+const CUSTOM_TYPE_SET = new Set<string>(CUSTOM_GLSL_TYPES);
+const GLSL_DECLARATION_TYPES = new Set<string>(['float', 'vec2', 'vec3', 'vec4', 'mat2', 'mat3', 'mat4', 'int', 'bool']);
+
+type CustomGlslType = (typeof CUSTOM_GLSL_TYPES)[number];
+
+export type CustomFunctionSignature = {
+  functionName: string;
+  returnType: CustomGlslType | 'void';
+  inputs: PortDef[];
+  outputs: PortDef[];
+  outParamIds: string[];
+};
+
+export type CustomFunctionValidation = {
+  signature: CustomFunctionSignature | null;
+  errors: string[];
+};
+
+export const DEFAULT_CUSTOM_FUNCTION_CODE = [
+  'vec4 custom_tint(vec4 color, float strength) {',
+  '  return vec4(color.rgb * strength, color.a);',
+  '}',
+].join('\n');
+
+function splitParams(params: string): string[] {
+  return params
+    .split(',')
+    .map((param) => param.trim())
+    .filter(Boolean);
+}
+
+function labelFromId(id: string): string {
+  return id
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function normalizeId(id: string): string {
+  const normalized = id.replace(/[^a-zA-Z0-9_]/g, '_');
+  return /^[a-zA-Z_]/.test(normalized) ? normalized : `p_${normalized}`;
+}
+
+function stripComments(source: string): string {
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\/\/.*$/gm, '');
+}
+
+function findMatchingBrace(source: string, openIndex: number): number {
+  let depth = 0;
+  for (let index = openIndex; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === '{') depth += 1;
+    if (char === '}') {
+      depth -= 1;
+      if (depth === 0) return index;
+    }
+  }
+  return -1;
+}
+
+function statementPreview(statement: string): string {
+  return statement.replace(/\s+/g, ' ').trim().slice(0, 80);
+}
+
+function hasTopLevelComma(expression: string): boolean {
+  let depth = 0;
+  for (const char of expression) {
+    if (char === '(' || char === '[') depth += 1;
+    else if (char === ')' || char === ']') depth = Math.max(0, depth - 1);
+    else if (char === ',' && depth === 0) return true;
+  }
+  return false;
+}
+
+function validateBodyLines(body: string, errors: string[]) {
+  for (const rawLine of stripComments(body).split('\n')) {
+    const line = rawLine.trim();
+    if (!line || line.startsWith('#') || line.endsWith(';') || line.endsWith('{') || line.endsWith('}')) continue;
+    if (/^(else|do)\b/.test(line)) continue;
+    errors.push(`Statement must end with a semicolon: ${statementPreview(line)}`);
+  }
+}
+
+function validateStatement(statement: string, errors: string[], declaredNames: Set<string>) {
+  const trimmed = statement.trim();
+  if (!trimmed) return;
+  if (trimmed === '{' || trimmed === '}') return;
+  if (/^(if|for|while|switch)\s*\(/.test(trimmed)) return;
+  if (/^(else|do)\b/.test(trimmed)) return;
+  if (/^(break|continue|discard)$/.test(trimmed)) return;
+  if (/^return\b/.test(trimmed)) return;
+
+  const declaration = trimmed.match(/^(?:const\s+)?(?:lowp\s+|mediump\s+|highp\s+)?([A-Za-z_]\w*)\s+([A-Za-z_]\w*)\b/);
+  if (declaration && GLSL_DECLARATION_TYPES.has(declaration[1])) {
+    declaredNames.add(declaration[2]);
+    return;
+  }
+
+  const assignment = trimmed.match(/^([A-Za-z_]\w*)(?:\.[xyzwrgba]{1,4})?\s*(?:=|\+=|-=|\*=|\/=)/);
+  if (assignment) {
+    if (!declaredNames.has(assignment[1])) {
+      errors.push(`Assignment target is not a parameter or local variable: ${assignment[1]}`);
+    }
+    return;
+  }
+
+  if (/^[A-Za-z_]\w*\s*\(/.test(trimmed)) return;
+  if (/^[A-Za-z_]\w*$/.test(trimmed)) {
+    errors.push(`Bare identifier is not a valid GLSL statement: ${trimmed}`);
+    return;
+  }
+}
+
+function validateFunctionBody(body: string, signature: CustomFunctionSignature, errors: string[]) {
+  const cleanBody = stripComments(body);
+  validateBodyLines(cleanBody, errors);
+
+  const declaredNames = new Set<string>([
+    ...signature.inputs.map((port) => port.id),
+    ...signature.outParamIds,
+  ]);
+  const statements = cleanBody
+    .replace(/[{}]/g, '\n')
+    .split(';')
+    .map((statement) => statement.trim())
+    .filter(Boolean);
+
+  for (const statement of statements) {
+    validateStatement(statement, errors, declaredNames);
+  }
+
+  if (signature.returnType !== 'void' && !/\breturn\b/.test(cleanBody)) {
+    errors.push('Non-void custom functions must contain a return statement.');
+  }
+
+  for (const returnMatch of cleanBody.matchAll(/\breturn\b([^;]*);/g)) {
+    const expression = returnMatch[1].trim();
+    if (signature.returnType === 'void' && expression.length > 0) {
+      errors.push('Void custom functions cannot return a value. Use `out` parameters instead.');
+    }
+    if (signature.returnType !== 'void' && expression.length === 0) {
+      errors.push('Non-void custom functions must return one expression.');
+    }
+    if (hasTopLevelComma(expression)) {
+      errors.push('Return can only produce one value. Use `out` parameters for additional outputs.');
+    }
+  }
+
+  for (const outId of signature.outParamIds) {
+    const assigned = new RegExp(`\\b${outId}\\b(?:\\.[xyzwrgba]{1,4})?\\s*(?:=|\\+=|-=|\\*=|\\/=)`).test(cleanBody);
+    if (!assigned) {
+      errors.push(`Out parameter is never assigned: ${outId}`);
+    }
+  }
+}
+
+export function validateCustomFunctionSource(source: unknown): CustomFunctionValidation {
+  const code = typeof source === 'string' ? source.trim() : '';
+  const errors: string[] = [];
+
+  if (!code) {
+    return { signature: null, errors: ['Function code is required.'] };
+  }
+
+  const match = code.match(/\b(float|vec2|vec3|vec4|mat4|void)\s+([A-Za-z_]\w*)\s*\(([\s\S]*?)\)\s*\{/);
+  if (!match) {
+    return {
+      signature: null,
+      errors: ['Expected a GLSL function like `vec4 my_node(vec2 uv, float amount) { ... }`.'],
+    };
+  }
+
+  const returnType = match[1] as CustomFunctionSignature['returnType'];
+  const functionName = match[2];
+  const paramSource = match[3];
+  const openBraceIndex = code.indexOf('{', match.index);
+  const closeBraceIndex = findMatchingBrace(code, openBraceIndex);
+  const usedIds = new Set<string>();
+  const inputs: PortDef[] = [];
+  const outputs: PortDef[] = [];
+  const outParamIds: string[] = [];
+
+  for (const param of splitParams(paramSource)) {
+    const paramMatch = param.match(/^(?:(in|out|inout)\s+)?(float|vec2|vec3|vec4|mat4)\s+([A-Za-z_]\w*)$/);
+    if (!paramMatch) {
+      errors.push(`Could not parse parameter: ${param}`);
+      continue;
+    }
+
+    const direction = paramMatch[1] ?? 'in';
+    const type = paramMatch[2] as GlslType;
+    const rawId = paramMatch[3];
+    const id = normalizeId(rawId);
+
+    if (!CUSTOM_TYPE_SET.has(type)) {
+      errors.push(`Unsupported parameter type for ${rawId}: ${type}`);
+      continue;
+    }
+    if (direction === 'inout') {
+      errors.push(`Parameter ${rawId} uses inout. Use separate input and out parameters instead.`);
+      continue;
+    }
+    if (usedIds.has(id)) {
+      errors.push(`Duplicate parameter name: ${rawId}`);
+      continue;
+    }
+    usedIds.add(id);
+
+    const port = { id, label: labelFromId(rawId), type };
+    if (direction === 'out') {
+      outputs.push(port);
+      outParamIds.push(id);
+    } else {
+      inputs.push(port);
+    }
+  }
+
+  if (returnType !== 'void') {
+    if (usedIds.has('out')) {
+      errors.push('Do not name an `out` parameter `out` when the function also returns a value.');
+    }
+    outputs.unshift({ id: 'out', label: 'Result', type: returnType });
+  }
+
+  if (outputs.length === 0) {
+    errors.push('Custom functions must return a value or define at least one `out` parameter.');
+  }
+
+  const openBraces = (code.match(/\{/g) ?? []).length;
+  const closeBraces = (code.match(/\}/g) ?? []).length;
+  if (openBraces !== closeBraces) {
+    errors.push('Function braces are unbalanced.');
+  }
+  if (closeBraceIndex < 0) {
+    errors.push('Function body is missing a closing brace.');
+  } else if (code.slice(closeBraceIndex + 1).trim().length > 0) {
+    errors.push('Custom nodes support one function only. Remove extra code after the closing brace.');
+  }
+
+  const signature = errors.length
+    ? null
+    : {
+        functionName,
+        returnType,
+        inputs,
+        outputs,
+        outParamIds,
+      };
+
+  if (signature && closeBraceIndex > openBraceIndex) {
+    validateFunctionBody(code.slice(openBraceIndex + 1, closeBraceIndex), signature, errors);
+  }
+
+  return {
+    signature: errors.length
+      ? null
+      : signature,
+    errors,
+  };
+}
+
+export function customFunctionSource(data: ShaderNodeData): string {
+  return typeof data.customCode === 'string' && data.customCode.trim().length > 0
+    ? data.customCode
+    : DEFAULT_CUSTOM_FUNCTION_CODE;
+}
+
+export function customFunctionNodeDef(data: ShaderNodeData): NodeDef {
+  const code = customFunctionSource(data);
+  const validation = validateCustomFunctionSource(code);
+  const signature = validation.signature;
+  return {
+    category: 'Custom',
+    label: 'Custom Function',
+    inputs: signature?.inputs ?? [],
+    outputs: signature?.outputs ?? [],
+    emitGlsl: (inVars, outVars) => {
+      if (!signature) return '';
+      const args = signature.inputs.map((input) => inVars[input.id]);
+      const lines: string[] = [];
+
+      for (const output of signature.outputs) {
+        if (output.id !== 'out' || signature.outParamIds.includes(output.id)) {
+          lines.push(`${output.type} ${outVars[output.id]};`);
+        }
+      }
+
+      if (signature.returnType !== 'void') {
+        const outParamArgs = signature.outParamIds.map((id) => outVars[id]);
+        lines.push(`${signature.returnType} ${outVars.out} = ${signature.functionName}(${[...args, ...outParamArgs].join(', ')});`);
+      } else {
+        const outParamArgs = signature.outParamIds.map((id) => outVars[id]);
+        lines.push(`${signature.functionName}(${[...args, ...outParamArgs].join(', ')});`);
+      }
+
+      return lines.join('\n');
+    },
+  };
+}
diff --git a/src/pages/shader-graph/glslUtils.ts b/src/pages/shader-graph/glslUtils.ts
index 94cde164..ae17438e 100644
--- a/src/pages/shader-graph/glslUtils.ts
+++ b/src/pages/shader-graph/glslUtils.ts
@@ -3,3 +3,19 @@ export function glslFloat(n: unknown): string {
   if (!Number.isFinite(value)) return '0.0';
   return Number.isInteger(value) ? `${value}.0` : String(value);
 }
+
+export function sanitizeGlslIdentifier(value: unknown, fallback: string): string {
+  const raw = String(value ?? '').trim();
+  const cleaned = raw.replace(/[^a-zA-Z0-9_]/g, '_').replace(/^[^a-zA-Z_]+/, '');
+  return cleaned || fallback;
+}
+
+export function shaderTextureUniformName(nodeId: string, configuredName?: unknown): string {
+  return sanitizeGlslIdentifier(configuredName, `u_sg_tex_${sanitizeGlslIdentifier(nodeId, 'texture')}`);
+}
+
+export function shaderParameterUniformName(nodeId: string, configuredName?: unknown): string {
+  const fallback = `u_param_${sanitizeGlslIdentifier(nodeId, 'param')}`;
+  const sanitized = sanitizeGlslIdentifier(configuredName, fallback);
+  return sanitized.startsWith('u_') ? sanitized : `u_${sanitized}`;
+}
diff --git a/src/pages/shader-graph/graphUtils.ts b/src/pages/shader-graph/graphUtils.ts
new file mode 100644
index 00000000..db1a4eeb
--- /dev/null
+++ b/src/pages/shader-graph/graphUtils.ts
@@ -0,0 +1,300 @@
+import type { XYPosition } from '@xyflow/react';
+import type { GlslType, NodeType, PortDef, ShaderEdge, ShaderNodeData, ShaderNodeInstance, ShaderSubgraph } from '@/types/shader-graph';
+import { DEFAULT_CUSTOM_FUNCTION_CODE } from './customNode';
+import { getNodeDef, NODE_DEFS } from './nodeDefs';
+
+let graphIdCounter = Date.now();
+
+export function nextGraphId(prefix = 'node') {
+  graphIdCounter += 1;
+  return `${prefix}-${graphIdCounter}`;
+}
+
+export function defaultNodeData(nodeType: NodeType, label: string): ShaderNodeData {
+  if (nodeType === 'CustomFunction') {
+    return {
+      label,
+      nodeType,
+      customCode: DEFAULT_CUSTOM_FUNCTION_CODE,
+    };
+  }
+  if (nodeType === 'Vec2Parameter') return { label, nodeType, values: { val: [0, 0] } };
+  if (nodeType === 'Vec3Parameter') return { label, nodeType, values: { val: [0, 0, 0] } };
+  if (nodeType === 'Vec4Parameter' || nodeType === 'ColorParameter') return { label, nodeType, values: { val: [1, 1, 1, 1] } };
+  if (nodeType === 'BooleanParameter') return { label, nodeType, values: { val: 0 } };
+  if (nodeType === 'FloatParameter') return { label, nodeType, values: { val: 0 } };
+  return { label, nodeType };
+}
+
+export function cloneShaderNodeData(data: ShaderNodeData): ShaderNodeData {
+  return {
+    ...data,
+    values: data.values
+      ? Object.fromEntries(Object.entries(data.values).map(([key, value]) => [key, Array.isArray(value) ? [...value] : value]))
+      : undefined,
+    subgraphInputs: data.subgraphInputs?.map((port) => ({
+      ...port,
+      defaultValue: Array.isArray(port.defaultValue) ? [...port.defaultValue] : port.defaultValue,
+    })),
+    subgraphOutputs: data.subgraphOutputs?.map((port) => ({
+      ...port,
+      defaultValue: Array.isArray(port.defaultValue) ? [...port.defaultValue] : port.defaultValue,
+    })),
+  };
+}
+
+export function addNodeAt(nodeType: NodeType, position: XYPosition): ShaderNodeInstance {
+  const def = NODE_DEFS[nodeType];
+  const id = nextGraphId();
+  return {
+    id,
+    type: 'shaderNode',
+    position,
+    data: defaultNodeData(nodeType, def.label),
+  };
+}
+
+export function cloneGraphFragment(
+  nodes: ShaderNodeInstance[],
+  edges: ShaderEdge[],
+  position: XYPosition,
+): { nodes: ShaderNodeInstance[]; edges: ShaderEdge[]; firstNodeId: string | null } {
+  if (nodes.length === 0) return { nodes: [], edges: [], firstNodeId: null };
+
+  const minX = Math.min(...nodes.map((node) => node.position.x));
+  const minY = Math.min(...nodes.map((node) => node.position.y));
+  const idMap = new Map(nodes.map((node) => [node.id, nextGraphId('node')]));
+
+  const nextNodes = nodes.map((node) => {
+    const id = idMap.get(node.id) ?? nextGraphId('node');
+    return {
+      ...node,
+      id,
+      selected: false,
+      position: {
+        x: position.x + (node.position.x - minX),
+        y: position.y + (node.position.y - minY),
+      },
+      data: cloneShaderNodeData(node.data),
+    };
+  });
+
+  const nextEdges = edges
+    .filter((edge) => idMap.has(edge.source) && idMap.has(edge.target))
+    .map((edge) => {
+      const source = idMap.get(edge.source) ?? edge.source;
+      const target = idMap.get(edge.target) ?? edge.target;
+      return {
+        ...edge,
+        id: `${source}:${edge.sourceHandle ?? 'out'}->${target}:${edge.targetHandle ?? 'in'}`,
+        source,
+        target,
+      };
+    });
+
+  return { nodes: nextNodes, edges: nextEdges, firstNodeId: nextNodes[0]?.id ?? null };
+}
+
+function safeFunctionName(name: string, id: string): string {
+  const base = name.trim().replace(/[^a-zA-Z0-9_]+/g, '_').replace(/^_+|_+$/g, '') || 'subgraph';
+  const suffix = id.replace(/[^a-zA-Z0-9_]+/g, '_');
+  return `feather_subgraph_${base}_${suffix}`;
+}
+
+function uniquePortId(base: string, used: Set<string>): string {
+  let next = base.replace(/[^a-zA-Z0-9_]+/g, '_') || 'value';
+  if (!/^[a-zA-Z_]/.test(next)) next = `value_${next}`;
+  let i = 2;
+  while (used.has(next)) {
+    next = `${base}_${i}`;
+    i += 1;
+  }
+  used.add(next);
+  return next;
+}
+
+export function inferSubgraphFromSelection(
+  allNodes: ShaderNodeInstance[],
+  allEdges: ShaderEdge[],
+  selectedIds: Set<string>,
+  name: string,
+): {
+  subgraph: ShaderSubgraph;
+  instance: ShaderNodeInstance;
+  nodes: ShaderNodeInstance[];
+  edges: ShaderEdge[];
+} | null {
+  const selectedNodes = allNodes.filter((node) => selectedIds.has(node.id));
+  if (selectedNodes.length === 0) return null;
+
+  const selectedIdSet = new Set(selectedNodes.map((node) => node.id));
+  const internalEdges = allEdges.filter((edge) => selectedIdSet.has(edge.source) && selectedIdSet.has(edge.target));
+  const incomingEdges = allEdges.filter((edge) => !selectedIdSet.has(edge.source) && selectedIdSet.has(edge.target));
+  const outgoingEdges = allEdges.filter((edge) => selectedIdSet.has(edge.source) && !selectedIdSet.has(edge.target));
+  const inputIds = new Set<string>();
+  const outputIds = new Set<string>();
+  const inputs: PortDef[] = [];
+  const outputs: PortDef[] = [];
+  const inputMappings: ShaderSubgraph['inputMappings'] = {};
+  const outputMappings: ShaderSubgraph['outputMappings'] = {};
+
+  for (const edge of incomingEdges) {
+    const targetNode = allNodes.find((node) => node.id === edge.target);
+    const targetPort = targetNode ? getNodeDef(targetNode.data)?.inputs.find((port) => port.id === edge.targetHandle) : null;
+    if (!targetNode || !targetPort) continue;
+    const id = uniquePortId(`${targetNode.data.label || targetNode.id}_${targetPort.id}`, inputIds);
+    inputs.push({ ...targetPort, id, label: targetPort.label });
+    inputMappings[id] = { nodeId: targetNode.id, portId: targetPort.id };
+  }
+
+  for (const edge of outgoingEdges) {
+    const sourceNode = allNodes.find((node) => node.id === edge.source);
+    const sourcePort = sourceNode ? getNodeDef(sourceNode.data)?.outputs.find((port) => port.id === edge.sourceHandle) : null;
+    if (!sourceNode || !sourcePort) continue;
+    const id = uniquePortId(`${sourceNode.data.label || sourceNode.id}_${sourcePort.id}`, outputIds);
+    outputs.push({ ...sourcePort, id, label: sourcePort.label });
+    outputMappings[id] = { nodeId: sourceNode.id, portId: sourcePort.id };
+  }
+
+  if (outputs.length === 0) {
+    const last = selectedNodes.at(-1);
+    const fallback = last ? getNodeDef(last.data)?.outputs[0] : null;
+    if (last && fallback) {
+      const id = uniquePortId(`${last.data.label || last.id}_${fallback.id}`, outputIds);
+      outputs.push({ ...fallback, id, label: fallback.label });
+      outputMappings[id] = { nodeId: last.id, portId: fallback.id };
+    }
+  }
+
+  const subgraphId = nextGraphId('subgraph');
+  const center = selectedNodes.reduce(
+    (acc, node) => ({ x: acc.x + node.position.x / selectedNodes.length, y: acc.y + node.position.y / selectedNodes.length }),
+    { x: 0, y: 0 },
+  );
+  const minX = Math.min(...selectedNodes.map((node) => node.position.x));
+  const minY = Math.min(...selectedNodes.map((node) => node.position.y));
+  const subgraphNodes = selectedNodes.map((node) => ({
+    ...node,
+    selected: false,
+    position: { x: node.position.x - minX, y: node.position.y - minY },
+    data: cloneShaderNodeData(node.data),
+  }));
+  const subgraph: ShaderSubgraph = {
+    id: subgraphId,
+    name,
+    functionName: safeFunctionName(name, subgraphId),
+    nodes: subgraphNodes,
+    edges: internalEdges.map((edge) => ({ ...edge })),
+    inputs,
+    outputs,
+    inputMappings,
+    outputMappings,
+  };
+
+  const instanceId = nextGraphId('node');
+  const instance: ShaderNodeInstance = {
+    id: instanceId,
+    type: 'shaderNode',
+    position: center,
+    data: {
+      label: name,
+      nodeType: 'SubgraphInstance',
+      subgraphId,
+      subgraphInputs: inputs,
+      subgraphOutputs: outputs,
+    },
+  };
+
+  const inputEdges: ShaderEdge[] = [];
+  for (const edge of incomingEdges) {
+    const entry = Object.entries(inputMappings).find(([, mapping]) => mapping.nodeId === edge.target && mapping.portId === edge.targetHandle);
+    if (!entry) continue;
+    inputEdges.push({ ...edge, id: `${edge.source}:${edge.sourceHandle}->${instanceId}:${entry[0]}`, target: instanceId, targetHandle: entry[0] });
+  }
+  const outputEdges: ShaderEdge[] = [];
+  for (const edge of outgoingEdges) {
+    const entry = Object.entries(outputMappings).find(([, mapping]) => mapping.nodeId === edge.source && mapping.portId === edge.sourceHandle);
+    if (!entry) continue;
+    outputEdges.push({ ...edge, id: `${instanceId}:${entry[0]}->${edge.target}:${edge.targetHandle}`, source: instanceId, sourceHandle: entry[0] });
+  }
+
+  return {
+    subgraph,
+    instance,
+    nodes: [...allNodes.filter((node) => !selectedIdSet.has(node.id)), instance],
+    edges: [...allEdges.filter((edge) => !selectedIdSet.has(edge.source) && !selectedIdSet.has(edge.target)), ...inputEdges, ...outputEdges],
+  };
+}
+
+export type PortRef = {
+  nodeId: string;
+  nodeLabel: string;
+  portId: string;
+  portLabel: string;
+  type: GlslType;
+  direction: 'input' | 'output';
+};
+
+export type LinkSuggestion =
+  | { kind: 'connect'; label: string; target: PortRef }
+  | { kind: 'node'; label: string; nodeType: NodeType }
+  | { kind: 'recipe'; label: string; nodeType: NodeType; needsSecondOutput?: boolean };
+
+export function portRefs(nodes: ShaderNodeInstance[], direction: 'input' | 'output'): PortRef[] {
+  return nodes.flatMap((node) => {
+    const def = getNodeDef(node.data);
+    const ports = direction === 'input' ? def.inputs : def.outputs;
+    return ports.map((port) => ({
+      nodeId: node.id,
+      nodeLabel: String(node.data.label || def.label),
+      portId: port.id,
+      portLabel: port.label,
+      type: port.type,
+      direction,
+    }));
+  });
+}
+
+function addNodeForType(type: GlslType): NodeType | null {
+  if (type === 'float') return 'Add';
+  if (type === 'vec2') return 'AddVec2';
+  if (type === 'vec3') return 'AddVec3';
+  if (type === 'vec4') return 'AddVec4';
+  return null;
+}
+
+function scaleNodeForType(type: GlslType): NodeType | null {
+  if (type === 'vec2') return 'ScaleVec2';
+  if (type === 'vec3') return 'ScaleVec3';
+  if (type === 'vec4') return 'ScaleVec4';
+  return null;
+}
+
+export function linkSuggestions(nodes: ShaderNodeInstance[], port: PortRef): LinkSuggestion[] {
+  const opposite = port.direction === 'output' ? 'input' : 'output';
+  const direct = portRefs(nodes, opposite)
+    .filter((candidate) => candidate.type === port.type && candidate.nodeId !== port.nodeId)
+    .slice(0, 8)
+    .map((candidate) => ({
+      kind: 'connect' as const,
+      label: `${candidate.nodeLabel} · ${candidate.portLabel}`,
+      target: candidate,
+    }));
+
+  const suggestions: LinkSuggestion[] = [...direct];
+  const addNode = addNodeForType(port.type);
+  if (addNode) suggestions.push({ kind: 'recipe', label: `Combine with ${NODE_DEFS[addNode].label}`, nodeType: addNode, needsSecondOutput: true });
+  const scaleNode = scaleNodeForType(port.type);
+  if (scaleNode) suggestions.push({ kind: 'node', label: `Scale with Float`, nodeType: scaleNode });
+  if (port.type === 'vec4') {
+    suggestions.push(
+      { kind: 'recipe', label: 'Merge effects with Blend Add', nodeType: 'BlendAdd', needsSecondOutput: true },
+      { kind: 'recipe', label: 'Merge effects with Screen', nodeType: 'BlendScreen', needsSecondOutput: true },
+      { kind: 'recipe', label: 'Mix effects with Lerp Vec4', nodeType: 'LerpVec4', needsSecondOutput: true },
+      { kind: 'recipe', label: 'Composite alpha layers', nodeType: 'CompositeAlpha', needsSecondOutput: true },
+    );
+  }
+  if (port.type === 'image') suggestions.push({ kind: 'node', label: 'Sample with Texture Uniform Color', nodeType: 'TextureUniformColor' });
+  if (port.type === 'vec2') suggestions.push({ kind: 'node', label: 'Sample texture at UV', nodeType: 'TextureUniformColor' });
+  return suggestions.slice(0, 14);
+}
diff --git a/src/pages/shader-graph/index.tsx b/src/pages/shader-graph/index.tsx
index c336a1b6..157c02ee 100644
--- a/src/pages/shader-graph/index.tsx
+++ b/src/pages/shader-graph/index.tsx
@@ -13,15 +13,16 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/componen
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useShaderGraphStore } from '@/store/shader-graph';
-import type { GeneratedGlsl, PlaygroundTarget, ShaderEdge, ShaderNodeInstance } from '@/types/shader-graph';
+import type { GeneratedGlsl, PlaygroundTarget, ShaderEdge, ShaderNodeInstance, ShaderSubgraph } from '@/types/shader-graph';
 import { isWeb } from '@/utils/platform';
 import { NodePalette } from './NodePalette';
 import { ShaderCanvas } from './ShaderCanvas';
 import { NodeInspector } from './NodeInspector';
 import { CodePreview } from './CodePreview';
 import { SHADER_GRAPH_PRESETS } from './presets';
+import { cloneGraphFragment } from './graphUtils';
 
-const FILE_VERSION = 1;
+const FILE_VERSION = 2;
 const FILE_EXTENSION = 'feathershgh';
 const FIRST_OPEN_PRESET_ID = 'water-shimmer';
 
@@ -33,6 +34,7 @@ type FeatherShaderGraphFile = {
   playgroundTarget: PlaygroundTarget | null;
   nodes: ShaderNodeInstance[];
   edges: ShaderEdge[];
+  subgraphs: ShaderSubgraph[];
   lastGeneratedGlsl?: GeneratedGlsl | null;
 };
 
@@ -47,7 +49,7 @@ function defaultFilename(shaderName: string) {
 
 function parseShaderGraphFile(raw: string): FeatherShaderGraphFile {
   const parsed = JSON.parse(raw) as Partial<FeatherShaderGraphFile>;
-  if (parsed.type !== 'feather.shader-graph' || parsed.version !== FILE_VERSION) {
+  if (parsed.type !== 'feather.shader-graph' || (parsed.version !== FILE_VERSION && parsed.version !== 1)) {
     throw new Error('Unsupported shader graph file');
   }
   if (!Array.isArray(parsed.nodes) || !Array.isArray(parsed.edges)) {
@@ -61,6 +63,7 @@ function parseShaderGraphFile(raw: string): FeatherShaderGraphFile {
     playgroundTarget: parsed.playgroundTarget ?? null,
     nodes: parsed.nodes,
     edges: parsed.edges,
+    subgraphs: Array.isArray(parsed.subgraphs) ? parsed.subgraphs : [],
     lastGeneratedGlsl: parsed.lastGeneratedGlsl ?? null,
   };
 }
@@ -70,11 +73,15 @@ export default function ShaderGraph() {
   const shaderGraphPlugin = usePluginControl('shader-graph');
   const nodes = useShaderGraphStore((state) => state.nodes);
   const edges = useShaderGraphStore((state) => state.edges);
+  const subgraphs = useShaderGraphStore((state) => state.subgraphs);
   const shaderName = useShaderGraphStore((state) => state.shaderName);
   const playgroundTarget = useShaderGraphStore((state) => state.playgroundTarget);
   const lastGeneratedGlsl = useShaderGraphStore((state) => state.lastGeneratedGlsl);
   const hasInitializedExample = useShaderGraphStore((state) => state.hasInitializedExample);
   const loadGraph = useShaderGraphStore((state) => state.loadGraph);
+  const addNodesAndEdges = useShaderGraphStore((state) => state.addNodesAndEdges);
+  const markClean = useShaderGraphStore((state) => state.markClean);
+  const isDirty = useShaderGraphStore((state) => state.isDirty);
   const setHasInitializedExample = useShaderGraphStore((state) => state.setHasInitializedExample);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -105,6 +112,7 @@ export default function ShaderGraph() {
     loadGraph({
       nodes: parsed.nodes,
       edges: parsed.edges,
+      subgraphs: parsed.subgraphs,
       shaderName: parsed.shaderName,
       playgroundTarget: parsed.playgroundTarget,
     });
@@ -120,6 +128,7 @@ export default function ShaderGraph() {
       playgroundTarget,
       nodes,
       edges,
+      subgraphs,
       lastGeneratedGlsl,
     };
     const json = JSON.stringify(payload, null, 2);
@@ -133,6 +142,7 @@ export default function ShaderGraph() {
       a.download = filename;
       a.click();
       URL.revokeObjectURL(url);
+      markClean();
       return;
     }
 
@@ -142,6 +152,7 @@ export default function ShaderGraph() {
     });
     if (!path) return;
     await writeTextFile(path, json);
+    markClean();
     toast.success('Shader graph exported');
   };
 
@@ -167,6 +178,7 @@ export default function ShaderGraph() {
     loadGraph({
       nodes: [],
       edges: [],
+      subgraphs: [],
       shaderName,
       playgroundTarget,
     });
@@ -176,15 +188,26 @@ export default function ShaderGraph() {
   const loadPreset = (presetId: string) => {
     const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === presetId);
     if (!preset) return;
+    if (isDirty() && !window.confirm('Replace the current shader graph with this preset? Unsaved changes will be lost.')) return;
     loadGraph({
       nodes: preset.nodes,
       edges: preset.edges,
+      subgraphs: [],
       shaderName: preset.shaderName,
       playgroundTarget,
     });
     toast.success(`Loaded ${preset.name}`);
   };
 
+  const insertPreset = (presetId: string) => {
+    const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    const maxX = nodes.length ? Math.max(...nodes.map((node) => node.position.x)) : 0;
+    const cloned = cloneGraphFragment(preset.nodes, preset.edges, { x: maxX + 260, y: 80 });
+    addNodesAndEdges(cloned.nodes, cloned.edges, cloned.firstNodeId);
+    toast.success(`Inserted ${preset.name}`);
+  };
+
   return (
     <ReactFlowProvider>
       <div className="flex h-0 min-h-0 flex-1 flex-col overflow-hidden">
@@ -209,7 +232,19 @@ export default function ShaderGraph() {
             <div className="flex flex-wrap justify-end gap-2">
               <Select onValueChange={loadPreset}>
                 <SelectTrigger className="h-8 w-48 text-xs">
-                  <SelectValue placeholder="Load preset flow" />
+                  <SelectValue placeholder="Load preset" />
+                </SelectTrigger>
+                <SelectContent>
+                  {SHADER_GRAPH_PRESETS.map((preset) => (
+                    <SelectItem key={preset.id} value={preset.id} title={preset.description}>
+                      {preset.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select onValueChange={insertPreset}>
+                <SelectTrigger className="h-8 w-48 text-xs">
+                  <SelectValue placeholder="Insert preset" />
                 </SelectTrigger>
                 <SelectContent>
                   {SHADER_GRAPH_PRESETS.map((preset) => (
diff --git a/src/pages/shader-graph/nodeDefs.ts b/src/pages/shader-graph/nodeDefs.ts
index b50ac18b..76462fef 100644
--- a/src/pages/shader-graph/nodeDefs.ts
+++ b/src/pages/shader-graph/nodeDefs.ts
@@ -1,5 +1,6 @@
 import type { GlslType, NodeDef, NodeType, ShaderNodeData } from '@/types/shader-graph';
-import { glslFloat } from './glslUtils';
+import { glslFloat, shaderParameterUniformName, shaderTextureUniformName } from './glslUtils';
+import { customFunctionNodeDef } from './customNode';
 
 export const PORT_TYPE_COLORS: Record<GlslType, string> = {
   float: '#94a3b8',
@@ -7,6 +8,7 @@ export const PORT_TYPE_COLORS: Record<GlslType, string> = {
   vec3: '#60a5fa',
   vec4: '#c084fc',
   mat4: '#fb923c',
+  image: '#38bdf8',
 };
 
 type Emit = (inVars: Record<string, string>, outVars: Record<string, string>, data: ShaderNodeData) => string;
@@ -19,7 +21,82 @@ function binary(op: string): Emit {
   return (i, o) => `float ${o.out} = ${i.a} ${op} ${i.b};`;
 }
 
+function vectorBinary(type: 'vec2' | 'vec3' | 'vec4', op: string): Emit {
+  return (i, o) => `${type} ${o.out} = ${i.a} ${op} ${i.b};`;
+}
+
+function halftoneChannel(base: string, uv: string, offset: string, scale: string, mode: string, out: string, prefix: string): string[] {
+  return [
+    `vec2 ${prefix}_offset = ${offset} / max(${scale}, 0.0001);`,
+    `vec2 ${prefix}_dir = ${prefix}_offset / max(dot(${prefix}_offset, ${prefix}_offset), 0.000001);`,
+    `vec2 ${prefix}_pos = mod(abs(vec2(dot(${uv}, ${prefix}_dir), -${uv}.x * ${prefix}_dir.y + ${uv}.y * ${prefix}_dir.x)) + vec2(0.5), vec2(1.0)) - vec2(0.5);`,
+    `float ${prefix}_base = clamp(${base}, 0.0, 1.0);`,
+    `float ${prefix}_circle_raw = 0.78 * dot(${prefix}_pos, ${prefix}_pos) / max(0.25 * (1.0 - ${prefix}_base), 0.0001);`,
+    `float ${prefix}_circle = 1.0 - clamp((1.0 - ${prefix}_circle_raw) / max(fwidth(${prefix}_circle_raw), 0.0001), 0.0, 1.0);`,
+    `vec2 ${prefix}_pos2 = mod(${prefix}_pos + vec2(1.0), vec2(1.0)) - vec2(0.5);`,
+    `float ${prefix}_p1 = dot(${prefix}_pos, ${prefix}_pos);`,
+    `float ${prefix}_p2 = dot(${prefix}_pos2, ${prefix}_pos2);`,
+    `float ${prefix}_t = ${prefix}_p1 / max(${prefix}_p1 + ${prefix}_p2, 0.0001);`,
+    `float ${prefix}_smooth_raw = (1.0 - ${prefix}_t) * (${prefix}_p1 - 0.25 * (1.0 - ${prefix}_base)) - ${prefix}_t * (${prefix}_p2 - 0.25 * ${prefix}_base);`,
+    `float ${prefix}_smooth = 1.0 - clamp((-${prefix}_smooth_raw) / max(fwidth(${prefix}_smooth_raw), 0.0001), 0.0, 1.0);`,
+    `float ${prefix}_radius = 0.5 * sqrt(max(1.0 - ${prefix}_base, 0.0));`,
+    `float ${prefix}_square_raw = max(abs(${prefix}_pos.x), abs(${prefix}_pos.y)) / max(${prefix}_radius, 0.0001);`,
+    `float ${prefix}_square = 1.0 - clamp((1.0 - ${prefix}_square_raw) / max(fwidth(${prefix}_square_raw), 0.0001), 0.0, 1.0);`,
+    `float ${prefix}_mode = clamp(floor(${mode} + 0.5), 0.0, 2.0);`,
+    `float ${out} = ${prefix}_circle * (1.0 - step(0.5, abs(${prefix}_mode - 0.0))) + ${prefix}_smooth * (1.0 - step(0.5, abs(${prefix}_mode - 1.0))) + ${prefix}_square * (1.0 - step(0.5, abs(${prefix}_mode - 2.0)));`,
+  ];
+}
+
+function patternStripeMask(coord: string, widths: string, out: string): string[] {
+  return [
+    `float ${out}_width = max(${widths}.x + ${widths}.y, 0.0001);`,
+    `float ${out}_m = mod(${coord}, ${out}_width);`,
+    `${out}_m = mod(${out}_m + ${out}_width, ${out}_width);`,
+    `float ${out}_d = abs(${out}_m - 0.5 * ${out}_width) - 0.5 * ${widths}.y;`,
+    `float ${out} = clamp(${out}_d / max(fwidth(${out}_d), 0.0001), 0.0, 1.0);`,
+  ];
+}
+
+function pixelBasis(uv: string, position: string, out: string): string[] {
+  return [
+    `vec2 ${out}_f = ${uv} - ${position};`,
+    `vec2 ${out}_dx = dFdx(${uv});`,
+    `vec2 ${out}_dy = dFdy(${uv});`,
+    `float ${out}_det = ${out}_dx.x * ${out}_dy.y - ${out}_dx.y * ${out}_dy.x;`,
+    `float ${out}_inv_det = 1.0 / (abs(${out}_det) < 0.000001 ? 0.000001 : ${out}_det);`,
+  ];
+}
+
+function pixelLineCross(uv: string, position: string, direction: string, out: string, derivativeUv = uv): string[] {
+  return [
+    `vec2 ${out}_d = ${direction};`,
+    `vec2 ${out}_f = ${uv} - ${position};`,
+    `vec2 ${out}_dx = dFdx(${derivativeUv});`,
+    `vec2 ${out}_dy = dFdy(${derivativeUv});`,
+    `float ${out}_denom_x = ${out}_dx.y * ${out}_d.x - ${out}_dx.x * ${out}_d.y;`,
+    `float ${out}_denom_y = ${out}_dy.y * ${out}_d.x - ${out}_dy.x * ${out}_d.y;`,
+    `${out}_denom_x = abs(${out}_denom_x) < 0.000001 ? 0.000001 : ${out}_denom_x;`,
+    `${out}_denom_y = abs(${out}_denom_y) < 0.000001 ? 0.000001 : ${out}_denom_y;`,
+    `float ${out}_q1 = (${out}_d.x * ${out}_f.y - ${out}_d.y * ${out}_f.x) / ${out}_denom_x;`,
+    `float ${out}_q2 = (${out}_d.x * ${out}_f.y - ${out}_d.y * ${out}_f.x) / ${out}_denom_y;`,
+  ];
+}
+
 export const NODE_DEFS: Record<NodeType, NodeDef> = {
+  CustomFunction: {
+    category: 'Custom',
+    label: 'Custom Function',
+    inputs: [],
+    outputs: [],
+    emitGlsl: () => '',
+  },
+  SubgraphInstance: {
+    category: 'Custom',
+    label: 'Subgraph',
+    inputs: [],
+    outputs: [],
+    emitGlsl: () => '',
+  },
   // ─── Input ──────────────────────────────────────────────────────────────────
   TextureColor: {
     category: 'Input',
@@ -28,6 +105,27 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (_, o) => `vec4 ${o.out} = Texel(tex, texture_coords);`,
   },
+  TextureInput: {
+    category: 'Input',
+    label: 'Texture Input',
+    inputs: [],
+    outputs: [{ id: 'texture', label: 'Image', type: 'image' }],
+    emitGlsl: () => '',
+  },
+  TextureParameter: {
+    category: 'Input',
+    label: 'Texture Parameter',
+    inputs: [],
+    outputs: [{ id: 'texture', label: 'Image', type: 'image' }],
+    emitGlsl: () => '',
+  },
+  TextureUniformColor: {
+    category: 'Input',
+    label: 'Texture Uniform Color',
+    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o, d) => `vec4 ${o.out} = Texel(${shaderTextureUniformName(String(d.__nodeId ?? 'texture'), d.uniformName)}, ${i.uv});`,
+  },
   TextureCoords: {
     category: 'Input',
     label: 'Texture Coords',
@@ -54,7 +152,7 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     label: 'Time',
     inputs: [],
     outputs: [{ id: 'out', label: 'T', type: 'float' }],
-    externs: ['extern number u_time;'],
+    externs: ['extern highp number u_time;'],
     emitGlsl: (_, o) => `float ${o.out} = u_time;`,
   },
   Resolution: {
@@ -64,6 +162,48 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
     emitGlsl: (_, o) => `vec2 ${o.out} = love_ScreenSize.xy;`,
   },
+  FloatParameter: {
+    category: 'Input',
+    label: 'Float Parameter',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'Value', type: 'float' }],
+    emitGlsl: (_, o, d) => `float ${o.out} = ${shaderParameterUniformName(String(d.__nodeId ?? 'param'), d.uniformName)};`,
+  },
+  Vec2Parameter: {
+    category: 'Input',
+    label: 'Vec2 Parameter',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (_, o, d) => `vec2 ${o.out} = ${shaderParameterUniformName(String(d.__nodeId ?? 'param'), d.uniformName)};`,
+  },
+  Vec3Parameter: {
+    category: 'Input',
+    label: 'Vec3 Parameter',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (_, o, d) => `vec3 ${o.out} = ${shaderParameterUniformName(String(d.__nodeId ?? 'param'), d.uniformName)};`,
+  },
+  Vec4Parameter: {
+    category: 'Input',
+    label: 'Vec4 Parameter',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (_, o, d) => `vec4 ${o.out} = ${shaderParameterUniformName(String(d.__nodeId ?? 'param'), d.uniformName)};`,
+  },
+  ColorParameter: {
+    category: 'Input',
+    label: 'Color Parameter',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (_, o, d) => `vec4 ${o.out} = ${shaderParameterUniformName(String(d.__nodeId ?? 'param'), d.uniformName)};`,
+  },
+  BooleanParameter: {
+    category: 'Input',
+    label: 'Boolean Parameter',
+    inputs: [],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (_, o, d) => `float ${o.out} = step(0.5, ${shaderParameterUniformName(String(d.__nodeId ?? 'param'), d.uniformName)});`,
+  },
   FloatConstant: {
     category: 'Input',
     label: 'Float',
@@ -555,9 +695,12 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
   SampleTexture: {
     category: 'Effect',
     label: 'Sample Texture',
-    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    inputs: [
+      { id: 'texture', label: 'Texture', type: 'image' },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+    ],
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
-    emitGlsl: (i, o) => `vec4 ${o.out} = Texel(tex, ${i.uv});`,
+    emitGlsl: (i, o) => `vec4 ${o.out} = Texel(${i.texture}, ${i.uv});`,
   },
   TextureStrength: {
     category: 'Effect',
@@ -605,7 +748,7 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
   },
   Outline2D: {
     category: 'Effect',
-    label: 'Alpha Outline',
+    label: 'Sprite Outline',
     inputs: [
       { id: 'color', label: 'Color', type: 'vec4' },
       { id: 'uv', label: 'UV', type: 'vec2' },
@@ -614,7 +757,7 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     ],
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (i, o) =>
-      `vec2 ${o.out}_px = ${i.thickness} / love_ScreenSize.xy;\nfloat ${o.out}_a = max(max(Texel(tex, ${i.uv} + vec2(${o.out}_px.x, 0.0)).a, Texel(tex, ${i.uv} - vec2(${o.out}_px.x, 0.0)).a), max(Texel(tex, ${i.uv} + vec2(0.0, ${o.out}_px.y)).a, Texel(tex, ${i.uv} - vec2(0.0, ${o.out}_px.y)).a));\nvec4 ${o.out} = mix(vec4(${i.outlineColor}.rgb, ${o.out}_a * ${i.outlineColor}.a), ${i.color}, ${i.color}.a);`,
+      `vec2 ${o.out}_uv_step = max(fwidth(${i.uv}), vec2(0.000001)) * max(${i.thickness}, 0.0);\nfloat ${o.out}_source_alpha = clamp(${i.color}.a, 0.0, 1.0);\nfloat ${o.out}_neighbor_alpha = 0.0;\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} + vec2(${o.out}_uv_step.x, 0.0)).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} - vec2(${o.out}_uv_step.x, 0.0)).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} + vec2(0.0, ${o.out}_uv_step.y)).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} - vec2(0.0, ${o.out}_uv_step.y)).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} + ${o.out}_uv_step).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} - ${o.out}_uv_step).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} + vec2(${o.out}_uv_step.x, -${o.out}_uv_step.y)).a);\n${o.out}_neighbor_alpha = max(${o.out}_neighbor_alpha, Texel(tex, ${i.uv} + vec2(-${o.out}_uv_step.x, ${o.out}_uv_step.y)).a);\nfloat ${o.out}_outline_alpha = ${i.outlineColor}.a * smoothstep(0.001, 0.5, ${o.out}_neighbor_alpha);\nfloat ${o.out}_alpha = ${o.out}_source_alpha + ${o.out}_outline_alpha * (1.0 - ${o.out}_source_alpha);\nfloat ${o.out}_source_coverage = smoothstep(0.18, 0.92, ${o.out}_source_alpha);\nvec3 ${o.out}_rgb = mix(${i.outlineColor}.rgb, ${i.color}.rgb, ${o.out}_source_coverage);\nvec4 ${o.out} = vec4(${o.out}_rgb, ${o.out}_alpha);`,
   },
   WaveDistort: {
     category: 'Effect',
@@ -662,6 +805,32 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) =>
       `vec2 ${o.out}_p = ${i.uv} * max(${i.scale}, 0.0001) + vec2(${i.time} * ${i.speed}, ${i.time} * ${i.speed} * 0.73);\nvec2 ${o.out}_cell = floor(${o.out}_p);\nvec2 ${o.out}_f = smoothstep(vec2(0.0), vec2(1.0), fract(${o.out}_p));\nfloat ${o.out}_a = mix(mix(feather_hash(${o.out}_cell), feather_hash(${o.out}_cell + vec2(1.0, 0.0)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(0.0, 1.0)), feather_hash(${o.out}_cell + vec2(1.0, 1.0)), ${o.out}_f.x), ${o.out}_f.y);\nfloat ${o.out}_b = mix(mix(feather_hash(${o.out}_cell + vec2(9.2, 3.4)), feather_hash(${o.out}_cell + vec2(10.2, 3.4)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(9.2, 4.4)), feather_hash(${o.out}_cell + vec2(10.2, 4.4)), ${o.out}_f.x), ${o.out}_f.y);\nvec2 ${o.out}_uv = ${i.uv} + (vec2(${o.out}_a, ${o.out}_b) * 2.0 - 1.0) * ${i.amp};\nvec4 ${o.out}_source = Texel(tex, ${o.out}_uv);\nfloat ${o.out}_mask = step(${i.maskThreshold}, min(${i.color}.a, ${o.out}_source.a));\nvec4 ${o.out} = mix(${i.color}, ${o.out}_source, ${o.out}_mask);`,
   },
+  WaterNoiseUV: {
+    category: 'Effect',
+    label: 'Water Noise UV',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'time', label: 'Time', type: 'float' },
+      { id: 'noiseWidth', label: 'Noise W', type: 'float', defaultValue: 64, min: 1, max: 512, step: 1 },
+      { id: 'spriteWidth', label: 'Sprite W', type: 'float', defaultValue: 65, min: 1, max: 512, step: 1 },
+      { id: 'speed', label: 'Speed', type: 'float', defaultValue: 0.05, min: -1, max: 1, step: 0.001 },
+    ],
+    outputs: [{ id: 'out', label: 'Noise UV', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `float ${o.out}_ratio = ${i.spriteWidth} / max(${i.noiseWidth}, 0.0001);\nfloat ${o.out}_speed = ${i.speed} * ${o.out}_ratio;\nvec2 ${o.out} = fract(${i.uv} * ${o.out}_ratio + vec2(${o.out}_speed * ${i.time}, ${o.out}_speed * ${i.time}));`,
+  },
+  WaterDisplaceV2: {
+    category: 'Effect',
+    label: 'Water Displace V2',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'noiseColor', label: 'Noise', type: 'vec4' },
+      { id: 'amp', label: 'Amp', type: 'float', defaultValue: 0.05, min: 0, max: 0.25, step: 0.001 },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) =>
+      `vec4 ${o.out}_noise = ${i.noiseColor};\nfloat ${o.out}_xy = ${o.out}_noise.b * 0.7071;\n${o.out}_noise.r -= ${o.out}_xy;\n${o.out}_noise.g -= ${o.out}_xy;\nvec2 ${o.out} = ${i.uv} + (((${i.amp} * 2.0) * vec2(${o.out}_noise)) - ${i.amp});`,
+  },
   Dissolve2D: {
     category: 'Effect',
     label: 'Dissolve',
@@ -713,16 +882,195 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     emitGlsl: (i, o) =>
       `vec2 ${o.out}_cells = max(vec2(1.0), love_ScreenSize.xy / max(${i.amount}, 1.0));\nvec2 ${o.out} = floor(${i.uv} * ${o.out}_cells) / ${o.out}_cells;`,
   },
+
+  // ─── Pixel Perfect ──────────────────────────────────────────────────────────
+  PixelPoint: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Point',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      ...pixelBasis(i.uv, i.position, o.out),
+      `float ${o.out}_tx = (${o.out}_dy.y * ${o.out}_f.x - ${o.out}_dy.x * ${o.out}_f.y) * ${o.out}_inv_det;`,
+      `float ${o.out}_ty = (-${o.out}_dx.y * ${o.out}_f.x + ${o.out}_dx.x * ${o.out}_f.y) * ${o.out}_inv_det;`,
+      `float ${o.out} = (${o.out}_tx > -0.5 && ${o.out}_tx <= 0.5 && ${o.out}_ty > -0.5 && ${o.out}_ty <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelPointGrid: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Point Grid',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'width', label: 'Width', type: 'float', defaultValue: 0.1, min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_nearest = ${i.position} + max(${i.width}, 0.0001) * floor((${i.uv} - ${i.position}) / max(${i.width}, 0.0001) + vec2(0.5));`,
+      ...pixelBasis(i.uv, `${o.out}_nearest`, o.out),
+      `float ${o.out}_tx = (${o.out}_dy.y * ${o.out}_f.x - ${o.out}_dy.x * ${o.out}_f.y) * ${o.out}_inv_det;`,
+      `float ${o.out}_ty = (-${o.out}_dx.y * ${o.out}_f.x + ${o.out}_dx.x * ${o.out}_f.y) * ${o.out}_inv_det;`,
+      `float ${o.out} = (${o.out}_tx > -0.5 && ${o.out}_tx <= 0.5 && ${o.out}_ty > -0.5 && ${o.out}_ty <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelRay: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Ray',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'direction', label: 'Direction', type: 'vec2', defaultValue: [1, 0], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      ...pixelLineCross(i.uv, i.position, i.direction, o.out),
+      `float ${o.out} = (${o.out}_q1 > -0.5 && ${o.out}_q1 <= 0.5) || (${o.out}_q2 > -0.5 && ${o.out}_q2 <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelRays: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Rays',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'direction', label: 'Direction', type: 'vec2', defaultValue: [1, 0], step: 0.01 },
+      { id: 'width', label: 'Width', type: 'float', defaultValue: 0.1, min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_normal = normalize(vec2(-${i.direction}.y, ${i.direction}.x));`,
+      `vec2 ${o.out}_nearest = ${i.uv} - max(${i.width}, 0.0001) * floor(dot(${o.out}_normal, ${i.uv} - ${i.position}) / max(${i.width}, 0.0001) + 0.5) * ${o.out}_normal;`,
+      ...pixelLineCross(`${o.out}_nearest`, i.position, i.direction, o.out, i.uv),
+      `float ${o.out} = (${o.out}_q1 > -0.5 && ${o.out}_q1 <= 0.5) || (${o.out}_q2 > -0.5 && ${o.out}_q2 <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelLine: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Line',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'a', label: 'A', type: 'vec2', defaultValue: [0.2, 0.25], min: 0, max: 1, step: 0.01 },
+      { id: 'b', label: 'B', type: 'vec2', defaultValue: [0.8, 0.75], min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_d = ${i.b} - ${i.a};`,
+      `vec2 ${o.out}_f = ${i.uv} - ${i.a};`,
+      `vec2 ${o.out}_dx = dFdx(${i.uv});`,
+      `vec2 ${o.out}_dy = dFdy(${i.uv});`,
+      `float ${o.out}_denom1 = ${o.out}_dx.y * ${o.out}_d.x - ${o.out}_dx.x * ${o.out}_d.y;`,
+      `float ${o.out}_denom2 = ${o.out}_dy.y * ${o.out}_d.x - ${o.out}_dy.x * ${o.out}_d.y;`,
+      `${o.out}_denom1 = abs(${o.out}_denom1) < 0.000001 ? 0.000001 : ${o.out}_denom1;`,
+      `${o.out}_denom2 = abs(${o.out}_denom2) < 0.000001 ? 0.000001 : ${o.out}_denom2;`,
+      `float ${o.out}_inv1 = 1.0 / ${o.out}_denom1;`,
+      `float ${o.out}_inv2 = 1.0 / ${o.out}_denom2;`,
+      `float ${o.out}_p1 = -(${o.out}_dx.x * ${o.out}_f.y - ${o.out}_dx.y * ${o.out}_f.x) * ${o.out}_inv1;`,
+      `float ${o.out}_q1 = (${o.out}_d.x * ${o.out}_f.y - ${o.out}_d.y * ${o.out}_f.x) * ${o.out}_inv1;`,
+      `float ${o.out}_p2 = -(${o.out}_dy.x * ${o.out}_f.y - ${o.out}_dy.y * ${o.out}_f.x) * ${o.out}_inv2;`,
+      `float ${o.out}_q2 = (${o.out}_d.x * ${o.out}_f.y - ${o.out}_d.y * ${o.out}_f.x) * ${o.out}_inv2;`,
+      `float ${o.out} = (${o.out}_p1 >= 0.0 && ${o.out}_p1 <= 1.0 && ${o.out}_q1 > -0.5 && ${o.out}_q1 <= 0.5) || (${o.out}_p2 >= 0.0 && ${o.out}_p2 <= 1.0 && ${o.out}_q2 > -0.5 && ${o.out}_q2 <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelLines: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Lines',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'a', label: 'A', type: 'vec2', defaultValue: [0.2, 0.25], min: 0, max: 1, step: 0.01 },
+      { id: 'b', label: 'B', type: 'vec2', defaultValue: [0.8, 0.75], min: 0, max: 1, step: 0.01 },
+      { id: 'width', label: 'Width', type: 'float', defaultValue: 0.1, min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_d0 = ${i.b} - ${i.a};`,
+      `vec2 ${o.out}_normal = normalize(vec2(-${o.out}_d0.y, ${o.out}_d0.x));`,
+      `vec2 ${o.out}_shifted_uv = ${i.uv} - max(${i.width}, 0.0001) * floor(dot(${o.out}_normal, ${i.uv} - ${i.a}) / max(${i.width}, 0.0001) + 0.5) * ${o.out}_normal;`,
+      `vec2 ${o.out}_d = ${o.out}_d0;`,
+      `vec2 ${o.out}_f = ${o.out}_shifted_uv - ${i.a};`,
+      `vec2 ${o.out}_dx = dFdx(${i.uv});`,
+      `vec2 ${o.out}_dy = dFdy(${i.uv});`,
+      `float ${o.out}_denom1 = ${o.out}_dx.y * ${o.out}_d.x - ${o.out}_dx.x * ${o.out}_d.y;`,
+      `float ${o.out}_denom2 = ${o.out}_dy.y * ${o.out}_d.x - ${o.out}_dy.x * ${o.out}_d.y;`,
+      `${o.out}_denom1 = abs(${o.out}_denom1) < 0.000001 ? 0.000001 : ${o.out}_denom1;`,
+      `${o.out}_denom2 = abs(${o.out}_denom2) < 0.000001 ? 0.000001 : ${o.out}_denom2;`,
+      `float ${o.out}_inv1 = 1.0 / ${o.out}_denom1;`,
+      `float ${o.out}_inv2 = 1.0 / ${o.out}_denom2;`,
+      `float ${o.out}_p1 = -(${o.out}_dx.x * ${o.out}_f.y - ${o.out}_dx.y * ${o.out}_f.x) * ${o.out}_inv1;`,
+      `float ${o.out}_q1 = (${o.out}_d.x * ${o.out}_f.y - ${o.out}_d.y * ${o.out}_f.x) * ${o.out}_inv1;`,
+      `float ${o.out}_p2 = -(${o.out}_dy.x * ${o.out}_f.y - ${o.out}_dy.y * ${o.out}_f.x) * ${o.out}_inv2;`,
+      `float ${o.out}_q2 = (${o.out}_d.x * ${o.out}_f.y - ${o.out}_d.y * ${o.out}_f.x) * ${o.out}_inv2;`,
+      `float ${o.out} = (${o.out}_p1 >= 0.0 && ${o.out}_p1 <= 1.0 && ${o.out}_q1 > -0.5 && ${o.out}_q1 <= 0.5) || (${o.out}_p2 >= 0.0 && ${o.out}_p2 <= 1.0 && ${o.out}_q2 > -0.5 && ${o.out}_q2 <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelCircle: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Circle',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'center', label: 'Center', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'radius', label: 'Radius', type: 'float', defaultValue: 0.35, min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_f = ${i.uv} - ${i.center};`,
+      `vec2 ${o.out}_dx = dFdx(${i.uv});`,
+      `vec2 ${o.out}_dy = dFdy(${i.uv});`,
+      `float ${o.out}_r2 = ${i.radius} * ${i.radius};`,
+      `vec2 ${o.out}_fx1 = ${o.out}_f - 0.5 * ${o.out}_dx;`,
+      `vec2 ${o.out}_fx2 = ${o.out}_f + 0.5 * ${o.out}_dx;`,
+      `vec2 ${o.out}_fy1 = ${o.out}_f - 0.5 * ${o.out}_dy;`,
+      `vec2 ${o.out}_fy2 = ${o.out}_f + 0.5 * ${o.out}_dy;`,
+      `float ${o.out} = ((dot(${o.out}_fx1, ${o.out}_fx1) - ${o.out}_r2) * (dot(${o.out}_fx2, ${o.out}_fx2) - ${o.out}_r2) <= 0.0 || (dot(${o.out}_fy1, ${o.out}_fy1) - ${o.out}_r2) * (dot(${o.out}_fy2, ${o.out}_fy2) - ${o.out}_r2) <= 0.0) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
+  PixelPolygon: {
+    category: 'Pixel Perfect',
+    label: 'Pixel Polygon',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'center', label: 'Center', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'radius', label: 'Radius', type: 'float', defaultValue: 0.35, min: 0.001, max: 1, step: 0.01 },
+      { id: 'sides', label: 'Sides', type: 'float', defaultValue: 6, min: 3, max: 12, step: 1 },
+      { id: 'angle', label: 'Angle', type: 'float', defaultValue: 0, min: -360, max: 360, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_f = ${i.uv} - ${i.center};`,
+      `float ${o.out}_angle = radians(${i.angle});`,
+      `float ${o.out}_sa = sin(${o.out}_angle);`,
+      `float ${o.out}_ca = cos(${o.out}_angle);`,
+      `${o.out}_f = vec2(${o.out}_f.y * ${o.out}_sa + ${o.out}_f.x * ${o.out}_ca, ${o.out}_f.y * ${o.out}_ca - ${o.out}_f.x * ${o.out}_sa);`,
+      `float ${o.out}_sector = 6.28318530718 / max(${i.sides}, 3.0);`,
+      `float ${o.out}_theta = atan(${o.out}_f.y, ${o.out}_f.x);`,
+      `float ${o.out}_snap = floor(${o.out}_theta / ${o.out}_sector + 0.5) * ${o.out}_sector;`,
+      `vec2 ${o.out}_d = vec2(sin(${o.out}_snap), -cos(${o.out}_snap));`,
+      `vec2 ${o.out}_normal = vec2(cos(${o.out}_snap), sin(${o.out}_snap));`,
+      `vec2 ${o.out}_edge_f = ${o.out}_f - ${o.out}_normal * ${i.radius};`,
+      `vec2 ${o.out}_dx = dFdx(${i.uv});`,
+      `vec2 ${o.out}_dy = dFdy(${i.uv});`,
+      `float ${o.out}_denom_x = ${o.out}_dx.y * ${o.out}_d.x - ${o.out}_dx.x * ${o.out}_d.y;`,
+      `float ${o.out}_denom_y = ${o.out}_dy.y * ${o.out}_d.x - ${o.out}_dy.x * ${o.out}_d.y;`,
+      `${o.out}_denom_x = abs(${o.out}_denom_x) < 0.000001 ? 0.000001 : ${o.out}_denom_x;`,
+      `${o.out}_denom_y = abs(${o.out}_denom_y) < 0.000001 ? 0.000001 : ${o.out}_denom_y;`,
+      `float ${o.out}_q1 = (${o.out}_d.x * ${o.out}_edge_f.y - ${o.out}_d.y * ${o.out}_edge_f.x) / ${o.out}_denom_x;`,
+      `float ${o.out}_q2 = (${o.out}_d.x * ${o.out}_edge_f.y - ${o.out}_d.y * ${o.out}_edge_f.x) / ${o.out}_denom_y;`,
+      `float ${o.out} = (${o.out}_q1 > -0.5 && ${o.out}_q1 <= 0.5) || (${o.out}_q2 > -0.5 && ${o.out}_q2 <= 0.5) ? 1.0 : 0.0;`,
+    ].join('\n'),
+  },
   ChromaticAberration: {
     category: 'Effect',
     label: 'Chromatic Aberration',
     inputs: [
       { id: 'uv', label: 'UV', type: 'vec2' },
       { id: 'amount', label: 'Amount', type: 'float' },
+      { id: 'offset', label: 'Offset', type: 'vec2' },
     ],
     outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
     emitGlsl: (i, o) =>
-      `vec2 ${o.out}_dir = normalize(${i.uv} - vec2(0.5));\nvec2 ${o.out}_off = ${o.out}_dir * ${i.amount};\nvec4 ${o.out}_base = Texel(tex, ${i.uv});\nvec4 ${o.out} = vec4(Texel(tex, ${i.uv} + ${o.out}_off).r, ${o.out}_base.g, Texel(tex, ${i.uv} - ${o.out}_off).b, ${o.out}_base.a);`,
+      `vec2 ${o.out}_center = vec2(0.5) + ${i.offset};\nvec2 ${o.out}_delta = ${i.uv} - ${o.out}_center;\nvec2 ${o.out}_dir = length(${o.out}_delta) > 0.0001 ? normalize(${o.out}_delta) : vec2(0.0);\nvec2 ${o.out}_off = ${o.out}_dir * ${i.amount};\nvec4 ${o.out}_base = Texel(tex, ${i.uv});\nvec4 ${o.out} = vec4(Texel(tex, ${i.uv} + ${o.out}_off).r, ${o.out}_base.g, Texel(tex, ${i.uv} - ${o.out}_off).b, ${o.out}_base.a);`,
   },
 
   // ─── Output ──────────────────────────────────────────────────────────────────
@@ -823,30 +1171,1304 @@ export const NODE_DEFS: Record<NodeType, NodeDef> = {
     outputs: [],
     emitGlsl: () => '',
   },
+
+  // ─── Math (extended) ─────────────────────────────────────────────────────────
+  Sqrt: {
+    category: 'Math',
+    label: 'Sqrt',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('sqrt'),
+  },
+  Ceil: {
+    category: 'Math',
+    label: 'Ceil',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('ceil'),
+  },
+  Round: {
+    category: 'Math',
+    label: 'Round',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = floor(${i.in0} + 0.5);`,
+  },
+  Sign: {
+    category: 'Math',
+    label: 'Sign',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('sign'),
+  },
+  Tan: {
+    category: 'Math',
+    label: 'Tan',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('tan'),
+  },
+  Log: {
+    category: 'Math',
+    label: 'Log',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = log(max(${i.in0}, 0.0001));`,
+  },
+  Exp: {
+    category: 'Math',
+    label: 'Exp',
+    inputs: [{ id: 'in0', label: 'X', type: 'float' }],
+    outputs: [{ id: 'out', label: 'Out', type: 'float' }],
+    emitGlsl: unary('exp'),
+  },
+  Atan2: {
+    category: 'Math',
+    label: 'Atan2',
+    inputs: [
+      { id: 'y', label: 'Y', type: 'float' },
+      { id: 'x', label: 'X', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Angle', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = atan(${i.y}, ${i.x});`,
+  },
+
+  // ─── Complex ────────────────────────────────────────────────────────────────
+  ComplexConjugate: {
+    category: 'Complex',
+    label: 'Complex Conjugate',
+    inputs: [{ id: 'a', label: 'A', type: 'vec2', defaultValue: [0.5, 0.25], step: 0.01 }],
+    outputs: [{ id: 'out', label: 'A*', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = vec2(${i.a}.x, -${i.a}.y);`,
+  },
+  ComplexReciprocal: {
+    category: 'Complex',
+    label: 'Complex Reciprocal',
+    inputs: [{ id: 'a', label: 'A', type: 'vec2', defaultValue: [1, 0], step: 0.01 }],
+    outputs: [{ id: 'out', label: '1 / A', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = vec2(${i.a}.x, -${i.a}.y) / max(dot(${i.a}, ${i.a}), 0.000001);`,
+  },
+  ComplexMultiply: {
+    category: 'Complex',
+    label: 'Complex Multiply',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2', defaultValue: [1, 0], step: 0.01 },
+      { id: 'b', label: 'B', type: 'vec2', defaultValue: [0, 1], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'A x B', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = vec2(${i.a}.x * ${i.b}.x - ${i.a}.y * ${i.b}.y, ${i.a}.x * ${i.b}.y + ${i.a}.y * ${i.b}.x);`,
+  },
+  ComplexDivide: {
+    category: 'Complex',
+    label: 'Complex Divide',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2', defaultValue: [1, 0], step: 0.01 },
+      { id: 'b', label: 'B', type: 'vec2', defaultValue: [1, 0], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'A / B', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = vec2(${i.a}.x * ${i.b}.x + ${i.a}.y * ${i.b}.y, ${i.a}.y * ${i.b}.x - ${i.a}.x * ${i.b}.y) / max(dot(${i.b}, ${i.b}), 0.000001);`,
+  },
+  ComplexExp: {
+    category: 'Complex',
+    label: 'Complex Exp',
+    inputs: [{ id: 'a', label: 'A', type: 'vec2', defaultValue: [0, 1], step: 0.01 }],
+    outputs: [{ id: 'out', label: 'e^A', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = exp(${i.a}.x) * vec2(cos(${i.a}.y), sin(${i.a}.y));`,
+  },
+  ComplexLog: {
+    category: 'Complex',
+    label: 'Complex Log',
+    inputs: [{ id: 'a', label: 'A', type: 'vec2', defaultValue: [1, 0], step: 0.01 }],
+    outputs: [{ id: 'out', label: 'log(A)', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = vec2(0.5 * log(max(dot(${i.a}, ${i.a}), 0.000001)), atan(${i.a}.y, ${i.a}.x));`,
+  },
+  ComplexPower: {
+    category: 'Complex',
+    label: 'Complex Power',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2', defaultValue: [0.5, 0.5], step: 0.01 },
+      { id: 'b', label: 'B', type: 'vec2', defaultValue: [2, 0], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'A^B', type: 'vec2' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_arg = atan(${i.a}.y, ${i.a}.x);`,
+      `float ${o.out}_len2 = max(dot(${i.a}, ${i.a}), 0.000001);`,
+      `float ${o.out}_angle = ${i.b}.x * ${o.out}_arg + 0.5 * ${i.b}.y * log(${o.out}_len2);`,
+      `float ${o.out}_scale = pow(${o.out}_len2, 0.5 * ${i.b}.x) * exp(-${i.b}.y * ${o.out}_arg);`,
+      `vec2 ${o.out} = ${o.out}_scale * vec2(cos(${o.out}_angle), sin(${o.out}_angle));`,
+    ].join('\n'),
+  },
+
+  // ─── Quaternion ─────────────────────────────────────────────────────────────
+  QuaternionInverse: {
+    category: 'Quaternion',
+    label: 'Quaternion Inverse',
+    inputs: [{ id: 'q', label: 'Q', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 }],
+    outputs: [{ id: 'out', label: 'Q^-1', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(-${i.q}.xyz, ${i.q}.w) / max(dot(${i.q}, ${i.q}), 0.000001);`,
+  },
+  QuaternionFromEuler: {
+    category: 'Quaternion',
+    label: 'Quaternion From Euler',
+    inputs: [{ id: 'angles', label: 'Euler Deg', type: 'vec3', defaultValue: [0, 0, 0], min: -360, max: 360, step: 1 }],
+    outputs: [{ id: 'out', label: 'Q', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      `vec3 ${o.out}_s = sin(0.5 * radians(${i.angles}));`,
+      `vec3 ${o.out}_c = cos(0.5 * radians(${i.angles}));`,
+      `vec4 ${o.out} = vec4(`,
+      `  ${o.out}_c.y * ${o.out}_s.x * ${o.out}_c.z + ${o.out}_s.y * ${o.out}_c.x * ${o.out}_s.z,`,
+      `  ${o.out}_s.y * ${o.out}_c.x * ${o.out}_c.z - ${o.out}_c.y * ${o.out}_s.x * ${o.out}_s.z,`,
+      `  ${o.out}_c.y * ${o.out}_c.x * ${o.out}_s.z - ${o.out}_s.y * ${o.out}_s.x * ${o.out}_c.z,`,
+      `  ${o.out}_c.y * ${o.out}_c.x * ${o.out}_c.z + ${o.out}_s.y * ${o.out}_s.x * ${o.out}_s.z`,
+      `);`,
+      `${o.out} = normalize(${o.out});`,
+    ].join('\n'),
+  },
+  QuaternionFromAngleAxis: {
+    category: 'Quaternion',
+    label: 'Quaternion From Angle Axis',
+    inputs: [
+      { id: 'angle', label: 'Angle Deg', type: 'float', defaultValue: 45, min: -360, max: 360, step: 1 },
+      { id: 'axis', label: 'Axis', type: 'vec3', defaultValue: [0, 0, 1], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Q', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      `vec3 ${o.out}_axis_raw = ${i.axis};`,
+      `vec3 ${o.out}_axis = length(${o.out}_axis_raw) > 0.000001 ? normalize(${o.out}_axis_raw) : vec3(0.0, 0.0, 1.0);`,
+      `float ${o.out}_half = 0.5 * radians(${i.angle});`,
+      `float ${o.out}_s = sin(${o.out}_half);`,
+      `vec4 ${o.out} = normalize(vec4(${o.out}_s * ${o.out}_axis, cos(${o.out}_half)));`,
+    ].join('\n'),
+  },
+  QuaternionToAngleAxis: {
+    category: 'Quaternion',
+    label: 'Quaternion To Angle Axis',
+    inputs: [{ id: 'q', label: 'Q', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 }],
+    outputs: [
+      { id: 'angle', label: 'Angle Deg', type: 'float' },
+      { id: 'axis', label: 'Axis', type: 'vec3' },
+    ],
+    emitGlsl: (i, o) => [
+      `vec4 ${o.axis}_q = normalize(${i.q});`,
+      `float ${o.axis}_len = length(${o.axis}_q.xyz);`,
+      `vec3 ${o.axis} = ${o.axis}_len > 0.000001 ? ${o.axis}_q.xyz / ${o.axis}_len : vec3(1.0, 0.0, 0.0);`,
+      `float ${o.angle} = degrees(2.0 * atan(${o.axis}_len, ${o.axis}_q.w));`,
+    ].join('\n'),
+  },
+  QuaternionFromToRotation: {
+    category: 'Quaternion',
+    label: 'Quaternion From To Rotation',
+    inputs: [
+      { id: 'from', label: 'From', type: 'vec3', defaultValue: [1, 0, 0], step: 0.01 },
+      { id: 'to', label: 'To', type: 'vec3', defaultValue: [0, 1, 0], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Q', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      `vec3 ${o.out}_from_raw = ${i.from};`,
+      `vec3 ${o.out}_to_raw = ${i.to};`,
+      `vec3 ${o.out}_from = length(${o.out}_from_raw) > 0.000001 ? normalize(${o.out}_from_raw) : vec3(1.0, 0.0, 0.0);`,
+      `vec3 ${o.out}_to = length(${o.out}_to_raw) > 0.000001 ? normalize(${o.out}_to_raw) : vec3(1.0, 0.0, 0.0);`,
+      `vec3 ${o.out}_axis = cross(${o.out}_from, ${o.out}_to);`,
+      `float ${o.out}_w = sqrt(max(dot(${o.out}_from, ${o.out}_from) * dot(${o.out}_to, ${o.out}_to), 0.0)) + dot(${o.out}_from, ${o.out}_to);`,
+      `vec4 ${o.out} = normalize(vec4(${o.out}_axis, ${o.out}_w));`,
+    ].join('\n'),
+  },
+  QuaternionMultiply: {
+    category: 'Quaternion',
+    label: 'Quaternion Multiply',
+    inputs: [
+      { id: 'p', label: 'P', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 },
+      { id: 'q', label: 'Q', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'P x Q', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      `vec4 ${o.out} = vec4(${i.p}.w * ${i.q}.xyz + ${i.q}.w * ${i.p}.xyz + cross(${i.p}.xyz, ${i.q}.xyz), ${i.p}.w * ${i.q}.w - dot(${i.p}.xyz, ${i.q}.xyz));`,
+      `${o.out} = dot(${o.out}, ${o.out}) > 0.000001 ? normalize(${o.out}) : vec4(0.0, 0.0, 0.0, 1.0);`,
+    ].join('\n'),
+  },
+  QuaternionRotateVector: {
+    category: 'Quaternion',
+    label: 'Quaternion Rotate Vector',
+    inputs: [
+      { id: 'vec', label: 'Vector', type: 'vec3', defaultValue: [1, 0, 0], step: 0.01 },
+      { id: 'q', label: 'Q', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (i, o) => [
+      `vec4 ${o.out}_q_raw = ${i.q};`,
+      `vec4 ${o.out}_q = dot(${o.out}_q_raw, ${o.out}_q_raw) > 0.000001 ? normalize(${o.out}_q_raw) : vec4(0.0, 0.0, 0.0, 1.0);`,
+      `vec3 ${o.out}_t = 2.0 * cross(${o.out}_q.xyz, ${i.vec});`,
+      `vec3 ${o.out} = ${i.vec} + ${o.out}_q.w * ${o.out}_t + cross(${o.out}_q.xyz, ${o.out}_t);`,
+    ].join('\n'),
+  },
+  QuaternionSlerp: {
+    category: 'Quaternion',
+    label: 'Quaternion Slerp',
+    inputs: [
+      { id: 'p', label: 'P', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 },
+      { id: 'q', label: 'Q', type: 'vec4', defaultValue: [0, 0, 0, 1], step: 0.01 },
+      { id: 't', label: 'T', type: 'float', defaultValue: 0.5, min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Q', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      `vec4 ${o.out}_p = normalize(${i.p});`,
+      `vec4 ${o.out}_q = normalize(${i.q});`,
+      `float ${o.out}_cos = dot(${o.out}_p, ${o.out}_q);`,
+      `${o.out}_q = ${o.out}_cos < 0.0 ? -${o.out}_q : ${o.out}_q;`,
+      `${o.out}_cos = abs(${o.out}_cos);`,
+      `float ${o.out}_t = clamp(${i.t}, 0.0, 1.0);`,
+      `float ${o.out}_half = acos(clamp(${o.out}_cos, -1.0, 1.0));`,
+      `float ${o.out}_sin = sin(${o.out}_half);`,
+      `vec4 ${o.out} = ${o.out}_sin < 0.0001 ? normalize(mix(${o.out}_p, ${o.out}_q, ${o.out}_t)) : normalize((sin(${o.out}_half * (1.0 - ${o.out}_t)) / ${o.out}_sin) * ${o.out}_p + (sin(${o.out}_half * ${o.out}_t) / ${o.out}_sin) * ${o.out}_q);`,
+    ].join('\n'),
+  },
+
+  // ─── Symmetry ───────────────────────────────────────────────────────────────
+  ReflectionSymmetry: {
+    category: 'Symmetry',
+    label: 'Reflection Symmetry',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'direction', label: 'Direction', type: 'vec2', defaultValue: [0, 1], step: 0.01 },
+      { id: 'glide', label: 'Glide', type: 'float', defaultValue: 0, min: -2, max: 2, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_dir_raw = ${i.direction};`,
+      `vec2 ${o.out}_dir = length(${o.out}_dir_raw) > 0.000001 ? normalize(${o.out}_dir_raw) : vec2(0.0, 1.0);`,
+      `vec2 ${o.out}_p = ${i.uv} - ${i.position};`,
+      `vec2 ${o.out}_normal = vec2(${o.out}_dir.y, -${o.out}_dir.x);`,
+      `float ${o.out}_dist = dot(${o.out}_normal, ${o.out}_p);`,
+      `vec2 ${o.out} = (dot(${o.out}_dir, ${o.out}_p) + (${o.out}_dist < 0.0 ? -${i.glide} : 0.0)) * ${o.out}_dir + abs(${o.out}_dist) * ${o.out}_normal + ${i.position};`,
+    ].join('\n'),
+  },
+  RotationSymmetry: {
+    category: 'Symmetry',
+    label: 'Rotation Symmetry',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'angle', label: 'Angle Rad', type: 'float', defaultValue: 0, min: -6.283, max: 6.283, step: 0.01 },
+      { id: 'order', label: 'Order', type: 'float', defaultValue: 6, min: 1, max: 24, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_p = ${i.uv} - ${i.position};`,
+      `float ${o.out}_order = max(floor(${i.order} + 0.5), 1.0);`,
+      `float ${o.out}_angle = atan(${o.out}_p.y, ${o.out}_p.x) - ${i.angle};`,
+      `float ${o.out}_rotation = -floor(${o.out}_angle * ${o.out}_order * 0.15915494309) / (${o.out}_order * 0.15915494309);`,
+      `float ${o.out}_s = sin(${o.out}_rotation);`,
+      `float ${o.out}_c = cos(${o.out}_rotation);`,
+      `vec2 ${o.out} = vec2(${o.out}_c * ${o.out}_p.x - ${o.out}_s * ${o.out}_p.y, ${o.out}_s * ${o.out}_p.x + ${o.out}_c * ${o.out}_p.y) + ${i.position};`,
+    ].join('\n'),
+  },
+  TilingSymmetry: {
+    category: 'Symmetry',
+    label: 'Tiling Symmetry',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'cellSize', label: 'Cell Size', type: 'float', defaultValue: 0.25, min: 0.01, max: 2, step: 0.01 },
+      { id: 'offset', label: 'Offset', type: 'float', defaultValue: 0, min: -2, max: 2, step: 0.01 },
+      { id: 'mode', label: 'Mode', type: 'float', defaultValue: 0, min: 0, max: 3, step: 1 },
+    ],
+    outputs: [
+      { id: 'out', label: 'Tile UV', type: 'vec2' },
+      { id: 'cellIndex', label: 'Cell Index', type: 'vec2' },
+      { id: 'cellPosition', label: 'Cell Pos', type: 'vec2' },
+    ],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_size = max(${i.cellSize}, 0.0001);`,
+      `float ${o.out}_mode = clamp(floor(${i.mode} + 0.5), 0.0, 3.0);`,
+      `vec2 ${o.out}_square_uv2 = ${i.uv} / ${o.out}_size;`,
+      `vec2 ${o.out}_square_index = vec2(0.0);`,
+      `${o.out}_square_index.y = floor(${o.out}_square_uv2.y + 0.5);`,
+      `${o.out}_square_uv2.x = ${o.out}_square_uv2.x - ${i.offset} / ${o.out}_size * ${o.out}_square_index.y;`,
+      `${o.out}_square_index.x = floor(${o.out}_square_uv2.x + 0.5);`,
+      `vec2 ${o.out}_square_pos = ${o.out}_square_index * ${o.out}_size + ${i.offset} * vec2(${o.out}_square_index.y, 0.0);`,
+      `vec2 ${o.out}_square_out = ${i.uv} - ${o.out}_square_pos;`,
+      `const float ${o.out}_root3 = 1.73205080757;`,
+      `vec2 ${o.out}_hex_uv2 = ${i.uv} / ${o.out}_size;`,
+      `mat2 ${o.out}_xhex = mat2(1.0, 2.0, -${o.out}_root3, 0.0);`,
+      `mat2 ${o.out}_yhex = mat2(1.0, -1.0, ${o.out}_root3, ${o.out}_root3);`,
+      `mat2 ${o.out}_pos_index = mat2(1.0, 0.0, 0.5, 0.5 * ${o.out}_root3);`,
+      `vec2 ${o.out}_x = floor(${o.out}_xhex * ${o.out}_hex_uv2);`,
+      `vec2 ${o.out}_y = floor(${o.out}_yhex * ${o.out}_hex_uv2);`,
+      `vec2 ${o.out}_hex_index = floor((vec2(${o.out}_x.x + ${o.out}_x.y, ${o.out}_y.x + ${o.out}_y.y) + vec2(2.0)) / 3.0);`,
+      `vec2 ${o.out}_hex_pos = ${o.out}_size * (${o.out}_pos_index * ${o.out}_hex_index);`,
+      `vec2 ${o.out}_hex_out = ${i.uv} - ${o.out}_hex_pos;`,
+      `mat2 ${o.out}_tri = mat2(1.0, 0.0, -0.57735026919, 1.15470053838);`,
+      `vec2 ${o.out}_tri_p = ${o.out}_tri * (${i.uv} / ${o.out}_size);`,
+      `float ${o.out}_tri_z = floor(fract(${o.out}_tri_p.x) + fract(${o.out}_tri_p.y));`,
+      `vec2 ${o.out}_tri_floor = floor(${o.out}_tri_p);`,
+      `vec2 ${o.out}_tri_index = vec2(2.0 * ${o.out}_tri_floor.x + ${o.out}_tri_z, ${o.out}_tri_floor.y);`,
+      `vec2 ${o.out}_tri_pos = ${o.out}_size * (vec2(${o.out}_tri_floor.x + 0.5 * ${o.out}_tri_floor.y, 0.86602540378 * ${o.out}_tri_floor.y) + (2.0 + 2.0 * ${o.out}_tri_z) * vec2(0.25, 0.14433756729));`,
+      `vec2 ${o.out}_tri_out = (2.0 * ${o.out}_tri_z - 1.0) * (${i.uv} - ${o.out}_tri_pos);`,
+      `mat2 ${o.out}_rot_a = mat2(0.7071068, -0.7071068, 0.7071068, 0.7071068);`,
+      `mat2 ${o.out}_rot_b = mat2(0.7071068, 0.7071068, -0.7071068, 0.7071068);`,
+      `float ${o.out}_width = 0.5 * ${o.out}_size;`,
+      `vec2 ${o.out}_h_p = 2.0 * floor(0.5 * (${i.uv}.xx / ${o.out}_width - vec2(0.0, 1.0)) + 0.5) + vec2(0.0, 1.0);`,
+      `vec2 ${o.out}_h_x = ${i.uv}.xx - ${o.out}_width * ${o.out}_h_p;`,
+      `vec2 ${o.out}_h_y = ${i.uv}.yy - 0.5 * ${o.out}_h_p;`,
+      `vec2 ${o.out}_h_q = floor(${o.out}_h_y - ${o.out}_h_x * vec2(1.0, -1.0) + 0.5);`,
+      `${o.out}_h_y = ${o.out}_h_y - ${o.out}_h_q;`,
+      `vec2 ${o.out}_h_a = ${o.out}_rot_a * vec2(${o.out}_h_x.x, ${o.out}_h_y.x);`,
+      `vec2 ${o.out}_h_b = ${o.out}_rot_b * vec2(${o.out}_h_x.y, ${o.out}_h_y.y);`,
+      `float ${o.out}_h_pick = step(${o.out}_width, abs(${o.out}_h_x.x + ${o.out}_h_y.x));`,
+      `vec2 ${o.out}_h_out = mix(${o.out}_h_a, ${o.out}_h_b, ${o.out}_h_pick);`,
+      `vec2 ${o.out}_h_index = mix(vec2(${o.out}_h_p.x, ${o.out}_h_q.x), vec2(${o.out}_h_p.y, ${o.out}_h_q.y), ${o.out}_h_pick);`,
+      `vec2 ${o.out}_h_pos = vec2(${o.out}_h_index.x * ${o.out}_width, 0.5 * ${o.out}_h_index.x + ${o.out}_h_index.y);`,
+      `float ${o.out}_is_hex = 1.0 - step(0.5, abs(${o.out}_mode - 1.0));`,
+      `float ${o.out}_is_tri = 1.0 - step(0.5, abs(${o.out}_mode - 2.0));`,
+      `float ${o.out}_is_h = 1.0 - step(0.5, abs(${o.out}_mode - 3.0));`,
+      `vec2 ${o.out}_tile = ${o.out}_square_out;`,
+      `${o.out}_tile = mix(${o.out}_tile, ${o.out}_hex_out, ${o.out}_is_hex);`,
+      `${o.out}_tile = mix(${o.out}_tile, ${o.out}_tri_out, ${o.out}_is_tri);`,
+      `${o.out}_tile = mix(${o.out}_tile, ${o.out}_h_out, ${o.out}_is_h);`,
+      `vec2 ${o.cellIndex} = ${o.out}_square_index;`,
+      `${o.cellIndex} = mix(${o.cellIndex}, ${o.out}_hex_index, ${o.out}_is_hex);`,
+      `${o.cellIndex} = mix(${o.cellIndex}, ${o.out}_tri_index, ${o.out}_is_tri);`,
+      `${o.cellIndex} = mix(${o.cellIndex}, ${o.out}_h_index, ${o.out}_is_h);`,
+      `vec2 ${o.cellPosition} = ${o.out}_square_pos;`,
+      `${o.cellPosition} = mix(${o.cellPosition}, ${o.out}_hex_pos, ${o.out}_is_hex);`,
+      `${o.cellPosition} = mix(${o.cellPosition}, ${o.out}_tri_pos, ${o.out}_is_tri);`,
+      `${o.cellPosition} = mix(${o.cellPosition}, ${o.out}_h_pos, ${o.out}_is_h);`,
+      `vec2 ${o.out} = ${o.out}_tile + vec2(0.5);`,
+    ].join('\n'),
+  },
+
+  // ─── Random ─────────────────────────────────────────────────────────────────
+  RandomIntegerRange: {
+    category: 'Random',
+    label: 'Random Integer Range',
+    inputs: [
+      { id: 'seed', label: 'Seed', type: 'vec2', defaultValue: [0, 0], step: 1 },
+      { id: 'min', label: 'Min', type: 'float', defaultValue: 0, step: 1 },
+      { id: 'max', label: 'Max', type: 'float', defaultValue: 10, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'Int', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_r = fract(sin(dot(${i.seed}, vec2(127.1, 311.7))) * 43758.5453);`,
+      `float ${o.out}_min = ceil(${i.min});`,
+      `float ${o.out}_max = ceil(${i.max});`,
+      `float ${o.out}_span = max(${o.out}_max - ${o.out}_min, 1.0);`,
+      `float ${o.out} = ${o.out}_min + floor(${o.out}_r * ${o.out}_span);`,
+    ].join('\n'),
+  },
+  RandomCircle: {
+    category: 'Random',
+    label: 'Random Circle',
+    inputs: [
+      { id: 'seed', label: 'Seed', type: 'vec2', defaultValue: [0, 0], step: 1 },
+      { id: 'mode', label: 'Mode', type: 'float', defaultValue: 0, min: 0, max: 1, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_r = fract(sin(vec2(dot(${i.seed}, vec2(127.1, 311.7)), dot(${i.seed}, vec2(269.5, 183.3)))) * 43758.5453);`,
+      `float ${o.out}_angle = ${o.out}_r.x * 6.28318530718;`,
+      `float ${o.out}_radius = mix(sqrt(${o.out}_r.y), 1.0, step(0.5, ${i.mode}));`,
+      `vec2 ${o.out} = ${o.out}_radius * vec2(cos(${o.out}_angle), sin(${o.out}_angle));`,
+    ].join('\n'),
+  },
+  RandomSphere: {
+    category: 'Random',
+    label: 'Random Sphere',
+    inputs: [
+      { id: 'seed', label: 'Seed', type: 'vec2', defaultValue: [0, 0], step: 1 },
+      { id: 'mode', label: 'Mode', type: 'float', defaultValue: 0, min: 0, max: 1, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (i, o) => [
+      `vec3 ${o.out}_r = fract(sin(vec3(dot(${i.seed}, vec2(127.1, 311.7)), dot(${i.seed}, vec2(269.5, 183.3)), dot(${i.seed}, vec2(419.2, 371.9)))) * 43758.5453);`,
+      `float ${o.out}_theta = ${o.out}_r.x * 6.28318530718;`,
+      `float ${o.out}_cos_phi = 2.0 * ${o.out}_r.y - 1.0;`,
+      `float ${o.out}_sin_phi = sqrt(max(1.0 - ${o.out}_cos_phi * ${o.out}_cos_phi, 0.0));`,
+      `float ${o.out}_radius = mix(pow(${o.out}_r.z, 0.3333333333), 1.0, step(0.5, ${i.mode}));`,
+      `vec3 ${o.out} = ${o.out}_radius * vec3(cos(${o.out}_theta) * ${o.out}_sin_phi, sin(${o.out}_theta) * ${o.out}_sin_phi, ${o.out}_cos_phi);`,
+    ].join('\n'),
+  },
+  RandomRotation: {
+    category: 'Random',
+    label: 'Random Rotation',
+    inputs: [{ id: 'seed', label: 'Seed', type: 'vec2', defaultValue: [0, 0], step: 1 }],
+    outputs: [{ id: 'out', label: 'Q', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      `vec3 ${o.out}_r = fract(sin(vec3(dot(${i.seed}, vec2(127.1, 311.7)), dot(${i.seed}, vec2(269.5, 183.3)), dot(${i.seed}, vec2(419.2, 371.9)))) * 43758.5453);`,
+      `float ${o.out}_angle_y = ${o.out}_r.y * 6.28318530718;`,
+      `float ${o.out}_angle_z = ${o.out}_r.z * 6.28318530718;`,
+      `vec4 ${o.out} = sqrt(${o.out}_r.x) * vec4(0.0, 0.0, sin(${o.out}_angle_z), cos(${o.out}_angle_z)) + sqrt(max(1.0 - ${o.out}_r.x, 0.0)) * vec4(sin(${o.out}_angle_y), cos(${o.out}_angle_y), 0.0, 0.0);`,
+      `${o.out} = normalize(${o.out});`,
+    ].join('\n'),
+  },
+  RandomColor: {
+    category: 'Random',
+    label: 'Random Color',
+    inputs: [
+      { id: 'seed', label: 'Seed', type: 'vec2', defaultValue: [0, 0], step: 1 },
+      { id: 'minHsv', label: 'Min HSV', type: 'vec3', defaultValue: [0, 0.55, 0.75], min: 0, max: 1, step: 0.01 },
+      { id: 'maxHsv', label: 'Max HSV', type: 'vec3', defaultValue: [1, 1, 1], min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [
+      { id: 'rgb', label: 'RGB', type: 'vec3' },
+      { id: 'hsv', label: 'HSV', type: 'vec3' },
+    ],
+    emitGlsl: (i, o) => [
+      `vec3 ${o.rgb}_r = fract(sin(vec3(dot(${i.seed}, vec2(127.1, 311.7)), dot(${i.seed}, vec2(269.5, 183.3)), dot(${i.seed}, vec2(419.2, 371.9)))) * 43758.5453);`,
+      `vec3 ${o.rgb}_range = ${i.maxHsv} - ${i.minHsv};`,
+      `${o.rgb}_range = mix(${o.rgb}_range, fract(${o.rgb}_range), step(${o.rgb}_range, vec3(0.0)));`,
+      `vec3 ${o.hsv} = ${i.minHsv} + ${o.rgb}_range * ${o.rgb}_r;`,
+      `${o.hsv} = vec3(fract(${o.hsv}.x), clamp(${o.hsv}.y, 0.0, 1.0), clamp(${o.hsv}.z, 0.0, 1.0));`,
+      `vec3 ${o.rgb} = clamp(vec3(abs(${o.hsv}.x * 6.0 - 3.0) - 1.0, 2.0 - abs(${o.hsv}.x * 6.0 - 2.0), 2.0 - abs(${o.hsv}.x * 6.0 - 4.0)), 0.0, 1.0);`,
+      `${o.rgb} = ((${o.rgb} - 1.0) * ${o.hsv}.y + 1.0) * ${o.hsv}.z;`,
+    ].join('\n'),
+  },
+
+  // ─── Vector (extended) ───────────────────────────────────────────────────────
+  AddVec2: {
+    category: 'Vector',
+    label: 'Add Vec2',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2' },
+      { id: 'b', label: 'B', type: 'vec2' },
+    ],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: vectorBinary('vec2', '+'),
+  },
+  AddVec3: {
+    category: 'Vector',
+    label: 'Add Vec3',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec3' },
+      { id: 'b', label: 'B', type: 'vec3' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: vectorBinary('vec3', '+'),
+  },
+  AddVec4: {
+    category: 'Vector',
+    label: 'Add Vec4',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: vectorBinary('vec4', '+'),
+  },
+  SubtractVec2: {
+    category: 'Vector',
+    label: 'Subtract Vec2',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2' },
+      { id: 'b', label: 'B', type: 'vec2' },
+    ],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: vectorBinary('vec2', '-'),
+  },
+  SubtractVec3: {
+    category: 'Vector',
+    label: 'Subtract Vec3',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec3' },
+      { id: 'b', label: 'B', type: 'vec3' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: vectorBinary('vec3', '-'),
+  },
+  SubtractVec4: {
+    category: 'Vector',
+    label: 'Subtract Vec4',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: vectorBinary('vec4', '-'),
+  },
+  MultiplyVec2: {
+    category: 'Vector',
+    label: 'Multiply Vec2',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2' },
+      { id: 'b', label: 'B', type: 'vec2' },
+    ],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: vectorBinary('vec2', '*'),
+  },
+  MultiplyVec3: {
+    category: 'Vector',
+    label: 'Multiply Vec3',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec3' },
+      { id: 'b', label: 'B', type: 'vec3' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: vectorBinary('vec3', '*'),
+  },
+  MultiplyVec4: {
+    category: 'Vector',
+    label: 'Multiply Vec4',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: vectorBinary('vec4', '*'),
+  },
+  DivideVec2: {
+    category: 'Vector',
+    label: 'Divide Vec2',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec2' },
+      { id: 'b', label: 'B', type: 'vec2' },
+    ],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: vectorBinary('vec2', '/'),
+  },
+  DivideVec3: {
+    category: 'Vector',
+    label: 'Divide Vec3',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec3' },
+      { id: 'b', label: 'B', type: 'vec3' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: vectorBinary('vec3', '/'),
+  },
+  DivideVec4: {
+    category: 'Vector',
+    label: 'Divide Vec4',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: vectorBinary('vec4', '/'),
+  },
+  CrossVec3: {
+    category: 'Vector',
+    label: 'Cross Vec3',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec3' },
+      { id: 'b', label: 'B', type: 'vec3' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (i, o) => `vec3 ${o.out} = cross(${i.a}, ${i.b});`,
+  },
+  LerpVec4: {
+    category: 'Vector',
+    label: 'Lerp Vec4',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+      { id: 't', label: 'T', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = mix(${i.a}, ${i.b}, clamp(${i.t}, 0.0, 1.0));`,
+  },
+  ScaleVec2: {
+    category: 'Vector',
+    label: 'Scale Vec2',
+    inputs: [
+      { id: 'vec', label: 'XY', type: 'vec2' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'XY', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = ${i.vec} * ${i.scale};`,
+  },
+  ScaleVec3: {
+    category: 'Vector',
+    label: 'Scale Vec3',
+    inputs: [
+      { id: 'vec', label: 'XYZ', type: 'vec3' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'XYZ', type: 'vec3' }],
+    emitGlsl: (i, o) => `vec3 ${o.out} = ${i.vec} * ${i.scale};`,
+  },
+  ScaleVec4: {
+    category: 'Vector',
+    label: 'Scale Vec4',
+    inputs: [
+      { id: 'vec', label: 'RGBA', type: 'vec4' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = ${i.vec} * ${i.scale};`,
+  },
+
+  // ─── Color (extended) ────────────────────────────────────────────────────────
+  BlendAdd: {
+    category: 'Color',
+    label: 'Blend Add',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(clamp(${i.a}.rgb + ${i.b}.rgb, 0.0, 1.0), clamp(${i.a}.a + ${i.b}.a, 0.0, 1.0));`,
+  },
+  BlendScreen: {
+    category: 'Color',
+    label: 'Blend Screen',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(1.0 - (1.0 - ${i.a}.rgb) * (1.0 - ${i.b}.rgb), max(${i.a}.a, ${i.b}.a));`,
+  },
+  BlendOverlay: {
+    category: 'Color',
+    label: 'Blend Overlay',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4' },
+      { id: 'b', label: 'B', type: 'vec4' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) =>
+      `vec3 ${o.out}_dark = 2.0 * ${i.a}.rgb * ${i.b}.rgb;\nvec3 ${o.out}_light = 1.0 - 2.0 * (1.0 - ${i.a}.rgb) * (1.0 - ${i.b}.rgb);\nvec4 ${o.out} = vec4(mix(${o.out}_dark, ${o.out}_light, step(vec3(0.5), ${i.a}.rgb)), max(${i.a}.a, ${i.b}.a));`,
+  },
+  CompositeAlpha: {
+    category: 'Composite',
+    label: 'Composite',
+    inputs: [
+      { id: 'a', label: 'A', type: 'vec4', defaultValue: [1, 1, 1, 1], min: 0, max: 1, step: 0.01 },
+      { id: 'b', label: 'B', type: 'vec4', defaultValue: [0, 0, 0, 0], min: 0, max: 1, step: 0.01 },
+      { id: 'mode', label: 'Mode', type: 'float', defaultValue: 0, min: 0, max: 4, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => {
+      const safe = (alpha: string) => `max(${alpha}, 0.0001)`;
+      return [
+        `vec4 ${o.out}_a = vec4(${i.a}.rgb, clamp(${i.a}.a, 0.0, 1.0));`,
+        `vec4 ${o.out}_b = vec4(${i.b}.rgb, clamp(${i.b}.a, 0.0, 1.0));`,
+        `float ${o.out}_mode = clamp(floor(${i.mode} + 0.5), 0.0, 4.0);`,
+        `float ${o.out}_over_alpha = ${o.out}_a.a + ${o.out}_b.a * (1.0 - ${o.out}_a.a);`,
+        `vec4 ${o.out}_over = vec4((${o.out}_a.rgb * ${o.out}_a.a + ${o.out}_b.rgb * ${o.out}_b.a * (1.0 - ${o.out}_a.a)) / ${safe(`${o.out}_over_alpha`)}, ${o.out}_over_alpha);`,
+        `float ${o.out}_in_alpha = ${o.out}_a.a * ${o.out}_b.a;`,
+        `vec4 ${o.out}_in = vec4((${o.out}_a.rgb * ${o.out}_a.a * ${o.out}_b.a) / ${safe(`${o.out}_in_alpha`)}, ${o.out}_in_alpha);`,
+        `float ${o.out}_out_alpha = ${o.out}_a.a * (1.0 - ${o.out}_b.a);`,
+        `vec4 ${o.out}_out = vec4((${o.out}_a.rgb * ${o.out}_a.a * (1.0 - ${o.out}_b.a)) / ${safe(`${o.out}_out_alpha`)}, ${o.out}_out_alpha);`,
+        `float ${o.out}_atop_alpha = ${o.out}_b.a;`,
+        `vec4 ${o.out}_atop = vec4((${o.out}_a.rgb * ${o.out}_a.a * ${o.out}_b.a + ${o.out}_b.rgb * ${o.out}_b.a * (1.0 - ${o.out}_a.a)) / ${safe(`${o.out}_atop_alpha`)}, ${o.out}_atop_alpha);`,
+        `float ${o.out}_xor_alpha = ${o.out}_a.a + ${o.out}_b.a - 2.0 * ${o.out}_a.a * ${o.out}_b.a;`,
+        `vec4 ${o.out}_xor = vec4((${o.out}_a.rgb * ${o.out}_a.a * (1.0 - ${o.out}_b.a) + ${o.out}_b.rgb * ${o.out}_b.a * (1.0 - ${o.out}_a.a)) / ${safe(`${o.out}_xor_alpha`)}, ${o.out}_xor_alpha);`,
+        `float ${o.out}_is_over = 1.0 - step(0.5, abs(${o.out}_mode - 0.0));`,
+        `float ${o.out}_is_in = 1.0 - step(0.5, abs(${o.out}_mode - 1.0));`,
+        `float ${o.out}_is_out = 1.0 - step(0.5, abs(${o.out}_mode - 2.0));`,
+        `float ${o.out}_is_atop = 1.0 - step(0.5, abs(${o.out}_mode - 3.0));`,
+        `float ${o.out}_is_xor = 1.0 - step(0.5, abs(${o.out}_mode - 4.0));`,
+        `vec4 ${o.out} = ${o.out}_over * ${o.out}_is_over + ${o.out}_in * ${o.out}_is_in + ${o.out}_out * ${o.out}_is_out + ${o.out}_atop * ${o.out}_is_atop + ${o.out}_xor * ${o.out}_is_xor;`,
+      ].join('\n');
+    },
+  },
+  Brightness: {
+    category: 'Color',
+    label: 'Brightness',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'amount', label: 'Amount', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(clamp(${i.color}.rgb * max(${i.amount}, 0.0), 0.0, 1.0), ${i.color}.a);`,
+  },
+  GammaCorrect: {
+    category: 'Color',
+    label: 'Gamma Correct',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4' },
+      { id: 'gamma', label: 'Gamma', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => `vec4 ${o.out} = vec4(pow(clamp(${i.color}.rgb, 0.0001, 1.0), vec3(1.0 / max(${i.gamma}, 0.0001))), ${i.color}.a);`,
+  },
+
+  // ─── Lab/LCH color helpers ──────────────────────────────────────────────────
+  LabColorConvert: {
+    category: 'Color',
+    label: 'Lab Convert',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4', defaultValue: [1, 1, 1, 1], min: 0, max: 1, step: 0.01 },
+      { id: 'from', label: 'From', type: 'float', defaultValue: 0, min: 0, max: 2, step: 1 },
+      { id: 'to', label: 'To', type: 'float', defaultValue: 1, min: 0, max: 2, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'Color', type: 'vec4' }],
+    helperKey: 'lab-color',
+    emitGlsl: (i, o) => [
+      `float ${o.out}_from = clamp(floor(${i.from} + 0.5), 0.0, 2.0);`,
+      `float ${o.out}_to = clamp(floor(${i.to} + 0.5), 0.0, 2.0);`,
+      `vec3 ${o.out}_lab = ${i.color}.rgb;`,
+      `if (${o.out}_from < 0.5) { ${o.out}_lab = feather_rgb_to_lab(${i.color}.rgb); }`,
+      `else if (${o.out}_from > 1.5) { ${o.out}_lab = feather_lch_to_lab(${i.color}.rgb); }`,
+      `vec3 ${o.out}_converted = ${o.out}_lab;`,
+      `if (${o.out}_to < 0.5) { ${o.out}_converted = feather_lab_to_rgb(${o.out}_lab); }`,
+      `else if (${o.out}_to > 1.5) { ${o.out}_converted = feather_lab_to_lch(${o.out}_lab); }`,
+      `vec4 ${o.out} = vec4(${o.out}_converted, ${i.color}.a);`,
+    ].join('\n'),
+  },
+  LabComplementary: {
+    category: 'Color',
+    label: 'Lab Complementary',
+    inputs: [{ id: 'color', label: 'Color', type: 'vec4', defaultValue: [1, 1, 1, 1], min: 0, max: 1, step: 0.01 }],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    helperKey: 'lab-color',
+    emitGlsl: (i, o) => [
+      `vec3 ${o.out}_lab = feather_rgb_to_lab(${i.color}.rgb);`,
+      `${o.out}_lab.yz = -${o.out}_lab.yz;`,
+      `vec4 ${o.out} = vec4(feather_lab_to_rgb(${o.out}_lab), ${i.color}.a);`,
+    ].join('\n'),
+  },
+  LabSplitScheme: {
+    category: 'Color',
+    label: 'Lab Split Scheme',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4', defaultValue: [1, 1, 1, 1], min: 0, max: 1, step: 0.01 },
+      { id: 'angle', label: 'Angle', type: 'float', defaultValue: 120, min: 0, max: 180, step: 1 },
+    ],
+    outputs: [
+      { id: 'plus', label: '+Angle', type: 'vec4' },
+      { id: 'minus', label: '-Angle', type: 'vec4' },
+    ],
+    helperKey: 'lab-color',
+    emitGlsl: (i, o) => [
+      `vec3 ${o.plus}_lch = feather_lab_to_lch(feather_rgb_to_lab(${i.color}.rgb));`,
+      `float ${o.plus}_angle = radians(${i.angle});`,
+      `vec3 ${o.plus}_plus_lab = feather_lch_to_lab(vec3(${o.plus}_lch.x, ${o.plus}_lch.y, ${o.plus}_lch.z + ${o.plus}_angle));`,
+      `vec3 ${o.plus}_minus_lab = feather_lch_to_lab(vec3(${o.plus}_lch.x, ${o.plus}_lch.y, ${o.plus}_lch.z - ${o.plus}_angle));`,
+      `vec4 ${o.plus} = vec4(feather_lab_to_rgb(${o.plus}_plus_lab), ${i.color}.a);`,
+      `vec4 ${o.minus} = vec4(feather_lab_to_rgb(${o.plus}_minus_lab), ${i.color}.a);`,
+    ].join('\n'),
+  },
+  LabDualScheme: {
+    category: 'Color',
+    label: 'Lab Dual Scheme',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4', defaultValue: [1, 1, 1, 1], min: 0, max: 1, step: 0.01 },
+      { id: 'angle', label: 'Angle', type: 'float', defaultValue: 90, min: 0, max: 180, step: 1 },
+    ],
+    outputs: [
+      { id: 'plus', label: '+Angle', type: 'vec4' },
+      { id: 'opposite', label: 'Opposite', type: 'vec4' },
+      { id: 'oppositePlus', label: 'Opposite +Angle', type: 'vec4' },
+    ],
+    helperKey: 'lab-color',
+    emitGlsl: (i, o) => [
+      `vec3 ${o.plus}_lch = feather_lab_to_lch(feather_rgb_to_lab(${i.color}.rgb));`,
+      `float ${o.plus}_angle = radians(${i.angle});`,
+      `vec3 ${o.plus}_plus_lab = feather_lch_to_lab(vec3(${o.plus}_lch.x, ${o.plus}_lch.y, ${o.plus}_lch.z + ${o.plus}_angle));`,
+      `vec3 ${o.plus}_opposite_lab = feather_lch_to_lab(vec3(${o.plus}_lch.x, ${o.plus}_lch.y, ${o.plus}_lch.z + 3.14159265359));`,
+      `vec3 ${o.plus}_opposite_plus_lab = feather_lch_to_lab(vec3(${o.plus}_lch.x, ${o.plus}_lch.y, ${o.plus}_lch.z + 3.14159265359 + ${o.plus}_angle));`,
+      `vec4 ${o.plus} = vec4(feather_lab_to_rgb(${o.plus}_plus_lab), ${i.color}.a);`,
+      `vec4 ${o.opposite} = vec4(feather_lab_to_rgb(${o.plus}_opposite_lab), ${i.color}.a);`,
+      `vec4 ${o.oppositePlus} = vec4(feather_lab_to_rgb(${o.plus}_opposite_plus_lab), ${i.color}.a);`,
+    ].join('\n'),
+  },
+
+  // ─── Noise (extended) ────────────────────────────────────────────────────────
+  GradientNoise: {
+    category: 'Noise',
+    label: 'Gradient Noise',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Noise', type: 'float' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_p = ${i.uv} * max(${i.scale}, 0.0001);\nvec2 ${o.out}_cell = floor(${o.out}_p);\nvec2 ${o.out}_f = smoothstep(vec2(0.0), vec2(1.0), fract(${o.out}_p));\nfloat ${o.out} = mix(mix(feather_hash(${o.out}_cell), feather_hash(${o.out}_cell + vec2(1.0, 0.0)), ${o.out}_f.x), mix(feather_hash(${o.out}_cell + vec2(0.0, 1.0)), feather_hash(${o.out}_cell + vec2(1.0, 1.0)), ${o.out}_f.x), ${o.out}_f.y);`,
+  },
+  FBMNoise: {
+    category: 'Noise',
+    label: 'FBM Noise',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'scale', label: 'Scale', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'Noise', type: 'float' }],
+    helperKey: 'noise',
+    emitGlsl: (i, o) => {
+      const p = `${o.out}_p`;
+      const oct = (n: number, mult: number) =>
+        `vec2 ${o.out}_p${n} = ${p} * ${glslFloat(mult)};\nvec2 ${o.out}_c${n} = floor(${o.out}_p${n});\nvec2 ${o.out}_f${n} = smoothstep(vec2(0.0), vec2(1.0), fract(${o.out}_p${n}));\nfloat ${o.out}_n${n} = mix(mix(feather_hash(${o.out}_c${n}), feather_hash(${o.out}_c${n} + vec2(1.0, 0.0)), ${o.out}_f${n}.x), mix(feather_hash(${o.out}_c${n} + vec2(0.0, 1.0)), feather_hash(${o.out}_c${n} + vec2(1.0, 1.0)), ${o.out}_f${n}.x), ${o.out}_f${n}.y);`;
+      return [
+        `vec2 ${p} = ${i.uv} * max(${i.scale}, 0.0001);`,
+        oct(0, 1), oct(1, 2), oct(2, 4), oct(3, 8),
+        `float ${o.out} = (${o.out}_n0 * 0.5 + ${o.out}_n1 * 0.25 + ${o.out}_n2 * 0.125 + ${o.out}_n3 * 0.0625) / 0.9375;`,
+      ].join('\n');
+    },
+  },
+  TruchetTiles: {
+    category: 'Noise',
+    label: 'Truchet Tiles',
+    inputs: [
+      { id: 'position', label: 'Position', type: 'vec2' },
+      { id: 'size', label: 'Size', type: 'float', defaultValue: 0.18, min: 0.001, max: 1, step: 0.01 },
+      { id: 'number', label: 'Variants', type: 'float', defaultValue: 2, min: 1, max: 16, step: 1 },
+      { id: 'seed', label: 'Seed', type: 'float', defaultValue: 1, step: 1 },
+      { id: 'mode', label: 'Tile Mode', type: 'float', defaultValue: 0, min: 0, max: 2, step: 1 },
+      { id: 'rotate', label: 'Rotate', type: 'float', defaultValue: 1, min: 0, max: 1, step: 1 },
+      { id: 'reflect', label: 'Reflect', type: 'float', defaultValue: 1, min: 0, max: 1, step: 1 },
+      { id: 'width', label: 'Width', type: 'float', defaultValue: 0.08, min: 0, max: 0.5, step: 0.005 },
+      { id: 'time', label: 'Time', type: 'float', defaultValue: 0 },
+      { id: 'scroll', label: 'Scroll', type: 'vec2', defaultValue: [0, 0] },
+    ],
+    outputs: [
+      { id: 'uv', label: 'Tile UV', type: 'vec2' },
+      { id: 'index', label: 'Index', type: 'float' },
+      { id: 'mask', label: 'Mask', type: 'float' },
+    ],
+    helperKey: 'noise',
+    emitGlsl: (i, o) => [
+      `float ${o.uv}_mode = clamp(floor(${i.mode} + 0.5), 0.0, 2.0);`,
+      `float ${o.uv}_rotate_enabled = step(0.5, ${i.rotate});`,
+      `float ${o.uv}_reflect_enabled = step(0.5, ${i.reflect});`,
+      `float ${o.uv}_tile_count = max(floor(${i.number}), 1.0);`,
+      `vec2 ${o.uv}_position = ${i.position} + ${i.scroll} * ${i.time};`,
+      `vec2 ${o.uv} = vec2(0.5);`,
+      `float ${o.index} = 0.0;`,
+      `if (${o.uv}_mode < 0.5) {`,
+      `vec2 ${o.uv}_square_grid = ${o.uv}_position / max(${i.size}, 0.0001);`,
+      `vec2 ${o.uv}_square_cell = floor(${o.uv}_square_grid);`,
+      `vec2 ${o.uv}_square_local = ${o.uv}_square_grid - ${o.uv}_square_cell - vec2(0.5);`,
+      `float ${o.uv}_square_rand = feather_hash(${o.uv}_square_cell + vec2(${i.seed}));`,
+      `float ${o.uv}_square_rotation_count = mix(1.0, 4.0, ${o.uv}_rotate_enabled);`,
+      `float ${o.uv}_square_reflection_count = mix(1.0, 2.0, ${o.uv}_reflect_enabled);`,
+      `float ${o.uv}_square_choice = floor(${o.uv}_square_rand * ${o.uv}_tile_count * ${o.uv}_square_rotation_count * ${o.uv}_square_reflection_count);`,
+      `${o.index} = mod(${o.uv}_square_choice, ${o.uv}_tile_count);`,
+      `${o.uv}_square_choice = floor(${o.uv}_square_choice / ${o.uv}_tile_count);`,
+      `float ${o.uv}_square_rot = mod(${o.uv}_square_choice, ${o.uv}_square_rotation_count);`,
+      `${o.uv}_square_choice = floor(${o.uv}_square_choice / ${o.uv}_square_rotation_count);`,
+      `float ${o.uv}_square_refl = mod(${o.uv}_square_choice, ${o.uv}_square_reflection_count);`,
+      `${o.uv}_square_local.x *= 1.0 - 2.0 * ${o.uv}_square_refl;`,
+      `float ${o.uv}_square_angle = ${o.uv}_square_rot * 1.57079632679;`,
+      `float ${o.uv}_square_c = cos(${o.uv}_square_angle);`,
+      `float ${o.uv}_square_s = sin(${o.uv}_square_angle);`,
+      `${o.uv} = vec2(${o.uv}_square_local.x * ${o.uv}_square_c - ${o.uv}_square_local.y * ${o.uv}_square_s, ${o.uv}_square_local.x * ${o.uv}_square_s + ${o.uv}_square_local.y * ${o.uv}_square_c) + vec2(0.5);`,
+      `} else if (${o.uv}_mode < 1.5) {`,
+      `vec2 ${o.uv}_tri_grid = ${o.uv}_position / max(${i.size}, 0.0001);`,
+      `vec2 ${o.uv}_tri_a = vec2(1.0, 0.0);`,
+      `vec2 ${o.uv}_tri_b = vec2(0.5, 0.86602540378);`,
+      `float ${o.uv}_tri_det = ${o.uv}_tri_a.x * ${o.uv}_tri_b.y - ${o.uv}_tri_a.y * ${o.uv}_tri_b.x;`,
+      `float ${o.uv}_tri_ta = (${o.uv}_tri_b.y * ${o.uv}_tri_grid.x - ${o.uv}_tri_b.x * ${o.uv}_tri_grid.y) / ${o.uv}_tri_det;`,
+      `float ${o.uv}_tri_tb = (${o.uv}_tri_a.x * ${o.uv}_tri_grid.y - ${o.uv}_tri_a.y * ${o.uv}_tri_grid.x) / ${o.uv}_tri_det;`,
+      `vec3 ${o.uv}_tri_cell = floor(vec3(${o.uv}_tri_ta, ${o.uv}_tri_tb, fract(${o.uv}_tri_ta) + fract(${o.uv}_tri_tb)));`,
+      `float ${o.uv}_tri_rand = fract(sin(dot(${o.uv}_tri_cell + vec3(${i.seed}), vec3(12.9898, 78.233, 45.652))) * 43758.5453);`,
+      `float ${o.uv}_tri_rotation_count = mix(1.0, 3.0, ${o.uv}_rotate_enabled);`,
+      `float ${o.uv}_tri_reflection_count = mix(1.0, 2.0, ${o.uv}_reflect_enabled);`,
+      `float ${o.uv}_tri_choice = floor(${o.uv}_tri_rand * ${o.uv}_tile_count * ${o.uv}_tri_rotation_count * ${o.uv}_tri_reflection_count);`,
+      `${o.index} = mod(${o.uv}_tri_choice, ${o.uv}_tile_count);`,
+      `${o.uv}_tri_choice = floor(${o.uv}_tri_choice / ${o.uv}_tile_count);`,
+      `float ${o.uv}_tri_rot = ${o.uv}_tri_cell.z + 2.0 * mod(${o.uv}_tri_choice, ${o.uv}_tri_rotation_count);`,
+      `${o.uv}_tri_choice = floor(${o.uv}_tri_choice / ${o.uv}_tri_rotation_count);`,
+      `float ${o.uv}_tri_refl = mod(${o.uv}_tri_choice, ${o.uv}_tri_reflection_count);`,
+      `vec2 ${o.uv}_tri_local = ${o.uv}_tri_grid - ${o.uv}_tri_a * (${o.uv}_tri_cell.x + 0.33333333333 * (1.0 + ${o.uv}_tri_cell.z)) - ${o.uv}_tri_b * (${o.uv}_tri_cell.y + 0.33333333333 * (1.0 + ${o.uv}_tri_cell.z));`,
+      `${o.uv}_tri_local.x *= 1.0 - 2.0 * ${o.uv}_tri_refl;`,
+      `${o.uv}_tri_local *= 1.73205080757;`,
+      `float ${o.uv}_tri_angle = mod(${o.uv}_tri_rot, 3.0) * 1.0471975512;`,
+      `float ${o.uv}_tri_sign = mix(1.0, -1.0, step(3.0, ${o.uv}_tri_rot));`,
+      `float ${o.uv}_tri_c = cos(${o.uv}_tri_angle);`,
+      `float ${o.uv}_tri_s = sin(${o.uv}_tri_angle);`,
+      `${o.uv} = vec2(0.5) + 0.5 * ${o.uv}_tri_sign * vec2(${o.uv}_tri_local.x * ${o.uv}_tri_c - ${o.uv}_tri_local.y * ${o.uv}_tri_s, ${o.uv}_tri_local.x * ${o.uv}_tri_s + ${o.uv}_tri_local.y * ${o.uv}_tri_c);`,
+      `} else {`,
+      `vec2 ${o.uv}_hex_grid = 2.0 * ${o.uv}_position / max(${i.size}, 0.0001);`,
+      `vec2 ${o.uv}_hex_a = vec2(1.0, 0.0);`,
+      `vec2 ${o.uv}_hex_b = vec2(0.5, 0.86602540378);`,
+      `float ${o.uv}_hex_det = ${o.uv}_hex_a.x * ${o.uv}_hex_b.y - ${o.uv}_hex_a.y * ${o.uv}_hex_b.x;`,
+      `float ${o.uv}_hex_ta = (${o.uv}_hex_b.y * ${o.uv}_hex_grid.x - ${o.uv}_hex_b.x * ${o.uv}_hex_grid.y) / ${o.uv}_hex_det;`,
+      `float ${o.uv}_hex_tb = (${o.uv}_hex_a.x * ${o.uv}_hex_grid.y - ${o.uv}_hex_a.y * ${o.uv}_hex_grid.x) / ${o.uv}_hex_det;`,
+      `vec3 ${o.uv}_hex_cell3 = floor(vec3(${o.uv}_hex_ta, ${o.uv}_hex_tb, fract(${o.uv}_hex_ta) + fract(${o.uv}_hex_tb)));`,
+      `float ${o.uv}_hex_mod = ${o.uv}_hex_cell3.x - ${o.uv}_hex_cell3.y;`,
+      `${o.uv}_hex_mod = ${o.uv}_hex_mod - 3.0 * floor(${o.uv}_hex_mod * 0.33333333333);`,
+      `float ${o.uv}_hex_m0 = 1.0 - step(0.5, abs(${o.uv}_hex_mod - 0.0));`,
+      `float ${o.uv}_hex_m1 = 1.0 - step(0.5, abs(${o.uv}_hex_mod - 1.0));`,
+      `float ${o.uv}_hex_m2 = 1.0 - step(0.5, abs(${o.uv}_hex_mod - 2.0));`,
+      `vec2 ${o.uv}_hex_cell = vec2(${o.uv}_hex_cell3.x + ${o.uv}_hex_m0 * ${o.uv}_hex_cell3.z + ${o.uv}_hex_m2, ${o.uv}_hex_cell3.y + ${o.uv}_hex_m0 * ${o.uv}_hex_cell3.z + ${o.uv}_hex_m1);`,
+      `float ${o.uv}_hex_rand = feather_hash(${o.uv}_hex_cell + vec2(${i.seed}));`,
+      `float ${o.uv}_hex_rotation_count = mix(1.0, 6.0, ${o.uv}_rotate_enabled);`,
+      `float ${o.uv}_hex_reflection_count = mix(1.0, 2.0, ${o.uv}_reflect_enabled);`,
+      `float ${o.uv}_hex_choice = floor(${o.uv}_hex_rand * ${o.uv}_tile_count * ${o.uv}_hex_rotation_count * ${o.uv}_hex_reflection_count);`,
+      `${o.index} = mod(${o.uv}_hex_choice, ${o.uv}_tile_count);`,
+      `${o.uv}_hex_choice = floor(${o.uv}_hex_choice / ${o.uv}_tile_count);`,
+      `float ${o.uv}_hex_rot = mod(${o.uv}_hex_choice, ${o.uv}_hex_rotation_count);`,
+      `${o.uv}_hex_choice = floor(${o.uv}_hex_choice / ${o.uv}_hex_rotation_count);`,
+      `float ${o.uv}_hex_refl = mod(${o.uv}_hex_choice, ${o.uv}_hex_reflection_count);`,
+      `vec2 ${o.uv}_hex_local = ${o.uv}_hex_grid - ${o.uv}_hex_a * ${o.uv}_hex_cell.x - ${o.uv}_hex_b * ${o.uv}_hex_cell.y;`,
+      `${o.uv}_hex_local.x *= 1.0 - 2.0 * ${o.uv}_hex_refl;`,
+      `float ${o.uv}_hex_angle = mod(${o.uv}_hex_rot, 3.0) * 1.0471975512;`,
+      `float ${o.uv}_hex_sign = mix(1.0, -1.0, step(3.0, ${o.uv}_hex_rot));`,
+      `float ${o.uv}_hex_c = cos(${o.uv}_hex_angle);`,
+      `float ${o.uv}_hex_s = sin(${o.uv}_hex_angle);`,
+      `${o.uv} = vec2(0.5) + 0.5 * ${o.uv}_hex_sign * vec2(${o.uv}_hex_local.x * ${o.uv}_hex_c - ${o.uv}_hex_local.y * ${o.uv}_hex_s, ${o.uv}_hex_local.x * ${o.uv}_hex_s + ${o.uv}_hex_local.y * ${o.uv}_hex_c);`,
+      `}`,
+      `float ${o.mask}_a = abs(length(${o.uv} - vec2(0.0, 0.0)) - 0.5);`,
+      `float ${o.mask}_b = abs(length(${o.uv} - vec2(1.0, 1.0)) - 0.5);`,
+      `float ${o.mask}_d = min(${o.mask}_a, ${o.mask}_b);`,
+      `float ${o.mask}_aa = max(fwidth(${o.mask}_d), 0.0001);`,
+      `float ${o.mask} = 1.0 - smoothstep(max(${i.width}, 0.0), max(${i.width}, 0.0) + ${o.mask}_aa, ${o.mask}_d);`,
+    ].join('\n'),
+  },
+
+  // ─── Pattern ────────────────────────────────────────────────────────────────
+  PatternZigZag: {
+    category: 'Pattern',
+    label: 'Zig Zag',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'widths', label: 'Widths', type: 'vec2', defaultValue: [0.1, 0.1], min: 0.001, max: 1, step: 0.01 },
+      { id: 'wavelength', label: 'Wavelength', type: 'float', defaultValue: 0.5, min: 0.001, max: 2, step: 0.01 },
+      { id: 'amplitude', label: 'Amplitude', type: 'float', defaultValue: 0.1, min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_wave = ${i.amplitude} * (1.0 - 2.0 * abs(fract(${i.uv}.x / max(${i.wavelength}, 0.0001)) - 0.5));`,
+      ...patternStripeMask(`${i.uv}.y - ${o.out}_wave`, i.widths, o.out),
+    ].join('\n'),
+  },
+  PatternSineWaves: {
+    category: 'Pattern',
+    label: 'Sine Waves',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'widths', label: 'Widths', type: 'vec2', defaultValue: [0.1, 0.1], min: 0.001, max: 1, step: 0.01 },
+      { id: 'wavelength', label: 'Wavelength', type: 'float', defaultValue: 0.5, min: 0.001, max: 2, step: 0.01 },
+      { id: 'amplitude', label: 'Amplitude', type: 'float', defaultValue: 0.1, min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_wave = 0.5 * ${i.amplitude} * sin(6.28318530718 * ${i.uv}.x / max(${i.wavelength}, 0.0001));`,
+      ...patternStripeMask(`${i.uv}.y - ${o.out}_wave`, i.widths, o.out),
+    ].join('\n'),
+  },
+  PatternRoundWaves: {
+    category: 'Pattern',
+    label: 'Round Waves',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'widths', label: 'Widths', type: 'vec2', defaultValue: [0.1, 0.1], min: 0.001, max: 1, step: 0.01 },
+      { id: 'wavelength', label: 'Wavelength', type: 'float', defaultValue: 0.5, min: 0.001, max: 2, step: 0.01 },
+      { id: 'amplitude', label: 'Amplitude', type: 'float', defaultValue: 0.1, min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_wave_len = max(${i.wavelength}, 0.0001);`,
+      `float ${o.out}_x = mod(${i.uv}.x, ${o.out}_wave_len);`,
+      `${o.out}_x = mod(${o.out}_x + ${o.out}_wave_len, ${o.out}_wave_len);`,
+      `float ${o.out}_arc_x = 0.25 * ${o.out}_wave_len;`,
+      `float ${o.out}_arc_y = 0.5 * max(${i.amplitude}, 0.0001);`,
+      `float ${o.out}_offset = (${o.out}_arc_x * ${o.out}_arc_x - ${o.out}_arc_y * ${o.out}_arc_y) / (2.0 * ${o.out}_arc_y);`,
+      `float ${o.out}_radius = ${o.out}_offset + ${o.out}_arc_y;`,
+      `float ${o.out}_x2 = ${o.out}_x < 0.5 * ${o.out}_wave_len ? 0.25 * ${o.out}_wave_len - ${o.out}_x : 0.75 * ${o.out}_wave_len - ${o.out}_x;`,
+      `float ${o.out}_wave = (${o.out}_x < 0.5 * ${o.out}_wave_len ? 1.0 : -1.0) * (sqrt(max(${o.out}_radius * ${o.out}_radius - ${o.out}_x2 * ${o.out}_x2, 0.0)) - ${o.out}_offset);`,
+      ...patternStripeMask(`${i.uv}.y - ${o.out}_wave`, i.widths, o.out),
+    ].join('\n'),
+  },
+  PatternDots: {
+    category: 'Pattern',
+    label: 'Dots',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'spacing', label: 'Spacing', type: 'vec2', defaultValue: [0.2, 0.2], min: 0.001, max: 1, step: 0.01 },
+      { id: 'offset', label: 'Offset', type: 'float', defaultValue: 0.1, min: -1, max: 1, step: 0.01 },
+      { id: 'radius', label: 'Radius', type: 'float', defaultValue: 0.05, min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_spacing = max(abs(${i.spacing}), vec2(0.0001));`,
+      `float ${o.out}_det = max(${o.out}_spacing.x * ${o.out}_spacing.y, 0.0001);`,
+      `float ${o.out}_tx = (${o.out}_spacing.y * ${i.uv}.x - ${i.offset} * ${i.uv}.y) / ${o.out}_det;`,
+      `float ${o.out}_ty = ${o.out}_spacing.x * ${i.uv}.y / ${o.out}_det;`,
+      `${o.out}_tx = mod(${o.out}_tx + 0.5, 1.0) - 0.5;`,
+      `${o.out}_ty = mod(${o.out}_ty + 0.5, 1.0) - 0.5;`,
+      `float ${o.out}_px = ${o.out}_tx * ${o.out}_spacing.x + ${o.out}_ty * ${i.offset};`,
+      `float ${o.out}_py = ${o.out}_ty * ${o.out}_spacing.y;`,
+      `float ${o.out}_d = ${o.out}_px * ${o.out}_px + ${o.out}_py * ${o.out}_py - ${i.radius} * ${i.radius};`,
+      `float ${o.out} = clamp(-${o.out}_d / max(fwidth(${o.out}_d), 0.0001), 0.0, 1.0);`,
+    ].join('\n'),
+  },
+  PatternSpiral: {
+    category: 'Pattern',
+    label: 'Spiral',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'widths', label: 'Widths', type: 'vec2', defaultValue: [0.1, 0.1], min: 0.001, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_width = max(${i.widths}.x + ${i.widths}.y, 0.0001);`,
+      `float ${o.out}_r = length(${i.uv});`,
+      `float ${o.out}_theta = atan(${i.uv}.y, ${i.uv}.x);`,
+      `float ${o.out}_pitch = ${o.out}_width / 6.28318530718;`,
+      `float ${o.out}_k = (${o.out}_r / ${o.out}_pitch - ${o.out}_theta) / 6.28318530718;`,
+      `float ${o.out}_d = abs(${o.out}_r - (${o.out}_pitch * (${o.out}_theta + 6.28318530718 * floor(${o.out}_k + 0.5)))) - 0.5 * ${i.widths}.x;`,
+      `float ${o.out} = clamp(-${o.out}_d / max(fwidth(${o.out}_d), 0.0001), 0.0, 1.0);`,
+    ].join('\n'),
+  },
+  PatternWhirl: {
+    category: 'Pattern',
+    label: 'Whirl',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'widths', label: 'Widths', type: 'vec2', defaultValue: [30, 30], min: 0.001, max: 180, step: 1 },
+      { id: 'whirl', label: 'Whirl', type: 'float', defaultValue: 80, min: -360, max: 360, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_width = max(${i.widths}.x + ${i.widths}.y, 0.0001);`,
+      `float ${o.out}_r = length(${i.uv});`,
+      `float ${o.out}_theta = 57.2958 * atan(${i.uv}.y, ${i.uv}.x) - ${i.whirl} * ${o.out}_r;`,
+      `float ${o.out}_m = mod(${o.out}_theta + 0.5 * ${o.out}_width, ${o.out}_width);`,
+      `${o.out}_m = mod(${o.out}_m + ${o.out}_width, ${o.out}_width) - 0.5 * ${o.out}_width;`,
+      `float ${o.out}_d = abs(${o.out}_m) - 0.5 * ${i.widths}.x;`,
+      `float ${o.out} = clamp(-${o.out}_d / max(fwidth(${o.out}_d), 0.0001), 0.0, 1.0);`,
+    ].join('\n'),
+  },
+
+  // ─── Halftone ───────────────────────────────────────────────────────────────
+  HalftoneMono: {
+    category: 'Halftone',
+    label: 'Halftone Mono',
+    inputs: [
+      { id: 'base', label: 'Base', type: 'float', defaultValue: 0.5, min: 0, max: 1, step: 0.01 },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'offset', label: 'Offset', type: 'vec2', defaultValue: [0.01, 0], step: 0.001 },
+      { id: 'scale', label: 'Scale', type: 'float', defaultValue: 1, min: 0.1, max: 16, step: 0.1 },
+      { id: 'mode', label: 'Mode', type: 'float', defaultValue: 0, min: 0, max: 2, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => halftoneChannel(i.base, i.uv, i.offset, i.scale, i.mode, o.out, `${o.out}_mono`).join('\n'),
+  },
+  HalftoneColor: {
+    category: 'Halftone',
+    label: 'Halftone Color',
+    inputs: [
+      { id: 'color', label: 'Color', type: 'vec4', defaultValue: [1, 1, 1, 1], min: 0, max: 1, step: 0.01 },
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'offsetR', label: 'Offset R', type: 'vec2', defaultValue: [0.01, 0], step: 0.001 },
+      { id: 'offsetG', label: 'Offset G', type: 'vec2', defaultValue: [0.00866, 0.005], step: 0.001 },
+      { id: 'offsetB', label: 'Offset B', type: 'vec2', defaultValue: [0.005, 0.00866], step: 0.001 },
+      { id: 'scale', label: 'Scale', type: 'float', defaultValue: 1, min: 0.001, max: 16, step: 0.05 },
+      { id: 'mode', label: 'Mode', type: 'float', defaultValue: 0, min: 0, max: 2, step: 1 },
+    ],
+    outputs: [{ id: 'out', label: 'RGBA', type: 'vec4' }],
+    emitGlsl: (i, o) => [
+      ...halftoneChannel(`${i.color}.r`, i.uv, i.offsetR, i.scale, i.mode, `${o.out}_r`, `${o.out}_r`),
+      ...halftoneChannel(`${i.color}.g`, i.uv, i.offsetG, i.scale, i.mode, `${o.out}_g`, `${o.out}_g`),
+      ...halftoneChannel(`${i.color}.b`, i.uv, i.offsetB, i.scale, i.mode, `${o.out}_b`, `${o.out}_b`),
+      `vec4 ${o.out} = vec4(${o.out}_r, ${o.out}_g, ${o.out}_b, ${i.color}.a);`,
+    ].join('\n'),
+  },
+
+  // ─── UV (extended) ───────────────────────────────────────────────────────────
+  ZoomUV: {
+    category: 'UV',
+    label: 'Zoom UV',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'zoom', label: 'Zoom', type: 'float' },
+    ],
+    outputs: [{ id: 'out', label: 'UV', type: 'vec2' }],
+    emitGlsl: (i, o) => `vec2 ${o.out} = (${i.uv} - vec2(0.5)) * max(${i.zoom}, 0.0001) + vec2(0.5);`,
+  },
+  FlipUV: {
+    category: 'UV',
+    label: 'Flip UV',
+    inputs: [{ id: 'uv', label: 'UV', type: 'vec2' }],
+    outputs: [
+      { id: 'flipX', label: 'Flip X', type: 'vec2' },
+      { id: 'flipY', label: 'Flip Y', type: 'vec2' },
+      { id: 'flipXY', label: 'Flip XY', type: 'vec2' },
+    ],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.flipX} = vec2(1.0 - ${i.uv}.x, ${i.uv}.y);\nvec2 ${o.flipY} = vec2(${i.uv}.x, 1.0 - ${i.uv}.y);\nvec2 ${o.flipXY} = vec2(1.0 - ${i.uv}.x, 1.0 - ${i.uv}.y);`,
+  },
+
+  // ─── SDF ─────────────────────────────────────────────────────────────────────
+  SDFLine: {
+    category: 'SDF',
+    label: 'SDF Line',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'float', defaultValue: 0.5, min: 0, max: 1, step: 0.01 },
+      { id: 'width', label: 'Width', type: 'float', defaultValue: 0.1, min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'SDF', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = abs(${i.uv}.x - ${i.position}) - 0.5 * ${i.width};`,
+  },
+  SDFCircle: {
+    category: 'SDF',
+    label: 'SDF Circle',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'radius', label: 'Radius', type: 'float', defaultValue: 0.25, min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'SDF', type: 'float' }],
+    emitGlsl: (i, o) => `float ${o.out} = length(${i.uv} - ${i.position}) - ${i.radius};`,
+  },
+  SDFRect: {
+    category: 'SDF',
+    label: 'SDF Rectangle',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'width', label: 'Width', type: 'float', defaultValue: 0.5, min: 0, max: 1, step: 0.01 },
+      { id: 'height', label: 'Height', type: 'float', defaultValue: 0.5, min: 0, max: 1, step: 0.01 },
+      { id: 'corner', label: 'Corner R', type: 'float', defaultValue: 0, min: 0, max: 0.5, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'SDF', type: 'float' }],
+    emitGlsl: (i, o) =>
+      `vec2 ${o.out}_d = abs(${i.uv} - ${i.position}) - 0.5 * vec2(${i.width}, ${i.height});\nfloat ${o.out} = min(max(${o.out}_d.x, ${o.out}_d.y), 0.0) + length(max(${o.out}_d, vec2(0.0))) - ${i.corner};`,
+  },
+  SDFPolygon: {
+    category: 'SDF',
+    label: 'SDF Polygon',
+    inputs: [
+      { id: 'uv', label: 'UV', type: 'vec2' },
+      { id: 'position', label: 'Position', type: 'vec2', defaultValue: [0.5, 0.5], min: 0, max: 1, step: 0.01 },
+      { id: 'radius', label: 'Radius', type: 'float', defaultValue: 0.25, min: 0, max: 1, step: 0.01 },
+      { id: 'sides', label: 'Sides', type: 'float', defaultValue: 6, min: 3, max: 12, step: 1 },
+      { id: 'corner', label: 'Corner R', type: 'float', defaultValue: 0, min: 0, max: 0.5, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'SDF', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `vec2 ${o.out}_f = ${i.uv} - ${i.position};`,
+      `float ${o.out}_sides = max(${i.sides}, 3.0);`,
+      `float ${o.out}_angle = atan(${o.out}_f.y, ${o.out}_f.x) + 3.14159265359;`,
+      `float ${o.out}_sector = 6.28318530718 / ${o.out}_sides;`,
+      `float ${o.out}_radial = cos(floor(0.5 + ${o.out}_angle / ${o.out}_sector) * ${o.out}_sector - ${o.out}_angle) * length(${o.out}_f);`,
+      `float ${o.out} = ${o.out}_radial - ${i.radius} - ${i.corner};`,
+    ].join('\n'),
+  },
+  SDFSample: {
+    category: 'SDF',
+    label: 'SDF Sample',
+    inputs: [
+      { id: 'sdf', label: 'SDF', type: 'float' },
+      { id: 'offset', label: 'Offset', type: 'float', defaultValue: 0, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_d = ${i.sdf} - ${i.offset};`,
+      `float ${o.out} = clamp(-${o.out}_d / max(fwidth(${o.out}_d), 0.0001), 0.0, 1.0);`,
+    ].join('\n'),
+  },
+  SDFSampleStrip: {
+    category: 'SDF',
+    label: 'SDF Sample Strip',
+    inputs: [
+      { id: 'sdf', label: 'SDF', type: 'float' },
+      { id: 'offsetMin', label: 'Min', type: 'float', defaultValue: -0.05, step: 0.01 },
+      { id: 'offsetMax', label: 'Max', type: 'float', defaultValue: 0.05, step: 0.01 },
+    ],
+    outputs: [{ id: 'out', label: 'Mask', type: 'float' }],
+    emitGlsl: (i, o) => [
+      `float ${o.out}_d = max(-(${i.sdf} - ${i.offsetMin}), ${i.sdf} - ${i.offsetMax});`,
+      `float ${o.out} = clamp(-${o.out}_d / max(fwidth(${o.out}_d), 0.0001), 0.0, 1.0);`,
+    ].join('\n'),
+  },
+  SDFBoolean: {
+    category: 'SDF',
+    label: 'SDF Boolean',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+    ],
+    outputs: [
+      { id: 'union', label: 'Union', type: 'float' },
+      { id: 'intersect', label: 'Intersect', type: 'float' },
+      { id: 'diff', label: 'Diff A-B', type: 'float' },
+    ],
+    emitGlsl: (i, o) => [
+      `float ${o.union} = min(${i.a}, ${i.b});`,
+      `float ${o.intersect} = max(${i.a}, ${i.b});`,
+      `float ${o.diff} = max(${i.a}, -${i.b});`,
+    ].join('\n'),
+  },
+  SDFSoftBoolean: {
+    category: 'SDF',
+    label: 'SDF Soft Boolean',
+    inputs: [
+      { id: 'a', label: 'A', type: 'float' },
+      { id: 'b', label: 'B', type: 'float' },
+      { id: 'smoothing', label: 'Smooth', type: 'float', defaultValue: 0.1, min: 0, max: 1, step: 0.01 },
+    ],
+    outputs: [
+      { id: 'union', label: 'Union', type: 'float' },
+      { id: 'intersect', label: 'Intersect', type: 'float' },
+      { id: 'diff', label: 'Diff A-B', type: 'float' },
+    ],
+    emitGlsl: (i, o) => {
+      const s = `max(${i.smoothing}, 0.0001)`;
+      return [
+        `float ${o.union}_t = clamp(0.5 * (1.0 + (${i.b} - ${i.a}) / ${s}), 0.0, 1.0);`,
+        `float ${o.union} = mix(${i.b}, ${i.a}, ${o.union}_t) - ${s} * ${o.union}_t * (1.0 - ${o.union}_t);`,
+        `float ${o.intersect}_t = clamp(0.5 * (1.0 + (${i.a} - ${i.b}) / ${s}), 0.0, 1.0);`,
+        `float ${o.intersect} = -(mix(-${i.b}, -${i.a}, ${o.intersect}_t) - ${s} * ${o.intersect}_t * (1.0 - ${o.intersect}_t));`,
+        `float ${o.diff}_t = clamp(0.5 * (1.0 + (${i.a} + ${i.b}) / ${s}), 0.0, 1.0);`,
+        `float ${o.diff} = -(mix(${i.b}, -${i.a}, ${o.diff}_t) - ${s} * ${o.diff}_t * (1.0 - ${o.diff}_t));`,
+      ].join('\n');
+    },
+  },
 };
 
+export function getNodeDef(data: ShaderNodeData): NodeDef {
+  if (data.nodeType === 'CustomFunction') {
+    return customFunctionNodeDef(data);
+  }
+  if (data.nodeType === 'SubgraphInstance') {
+    return {
+      category: 'Custom',
+      label: String(data.label || 'Subgraph'),
+      inputs: data.subgraphInputs ?? [],
+      outputs: data.subgraphOutputs ?? [],
+      emitGlsl: () => '',
+    };
+  }
+  return NODE_DEFS[data.nodeType];
+}
+
 export const CATEGORY_COLORS: Record<string, string> = {
+  Custom: 'border-l-zinc-500',
   Input: 'border-l-blue-500',
   Math: 'border-l-orange-500',
+  Complex: 'border-l-amber-500',
+  Quaternion: 'border-l-fuchsia-500',
+  Symmetry: 'border-l-violet-500',
+  Random: 'border-l-stone-500',
   Vector: 'border-l-purple-500',
   Color: 'border-l-pink-500',
+  Composite: 'border-l-rose-500',
   Noise: 'border-l-green-500',
+  Pattern: 'border-l-emerald-500',
+  Halftone: 'border-l-lime-500',
+  'Pixel Perfect': 'border-l-sky-500',
   UV: 'border-l-indigo-500',
   Effect: 'border-l-cyan-500',
   Output: 'border-l-red-500',
   Vertex: 'border-l-yellow-500',
+  SDF: 'border-l-teal-500',
 };
 
 export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
+  { category: 'Custom', nodes: ['CustomFunction'] },
   {
     category: 'Input',
     nodes: [
       'TextureColor',
+      'TextureInput',
+      'TextureParameter',
+      'TextureUniformColor',
       'TextureCoords',
       'ScreenCoords',
       'VertexColor',
       'Time',
       'Resolution',
+      'FloatParameter',
+      'Vec2Parameter',
+      'Vec3Parameter',
+      'Vec4Parameter',
+      'ColorParameter',
+      'BooleanParameter',
       'FloatConstant',
       'Vec2Constant',
       'Vec3Constant',
@@ -867,17 +2489,29 @@ export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
       'Smoothstep',
       'Sin',
       'Cos',
+      'Tan',
       'Abs',
       'Fract',
       'Floor',
+      'Ceil',
+      'Round',
+      'Sign',
       'Min',
       'Max',
       'Modulo',
       'Negate',
       'Saturate',
       'Remap',
+      'Sqrt',
+      'Log',
+      'Exp',
+      'Atan2',
     ],
   },
+  { category: 'Complex', nodes: ['ComplexConjugate', 'ComplexReciprocal', 'ComplexMultiply', 'ComplexDivide', 'ComplexExp', 'ComplexLog', 'ComplexPower'] },
+  { category: 'Quaternion', nodes: ['QuaternionInverse', 'QuaternionFromEuler', 'QuaternionFromAngleAxis', 'QuaternionToAngleAxis', 'QuaternionFromToRotation', 'QuaternionMultiply', 'QuaternionRotateVector', 'QuaternionSlerp'] },
+  { category: 'Symmetry', nodes: ['ReflectionSymmetry', 'RotationSymmetry', 'TilingSymmetry'] },
+  { category: 'Random', nodes: ['RandomIntegerRange', 'RandomCircle', 'RandomSphere', 'RandomRotation', 'RandomColor'] },
   {
     category: 'Vector',
     nodes: [
@@ -897,11 +2531,32 @@ export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
       'LengthVec2',
       'NormalizeVec2',
       'DotVec2',
+      'AddVec2',
+      'AddVec3',
+      'AddVec4',
+      'SubtractVec2',
+      'SubtractVec3',
+      'SubtractVec4',
+      'MultiplyVec2',
+      'MultiplyVec3',
+      'MultiplyVec4',
+      'DivideVec2',
+      'DivideVec3',
+      'DivideVec4',
+      'CrossVec3',
+      'LerpVec4',
+      'ScaleVec2',
+      'ScaleVec3',
+      'ScaleVec4',
     ],
   },
-  { category: 'Color', nodes: ['Desaturate', 'OneMinus', 'HueShift', 'InvertColor', 'Contrast', 'PosterizeColor', 'MultiplyColor'] },
-  { category: 'Noise', nodes: ['SimpleNoise', 'Ripple', 'VoronoiCells', 'Checkerboard'] },
-  { category: 'UV', nodes: ['TilingOffset', 'RotateUV', 'TwirlUV', 'PolarCoordinates'] },
+  { category: 'Color', nodes: ['Desaturate', 'OneMinus', 'HueShift', 'InvertColor', 'Contrast', 'PosterizeColor', 'MultiplyColor', 'BlendAdd', 'BlendScreen', 'BlendOverlay', 'Brightness', 'GammaCorrect', 'LabColorConvert', 'LabComplementary', 'LabSplitScheme', 'LabDualScheme'] },
+  { category: 'Composite', nodes: ['CompositeAlpha'] },
+  { category: 'Noise', nodes: ['SimpleNoise', 'GradientNoise', 'FBMNoise', 'TruchetTiles', 'Ripple', 'VoronoiCells', 'Checkerboard'] },
+  { category: 'Pattern', nodes: ['PatternZigZag', 'PatternSineWaves', 'PatternRoundWaves', 'PatternDots', 'PatternSpiral', 'PatternWhirl'] },
+  { category: 'Halftone', nodes: ['HalftoneMono', 'HalftoneColor'] },
+  { category: 'Pixel Perfect', nodes: ['PixelPoint', 'PixelPointGrid', 'PixelRay', 'PixelRays', 'PixelLine', 'PixelLines', 'PixelCircle', 'PixelPolygon'] },
+  { category: 'UV', nodes: ['TilingOffset', 'RotateUV', 'TwirlUV', 'PolarCoordinates', 'ZoomUV', 'FlipUV'] },
   {
     category: 'Effect',
     nodes: [
@@ -914,6 +2569,8 @@ export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
       'WaveDistort',
       'WaterDisplace',
       'MaskedWaterDisplace',
+      'WaterNoiseUV',
+      'WaterDisplaceV2',
       'Dissolve2D',
       'HitFlash',
       'Vignette',
@@ -923,4 +2580,5 @@ export const CATEGORY_ORDER: Array<{ category: string; nodes: NodeType[] }> = [
   },
   { category: 'Output', nodes: ['FragmentOutput'] },
   { category: 'Vertex', nodes: ['VertexPosition', 'VertexWave2D', 'TransformMatrix', 'MatVecMul', 'VertexOutput'] },
+  { category: 'SDF', nodes: ['SDFLine', 'SDFCircle', 'SDFRect', 'SDFPolygon', 'SDFSample', 'SDFSampleStrip', 'SDFBoolean', 'SDFSoftBoolean'] },
 ];
diff --git a/src/pages/shader-graph/nodes/index.tsx b/src/pages/shader-graph/nodes/index.tsx
index 3733acac..ed3534e1 100644
--- a/src/pages/shader-graph/nodes/index.tsx
+++ b/src/pages/shader-graph/nodes/index.tsx
@@ -1,13 +1,14 @@
 import { Fragment } from 'react';
 import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
+import { LinkIcon } from 'lucide-react';
 import { cn } from '@/utils/styles';
-import type { ShaderNodeData, NodeType } from '@/types/shader-graph';
-import { NODE_DEFS, CATEGORY_COLORS, PORT_TYPE_COLORS } from '../nodeDefs';
+import type { ShaderNodeData } from '@/types/shader-graph';
+import { getNodeDef, CATEGORY_COLORS, PORT_TYPE_COLORS } from '../nodeDefs';
 
 const ROW_H = 20;
 
-export function ShaderNode({ data, selected }: NodeProps<Node<ShaderNodeData>>) {
-  const def = NODE_DEFS[data.nodeType as NodeType];
+export function ShaderNode({ id, data, selected }: NodeProps<Node<ShaderNodeData>>) {
+  const def = getNodeDef(data);
   if (!def) return null;
   const colorClass = CATEGORY_COLORS[def.category] ?? 'border-l-gray-500';
   const rows = Math.max(def.inputs.length, def.outputs.length, 1);
@@ -15,11 +16,28 @@ export function ShaderNode({ data, selected }: NodeProps<Node<ShaderNodeData>>)
   return (
     <div
       className={cn(
-        'min-w-28 rounded border border-l-2 bg-card px-3 py-2 shadow-sm',
+        'relative min-w-28 rounded border border-l-2 bg-card px-3 py-2 shadow-sm',
         colorClass,
         selected && 'ring-2 ring-primary',
       )}
     >
+      {data.linkedSourceNodeId && (
+        <button
+          type="button"
+          aria-label="Unlink linked node"
+          title={`Linked to ${data.linkedSourceLabel ?? 'copied node'}. Click to unlink.`}
+          className="nodrag nopan absolute right-1 top-1 flex size-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            window.dispatchEvent(new CustomEvent('shader-graph:unlink-node', {
+              detail: { nodeId: id },
+            }));
+          }}
+        >
+          <LinkIcon className="size-3" />
+        </button>
+      )}
       <div className="mb-1 text-[9px] font-medium uppercase tracking-wider text-muted-foreground">
         {def.category}
       </div>
@@ -33,6 +51,18 @@ export function ShaderNode({ data, selected }: NodeProps<Node<ShaderNodeData>>)
               type="target"
               position={Position.Left}
               id={port.id}
+              onClick={(event) => {
+                event.stopPropagation();
+                window.dispatchEvent(new CustomEvent('shader-graph:port-suggest', {
+                  detail: {
+                    nodeId: id,
+                    portId: port.id,
+                    direction: 'input',
+                    x: event.clientX,
+                    y: event.clientY,
+                  },
+                }));
+              }}
               style={{
                 top: i * ROW_H + ROW_H / 2,
                 left: -12,
@@ -55,6 +85,18 @@ export function ShaderNode({ data, selected }: NodeProps<Node<ShaderNodeData>>)
               type="source"
               position={Position.Right}
               id={port.id}
+              onClick={(event) => {
+                event.stopPropagation();
+                window.dispatchEvent(new CustomEvent('shader-graph:port-suggest', {
+                  detail: {
+                    nodeId: id,
+                    portId: port.id,
+                    direction: 'output',
+                    x: event.clientX,
+                    y: event.clientY,
+                  },
+                }));
+              }}
               style={{
                 top: i * ROW_H + ROW_H / 2,
                 right: -12,
diff --git a/src/pages/shader-graph/presets.ts b/src/pages/shader-graph/presets.ts
index 09bd3668..62e05787 100644
--- a/src/pages/shader-graph/presets.ts
+++ b/src/pages/shader-graph/presets.ts
@@ -9,6 +9,10 @@ type PresetNode = {
   y: number;
   label?: string;
   values?: Record<string, number | number[]>;
+  uniformName?: string;
+  min?: number;
+  max?: number;
+  step?: number;
 };
 
 type PresetEdge = {
@@ -27,15 +31,165 @@ export type ShaderGraphPreset = {
   edges: Edge[];
 };
 
-function node({ id, type, x, y, label, values }: PresetNode): ShaderNodeInstance {
+const PRESET_LABELS: Record<string, string> = {
+  amp: 'Amplitude',
+  amount: 'Effect Amount',
+  'a-color': 'Blue Circle Color',
+  'a-shape': 'Blue Circle SDF',
+  'a-mask': 'Blue Circle Mask',
+  'a-layer': 'Blue Circle Layer',
+  'b-color': 'Pink Square Color',
+  'b-shape': 'Pink Square SDF',
+  'b-mask': 'Pink Square Mask',
+  'b-layer': 'Pink Square Layer',
+  boolean: 'Subtract Shape',
+  cells: 'Voronoi Cell Mask',
+  center: 'Shape Center',
+  'center-a': 'Main Circle Center',
+  'center-b': 'Cutout Circle Center',
+  'center-offset': 'Split Center Offset',
+  checker: 'Checker Mask',
+  chromatic: 'Channel Split',
+  corner: 'Corner Radius',
+  composite: 'Composite Layers',
+  'composite-mode': 'Composite Mode',
+  'complex-exponent': 'Complex Exponent',
+  'complex-power': 'Complex UV Power',
+  'complex-scale': 'Warp Scale',
+  'complex-scale-node': 'Apply Warp Scale',
+  cut: 'Dissolve Cutoff',
+  dissolve: 'Dissolve Texture',
+  'edge-color': 'Edge Color',
+  'energy-color': 'Energy Color',
+  'fill-color': 'Fill Color',
+  flash: 'Apply Color Mix',
+  'flash-color': 'Flash Color',
+  freq: 'Frequency',
+  'frag-out': 'Texture Output',
+  'glow-color': 'Glow Color',
+  halftone: 'Apply Halftone',
+  'halftone-mode': 'Halftone Mode',
+  'halftone-scale': 'Dot Scale',
+  intensity: 'Glow Intensity',
+  invert: 'Invert Mask',
+  mask: 'Alpha Mask Threshold',
+  mix: 'Blend Glow',
+  offset: 'UV Offset',
+  'opacity-node': 'Apply Opacity',
+  opacity: 'Opacity Amount',
+  out: 'Final Output',
+  outline: 'Build Outline',
+  'outline-color': 'Outline Color',
+  'offset-r': 'Red Dot Angle',
+  'offset-g': 'Green Dot Angle',
+  'offset-b': 'Blue Dot Angle',
+  'pattern-scale': 'Pattern Scale',
+  'pattern-widths': 'Stripe Widths',
+  'pattern-whirl': 'Whirl Amount',
+  'pattern-color': 'Pattern Color',
+  'pixel-center': 'Pixel Circle Center',
+  'pixel-radius': 'Pixel Circle Radius',
+  'pixel-color': 'Pixel Ink Color',
+  pixelate: 'Pixelate UVs',
+  pos: 'Vertex Position',
+  posterize: 'Reduce Color Bands',
+  power: 'Power',
+  'quat-angle': 'Quaternion Angle',
+  'quat-axis': 'Rotation Axis',
+  'quat-build': 'Build Quaternion',
+  'quat-rotate': 'Rotate UV Vector',
+  'quat-speed': 'Degrees Per Second',
+  'quat-time': 'Animation Time',
+  'random-alpha': 'Tile Alpha',
+  'random-color': 'Random Tile Color',
+  'random-max-hsv': 'Max HSV',
+  'random-min-hsv': 'Min HSV',
+  'random-rgb': 'Split Random RGB',
+  'random-tiles': 'Tile Seeds',
+  radius: 'Shape Radius',
+  'radius-a': 'Main Circle Radius',
+  'radius-b': 'Cutout Circle Radius',
+  recenter: 'Recenter UVs',
+  rect: 'Build Rectangle SDF',
+  rim: 'Rim Mask',
+  rotate: 'Rotate UVs',
+  scale: 'Pattern Scale',
+  sdf: 'Build SDF',
+  'sdf-a': 'Main Circle SDF',
+  'sdf-b': 'Cutout Circle SDF',
+  sides: 'Polygon Sides',
+  soft: 'Edge Softness',
+  speed: 'Animation Speed',
+  steps: 'Color Steps',
+  strength: 'Effect Strength',
+  'sym-angle': 'Symmetry Rotation',
+  'sym-glide': 'Reflection Glide',
+  'sym-order': 'Symmetry Order',
+  'sym-position': 'Symmetry Center',
+  'sym-reflect': 'Mirror UVs',
+  'sym-rotate': 'Fold UVs',
+  strip: 'Sample Ring Band',
+  tex: 'Source Texture',
+  thickness: 'Outline Thickness',
+  tiling: 'Tile Count',
+  'tiling-offset': 'Tile And Offset UVs',
+  time: 'Animated Time',
+  'tile-size': 'Tile Size',
+  'tile-width': 'Line Width',
+  'tile-mode': 'Pattern Mode',
+  'scroll-speed': 'Scroll Speed',
+  twirl: 'Twirl UVs',
+  uv: 'Source UVs',
+  'vert-out': 'Final Vertex Position',
+  wave: 'Wave Distortion',
+  water: 'Water Offset',
+  'water-amp': 'Water Amplitude',
+  'water-noise': 'Simplex Noise Texture',
+  'water-noise-uv': 'Scrolling Noise UV',
+  'water-shift': 'Texture Water Displacement',
+  'water-speed': 'Noise Scroll Speed',
+  width: 'Rectangle Width',
+  truchet: 'Build Truchet Mask',
+  'line-color': 'Line Color',
+  'lab-complement': 'Perceptual Complement',
+  'lab-mix': 'Complement Mix',
+};
+
+const PRESET_LABELS_BY_ID: Record<string, string> = {
+  height: 'Rectangle Height',
+};
+
+const PRESET_TYPE_LABELS: Partial<Record<NodeType, string>> = {
+  FragmentOutput: 'Final Output',
+  SampleTexture: 'Sample Texture',
+  SDFSample: 'Sample SDF Mask',
+  TextureColor: 'Source Texture',
+  TextureCoords: 'Source UVs',
+  TextureInput: 'Texture Input',
+};
+
+const PRESET_LABELS_BY_KEY: Partial<Record<`${NodeType}:${string}`, string>> = {
+  'FloatConstant:opacity': 'Opacity Amount',
+  'Opacity2D:opacity': 'Apply Opacity Mask',
+};
+
+function presetLabel(id: string, type: NodeType) {
+  return PRESET_LABELS_BY_KEY[`${type}:${id}`] ?? PRESET_LABELS[id] ?? PRESET_LABELS_BY_ID[id] ?? PRESET_TYPE_LABELS[type] ?? NODE_DEFS[type].label;
+}
+
+function node({ id, type, x, y, label, values, uniformName, min, max, step }: PresetNode): ShaderNodeInstance {
   return {
     id,
     type: 'shaderNode',
     position: { x, y },
     data: {
-      label: label ?? NODE_DEFS[type].label,
+      label: label ?? presetLabel(id, type),
       nodeType: type,
       ...(values ? { values } : {}),
+      ...(uniformName ? { uniformName } : {}),
+      ...(min !== undefined ? { min } : {}),
+      ...(max !== undefined ? { max } : {}),
+      ...(step !== undefined ? { step } : {}),
     } satisfies ShaderNodeData,
   };
 }
@@ -83,7 +237,7 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
   preset(
     'outline',
     'Outline',
-    'Alpha-based sprite outline with editable color and thickness.',
+    'Sprite-alpha outline with editable color and screen-space thickness.',
     'outline',
     [
       { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
@@ -168,6 +322,60 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'flash', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'alpha-composite',
+    'Alpha Composite',
+    'Porter-Duff alpha compositing between a blue circle and a pink square.',
+    'alpha-composite',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'a-color', type: 'Vec4Constant', x: 0, y: 130, values: { val: [0.28, 0.6, 0.94, 0.62] } },
+      { id: 'b-color', type: 'Vec4Constant', x: 0, y: 260, values: { val: [0.85, 0.12, 0.39, 0.62] } },
+      { id: 'composite-mode', type: 'FloatConstant', x: 0, y: 390, values: { val: 0 }, min: 0, max: 4, step: 1 },
+      { id: 'a-shape', type: 'SDFCircle', x: 340, y: 0, values: { position: [0.43, 0.5], radius: 0.32 } },
+      { id: 'b-shape', type: 'SDFRect', x: 340, y: 260, values: { position: [0.58, 0.5], width: 0.52, height: 0.52, corner: 0.03 } },
+      { id: 'a-mask', type: 'SDFSample', x: 660, y: 30 },
+      { id: 'b-mask', type: 'SDFSample', x: 660, y: 290 },
+      { id: 'a-layer', type: 'Opacity2D', x: 940, y: 80 },
+      { id: 'b-layer', type: 'Opacity2D', x: 940, y: 300 },
+      { id: 'composite', type: 'CompositeAlpha', x: 1230, y: 190 },
+      { id: 'out', type: 'FragmentOutput', x: 1530, y: 205 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'a-shape', in: 'uv' },
+      { from: 'uv', out: 'out', to: 'b-shape', in: 'uv' },
+      { from: 'a-shape', out: 'out', to: 'a-mask', in: 'sdf' },
+      { from: 'b-shape', out: 'out', to: 'b-mask', in: 'sdf' },
+      { from: 'a-color', out: 'out', to: 'a-layer', in: 'color' },
+      { from: 'a-mask', out: 'out', to: 'a-layer', in: 'opacity' },
+      { from: 'b-color', out: 'out', to: 'b-layer', in: 'color' },
+      { from: 'b-mask', out: 'out', to: 'b-layer', in: 'opacity' },
+      { from: 'a-layer', out: 'out', to: 'composite', in: 'a' },
+      { from: 'b-layer', out: 'out', to: 'composite', in: 'b' },
+      { from: 'composite-mode', out: 'out', to: 'composite', in: 'mode' },
+      { from: 'composite', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'lab-complementary',
+    'Lab Complementary',
+    'Mixes a texture toward its perceptual Lab/LCH complementary color.',
+    'lab-complementary',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'lab-complement', type: 'LabComplementary', x: 310, y: 0 },
+      { id: 'lab-mix', type: 'FloatConstant', x: 0, y: 140, values: { val: 0.45 }, min: 0, max: 1, step: 0.01 },
+      { id: 'flash', type: 'HitFlash', x: 650, y: 45, label: 'Mix Complement' },
+      { id: 'out', type: 'FragmentOutput', x: 980, y: 65 },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'lab-complement', in: 'color' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'lab-complement', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'lab-mix', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'rim-glow',
     'Rim Glow',
@@ -212,6 +420,31 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'sample', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'pixel-perfect-circle',
+    'Pixel Perfect Circle',
+    'A one-pixel circular ink line over the source texture.',
+    'pixel-perfect-circle',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130 },
+      { id: 'pixel-center', type: 'Vec2Constant', x: 0, y: 260, values: { val: [0.5, 0.5] } },
+      { id: 'pixel-radius', type: 'FloatConstant', x: 0, y: 390, values: { val: 0.34 }, min: 0.001, max: 1, step: 0.01 },
+      { id: 'pixel-color', type: 'Vec4Constant', x: 0, y: 520, values: { val: [0.1, 0.95, 1, 1] } },
+      { id: 'circle', type: 'PixelCircle', x: 340, y: 245 },
+      { id: 'flash', type: 'HitFlash', x: 670, y: 170 },
+      { id: 'out', type: 'FragmentOutput', x: 1000, y: 190 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'circle', in: 'uv' },
+      { from: 'pixel-center', out: 'out', to: 'circle', in: 'center' },
+      { from: 'pixel-radius', out: 'out', to: 'circle', in: 'radius' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'pixel-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'circle', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'chromatic-aberration',
     'Chromatic Aberration',
@@ -220,12 +453,14 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
     [
       { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
       { id: 'amount', type: 'FloatConstant', x: 0, y: 140, values: { val: 0.006 } },
-      { id: 'chromatic', type: 'ChromaticAberration', x: 300, y: 55 },
-      { id: 'out', type: 'FragmentOutput', x: 660, y: 75 },
+      { id: 'center-offset', type: 'Vec2Constant', x: 0, y: 280, values: { val: [0, 0] } },
+      { id: 'chromatic', type: 'ChromaticAberration', x: 300, y: 95 },
+      { id: 'out', type: 'FragmentOutput', x: 660, y: 115 },
     ],
     [
       { from: 'uv', out: 'out', to: 'chromatic', in: 'uv' },
       { from: 'amount', out: 'out', to: 'chromatic', in: 'amount' },
+      { from: 'center-offset', out: 'out', to: 'chromatic', in: 'offset' },
       { from: 'chromatic', out: 'out', to: 'out', in: 'color' },
     ],
   ),
@@ -246,6 +481,54 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'posterize', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'halftone-dots',
+    'Halftone Dots',
+    'A comic-print treatment with posterized color, RGB dot screens, warm paper tint, and vignette.',
+    'halftone-dots',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0, label: 'Source Texture' },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130, label: 'Print UVs' },
+      { id: 'print-contrast', type: 'FloatConstant', x: 0, y: 260, label: 'Ink Contrast', values: { val: 1.45 } },
+      { id: 'color-steps', type: 'FloatConstant', x: 0, y: 390, label: 'Poster Color Steps', values: { val: 4 }, min: 2, max: 8, step: 1 },
+      { id: 'halftone-mode', type: 'FloatConstant', x: 0, y: 520, label: 'Dot Style', values: { val: 0 }, min: 0, max: 2, step: 1 },
+      { id: 'halftone-scale', type: 'FloatConstant', x: 0, y: 650, values: { val: 1 }, min: 0.1, max: 16, step: 0.1 },
+      { id: 'offset-r', type: 'Vec2Constant', x: 0, y: 780, values: { val: [0.012, 0] } },
+      { id: 'offset-g', type: 'Vec2Constant', x: 0, y: 910, values: { val: [0.0095, 0.0065] } },
+      { id: 'offset-b', type: 'Vec2Constant', x: 0, y: 1040, values: { val: [0.006, 0.0105] } },
+      { id: 'paper-color', type: 'Vec4Constant', x: 0, y: 1170, label: 'Warm Paper Tint', values: { val: [1, 0.88, 0.62, 1] } },
+      { id: 'paper-mix', type: 'FloatConstant', x: 0, y: 1300, label: 'Paper Wash', values: { val: 0.16 }, min: 0, max: 1, step: 0.01 },
+      { id: 'vignette-strength', type: 'FloatConstant', x: 0, y: 1430, label: 'Print Edge Fade', values: { val: 0.28 }, min: 0, max: 1, step: 0.01 },
+      { id: 'vignette-softness', type: 'FloatConstant', x: 0, y: 1560, label: 'Fade Softness', values: { val: 0.42 }, min: 0, max: 1, step: 0.01 },
+      { id: 'contrast', type: 'Contrast', x: 340, y: 65, label: 'Punch Ink Contrast' },
+      { id: 'posterize', type: 'PosterizeColor', x: 640, y: 105, label: 'Limit Print Colors' },
+      { id: 'halftone', type: 'HalftoneColor', x: 950, y: 330, label: 'RGB Dot Screens' },
+      { id: 'paper', type: 'HitFlash', x: 1260, y: 465, label: 'Warm Paper Wash' },
+      { id: 'vignette', type: 'Vignette', x: 1580, y: 580, label: 'Printed Edge Falloff' },
+      { id: 'out', type: 'FragmentOutput', x: 1910, y: 610, label: 'Final Comic Print' },
+    ],
+    [
+      { from: 'tex', out: 'out', to: 'contrast', in: 'color' },
+      { from: 'print-contrast', out: 'out', to: 'contrast', in: 'amount' },
+      { from: 'contrast', out: 'out', to: 'posterize', in: 'color' },
+      { from: 'color-steps', out: 'out', to: 'posterize', in: 'steps' },
+      { from: 'posterize', out: 'out', to: 'halftone', in: 'color' },
+      { from: 'uv', out: 'out', to: 'halftone', in: 'uv' },
+      { from: 'halftone-mode', out: 'out', to: 'halftone', in: 'mode' },
+      { from: 'halftone-scale', out: 'out', to: 'halftone', in: 'scale' },
+      { from: 'offset-r', out: 'out', to: 'halftone', in: 'offsetR' },
+      { from: 'offset-g', out: 'out', to: 'halftone', in: 'offsetG' },
+      { from: 'offset-b', out: 'out', to: 'halftone', in: 'offsetB' },
+      { from: 'halftone', out: 'out', to: 'paper', in: 'color' },
+      { from: 'paper-color', out: 'out', to: 'paper', in: 'flashColor' },
+      { from: 'paper-mix', out: 'out', to: 'paper', in: 'amount' },
+      { from: 'paper', out: 'out', to: 'vignette', in: 'color' },
+      { from: 'uv', out: 'out', to: 'vignette', in: 'uv' },
+      { from: 'vignette-strength', out: 'out', to: 'vignette', in: 'strength' },
+      { from: 'vignette-softness', out: 'out', to: 'vignette', in: 'softness' },
+      { from: 'vignette', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'twirl-portal',
     'Twirl Portal',
@@ -265,6 +548,37 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'sample', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'complex-power-warp',
+    'Complex Power Warp',
+    'Uses complex-number power math to bend centered UVs before sampling the texture.',
+    'complex-power-warp',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'center', type: 'CenteredUV', x: 300, y: 20 },
+      { id: 'complex-exponent', type: 'Vec2Constant', x: 0, y: 160, values: { val: [1.35, 0.22] } },
+      { id: 'complex-power', type: 'ComplexPower', x: 600, y: 45 },
+      { id: 'complex-scale', type: 'FloatConstant', x: 320, y: 220, values: { val: 0.9 }, min: 0.1, max: 3, step: 0.01 },
+      { id: 'complex-scale-node', type: 'ScaleVec2', x: 900, y: 80 },
+      { id: 'tiling', type: 'Vec2Constant', x: 620, y: 255, values: { val: [1, 1] } },
+      { id: 'offset', type: 'Vec2Constant', x: 620, y: 385, values: { val: [0.5, 0.5] } },
+      { id: 'recenter', type: 'TilingOffset', x: 1180, y: 105 },
+      { id: 'sample', type: 'SampleTexture', x: 1480, y: 135 },
+      { id: 'out', type: 'FragmentOutput', x: 1760, y: 135 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'center', in: 'uv' },
+      { from: 'center', out: 'out', to: 'complex-power', in: 'a' },
+      { from: 'complex-exponent', out: 'out', to: 'complex-power', in: 'b' },
+      { from: 'complex-power', out: 'out', to: 'complex-scale-node', in: 'vec' },
+      { from: 'complex-scale', out: 'out', to: 'complex-scale-node', in: 'scale' },
+      { from: 'complex-scale-node', out: 'out', to: 'recenter', in: 'uv' },
+      { from: 'tiling', out: 'out', to: 'recenter', in: 'tiling' },
+      { from: 'offset', out: 'out', to: 'recenter', in: 'offset' },
+      { from: 'recenter', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'rotating-texture',
     'Rotating Texture',
@@ -284,6 +598,118 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'sample', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'quaternion-uv-rotate',
+    'Quaternion UV Rotate',
+    'Builds a Z-axis quaternion and uses it to rotate centered UVs before sampling.',
+    'quaternion-uv-rotate',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'center', type: 'CenteredUV', x: 300, y: 20 },
+      { id: 'split-uv', type: 'SplitVec2', x: 585, y: 35 },
+      { id: 'zero-z', type: 'FloatConstant', x: 320, y: 240, values: { val: 0 } },
+      { id: 'uv3', type: 'Combine3', x: 860, y: 55 },
+      { id: 'quat-time', type: 'Time', x: 0, y: 160 },
+      { id: 'quat-speed', type: 'FloatConstant', x: 0, y: 300, values: { val: 45 }, min: -360, max: 360, step: 1 },
+      { id: 'quat-angle', type: 'Multiply', x: 300, y: 230 },
+      { id: 'quat-axis', type: 'Vec3Constant', x: 0, y: 440, values: { val: [0, 0, 1] } },
+      { id: 'quat-build', type: 'QuaternionFromAngleAxis', x: 600, y: 330 },
+      { id: 'quat-rotate', type: 'QuaternionRotateVector', x: 1130, y: 105 },
+      { id: 'split-rotated', type: 'SplitVec3', x: 1430, y: 125 },
+      { id: 'rotated-uv', type: 'Combine2', x: 1690, y: 145 },
+      { id: 'tiling', type: 'Vec2Constant', x: 1420, y: 340, values: { val: [1, 1] } },
+      { id: 'offset', type: 'Vec2Constant', x: 1420, y: 470, values: { val: [0.5, 0.5] } },
+      { id: 'recenter', type: 'TilingOffset', x: 1950, y: 165 },
+      { id: 'sample', type: 'SampleTexture', x: 2250, y: 190 },
+      { id: 'out', type: 'FragmentOutput', x: 2530, y: 190 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'center', in: 'uv' },
+      { from: 'center', out: 'out', to: 'split-uv', in: 'vec' },
+      { from: 'split-uv', out: 'x', to: 'uv3', in: 'x' },
+      { from: 'split-uv', out: 'y', to: 'uv3', in: 'y' },
+      { from: 'zero-z', out: 'out', to: 'uv3', in: 'z' },
+      { from: 'quat-time', out: 'out', to: 'quat-angle', in: 'a' },
+      { from: 'quat-speed', out: 'out', to: 'quat-angle', in: 'b' },
+      { from: 'quat-angle', out: 'out', to: 'quat-build', in: 'angle' },
+      { from: 'quat-axis', out: 'out', to: 'quat-build', in: 'axis' },
+      { from: 'uv3', out: 'out', to: 'quat-rotate', in: 'vec' },
+      { from: 'quat-build', out: 'out', to: 'quat-rotate', in: 'q' },
+      { from: 'quat-rotate', out: 'out', to: 'split-rotated', in: 'vec' },
+      { from: 'split-rotated', out: 'x', to: 'rotated-uv', in: 'x' },
+      { from: 'split-rotated', out: 'y', to: 'rotated-uv', in: 'y' },
+      { from: 'rotated-uv', out: 'out', to: 'recenter', in: 'uv' },
+      { from: 'tiling', out: 'out', to: 'recenter', in: 'tiling' },
+      { from: 'offset', out: 'out', to: 'recenter', in: 'offset' },
+      { from: 'recenter', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'symmetry-kaleidoscope',
+    'Symmetry Kaleidoscope',
+    'Folds UVs through rotation and reflection symmetry before sampling the texture.',
+    'symmetry-kaleidoscope',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'sym-position', type: 'Vec2Constant', x: 0, y: 140, values: { val: [0.5, 0.5] } },
+      { id: 'sym-angle', type: 'Time', x: 0, y: 280 },
+      { id: 'sym-order', type: 'FloatConstant', x: 0, y: 420, values: { val: 8 }, min: 1, max: 24, step: 1 },
+      { id: 'sym-rotate', type: 'RotationSymmetry', x: 330, y: 120 },
+      { id: 'direction', type: 'Vec2Constant', x: 330, y: 390, values: { val: [0, 1] } },
+      { id: 'sym-glide', type: 'FloatConstant', x: 330, y: 520, values: { val: 0.04 }, min: -1, max: 1, step: 0.01 },
+      { id: 'sym-reflect', type: 'ReflectionSymmetry', x: 710, y: 185 },
+      { id: 'sample', type: 'SampleTexture', x: 1080, y: 230 },
+      { id: 'out', type: 'FragmentOutput', x: 1360, y: 230 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'sym-rotate', in: 'uv' },
+      { from: 'sym-position', out: 'out', to: 'sym-rotate', in: 'position' },
+      { from: 'sym-angle', out: 'out', to: 'sym-rotate', in: 'angle' },
+      { from: 'sym-order', out: 'out', to: 'sym-rotate', in: 'order' },
+      { from: 'sym-rotate', out: 'out', to: 'sym-reflect', in: 'uv' },
+      { from: 'sym-position', out: 'out', to: 'sym-reflect', in: 'position' },
+      { from: 'direction', out: 'out', to: 'sym-reflect', in: 'direction' },
+      { from: 'sym-glide', out: 'out', to: 'sym-reflect', in: 'glide' },
+      { from: 'sym-reflect', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'random-color-tiles',
+    'Random Color Tiles',
+    'Uses tile cell indices as stable seeds for deterministic random HSV colors.',
+    'random-color-tiles',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'tile-size', type: 'FloatConstant', x: 0, y: 140, values: { val: 0.16 }, min: 0.01, max: 1, step: 0.01 },
+      { id: 'tile-offset', type: 'FloatConstant', x: 0, y: 280, values: { val: 0.04 }, min: -1, max: 1, step: 0.01 },
+      { id: 'tile-mode', type: 'FloatConstant', x: 0, y: 420, values: { val: 1 }, min: 0, max: 3, step: 1 },
+      { id: 'random-tiles', type: 'TilingSymmetry', x: 330, y: 135 },
+      { id: 'random-min-hsv', type: 'Vec3Constant', x: 330, y: 460, values: { val: [0.52, 0.55, 0.78] } },
+      { id: 'random-max-hsv', type: 'Vec3Constant', x: 330, y: 590, values: { val: [0.95, 1, 1] } },
+      { id: 'random-color', type: 'RandomColor', x: 710, y: 285 },
+      { id: 'random-rgb', type: 'SplitRGB', x: 1030, y: 330 },
+      { id: 'random-alpha', type: 'FloatConstant', x: 1030, y: 560, values: { val: 1 }, min: 0, max: 1, step: 0.01 },
+      { id: 'out-color', type: 'Combine4', x: 1300, y: 360 },
+      { id: 'out', type: 'FragmentOutput', x: 1580, y: 380 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'random-tiles', in: 'uv' },
+      { from: 'tile-size', out: 'out', to: 'random-tiles', in: 'cellSize' },
+      { from: 'tile-offset', out: 'out', to: 'random-tiles', in: 'offset' },
+      { from: 'tile-mode', out: 'out', to: 'random-tiles', in: 'mode' },
+      { from: 'random-tiles', out: 'cellIndex', to: 'random-color', in: 'seed' },
+      { from: 'random-min-hsv', out: 'out', to: 'random-color', in: 'minHsv' },
+      { from: 'random-max-hsv', out: 'out', to: 'random-color', in: 'maxHsv' },
+      { from: 'random-color', out: 'rgb', to: 'random-rgb', in: 'vec' },
+      { from: 'random-rgb', out: 'r', to: 'out-color', in: 'r' },
+      { from: 'random-rgb', out: 'g', to: 'out-color', in: 'g' },
+      { from: 'random-rgb', out: 'b', to: 'out-color', in: 'b' },
+      { from: 'random-alpha', out: 'out', to: 'out-color', in: 'a' },
+      { from: 'out-color', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'checker-flash',
     'Checker Flash',
@@ -307,6 +733,37 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'flash', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'pattern-whirl',
+    'Pattern Whirl',
+    'A graphic radial whirl mask mixed into the sprite color.',
+    'pattern-whirl',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130 },
+      { id: 'pattern-scale', type: 'FloatConstant', x: 0, y: 260, values: { val: 4 }, min: 0.1, max: 12, step: 0.1 },
+      { id: 'pattern-widths', type: 'Vec2Constant', x: 0, y: 390, values: { val: [24, 18] } },
+      { id: 'pattern-whirl', type: 'FloatConstant', x: 0, y: 520, values: { val: 95 }, min: -360, max: 360, step: 1 },
+      { id: 'pattern-color', type: 'Vec4Constant', x: 0, y: 650, values: { val: [1, 0.25, 0.7, 1] } },
+      { id: 'center', type: 'CenteredUV', x: 330, y: 135 },
+      { id: 'scale', type: 'ScaleVec2', x: 610, y: 170 },
+      { id: 'whirl', type: 'PatternWhirl', x: 900, y: 265 },
+      { id: 'flash', type: 'HitFlash', x: 1210, y: 200 },
+      { id: 'out', type: 'FragmentOutput', x: 1530, y: 220 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'center', in: 'uv' },
+      { from: 'center', out: 'out', to: 'scale', in: 'vec' },
+      { from: 'pattern-scale', out: 'out', to: 'scale', in: 'scale' },
+      { from: 'scale', out: 'out', to: 'whirl', in: 'uv' },
+      { from: 'pattern-widths', out: 'out', to: 'whirl', in: 'widths' },
+      { from: 'pattern-whirl', out: 'out', to: 'whirl', in: 'whirl' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'pattern-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'whirl', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'voronoi-energy',
     'Voronoi Energy',
@@ -332,6 +789,39 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'flash', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'truchet-tiles',
+    'Truchet Tiles',
+    'Classic square Truchet arc tiles with randomized rotation, reflection, and scrolling motion.',
+    'truchet-tiles',
+    [
+      { id: 'tex', type: 'TextureColor', x: 0, y: 0 },
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 130 },
+      { id: 'tile-size', type: 'FloatConstant', x: 0, y: 260, values: { val: 0.16 } },
+      { id: 'tile-mode', type: 'FloatConstant', x: 0, y: 390, values: { val: 0 }, min: 0, max: 2, step: 1 },
+      { id: 'seed', type: 'FloatConstant', x: 0, y: 520, label: 'Pattern Seed', values: { val: 7 } },
+      { id: 'tile-width', type: 'FloatConstant', x: 0, y: 650, values: { val: 0.08 } },
+      { id: 'time', type: 'Time', x: 0, y: 780 },
+      { id: 'scroll-speed', type: 'Vec2Constant', x: 0, y: 910, values: { val: [0.04, 0.02] } },
+      { id: 'line-color', type: 'Vec4Constant', x: 0, y: 1050, values: { val: [0.15, 0.9, 1, 1] } },
+      { id: 'truchet', type: 'TruchetTiles', x: 340, y: 340 },
+      { id: 'flash', type: 'HitFlash', x: 720, y: 220 },
+      { id: 'out', type: 'FragmentOutput', x: 1040, y: 240 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'truchet', in: 'position' },
+      { from: 'tile-size', out: 'out', to: 'truchet', in: 'size' },
+      { from: 'tile-mode', out: 'out', to: 'truchet', in: 'mode' },
+      { from: 'seed', out: 'out', to: 'truchet', in: 'seed' },
+      { from: 'tile-width', out: 'out', to: 'truchet', in: 'width' },
+      { from: 'time', out: 'out', to: 'truchet', in: 'time' },
+      { from: 'scroll-speed', out: 'out', to: 'truchet', in: 'scroll' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'line-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'truchet', out: 'mask', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'tiled-scroll',
     'Tiled Offset',
@@ -399,7 +889,7 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { id: 'frag-out', type: 'FragmentOutput', x: 320, y: 0 },
       { id: 'pos', type: 'VertexPosition', x: 0, y: 180 },
       { id: 'time', type: 'Time', x: 0, y: 300 },
-      { id: 'amp', type: 'FloatConstant', x: 0, y: 420, values: { val: 5 } },
+      { id: 'amp', type: 'FloatConstant', x: 0, y: 420, values: { val: 12 } },
       { id: 'freq', type: 'FloatConstant', x: 0, y: 540, values: { val: 0.035 } },
       { id: 'wave', type: 'VertexWave2D', x: 330, y: 300 },
       { id: 'vert-out', type: 'VertexOutput', x: 680, y: 330 },
@@ -438,6 +928,154 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'sample', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'sdf-circle-mask',
+    'SDF Circle Mask',
+    'Clips the texture to a soft anti-aliased circle using a signed distance field.',
+    'sdf-circle-mask',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'tex', type: 'TextureColor', x: 0, y: 130 },
+      { id: 'center', type: 'Vec2Constant', x: 0, y: 260, values: { val: [0.5, 0.5] } },
+      { id: 'radius', type: 'FloatConstant', x: 0, y: 400, values: { val: 0.42 } },
+      { id: 'sdf', type: 'SDFCircle', x: 340, y: 200 },
+      { id: 'sample', type: 'SDFSample', x: 630, y: 230 },
+      { id: 'opacity', type: 'Opacity2D', x: 900, y: 150 },
+      { id: 'out', type: 'FragmentOutput', x: 1180, y: 175 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'sdf', in: 'uv' },
+      { from: 'center', out: 'out', to: 'sdf', in: 'position' },
+      { from: 'radius', out: 'out', to: 'sdf', in: 'radius' },
+      { from: 'sdf', out: 'out', to: 'sample', in: 'sdf' },
+      { from: 'tex', out: 'out', to: 'opacity', in: 'color' },
+      { from: 'sample', out: 'out', to: 'opacity', in: 'opacity' },
+      { from: 'opacity', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'sdf-rounded-rectangle',
+    'SDF Rounded Rectangle',
+    'Clips the texture to a rounded rectangle using a signed distance field.',
+    'sdf-rounded-rectangle',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'tex', type: 'TextureColor', x: 0, y: 130 },
+      { id: 'center', type: 'Vec2Constant', x: 0, y: 260, values: { val: [0.5, 0.5] } },
+      { id: 'width', type: 'FloatConstant', x: 0, y: 400, values: { val: 0.58 } },
+      { id: 'height', type: 'FloatConstant', x: 0, y: 520, values: { val: 0.36 } },
+      { id: 'corner', type: 'FloatConstant', x: 0, y: 640, values: { val: 0.06 } },
+      { id: 'rect', type: 'SDFRect', x: 340, y: 280 },
+      { id: 'sample', type: 'SDFSample', x: 650, y: 310 },
+      { id: 'opacity', type: 'Opacity2D', x: 920, y: 220 },
+      { id: 'out', type: 'FragmentOutput', x: 1200, y: 245 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'rect', in: 'uv' },
+      { from: 'center', out: 'out', to: 'rect', in: 'position' },
+      { from: 'width', out: 'out', to: 'rect', in: 'width' },
+      { from: 'height', out: 'out', to: 'rect', in: 'height' },
+      { from: 'corner', out: 'out', to: 'rect', in: 'corner' },
+      { from: 'rect', out: 'out', to: 'sample', in: 'sdf' },
+      { from: 'tex', out: 'out', to: 'opacity', in: 'color' },
+      { from: 'sample', out: 'out', to: 'opacity', in: 'opacity' },
+      { from: 'opacity', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'sdf-ring-glow',
+    'SDF Ring Glow',
+    'Samples the strip outline of a circle SDF to overlay a glowing ring on the texture.',
+    'sdf-ring-glow',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'tex', type: 'TextureColor', x: 0, y: 130 },
+      { id: 'center', type: 'Vec2Constant', x: 0, y: 260, values: { val: [0.5, 0.5] } },
+      { id: 'radius', type: 'FloatConstant', x: 0, y: 400, values: { val: 0.38 } },
+      { id: 'ring-min', type: 'FloatConstant', x: 0, y: 520, values: { val: -0.04 } },
+      { id: 'ring-max', type: 'FloatConstant', x: 0, y: 640, values: { val: 0.04 } },
+      { id: 'glow-color', type: 'Vec4Constant', x: 0, y: 760, values: { val: [0.2, 0.9, 1, 1] } },
+      { id: 'sdf', type: 'SDFCircle', x: 340, y: 300 },
+      { id: 'strip', type: 'SDFSampleStrip', x: 640, y: 330 },
+      { id: 'flash', type: 'HitFlash', x: 930, y: 230 },
+      { id: 'out', type: 'FragmentOutput', x: 1210, y: 255 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'sdf', in: 'uv' },
+      { from: 'center', out: 'out', to: 'sdf', in: 'position' },
+      { from: 'radius', out: 'out', to: 'sdf', in: 'radius' },
+      { from: 'sdf', out: 'out', to: 'strip', in: 'sdf' },
+      { from: 'ring-min', out: 'out', to: 'strip', in: 'offsetMin' },
+      { from: 'ring-max', out: 'out', to: 'strip', in: 'offsetMax' },
+      { from: 'tex', out: 'out', to: 'flash', in: 'color' },
+      { from: 'glow-color', out: 'out', to: 'flash', in: 'flashColor' },
+      { from: 'strip', out: 'out', to: 'flash', in: 'amount' },
+      { from: 'flash', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'sdf-hex-badge',
+    'SDF Hex Badge',
+    'Clips the texture to a visibly smaller hexagonal mask using SDFPolygon.',
+    'sdf-hex-badge',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'tex', type: 'TextureColor', x: 0, y: 130 },
+      { id: 'center', type: 'Vec2Constant', x: 0, y: 260, values: { val: [0.5, 0.5] } },
+      { id: 'radius', type: 'FloatConstant', x: 0, y: 400, values: { val: 0.28 } },
+      { id: 'sides', type: 'FloatConstant', x: 0, y: 520, values: { val: 6 } },
+      { id: 'corner', type: 'FloatConstant', x: 0, y: 640, values: { val: 0 } },
+      { id: 'sdf', type: 'SDFPolygon', x: 340, y: 290 },
+      { id: 'sample', type: 'SDFSample', x: 650, y: 320 },
+      { id: 'opacity', type: 'Opacity2D', x: 920, y: 230 },
+      { id: 'out', type: 'FragmentOutput', x: 1200, y: 255 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'sdf', in: 'uv' },
+      { from: 'center', out: 'out', to: 'sdf', in: 'position' },
+      { from: 'radius', out: 'out', to: 'sdf', in: 'radius' },
+      { from: 'sides', out: 'out', to: 'sdf', in: 'sides' },
+      { from: 'corner', out: 'out', to: 'sdf', in: 'corner' },
+      { from: 'sdf', out: 'out', to: 'sample', in: 'sdf' },
+      { from: 'tex', out: 'out', to: 'opacity', in: 'color' },
+      { from: 'sample', out: 'out', to: 'opacity', in: 'opacity' },
+      { from: 'opacity', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
+  preset(
+    'sdf-crescent',
+    'SDF Crescent',
+    'Subtracts one circle SDF from another using SDFBoolean Diff to produce a crescent shape.',
+    'sdf-crescent',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0 },
+      { id: 'center-a', type: 'Vec2Constant', x: 0, y: 130, values: { val: [0.45, 0.5] } },
+      { id: 'center-b', type: 'Vec2Constant', x: 0, y: 270, values: { val: [0.6, 0.5] } },
+      { id: 'radius-a', type: 'FloatConstant', x: 0, y: 400, values: { val: 0.38 } },
+      { id: 'radius-b', type: 'FloatConstant', x: 0, y: 520, values: { val: 0.3 } },
+      { id: 'fill-color', type: 'Vec4Constant', x: 0, y: 640, values: { val: [0.9, 0.8, 0.2, 1] } },
+      { id: 'sdf-a', type: 'SDFCircle', x: 340, y: 90 },
+      { id: 'sdf-b', type: 'SDFCircle', x: 340, y: 340 },
+      { id: 'boolean', type: 'SDFBoolean', x: 660, y: 195 },
+      { id: 'sample', type: 'SDFSample', x: 950, y: 225 },
+      { id: 'opacity', type: 'Opacity2D', x: 1220, y: 145 },
+      { id: 'out', type: 'FragmentOutput', x: 1500, y: 170 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'sdf-a', in: 'uv' },
+      { from: 'center-a', out: 'out', to: 'sdf-a', in: 'position' },
+      { from: 'radius-a', out: 'out', to: 'sdf-a', in: 'radius' },
+      { from: 'uv', out: 'out', to: 'sdf-b', in: 'uv' },
+      { from: 'center-b', out: 'out', to: 'sdf-b', in: 'position' },
+      { from: 'radius-b', out: 'out', to: 'sdf-b', in: 'radius' },
+      { from: 'sdf-a', out: 'out', to: 'boolean', in: 'a' },
+      { from: 'sdf-b', out: 'out', to: 'boolean', in: 'b' },
+      { from: 'boolean', out: 'diff', to: 'sample', in: 'sdf' },
+      { from: 'fill-color', out: 'out', to: 'opacity', in: 'color' },
+      { from: 'sample', out: 'out', to: 'opacity', in: 'opacity' },
+      { from: 'opacity', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
   preset(
     'masked-water-shimmer',
     'Masked Water Shimmer',
@@ -465,4 +1103,38 @@ export const SHADER_GRAPH_PRESETS: ShaderGraphPreset[] = [
       { from: 'water', out: 'out', to: 'out', in: 'color' },
     ],
   ),
+  preset(
+    'texture-noise-water',
+    'Texture Noise Water',
+    'Recreates a texture-noise water displacement shader with an uploaded color simplex noise texture.',
+    'texture-noise-water',
+    [
+      { id: 'uv', type: 'TextureCoords', x: 0, y: 0, label: 'Water Tile UVs' },
+      { id: 'time', type: 'Time', x: 0, y: 140, label: 'Animated Time' },
+      { id: 'noise-width', type: 'FloatConstant', x: 0, y: 280, label: 'Noise Width', values: { val: 64 }, min: 1, max: 512, step: 1 },
+      { id: 'sprite-width', type: 'FloatConstant', x: 0, y: 420, label: 'Sprite Width', values: { val: 65 }, min: 1, max: 512, step: 1 },
+      { id: 'water-speed', type: 'FloatConstant', x: 0, y: 560, values: { val: 0.05 }, min: -1, max: 1, step: 0.001 },
+      { id: 'water-amp', type: 'FloatConstant', x: 0, y: 700, values: { val: 0.05 }, min: 0, max: 0.25, step: 0.001 },
+      { id: 'water-noise-uv', type: 'WaterNoiseUV', x: 360, y: 210 },
+      { id: 'water-noise', type: 'TextureInput', x: 720, y: 210, uniformName: 'simplex' },
+      { id: 'noise-sample', type: 'SampleTexture', x: 970, y: 245, label: 'Sample Simplex Noise' },
+      { id: 'water-shift', type: 'WaterDisplaceV2', x: 1260, y: 260 },
+      { id: 'sample', type: 'SampleTexture', x: 1610, y: 300 },
+      { id: 'out', type: 'FragmentOutput', x: 1890, y: 300 },
+    ],
+    [
+      { from: 'uv', out: 'out', to: 'water-noise-uv', in: 'uv' },
+      { from: 'time', out: 'out', to: 'water-noise-uv', in: 'time' },
+      { from: 'noise-width', out: 'out', to: 'water-noise-uv', in: 'noiseWidth' },
+      { from: 'sprite-width', out: 'out', to: 'water-noise-uv', in: 'spriteWidth' },
+      { from: 'water-speed', out: 'out', to: 'water-noise-uv', in: 'speed' },
+      { from: 'water-noise', out: 'texture', to: 'noise-sample', in: 'texture' },
+      { from: 'water-noise-uv', out: 'out', to: 'noise-sample', in: 'uv' },
+      { from: 'uv', out: 'out', to: 'water-shift', in: 'uv' },
+      { from: 'noise-sample', out: 'out', to: 'water-shift', in: 'noiseColor' },
+      { from: 'water-amp', out: 'out', to: 'water-shift', in: 'amp' },
+      { from: 'water-shift', out: 'out', to: 'sample', in: 'uv' },
+      { from: 'sample', out: 'out', to: 'out', in: 'color' },
+    ],
+  ),
 ];
diff --git a/src/pages/shader-graph/textureUpload.ts b/src/pages/shader-graph/textureUpload.ts
new file mode 100644
index 00000000..b7086520
--- /dev/null
+++ b/src/pages/shader-graph/textureUpload.ts
@@ -0,0 +1,34 @@
+import { open as openFileDialog } from '@tauri-apps/plugin-dialog';
+import { readFile } from '@tauri-apps/plugin-fs';
+import { toast } from 'sonner';
+import type { ShaderTextureUpload } from '@/types/shader-graph';
+import { isWeb } from '@/utils/platform';
+
+function bytesToBase64(bytes: Uint8Array) {
+  let binary = '';
+  const chunkSize = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+  }
+  return btoa(binary);
+}
+
+function filename(path: string) {
+  return path.split(/[\\/]/).pop() || 'texture.png';
+}
+
+export async function pickShaderTexture(): Promise<ShaderTextureUpload | null> {
+  if (isWeb()) {
+    toast.error('Texture upload is available in the desktop app');
+    return null;
+  }
+
+  const path = await openFileDialog({
+    multiple: false,
+    filters: [{ name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'bmp', 'tga'] }],
+  });
+  if (!path || typeof path !== 'string') return null;
+
+  const bytes = await readFile(path);
+  return { filename: filename(path), dataBase64: bytesToBase64(bytes) };
+}
diff --git a/src/pages/shader-graph/webglPreview.ts b/src/pages/shader-graph/webglPreview.ts
new file mode 100644
index 00000000..a31e332e
--- /dev/null
+++ b/src/pages/shader-graph/webglPreview.ts
@@ -0,0 +1,161 @@
+const VERT_SRC = `
+attribute vec2 a_position;
+varying vec2 v_texCoord;
+varying vec2 v_screenCoord;
+uniform vec2 u_resolution;
+void main() {
+  v_texCoord = a_position * 0.5 + 0.5;
+  v_screenCoord = v_texCoord * u_resolution;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`.trim();
+
+// Convert Love2D GLSL pixel shader to WebGL fragment shader
+export function adaptLoveShader(lovePixel: string): string {
+  // Extract parameter names from effect() signature
+  const sigMatch = lovePixel.match(
+    /vec4\s+effect\s*\(\s*vec4\s+(\w+)\s*,\s*(?:Image|sampler2D)\s+(\w+)\s*,\s*vec2\s+(\w+)\s*,\s*vec2\s+(\w+)\s*\)/,
+  );
+  const colorP = sigMatch?.[1] ?? 'color';
+  const texP = sigMatch?.[2] ?? 'tex_param';
+  const uvP = sigMatch?.[3] ?? 'texture_coords';
+  const screenP = sigMatch?.[4] ?? 'screen_coords';
+
+  let src = lovePixel;
+  src = src.replace(/\bextern\s+((?:lowp|mediump|highp)\s+)?Image\s+/g, 'uniform $1sampler2D ');
+  src = src.replace(/\bextern\s+((?:lowp|mediump|highp)\s+)?number\s+/g, 'uniform $1float ');
+  src = src.replace(/\bextern\s+/g, 'uniform ');
+  src = src.replace(/\bTexel\s*\(/g, 'texture2D(');
+  // Rename effect() to avoid conflict, keep body intact
+  src = src.replace(
+    /\bvec4\s+effect\s*\([^)]+\)\s*\{/,
+    `vec4 feather_effect(vec4 ${colorP}, sampler2D ${texP}, vec2 ${uvP}, vec2 ${screenP}) {`,
+  );
+
+  const preamble = [
+    'precision mediump float;',
+    'varying vec2 v_texCoord;',
+    'varying vec2 v_screenCoord;',
+    'uniform sampler2D u_tex;',
+    'uniform vec4 u_color;',
+    'uniform vec2 u_resolution;',
+    '',
+  ].join('\n');
+
+  const mainFn = [
+    '',
+    'void main() {',
+    '  gl_FragColor = feather_effect(u_color, u_tex, v_texCoord, v_screenCoord);',
+    '}',
+  ].join('\n');
+
+  return preamble + src + mainFn;
+}
+
+function compileShader(gl: WebGLRenderingContext, type: number, src: string): WebGLShader | null {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+
+function linkProgram(gl: WebGLRenderingContext, vertSrc: string, fragSrc: string): WebGLProgram | null {
+  const vert = compileShader(gl, gl.VERTEX_SHADER, vertSrc);
+  const frag = compileShader(gl, gl.FRAGMENT_SHADER, fragSrc);
+  if (!vert || !frag) return null;
+  const prog = gl.createProgram();
+  if (!prog) return null;
+  gl.attachShader(prog, vert);
+  gl.attachShader(prog, frag);
+  gl.linkProgram(prog);
+  gl.deleteShader(vert);
+  gl.deleteShader(frag);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    gl.deleteProgram(prog);
+    return null;
+  }
+  return prog;
+}
+
+function makeWhiteTexture(gl: WebGLRenderingContext): WebGLTexture {
+  const tex = gl.createTexture()!;
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]));
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  return tex;
+}
+
+function makeQuadBuffer(gl: WebGLRenderingContext): WebGLBuffer {
+  const buf = gl.createBuffer()!;
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  return buf;
+}
+
+export type WebGLPreview = {
+  render: (timeSeconds: number) => void;
+  destroy: () => void;
+  error: string | null;
+};
+
+export function createWebGLPreview(canvas: HTMLCanvasElement, lovePixelGlsl: string): WebGLPreview {
+  const gl = canvas.getContext('webgl');
+  if (!gl) return { render: () => {}, destroy: () => {}, error: 'WebGL not available' };
+
+  const fragSrc = adaptLoveShader(lovePixelGlsl);
+  const prog = linkProgram(gl, VERT_SRC, fragSrc);
+  if (!prog) return { render: () => {}, destroy: () => {}, error: 'Shader compile error' };
+
+  const quadBuf = makeQuadBuffer(gl);
+  const whiteTex = makeWhiteTexture(gl);
+
+  const aPos = gl.getAttribLocation(prog, 'a_position');
+  const uResolution = gl.getUniformLocation(prog, 'u_resolution');
+  const uTime = gl.getUniformLocation(prog, 'u_time');
+  const uColor = gl.getUniformLocation(prog, 'u_color');
+  const uTex = gl.getUniformLocation(prog, 'u_tex');
+
+  // Capture non-null reference so TypeScript retains the narrowing in closures
+  const ctx = gl;
+
+  function render(timeSeconds: number) {
+    const w = canvas.clientWidth;
+    const h = canvas.clientHeight;
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    ctx.viewport(0, 0, w, h);
+    ctx.clearColor(0, 0, 0, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+
+    ctx.useProgram(prog);
+    ctx.bindBuffer(ctx.ARRAY_BUFFER, quadBuf);
+    ctx.enableVertexAttribArray(aPos);
+    ctx.vertexAttribPointer(aPos, 2, ctx.FLOAT, false, 0, 0);
+
+    ctx.uniform2f(uResolution, w, h);
+    ctx.uniform1f(uTime, timeSeconds);
+    ctx.uniform4f(uColor, 1, 1, 1, 1);
+    ctx.activeTexture(ctx.TEXTURE0);
+    ctx.bindTexture(ctx.TEXTURE_2D, whiteTex);
+    ctx.uniform1i(uTex, 0);
+
+    ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 4);
+  }
+
+  function destroy() {
+    ctx.deleteProgram(prog);
+    ctx.deleteBuffer(quadBuf);
+    ctx.deleteTexture(whiteTex);
+  }
+
+  return { render, destroy, error: null };
+}
diff --git a/src/showcase/LoveJsPreview.tsx b/src/showcase/LoveJsPreview.tsx
new file mode 100644
index 00000000..9113cf52
--- /dev/null
+++ b/src/showcase/LoveJsPreview.tsx
@@ -0,0 +1,186 @@
+import { useEffect, useRef, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/styles';
+import { ChevronDownIcon, ChevronUpIcon, RefreshCwIcon } from 'lucide-react';
+
+const DEFAULT_W = 288;
+const DEFAULT_H = 176;
+const ASPECT = DEFAULT_H / DEFAULT_W; // locked height/width ratio
+const MIN_W = 180;
+const MAX_W = 720;
+
+type LoveJsPreviewProps = {
+  title: string;
+  description: string;
+  payload: Record<string, unknown>;
+  className?: string;
+  floating?: boolean;
+};
+
+export function LoveJsPreview({ title, description, payload, className, floating = false }: LoveJsPreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const loadedRef = useRef(false);
+  const payloadRef = useRef(payload);
+  const [minimized, setMinimized] = useState(false);
+  const previewSrc = `${import.meta.env.BASE_URL}showcase-lovejs/index.html?g=showcase.love&v=11.5`;
+
+  // Drag
+  const [translate, setTranslate] = useState({ x: 0, y: 0 });
+  const dragRef = useRef<{ startMouseX: number; startMouseY: number; startTx: number; startTy: number } | null>(null);
+
+  // Resize
+  const [size, setSize] = useState({ w: 288, h: 176 });
+  const resizeRef = useRef<{ startX: number; startY: number; startW: number; startH: number } | null>(null);
+
+  payloadRef.current = payload;
+
+  function sendPayload(p: Record<string, unknown>) {
+    iframeRef.current?.contentWindow?.postMessage(
+      { source: 'feather-showcase', type: 'preview:update', payload: p },
+      '*',
+    );
+  }
+
+  useEffect(() => {
+    if (loadedRef.current) sendPayload(payload);
+  }, [payload]);
+
+  function handleLoad() {
+    loadedRef.current = true;
+    sendPayload(payloadRef.current);
+  }
+
+  function reloadPreview() {
+    if (!iframeRef.current) return;
+    loadedRef.current = false;
+    iframeRef.current.contentWindow?.location.reload();
+  }
+
+  function onDragStart(e: React.MouseEvent<HTMLDivElement>) {
+    if ((e.target as HTMLElement).closest('button')) return;
+    e.preventDefault();
+    dragRef.current = { startMouseX: e.clientX, startMouseY: e.clientY, startTx: translate.x, startTy: translate.y };
+
+    function onMove(ev: MouseEvent) {
+      if (!dragRef.current) return;
+      setTranslate({
+        x: dragRef.current.startTx + ev.clientX - dragRef.current.startMouseX,
+        y: dragRef.current.startTy + ev.clientY - dragRef.current.startMouseY,
+      });
+    }
+    function onUp() {
+      dragRef.current = null;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  function onResizeStart(e: React.MouseEvent<HTMLDivElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+    resizeRef.current = { startX: e.clientX, startY: e.clientY, startW: size.w, startH: size.h };
+
+    function onMove(ev: MouseEvent) {
+      if (!resizeRef.current) return;
+      const w = Math.max(MIN_W, Math.min(MAX_W, resizeRef.current.startW + ev.clientX - resizeRef.current.startX));
+      setSize({ w, h: Math.round(w * ASPECT) });
+    }
+    function onUp() {
+      resizeRef.current = null;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  if (floating) {
+    return (
+      <div
+        className="absolute bottom-4 right-4 z-20 overflow-hidden rounded-xl border border-border/60 bg-card/95 shadow-2xl backdrop-blur-sm"
+        style={{ width: size.w, transform: `translate(${translate.x}px, ${translate.y}px)` }}
+      >
+        {/* drag handle / header */}
+        <div
+          className="flex cursor-grab items-center gap-2 border-b px-3 py-2 select-none active:cursor-grabbing"
+          onMouseDown={onDragStart}
+        >
+          <span className="min-w-0 flex-1 truncate text-xs font-semibold">{title}</span>
+          <Badge variant="secondary" className="h-4 shrink-0 rounded-full px-1.5 text-[9px]">
+            live
+          </Badge>
+          <Button size="icon" variant="ghost" className="size-5 shrink-0" title="Reload preview" onClick={reloadPreview}>
+            <RefreshCwIcon className="size-3" />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-5 shrink-0"
+            title={minimized ? 'Expand' : 'Minimise'}
+            onClick={() => setMinimized((v) => !v)}
+          >
+            {minimized ? <ChevronUpIcon className="size-3" /> : <ChevronDownIcon className="size-3" />}
+          </Button>
+        </div>
+
+        {!minimized && (
+          <div className="relative" style={{ height: size.h }}>
+            <iframe
+              ref={iframeRef}
+              title={title}
+              src={previewSrc}
+              className="block h-full w-full border-0"
+              onLoad={handleLoad}
+            />
+            {/* resize handle — bottom-right corner */}
+            <div
+              className="absolute bottom-0 right-0 z-10 h-4 w-4 cursor-se-resize"
+              onMouseDown={onResizeStart}
+            >
+              <svg viewBox="0 0 16 16" className="h-full w-full text-foreground/30" fill="none">
+                <line x1="5" y1="14" x2="14" y2="5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                <line x1="9" y1="14" x2="14" y2="9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                <line x1="13" y1="14" x2="14" y2="13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <section className={cn('grid min-h-0 gap-3 rounded-md border bg-card p-3', className)}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h2 className="text-sm font-semibold">{title}</h2>
+            <Badge variant="secondary" className="h-5 rounded-full px-2 text-[10px]">
+              love.js bridge
+            </Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">{description}</p>
+        </div>
+        <Button size="sm" variant="outline" className="h-7 text-xs" onClick={reloadPreview}>
+          Reload
+        </Button>
+      </div>
+      <div className="min-h-72 overflow-hidden rounded-md border bg-black">
+        <iframe
+          ref={iframeRef}
+          title={title}
+          src={previewSrc}
+          className="h-full min-h-72 w-full border-0"
+          onLoad={handleLoad}
+        />
+      </div>
+      <p className="text-[10px] text-muted-foreground">
+        This iframe is the standalone preview boundary. Deployment must serve the love.js path with COOP/COEP and WASM
+        CSP headers when the full 2dengine player is installed.
+      </p>
+    </section>
+  );
+}
diff --git a/src/showcase/ShowcaseApp.tsx b/src/showcase/ShowcaseApp.tsx
new file mode 100644
index 00000000..674d4c00
--- /dev/null
+++ b/src/showcase/ShowcaseApp.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { Toaster } from '@/components/ui/sonner';
+import { Button } from '@/components/ui/button';
+import { ShowcaseShaderGraph } from './ShowcaseShaderGraph';
+import { ShowcaseParticlePlayground } from './ShowcaseParticlePlayground';
+
+type ShowcaseRoute = 'home' | 'shader-graph' | 'particle-system-playground';
+
+function currentRoute(): ShowcaseRoute {
+  const path = window.location.pathname.replace(/^\/+|\/+$/g, '');
+  if (path === 'shader-graph') return 'shader-graph';
+  if (path === 'particle-system-playground') return 'particle-system-playground';
+  return 'home';
+}
+
+function navigate(route: ShowcaseRoute) {
+  const path = route === 'home' ? '/' : `/${route}`;
+  window.history.pushState({}, '', path);
+  window.dispatchEvent(new PopStateEvent('popstate'));
+}
+
+function Home() {
+  return (
+    <main className="grid min-h-0 flex-1 place-items-center overflow-auto px-6 py-10">
+      <div className="grid w-full max-w-5xl gap-8">
+        <section className="grid gap-4">
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Feather Showcase</p>
+          <h1 className="max-w-3xl text-4xl font-semibold tracking-tight">
+            Browser-native authoring tools for LÖVE shaders and particles.
+          </h1>
+          <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
+            Try Feather’s Shader Graph and Particle System Playground without connecting a game. The standalone build
+            keeps authoring local and sends preview payloads to an isolated love.js frame.
+          </p>
+        </section>
+        <section className="grid gap-3 md:grid-cols-2">
+          <button
+            className="grid gap-3 rounded-md border bg-card p-5 text-left transition-colors hover:bg-muted/40"
+            onClick={() => navigate('shader-graph')}
+          >
+            <span className="text-lg font-semibold">Shader Graph</span>
+            <span className="text-sm text-muted-foreground">
+              Build GLSL visually, write custom function nodes, upload textures, inspect generated shader source, and
+              export editable graph files.
+            </span>
+          </button>
+          <button
+            className="grid gap-3 rounded-md border bg-card p-5 text-left transition-colors hover:bg-muted/40"
+            onClick={() => navigate('particle-system-playground')}
+          >
+            <span className="text-lg font-semibold">Particle Playground</span>
+            <span className="text-sm text-muted-foreground">
+              Tune LÖVE particle systems from presets, edit motion and color curves, preview locally, and copy demo
+              settings.
+            </span>
+          </button>
+        </section>
+      </div>
+    </main>
+  );
+}
+
+export function ShowcaseApp() {
+  const [route, setRoute] = useState<ShowcaseRoute>(currentRoute);
+
+  useEffect(() => {
+    const onPopState = () => setRoute(currentRoute());
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  const onInstallClick = () => {
+    window.open('https://github.com/Kyonru/feather', '_blank');
+  };
+
+  return (
+    <div className="flex h-screen min-h-0 flex-col bg-background text-foreground">
+      <header className="flex min-h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
+        <div className="flex flex-row">
+          <button className="text-sm font-semibold" onClick={() => navigate('home')}>
+            Feather Showcase
+          </button>
+          <Button
+            onClick={onInstallClick}
+            variant="outline"
+            className="hidden h-5 px-1.5 ml-2 text-[10px] md:inline-flex"
+          >
+            Install Feather
+          </Button>
+        </div>
+        <nav className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant={route === 'shader-graph' ? 'default' : 'ghost'}
+            className="h-8 text-xs"
+            onClick={() => navigate('shader-graph')}
+          >
+            Shader Graph
+          </Button>
+          <Button
+            size="sm"
+            variant={route === 'particle-system-playground' ? 'default' : 'ghost'}
+            className="h-8 text-xs"
+            onClick={() => navigate('particle-system-playground')}
+          >
+            Particle Playground
+          </Button>
+        </nav>
+      </header>
+      {route === 'shader-graph' ? (
+        <ShowcaseShaderGraph />
+      ) : route === 'particle-system-playground' ? (
+        <ShowcaseParticlePlayground />
+      ) : (
+        <Home />
+      )}
+      <Toaster richColors />
+    </div>
+  );
+}
diff --git a/src/showcase/ShowcaseParticlePlayground.tsx b/src/showcase/ShowcaseParticlePlayground.tsx
new file mode 100644
index 00000000..dd1cc46b
--- /dev/null
+++ b/src/showcase/ShowcaseParticlePlayground.tsx
@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import ParticleSystemPlaygroundPage from '@/pages/particle-system-playground';
+import { LoveJsPreview } from './LoveJsPreview';
+import { useLocalParticlePlayground } from './use-local-particle-playground';
+
+export function ShowcaseParticlePlayground() {
+  const playground = useLocalParticlePlayground();
+  const payload = useMemo(
+    () => ({
+      tool: 'particle-system-playground',
+      activeComposite: playground.activeComposite,
+      activeSystem: playground.activeSystem,
+      composite: playground.composite,
+    }),
+    [playground.activeComposite, playground.activeSystem, playground.composite],
+  );
+
+  return (
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden">
+      <ParticleSystemPlaygroundPage playgroundOverride={playground} standalone />
+      <LoveJsPreview
+        floating
+        title="Particle Preview"
+        description="The standalone build posts local particle settings into this isolated preview frame."
+        payload={payload}
+      />
+    </div>
+  );
+}
diff --git a/src/showcase/ShowcaseShaderGraph.tsx b/src/showcase/ShowcaseShaderGraph.tsx
new file mode 100644
index 00000000..e869e4ef
--- /dev/null
+++ b/src/showcase/ShowcaseShaderGraph.tsx
@@ -0,0 +1,293 @@
+import { ReactFlowProvider } from '@xyflow/react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { DownloadIcon, FolderOpenIcon, Trash2Icon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useShaderGraphStore } from '@/store/shader-graph';
+import type { GeneratedGlsl, PlaygroundTarget, ShaderEdge, ShaderNodeInstance, ShaderParameter, ShaderSubgraph } from '@/types/shader-graph';
+import { NodePalette } from '@/pages/shader-graph/NodePalette';
+import { ShaderCanvas } from '@/pages/shader-graph/ShaderCanvas';
+import { NodeInspector } from '@/pages/shader-graph/NodeInspector';
+import { CodePreview } from '@/pages/shader-graph/CodePreview';
+import { codegen } from '@/pages/shader-graph/codegen';
+import { SHADER_GRAPH_PRESETS } from '@/pages/shader-graph/presets';
+import { cloneGraphFragment } from '@/pages/shader-graph/graphUtils';
+import { LoveJsPreview } from './LoveJsPreview';
+
+const FILE_VERSION = 2;
+const FILE_EXTENSION = 'feathershgh';
+const FIRST_OPEN_PRESET_ID = 'water-shimmer';
+
+type FeatherShaderGraphFile = {
+  type: 'feather.shader-graph';
+  version: number;
+  exportedAt: string;
+  shaderName: string;
+  playgroundTarget: PlaygroundTarget | null;
+  nodes: ShaderNodeInstance[];
+  edges: ShaderEdge[];
+  subgraphs: ShaderSubgraph[];
+  lastGeneratedGlsl?: GeneratedGlsl | null;
+};
+
+function defaultFilename(shaderName: string) {
+  const base =
+    shaderName
+      .trim()
+      .replace(/[^a-zA-Z0-9._-]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'shader-graph';
+  return `${base}.${FILE_EXTENSION}`;
+}
+
+function parseShaderGraphFile(raw: string): FeatherShaderGraphFile {
+  const parsed = JSON.parse(raw) as Partial<FeatherShaderGraphFile>;
+  if (parsed.type !== 'feather.shader-graph' || (parsed.version !== FILE_VERSION && parsed.version !== 1)) {
+    throw new Error('Unsupported shader graph file');
+  }
+  if (!Array.isArray(parsed.nodes) || !Array.isArray(parsed.edges)) {
+    throw new Error('Shader graph file is missing nodes or edges');
+  }
+  return {
+    type: 'feather.shader-graph',
+    version: FILE_VERSION,
+    exportedAt: typeof parsed.exportedAt === 'string' ? parsed.exportedAt : new Date().toISOString(),
+    shaderName: typeof parsed.shaderName === 'string' ? parsed.shaderName : 'my-shader',
+    playgroundTarget: parsed.playgroundTarget ?? null,
+    nodes: parsed.nodes,
+    edges: parsed.edges,
+    subgraphs: Array.isArray(parsed.subgraphs) ? parsed.subgraphs : [],
+    lastGeneratedGlsl: parsed.lastGeneratedGlsl ?? null,
+  };
+}
+
+export function ShowcaseShaderGraph() {
+  const nodes = useShaderGraphStore((state) => state.nodes);
+  const edges = useShaderGraphStore((state) => state.edges);
+  const subgraphs = useShaderGraphStore((state) => state.subgraphs);
+  const shaderName = useShaderGraphStore((state) => state.shaderName);
+  const playgroundTarget = useShaderGraphStore((state) => state.playgroundTarget);
+  const lastGeneratedGlsl = useShaderGraphStore((state) => state.lastGeneratedGlsl);
+  const hasInitializedExample = useShaderGraphStore((state) => state.hasInitializedExample);
+  const loadGraph = useShaderGraphStore((state) => state.loadGraph);
+  const addNodesAndEdges = useShaderGraphStore((state) => state.addNodesAndEdges);
+  const isDirty = useShaderGraphStore((state) => state.isDirty);
+  const markClean = useShaderGraphStore((state) => state.markClean);
+  const setHasInitializedExample = useShaderGraphStore((state) => state.setHasInitializedExample);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewParams, setPreviewParams] = useState<{
+    shape: string;
+    color: string;
+    baseTexture: { filename: string; dataBase64: string } | null;
+    parameters: ShaderParameter[];
+  }>({ shape: 'circle', color: '#ffffff', baseTexture: null, parameters: [] });
+
+  const handlePreviewParamsChange = useCallback(
+    (params: { shape: string; color: string; baseTexture: { filename: string; dataBase64: string } | null; parameters: ShaderParameter[] }) => {
+      setPreviewParams(params);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (hasInitializedExample) return;
+    if (nodes.length > 0 || edges.length > 0) {
+      setHasInitializedExample(true);
+      return;
+    }
+    const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === FIRST_OPEN_PRESET_ID);
+    if (!preset) {
+      setHasInitializedExample(true);
+      return;
+    }
+    loadGraph({
+      nodes: preset.nodes,
+      edges: preset.edges,
+      shaderName: preset.shaderName,
+      playgroundTarget,
+    });
+  }, [edges.length, hasInitializedExample, loadGraph, nodes.length, playgroundTarget, setHasInitializedExample]);
+
+  const glsl = useMemo(() => lastGeneratedGlsl ?? codegen(nodes, edges, subgraphs), [edges, lastGeneratedGlsl, nodes, subgraphs]);
+
+  function importRaw(raw: string) {
+    const parsed = parseShaderGraphFile(raw);
+    loadGraph({
+      nodes: parsed.nodes,
+      edges: parsed.edges,
+      subgraphs: parsed.subgraphs,
+      shaderName: parsed.shaderName,
+      playgroundTarget: parsed.playgroundTarget,
+    });
+    toast.success('Shader graph imported');
+  }
+
+  function exportGraph() {
+    const payload: FeatherShaderGraphFile = {
+      type: 'feather.shader-graph',
+      version: FILE_VERSION,
+      exportedAt: new Date().toISOString(),
+      shaderName,
+      playgroundTarget,
+      nodes,
+      edges,
+      subgraphs,
+      lastGeneratedGlsl,
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = defaultFilename(shaderName);
+    a.click();
+    URL.revokeObjectURL(url);
+    markClean();
+  }
+
+  function clearGraph() {
+    if ((nodes.length > 0 || edges.length > 0) && !window.confirm('Clear the current shader graph?')) return;
+    loadGraph({
+      nodes: [],
+      edges: [],
+      subgraphs: [],
+      shaderName,
+      playgroundTarget,
+    });
+    toast.success('Shader graph cleared');
+  }
+
+  function loadPreset(presetId: string) {
+    const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    if (isDirty() && !window.confirm('Replace the current shader graph with this preset? Unsaved changes will be lost.')) return;
+    loadGraph({
+      nodes: preset.nodes,
+      edges: preset.edges,
+      subgraphs: [],
+      shaderName: preset.shaderName,
+      playgroundTarget,
+    });
+    toast.success(`Loaded ${preset.name}`);
+  }
+
+  function insertPreset(presetId: string) {
+    const preset = SHADER_GRAPH_PRESETS.find((item) => item.id === presetId);
+    if (!preset) return;
+    const maxX = nodes.length ? Math.max(...nodes.map((node) => node.position.x)) : 0;
+    const cloned = cloneGraphFragment(preset.nodes, preset.edges, { x: maxX + 260, y: 80 });
+    addNodesAndEdges(cloned.nodes, cloned.edges, cloned.firstNodeId);
+    toast.success(`Inserted ${preset.name}`);
+  }
+
+  return (
+    <ReactFlowProvider>
+      <div className="relative flex h-full min-h-0 flex-col overflow-hidden">
+        <header className="flex min-h-12 shrink-0 items-center justify-between gap-3 border-b px-3 py-2">
+          <div>
+            <h1 className="text-sm font-semibold">Shader Graph</h1>
+            <p className="text-xs text-muted-foreground">Standalone browser authoring for Feather GLSL graphs</p>
+          </div>
+          <div className="flex flex-wrap justify-end gap-2">
+            <Select onValueChange={loadPreset}>
+              <SelectTrigger className="h-8 w-48 text-xs">
+                <SelectValue placeholder="Load preset" />
+              </SelectTrigger>
+              <SelectContent>
+                {SHADER_GRAPH_PRESETS.map((preset) => (
+                  <SelectItem key={preset.id} value={preset.id} title={preset.description}>
+                    {preset.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select onValueChange={insertPreset}>
+              <SelectTrigger className="h-8 w-48 text-xs">
+                <SelectValue placeholder="Insert preset" />
+              </SelectTrigger>
+              <SelectContent>
+                {SHADER_GRAPH_PRESETS.map((preset) => (
+                  <SelectItem key={preset.id} value={preset.id} title={preset.description}>
+                    {preset.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={() => fileInputRef.current?.click()}>
+              <FolderOpenIcon className="size-4" />
+              Import
+            </Button>
+            <Button size="sm" variant="outline" className="h-8 gap-2 text-xs" onClick={clearGraph}>
+              <Trash2Icon className="size-4" />
+              Clear
+            </Button>
+            <Button size="sm" className="h-8 gap-2 text-xs" onClick={exportGraph}>
+              <DownloadIcon className="size-4" />
+              Export
+            </Button>
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={`.${FILE_EXTENSION},application/json`}
+            className="hidden"
+            onChange={(event) => {
+              const file = event.target.files?.[0];
+              event.target.value = '';
+              if (!file) return;
+              file.text().then(importRaw).catch((error: unknown) => {
+                toast.error(error instanceof Error ? error.message : 'Failed to import shader graph');
+              });
+            }}
+          />
+        </header>
+
+        <ResizablePanelGroup orientation="horizontal" className="h-0 min-h-0 flex-1 overflow-hidden">
+          <ResizablePanel defaultSize="16%" minSize="12%" maxSize="25%" className="flex flex-col border-r">
+            <div className="border-b px-3 py-2 shrink-0">
+              <span className="text-sm font-semibold">Nodes</span>
+            </div>
+            <NodePalette />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="49%" minSize="30%" className="min-w-0 overflow-hidden">
+            <ShaderCanvas />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="35%" minSize="24%" maxSize="48%" className="flex flex-col border-l">
+            <ResizablePanelGroup orientation="vertical" className="h-full min-h-0">
+              <ResizablePanel defaultSize="36%" minSize="20%" className="flex flex-col overflow-hidden">
+                <div className="border-b px-3 py-2 shrink-0">
+                  <span className="text-sm font-semibold">Inspector</span>
+                </div>
+                <ScrollArea className="flex-1 min-h-0">
+                  <NodeInspector />
+                </ScrollArea>
+              </ResizablePanel>
+              <ResizableHandle withHandle />
+              <ResizablePanel defaultSize="64%" minSize="24%" className="flex flex-col overflow-hidden">
+                <CodePreview standalone onPreviewParamsChange={handlePreviewParamsChange} />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+        <LoveJsPreview
+          floating
+          title="Shader Preview"
+          description="The standalone build posts generated GLSL into this isolated preview frame."
+          payload={{
+            tool: 'shader-graph',
+            shaderName,
+            pixel: glsl.pixel,
+            vertex: glsl.vertex,
+            previewShape: previewParams.shape,
+            previewColor: previewParams.color,
+            baseTexture: previewParams.baseTexture,
+            parameters: previewParams.parameters,
+          }}
+        />
+      </div>
+    </ReactFlowProvider>
+  );
+}
diff --git a/src/showcase/main.tsx b/src/showcase/main.tsx
new file mode 100644
index 00000000..64d3dde4
--- /dev/null
+++ b/src/showcase/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { AppProvider } from '@/providers';
+import { ShowcaseApp } from './ShowcaseApp';
+import '@/App.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <AppProvider>
+      <ShowcaseApp />
+    </AppProvider>
+  </React.StrictMode>,
+);
diff --git a/src/showcase/use-local-particle-playground.ts b/src/showcase/use-local-particle-playground.ts
new file mode 100644
index 00000000..7a66fdbb
--- /dev/null
+++ b/src/showcase/use-local-particle-playground.ts
@@ -0,0 +1,261 @@
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import type {
+  ParticleSystemPlaygroundCompositeData,
+  ParticleSystemPlaygroundData,
+  ParticleSystemPlaygroundSystem,
+  ParticleSystemPlaygroundTemplate,
+} from '@/types/particle-system-playground';
+
+type ParamValue = string | number | boolean;
+
+function system(index: number, title: string, template: ParticleSystemPlaygroundTemplate): ParticleSystemPlaygroundSystem {
+  const texturePreset = template === 'smoke' ? 'light' : template === 'sparkles' ? 'star' : 'circle';
+  return {
+    index,
+    title,
+    blendMode: template === 'sparkles' ? 'add' : 'alpha',
+    x: 0,
+    y: 0,
+    kickStartSteps: 0,
+    kickStartDt: 1 / 60,
+    emitAtStart: template === 'explosion' ? 160 : 0,
+    texturePath: '',
+    texturePreset,
+    textureFilename: `${texturePreset}.png`,
+    shaderPath: '',
+    shaderFilename: '',
+    shaderSource: '',
+    exportReady: true,
+    properties: {
+      emissionRate: template === 'smoke' ? 45 : template === 'sparkles' ? 70 : 100,
+      emitterLifetime: -1,
+      particleLifetimeMin: template === 'smoke' ? 1.2 : 0.35,
+      particleLifetimeMax: template === 'smoke' ? 3.2 : template === 'sparkles' ? 0.9 : 1.3,
+      direction: -Math.PI / 2,
+      spread: template === 'sparkles' ? Math.PI * 2 : Math.PI / 3,
+      speedMin: template === 'smoke' ? 12 : template === 'sparkles' ? 80 : 40,
+      speedMax: template === 'smoke' ? 45 : template === 'sparkles' ? 220 : 140,
+      linearAccelXMin: template === 'smoke' ? -8 : 0,
+      linearAccelYMin: template === 'smoke' ? -18 : 0,
+      linearAccelXMax: template === 'smoke' ? 8 : 0,
+      linearAccelYMax: template === 'smoke' ? -55 : 0,
+      radialAccelMin: 0,
+      radialAccelMax: 0,
+      tangentialAccelMin: 0,
+      tangentialAccelMax: 0,
+      linearDampingMin: template === 'sparkles' ? 1.5 : 0,
+      linearDampingMax: template === 'sparkles' ? 3 : 0,
+      sizes: template === 'smoke' ? '0.35, 1.2, 2.2' : template === 'sparkles' ? '0.45, 0.1' : '1, 0',
+      sizeVariation: template === 'smoke' ? 0.6 : template === 'sparkles' ? 0.8 : 0,
+      rotationMin: 0,
+      rotationMax: 0,
+      relativeRotation: false,
+      spinMin: 0,
+      spinMax: 0,
+      spinVariation: 0,
+      offsetX: 0,
+      offsetY: 0,
+      insertMode: 'top',
+      colors:
+        template === 'smoke'
+          ? '0.35, 0.35, 0.38, 0.45, 0.15, 0.15, 0.17, 0'
+          : template === 'sparkles'
+            ? '1, 0.95, 0.55, 1, 0.35, 0.75, 1, 0'
+            : '1, 0.5, 0.1, 1, 1, 0.1, 0, 0',
+      emissionAreaDist: 'none',
+      emissionAreaDx: 0,
+      emissionAreaDy: 0,
+      emissionAreaAngle: 0,
+      emissionAreaRelative: false,
+      count: 100,
+      bufferSize: 1000,
+    },
+  };
+}
+
+function composite(template: ParticleSystemPlaygroundTemplate): ParticleSystemPlaygroundCompositeData {
+  const systems =
+    template === 'explosion'
+      ? [system(1, 'Core Blast', 'explosion'), system(2, 'Smoke Bloom', 'smoke'), system(3, 'Sparks', 'sparkles')]
+      : [system(1, template === 'smoke' ? 'Smoke' : template === 'sparkles' ? 'Sparkles' : 'Flame', template)];
+  return {
+    compositeType: 'scratch',
+    x: 400,
+    y: 300,
+    movement: { pattern: 'none', radius: 80, radiusX: 120, radiusY: 60, speed: 1, scale: 1 },
+    systems,
+  };
+}
+
+function updateSystemDraft(systemDraft: ParticleSystemPlaygroundSystem, key: string, value: ParamValue): ParticleSystemPlaygroundSystem {
+  if (key === 'title') return { ...systemDraft, title: String(value) };
+  if (key === 'blendMode') return { ...systemDraft, blendMode: String(value) };
+  if (key === 'emitterOffsetX') return { ...systemDraft, x: Number(value) };
+  if (key === 'emitterOffsetY') return { ...systemDraft, y: Number(value) };
+  if (key === 'kickStartSteps') return { ...systemDraft, kickStartSteps: Number(value) };
+  if (key === 'kickStartDt') return { ...systemDraft, kickStartDt: Number(value) };
+  if (key === 'emitAtStart') return { ...systemDraft, emitAtStart: Number(value) };
+  if (key === 'shaderSource') return { ...systemDraft, shaderSource: String(value), shaderFilename: 'showcase-shader.glsl' };
+  return { ...systemDraft, properties: { ...systemDraft.properties, [key]: value } };
+}
+
+export function useLocalParticlePlayground() {
+  const [data, setData] = useState<ParticleSystemPlaygroundData>({
+    type: 'particle-system-playground',
+    composites: ['Showcase Fire'],
+    activeComposite: 'Showcase Fire',
+    activeSystem: 1,
+    data: composite('fire'),
+  });
+
+  const activeSystem = useMemo(
+    () => data.data?.systems.find((item) => item.index === data.activeSystem) ?? null,
+    [data.activeSystem, data.data?.systems],
+  );
+
+  function updateActiveParam(key: string, value: ParamValue) {
+    setData((current) => {
+      if (!current.data) return current;
+      return {
+        ...current,
+        data: {
+          ...current.data,
+          systems: current.data.systems.map((item) =>
+            item.index === current.activeSystem ? updateSystemDraft(item, key, value) : item,
+          ),
+        },
+      };
+    });
+  }
+
+  function updateParam(key: string, value: ParamValue) {
+    setData((current) => {
+      if (!current.data) return current;
+      if (key === 'compositeX') return { ...current, data: { ...current.data, x: Number(value) } };
+      if (key === 'compositeY') return { ...current, data: { ...current.data, y: Number(value) } };
+      if (key.startsWith('movement.')) {
+        return {
+          ...current,
+          data: {
+            ...current.data,
+            movement: { ...current.data.movement, [key.slice('movement.'.length)]: value },
+          },
+        };
+      }
+      return current;
+    });
+  }
+
+  function createComposite(name?: string, template: ParticleSystemPlaygroundTemplate = 'fire') {
+    const nextName = name?.trim() || `Showcase ${data.composites.length + 1}`;
+    setData({
+      type: 'particle-system-playground',
+      composites: [...data.composites, nextName],
+      activeComposite: nextName,
+      activeSystem: 1,
+      data: composite(template),
+    });
+  }
+
+  return {
+    plugin: { id: 'particle-system-playground', disabled: false, incompatible: false },
+    available: true,
+    enabled: true,
+    data,
+    composites: data.composites,
+    activeComposite: data.activeComposite,
+    activeSystemIndex: data.activeSystem,
+    composite: data.data,
+    activeSystem,
+    shaderError: '',
+    updateActiveParam,
+    updateParam,
+    sendAction: () => Promise.resolve(),
+    refreshAfterAction: () => undefined,
+    selectComposite: (name: string) => setData((current) => ({ ...current, activeComposite: name })),
+    selectSystem: (index: number) => setData((current) => ({ ...current, activeSystem: index })),
+    createComposite,
+    deleteComposite: () => toast.info('The showcase keeps one demo composite available.'),
+    addSystem: () =>
+      setData((current) => {
+        if (!current.data) return current;
+        const nextIndex = Math.max(0, ...current.data.systems.map((item) => item.index)) + 1;
+        return {
+          ...current,
+          activeSystem: nextIndex,
+          data: { ...current.data, systems: [...current.data.systems, system(nextIndex, `Emitter ${nextIndex}`, 'sparkles')] },
+        };
+      }),
+    removeSystem: (systemIndex: number) =>
+      setData((current) => {
+        if (!current.data || current.data.systems.length <= 1) return current;
+        const systems = current.data.systems.filter((item) => item.index !== systemIndex);
+        return { ...current, activeSystem: systems[0]?.index ?? 1, data: { ...current.data, systems } };
+      }),
+    reorderSystem: (fromIndex: number, toIndex: number) =>
+      setData((current) => {
+        if (!current.data) return current;
+        const systems = [...current.data.systems];
+        const fromPos = systems.findIndex((s) => s.index === fromIndex);
+        const toPos = systems.findIndex((s) => s.index === toIndex);
+        if (fromPos === -1 || toPos === -1 || fromPos === toPos) return current;
+        const [moved] = systems.splice(fromPos, 1);
+        systems.splice(toPos, 0, moved);
+        return { ...current, data: { ...current.data, systems } };
+      }),
+    emit: () => toast.success('Emit sent to the showcase preview'),
+    reset: () => toast.success('Preview reset'),
+    kickStart: () => toast.success('Kick start sent to the showcase preview'),
+    setTexturePreset: (preset: string) => {
+      setData((current) => {
+        if (!current.data) return current;
+        return {
+          ...current,
+          data: {
+            ...current.data,
+            systems: current.data.systems.map((item) =>
+              item.index === current.activeSystem
+                ? { ...item, texturePreset: preset, texturePath: '', textureFilename: `${preset}.png`, exportReady: true }
+                : item,
+            ),
+          },
+        };
+      });
+    },
+    setTexturePath: (texturePath: string) =>
+      setData((current) => {
+        if (!current.data) return current;
+        return {
+          ...current,
+          data: {
+            ...current.data,
+            systems: current.data.systems.map((item) =>
+              item.index === current.activeSystem
+                ? {
+                    ...item,
+                    texturePath,
+                    texturePreset: '',
+                    textureFilename: texturePath.split(/[\\/]/).pop() || 'texture.png',
+                    exportReady: true,
+                  }
+                : item,
+            ),
+          },
+        };
+      }),
+    setTextureFromUpload: (filename: string) => {
+      toast.success(`Texture loaded for preview: ${filename}`);
+      return Promise.resolve();
+    },
+    setShader: (params: Record<string, ParamValue>) => {
+      if (typeof params.shaderSource === 'string') updateActiveParam('shaderSource', params.shaderSource);
+      toast.success('Shader applied to showcase preview');
+    },
+    exportCode: () => {
+      navigator.clipboard.writeText(JSON.stringify(data.data, null, 2)).catch(() => {});
+      toast.success('Copied showcase particle data');
+    },
+    exportZip: () => toast.info('ZIP export is available in the Feather desktop app.'),
+  };
+}
diff --git a/src/store/shader-graph.ts b/src/store/shader-graph.ts
index 5bc2e390..1f0d2f04 100644
--- a/src/store/shader-graph.ts
+++ b/src/store/shader-graph.ts
@@ -1,44 +1,65 @@
 import type { Node, Edge } from '@xyflow/react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import type { ShaderNodeData, PlaygroundTarget, GeneratedGlsl } from '@/types/shader-graph';
+import type { ShaderNodeData, PlaygroundTarget, GeneratedGlsl, ShaderTextureUpload, ShaderSubgraph } from '@/types/shader-graph';
 
 type ValidationStatus = 'idle' | 'validating' | 'ok' | 'error';
 
 type GraphSnapshot = {
   nodes: Node<ShaderNodeData>[];
   edges: Edge[];
+  subgraphs: ShaderSubgraph[];
 };
 
 type ShaderGraphStore = {
   nodes: Node<ShaderNodeData>[];
   edges: Edge[];
+  subgraphs: ShaderSubgraph[];
   undoStack: GraphSnapshot[];
   redoStack: GraphSnapshot[];
   selectedNodeId: string | null;
   selectedEdgeId: string | null;
+  activeSubgraphId: string | null;
+  subgraphBreadcrumb: string[];
   shaderName: string;
   playgroundTarget: PlaygroundTarget | null;
+  textureUploads: Record<string, ShaderTextureUpload>;
   lastGeneratedGlsl: GeneratedGlsl | null;
   validationStatus: ValidationStatus;
   validationErrors: { pixelError?: string; vertexError?: string };
   hasInitializedExample: boolean;
+  cleanGraphHash: string;
 
   setNodes: (nodes: Node<ShaderNodeData>[]) => void;
   setEdges: (edges: Edge[]) => void;
+  setSubgraphs: (subgraphs: ShaderSubgraph[]) => void;
   addNode: (node: Node<ShaderNodeData>) => void;
+  addNodesAndEdges: (nodes: Node<ShaderNodeData>[], edges: Edge[], selectedNodeId?: string | null) => void;
+  replaceSelectionWithSubgraph: (input: {
+    subgraph: ShaderSubgraph;
+    nodes: Node<ShaderNodeData>[];
+    edges: Edge[];
+    selectedNodeId: string;
+  }) => void;
   removeNode: (id: string) => void;
   removeEdge: (id: string) => void;
   updateNodeData: (id: string, patch: Partial<ShaderNodeData>) => void;
+  unlinkNode: (id: string) => void;
   selectNode: (id: string | null) => void;
   selectEdge: (id: string | null) => void;
+  enterSubgraph: (id: string) => void;
+  exitSubgraph: () => void;
   setShaderName: (name: string) => void;
   setPlaygroundTarget: (target: PlaygroundTarget | null) => void;
+  setTextureUpload: (nodeId: string, upload: ShaderTextureUpload) => void;
+  clearTextureUpload: (nodeId: string) => void;
   setLastGlsl: (glsl: GeneratedGlsl | null) => void;
   setValidationStatus: (status: ValidationStatus) => void;
   setValidationErrors: (errors: ShaderGraphStore['validationErrors']) => void;
   setHasInitializedExample: (hasInitializedExample: boolean) => void;
-  loadGraph: (graph: { nodes: Node<ShaderNodeData>[]; edges: Edge[]; shaderName?: string; playgroundTarget?: PlaygroundTarget | null }) => void;
+  markClean: () => void;
+  isDirty: () => boolean;
+  loadGraph: (graph: { nodes: Node<ShaderNodeData>[]; edges: Edge[]; subgraphs?: ShaderSubgraph[]; shaderName?: string; playgroundTarget?: PlaygroundTarget | null }) => void;
   undo: () => void;
   redo: () => void;
   canUndo: () => boolean;
@@ -46,23 +67,165 @@ type ShaderGraphStore = {
 };
 
 const HISTORY_LIMIT = 100;
+let storeIdCounter = Date.now();
 
-function snapshot(state: Pick<ShaderGraphStore, 'nodes' | 'edges'>): GraphSnapshot {
-  return { nodes: state.nodes, edges: state.edges };
+function nextStoreGraphId(prefix: string): string {
+  storeIdCounter += 1;
+  return `${prefix}-${storeIdCounter}`;
+}
+
+function graphHash(state: Pick<ShaderGraphStore, 'nodes' | 'edges' | 'subgraphs'>): string {
+  return JSON.stringify({ nodes: state.nodes, edges: state.edges, subgraphs: state.subgraphs });
+}
+
+function snapshot(state: Pick<ShaderGraphStore, 'nodes' | 'edges' | 'subgraphs'>): GraphSnapshot {
+  return { nodes: state.nodes, edges: state.edges, subgraphs: state.subgraphs };
 }
 
 function sameGraph(a: GraphSnapshot, b: GraphSnapshot): boolean {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 
+function cloneShaderNodeData(data: ShaderNodeData): ShaderNodeData {
+  return {
+    ...data,
+    values: data.values
+      ? Object.fromEntries(Object.entries(data.values).map(([key, value]) => [key, Array.isArray(value) ? [...value] : value]))
+      : undefined,
+    subgraphInputs: data.subgraphInputs?.map((port) => ({ ...port, defaultValue: Array.isArray(port.defaultValue) ? [...port.defaultValue] : port.defaultValue })),
+    subgraphOutputs: data.subgraphOutputs?.map((port) => ({ ...port, defaultValue: Array.isArray(port.defaultValue) ? [...port.defaultValue] : port.defaultValue })),
+  };
+}
+
+function safeSubgraphFunctionName(name: string, id: string): string {
+  const base = name.trim().replace(/[^a-zA-Z0-9_]+/g, '_').replace(/^_+|_+$/g, '') || 'subgraph';
+  const suffix = id.replace(/[^a-zA-Z0-9_]+/g, '_');
+  return `feather_subgraph_${base}_${suffix}`;
+}
+
+function clonePort(port: ShaderSubgraph['inputs'][number]) {
+  return {
+    ...port,
+    defaultValue: Array.isArray(port.defaultValue) ? [...port.defaultValue] : port.defaultValue,
+  };
+}
+
+type SubgraphCloneResult = {
+  root: ShaderSubgraph;
+  subgraphs: ShaderSubgraph[];
+};
+
+function cloneSubgraphTree(
+  rootSubgraph: ShaderSubgraph,
+  allSubgraphs: ShaderSubgraph[],
+  name = rootSubgraph.name,
+): SubgraphCloneResult {
+  const subgraphMap = new Map(allSubgraphs.map((subgraph) => [subgraph.id, subgraph]));
+  const clonedBySourceId = new Map<string, ShaderSubgraph>();
+
+  const cloneOne = (source: ShaderSubgraph, nextName = source.name): ShaderSubgraph => {
+    const existing = clonedBySourceId.get(source.id);
+    if (existing) return existing;
+
+    const id = nextStoreGraphId('subgraph');
+    const idMap = new Map(source.nodes.map((node) => [node.id, nextStoreGraphId('node')]));
+    const mapNodeId = (nodeId: string) => idMap.get(nodeId) ?? nodeId;
+    const clone: ShaderSubgraph = {
+      ...source,
+      id,
+      name: nextName,
+      functionName: safeSubgraphFunctionName(nextName, id),
+      nodes: [],
+      edges: [],
+      inputs: source.inputs.map(clonePort),
+      outputs: source.outputs.map(clonePort),
+      inputMappings: Object.fromEntries(
+        Object.entries(source.inputMappings).map(([portId, mapping]) => [portId, { ...mapping, nodeId: mapNodeId(mapping.nodeId) }]),
+      ),
+      outputMappings: Object.fromEntries(
+        Object.entries(source.outputMappings).map(([portId, mapping]) => [portId, { ...mapping, nodeId: mapNodeId(mapping.nodeId) }]),
+      ),
+    };
+    clonedBySourceId.set(source.id, clone);
+
+    clone.nodes = source.nodes.map((node) => {
+      const data = cloneShaderNodeData(node.data);
+      if (data.nodeType === 'SubgraphInstance' && typeof data.subgraphId === 'string') {
+        const nestedSource = subgraphMap.get(data.subgraphId);
+        if (nestedSource) {
+          const nestedClone = cloneOne(nestedSource);
+          data.subgraphId = nestedClone.id;
+          data.subgraphInputs = nestedClone.inputs.map(clonePort);
+          data.subgraphOutputs = nestedClone.outputs.map(clonePort);
+        }
+      }
+      return {
+        ...node,
+        id: mapNodeId(node.id),
+        selected: false,
+        data,
+      };
+    });
+
+    clone.edges = source.edges.map((edge) => {
+      const sourceId = mapNodeId(edge.source);
+      const targetId = mapNodeId(edge.target);
+      return {
+        ...edge,
+        id: `${sourceId}:${edge.sourceHandle ?? 'out'}->${targetId}:${edge.targetHandle ?? 'in'}`,
+        source: sourceId,
+        target: targetId,
+      };
+    });
+
+    return clone;
+  };
+
+  const root = cloneOne(rootSubgraph, name);
+  return { root, subgraphs: [...clonedBySourceId.values()] };
+}
+
+function activeGraph(state: Pick<ShaderGraphStore, 'nodes' | 'edges' | 'subgraphs' | 'activeSubgraphId'>) {
+  const subgraph = state.activeSubgraphId ? state.subgraphs.find((item) => item.id === state.activeSubgraphId) : null;
+  return subgraph ? { nodes: subgraph.nodes, edges: subgraph.edges } : { nodes: state.nodes, edges: state.edges };
+}
+
+function patchActiveGraph(
+  state: ShaderGraphStore,
+  graph: Partial<Pick<GraphSnapshot, 'nodes' | 'edges'>>,
+): Pick<ShaderGraphStore, 'nodes' | 'edges' | 'subgraphs'> {
+  if (!state.activeSubgraphId) {
+    return {
+      nodes: graph.nodes ?? state.nodes,
+      edges: graph.edges ?? state.edges,
+      subgraphs: state.subgraphs,
+    };
+  }
+
+  return {
+    nodes: state.nodes,
+    edges: state.edges,
+    subgraphs: state.subgraphs.map((subgraph) =>
+      subgraph.id === state.activeSubgraphId
+        ? {
+          ...subgraph,
+          nodes: graph.nodes ?? subgraph.nodes,
+          edges: graph.edges ?? subgraph.edges,
+        }
+        : subgraph,
+    ),
+  };
+}
+
 function withHistory(
   state: ShaderGraphStore,
-  patch: Partial<Pick<ShaderGraphStore, 'nodes' | 'edges' | 'selectedNodeId' | 'selectedEdgeId'>>,
+  patch: Partial<Pick<ShaderGraphStore, 'nodes' | 'edges' | 'subgraphs' | 'selectedNodeId' | 'selectedEdgeId' | 'textureUploads'>>,
 ) {
   const before = snapshot(state);
   const after = {
     nodes: patch.nodes ?? state.nodes,
     edges: patch.edges ?? state.edges,
+    subgraphs: patch.subgraphs ?? state.subgraphs,
   };
 
   if (sameGraph(before, after)) {
@@ -84,63 +247,191 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
     (set, get) => ({
       nodes: [],
       edges: [],
+      subgraphs: [],
       undoStack: [],
       redoStack: [],
       selectedNodeId: null,
       selectedEdgeId: null,
+      activeSubgraphId: null,
+      subgraphBreadcrumb: [],
       shaderName: 'my-shader',
       playgroundTarget: null,
+      textureUploads: {},
       lastGeneratedGlsl: null,
       validationStatus: 'idle',
       validationErrors: {},
       hasInitializedExample: false,
+      cleanGraphHash: graphHash({ nodes: [], edges: [], subgraphs: [] }),
 
-      setNodes: (nodes) => set((s) => withHistory(s, { nodes })),
-      setEdges: (edges) => set((s) => withHistory(s, { edges })),
-      addNode: (node) => set((s) => withHistory(s, { nodes: [...s.nodes, node] })),
-      removeNode: (id) =>
+      setNodes: (nodes) => set((s) => withHistory(s, patchActiveGraph(s, { nodes }))),
+      setEdges: (edges) => set((s) => withHistory(s, patchActiveGraph(s, { edges }))),
+      setSubgraphs: (subgraphs) => set((s) => withHistory(s, { subgraphs })),
+      addNode: (node) =>
+        set((s) => {
+          const graph = activeGraph(s);
+          return withHistory(s, patchActiveGraph(s, { nodes: [...graph.nodes, node] }));
+        }),
+      addNodesAndEdges: (newNodes, newEdges, selectedNodeId = null) =>
+        set((s) => {
+          const graph = activeGraph(s);
+          return withHistory(s, {
+            ...patchActiveGraph(s, {
+              nodes: [...graph.nodes.map((node) => ({ ...node, selected: false })), ...newNodes],
+              edges: [...graph.edges, ...newEdges],
+            }),
+            selectedNodeId,
+            selectedEdgeId: null,
+          });
+        }),
+      replaceSelectionWithSubgraph: ({ subgraph, nodes, edges, selectedNodeId }) =>
         set((s) =>
           withHistory(s, {
-            nodes: s.nodes.filter((n) => n.id !== id),
-            edges: s.edges.filter((e) => e.source !== id && e.target !== id),
-            selectedNodeId: s.selectedNodeId === id ? null : s.selectedNodeId,
+            ...patchActiveGraph(s, { nodes, edges }),
+            subgraphs: [...s.subgraphs.filter((item) => item.id !== subgraph.id), subgraph],
+            selectedNodeId,
+            selectedEdgeId: null,
           }),
         ),
+      removeNode: (id) =>
+        set((s) => {
+          const graph = activeGraph(s);
+          return withHistory(s, {
+            ...patchActiveGraph(s, {
+              nodes: graph.nodes.filter((n) => n.id !== id),
+              edges: graph.edges.filter((e) => e.source !== id && e.target !== id),
+            }),
+            selectedNodeId: s.selectedNodeId === id ? null : s.selectedNodeId,
+            textureUploads: Object.fromEntries(Object.entries(s.textureUploads).filter(([nodeId]) => nodeId !== id)),
+          });
+        }),
       removeEdge: (id) =>
-        set((s) =>
-          withHistory(s, {
-            edges: s.edges.filter((e) => e.id !== id),
+        set((s) => {
+          const graph = activeGraph(s);
+          return withHistory(s, {
+            ...patchActiveGraph(s, {
+              edges: graph.edges.filter((e) => e.id !== id),
+            }),
             selectedEdgeId: s.selectedEdgeId === id ? null : s.selectedEdgeId,
-          }),
-        ),
+          });
+        }),
       updateNodeData: (id, patch) =>
-        set((s) =>
-          withHistory(s, {
-            nodes: s.nodes.map((n) => (n.id === id ? { ...n, data: { ...n.data, ...patch } } : n)),
-          }),
-        ),
+        set((s) => {
+          const graph = activeGraph(s);
+          const editedNode = graph.nodes.find((n) => n.id === id);
+          const linkedSourceNodeId = typeof editedNode?.data.linkedSourceNodeId === 'string' ? editedNode.data.linkedSourceNodeId : null;
+          const linkedGroupSourceId = linkedSourceNodeId ?? id;
+          const shouldUpdateLinkedGroup =
+            !Object.prototype.hasOwnProperty.call(patch, 'linkedSourceNodeId') &&
+            !Object.prototype.hasOwnProperty.call(patch, 'linkedSourceLabel');
+          return withHistory(s, patchActiveGraph(s, {
+            nodes: graph.nodes.map((n) => {
+              const isEditedNode = n.id === id;
+              const isLinkedGroupNode = shouldUpdateLinkedGroup &&
+                (n.id === linkedGroupSourceId || n.data.linkedSourceNodeId === linkedGroupSourceId);
+              if (!isEditedNode && !isLinkedGroupNode) return n;
+              const nextData = { ...n.data, ...patch };
+              if (shouldUpdateLinkedGroup && n.id !== linkedGroupSourceId && typeof patch.label === 'string') {
+                nextData.linkedSourceLabel = patch.label;
+              }
+              return { ...n, data: nextData };
+            }),
+          }));
+        }),
+      unlinkNode: (id) =>
+        set((s) => {
+          const graph = activeGraph(s);
+          let forkedSubgraphs: ShaderSubgraph[] = [];
+          const activePatch = patchActiveGraph(s, {
+            nodes: graph.nodes.map((node) => {
+              if (node.id !== id) return node;
+              const nextData = cloneShaderNodeData(node.data);
+              if (nextData.nodeType === 'SubgraphInstance' && typeof nextData.subgraphId === 'string') {
+                const sourceSubgraph = s.subgraphs.find((subgraph) => subgraph.id === nextData.subgraphId);
+                if (sourceSubgraph) {
+                  const fork = cloneSubgraphTree(sourceSubgraph, s.subgraphs, String(nextData.label || sourceSubgraph.name));
+                  forkedSubgraphs = fork.subgraphs;
+                  nextData.subgraphId = fork.root.id;
+                  nextData.subgraphInputs = fork.root.inputs.map(clonePort);
+                  nextData.subgraphOutputs = fork.root.outputs.map(clonePort);
+                }
+              }
+              delete nextData.linkedSourceNodeId;
+              delete nextData.linkedSourceLabel;
+              return { ...node, data: nextData };
+            }),
+          });
+          return withHistory(s, {
+            ...activePatch,
+            subgraphs: forkedSubgraphs.length > 0 ? [...activePatch.subgraphs, ...forkedSubgraphs] : activePatch.subgraphs,
+          });
+        }),
       selectNode: (selectedNodeId) => set({ selectedNodeId, selectedEdgeId: null }),
       selectEdge: (selectedEdgeId) => set({ selectedEdgeId, selectedNodeId: null }),
+      enterSubgraph: (id) =>
+        set((s) => ({
+          activeSubgraphId: id,
+          subgraphBreadcrumb: s.activeSubgraphId ? [...s.subgraphBreadcrumb, s.activeSubgraphId] : s.subgraphBreadcrumb,
+          selectedNodeId: null,
+          selectedEdgeId: null,
+        })),
+      exitSubgraph: () =>
+        set((s) => {
+          const parentId = s.subgraphBreadcrumb.at(-1) ?? null;
+          return {
+            activeSubgraphId: parentId,
+            subgraphBreadcrumb: s.subgraphBreadcrumb.slice(0, -1),
+            selectedNodeId: null,
+            selectedEdgeId: null,
+          };
+        }),
       setShaderName: (shaderName) => set({ shaderName }),
       setPlaygroundTarget: (playgroundTarget) => set({ playgroundTarget }),
+      setTextureUpload: (nodeId, upload) =>
+        set((s) => ({
+          textureUploads: {
+            ...s.textureUploads,
+            [nodeId]: upload,
+          },
+        })),
+      clearTextureUpload: (nodeId) =>
+        set((s) => {
+          const next = { ...s.textureUploads };
+          delete next[nodeId];
+          return { textureUploads: next };
+        }),
       setLastGlsl: (lastGeneratedGlsl) => set({ lastGeneratedGlsl }),
       setValidationStatus: (validationStatus) => set({ validationStatus }),
       setValidationErrors: (validationErrors) => set({ validationErrors }),
       setHasInitializedExample: (hasInitializedExample) => set({ hasInitializedExample }),
+      markClean: () => set((s) => ({ cleanGraphHash: graphHash(s), undoStack: [], redoStack: [] })),
+      isDirty: () => {
+        const state = get();
+        return graphHash(state) !== state.cleanGraphHash || state.undoStack.length > 0;
+      },
       loadGraph: (graph) =>
-        set({
-          nodes: graph.nodes,
-          edges: graph.edges,
-          shaderName: graph.shaderName ?? get().shaderName,
-          playgroundTarget: graph.playgroundTarget ?? null,
-          selectedNodeId: null,
-          selectedEdgeId: null,
-          undoStack: [],
-          redoStack: [],
-          lastGeneratedGlsl: null,
-          validationStatus: 'idle',
-          validationErrors: {},
-          hasInitializedExample: true,
+        set(() => {
+          const next = {
+            nodes: graph.nodes,
+            edges: graph.edges,
+            subgraphs: graph.subgraphs ?? [],
+          };
+          return {
+            ...next,
+            shaderName: graph.shaderName ?? get().shaderName,
+            playgroundTarget: graph.playgroundTarget ?? null,
+            selectedNodeId: null,
+            selectedEdgeId: null,
+            activeSubgraphId: null,
+            subgraphBreadcrumb: [],
+            textureUploads: {},
+            undoStack: [],
+            redoStack: [],
+            lastGeneratedGlsl: null,
+            validationStatus: 'idle',
+            validationErrors: {},
+            hasInitializedExample: true,
+            cleanGraphHash: graphHash(next),
+          };
         }),
       undo: () =>
         set((s) => {
@@ -149,10 +440,13 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
           return {
             nodes: previous.nodes,
             edges: previous.edges,
+            subgraphs: previous.subgraphs,
             undoStack: s.undoStack.slice(0, -1),
             redoStack: [...s.redoStack, snapshot(s)].slice(-HISTORY_LIMIT),
             selectedNodeId: null,
             selectedEdgeId: null,
+            activeSubgraphId: null,
+            subgraphBreadcrumb: [],
             lastGeneratedGlsl: null,
             validationStatus: 'idle',
             validationErrors: {},
@@ -165,10 +459,13 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
           return {
             nodes: next.nodes,
             edges: next.edges,
+            subgraphs: next.subgraphs,
             undoStack: [...s.undoStack, snapshot(s)].slice(-HISTORY_LIMIT),
             redoStack: s.redoStack.slice(0, -1),
             selectedNodeId: null,
             selectedEdgeId: null,
+            activeSubgraphId: null,
+            subgraphBreadcrumb: [],
             lastGeneratedGlsl: null,
             validationStatus: 'idle',
             validationErrors: {},
@@ -182,9 +479,11 @@ export const useShaderGraphStore = create<ShaderGraphStore>()(
       partialize: (s) => ({
         nodes: s.nodes,
         edges: s.edges,
+        subgraphs: s.subgraphs,
         shaderName: s.shaderName,
         playgroundTarget: s.playgroundTarget,
         hasInitializedExample: s.hasInitializedExample,
+        cleanGraphHash: s.cleanGraphHash,
       }),
     },
   ),
diff --git a/src/types/shader-graph.ts b/src/types/shader-graph.ts
index 237236be..5e8c85d5 100644
--- a/src/types/shader-graph.ts
+++ b/src/types/shader-graph.ts
@@ -1,16 +1,35 @@
 import type { Node, Edge } from '@xyflow/react';
 
-export type GlslType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'mat4';
+export type GlslType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'mat4' | 'image';
 
-export type PortDef = { id: string; label: string; type: GlslType };
+export type PortDef = {
+  id: string;
+  label: string;
+  type: GlslType;
+  defaultValue?: number | number[];
+  min?: number;
+  max?: number;
+  step?: number;
+};
 
 export const NODE_TYPES = [
+  'CustomFunction',
+  'SubgraphInstance',
   'TextureColor',
+  'TextureInput',
+  'TextureUniformColor',
   'TextureCoords',
   'ScreenCoords',
   'VertexColor',
   'Time',
   'Resolution',
+  'FloatParameter',
+  'Vec2Parameter',
+  'Vec3Parameter',
+  'Vec4Parameter',
+  'ColorParameter',
+  'BooleanParameter',
+  'TextureParameter',
   'FloatConstant',
   'Vec2Constant',
   'Vec4Constant',
@@ -70,11 +89,21 @@ export const NODE_TYPES = [
   'WaveDistort',
   'WaterDisplace',
   'MaskedWaterDisplace',
+  'WaterNoiseUV',
+  'WaterDisplaceV2',
   'Dissolve2D',
   'HitFlash',
   'Vignette',
   'Pixelate',
   'ChromaticAberration',
+  'PixelPoint',
+  'PixelPointGrid',
+  'PixelRay',
+  'PixelRays',
+  'PixelLine',
+  'PixelLines',
+  'PixelCircle',
+  'PixelPolygon',
   'FragmentOutput',
   'VertexPosition',
   'VertexWave2D',
@@ -86,19 +115,128 @@ export const NODE_TYPES = [
   'SplitVec3',
   'Combine2',
   'Combine3',
+  // Math
+  'Sqrt',
+  'Ceil',
+  'Round',
+  'Sign',
+  'Tan',
+  'Log',
+  'Exp',
+  'Atan2',
+  // Complex
+  'ComplexConjugate',
+  'ComplexReciprocal',
+  'ComplexMultiply',
+  'ComplexDivide',
+  'ComplexExp',
+  'ComplexLog',
+  'ComplexPower',
+  // Quaternion
+  'QuaternionInverse',
+  'QuaternionFromEuler',
+  'QuaternionFromAngleAxis',
+  'QuaternionToAngleAxis',
+  'QuaternionFromToRotation',
+  'QuaternionMultiply',
+  'QuaternionRotateVector',
+  'QuaternionSlerp',
+  // Symmetry
+  'ReflectionSymmetry',
+  'RotationSymmetry',
+  'TilingSymmetry',
+  // Random
+  'RandomIntegerRange',
+  'RandomCircle',
+  'RandomSphere',
+  'RandomRotation',
+  'RandomColor',
+  // Vector
+  'AddVec2',
+  'AddVec3',
+  'AddVec4',
+  'SubtractVec2',
+  'SubtractVec3',
+  'SubtractVec4',
+  'MultiplyVec2',
+  'MultiplyVec3',
+  'MultiplyVec4',
+  'DivideVec2',
+  'DivideVec3',
+  'DivideVec4',
+  'CrossVec3',
+  'LerpVec4',
+  'ScaleVec2',
+  'ScaleVec3',
+  'ScaleVec4',
+  // Color
+  'BlendAdd',
+  'BlendScreen',
+  'BlendOverlay',
+  'CompositeAlpha',
+  'Brightness',
+  'GammaCorrect',
+  'LabColorConvert',
+  'LabComplementary',
+  'LabSplitScheme',
+  'LabDualScheme',
+  // Noise
+  'GradientNoise',
+  'FBMNoise',
+  'TruchetTiles',
+  // Pattern
+  'PatternZigZag',
+  'PatternSineWaves',
+  'PatternRoundWaves',
+  'PatternDots',
+  'PatternSpiral',
+  'PatternWhirl',
+  // Halftone
+  'HalftoneMono',
+  'HalftoneColor',
+  // UV
+  'ZoomUV',
+  'FlipUV',
+  // SDF
+  'SDFLine',
+  'SDFCircle',
+  'SDFRect',
+  'SDFPolygon',
+  'SDFSample',
+  'SDFSampleStrip',
+  'SDFBoolean',
+  'SDFSoftBoolean',
 ] as const;
 
 export type NodeType = (typeof NODE_TYPES)[number];
 
-export type NodeCategory = 'Input' | 'Math' | 'Vector' | 'Color' | 'Noise' | 'UV' | 'Effect' | 'Output' | 'Vertex';
+export type NodeCategory = 'Custom' | 'Input' | 'Math' | 'Complex' | 'Quaternion' | 'Symmetry' | 'Random' | 'Vector' | 'Color' | 'Composite' | 'Noise' | 'Pattern' | 'Halftone' | 'Pixel Perfect' | 'UV' | 'Effect' | 'Output' | 'Vertex' | 'SDF';
 
 export type ShaderNodeData = {
   label: string;
   nodeType: NodeType;
   values?: Record<string, number | number[]>;
+  uniformName?: string;
+  subgraphId?: string;
+  subgraphInputs?: PortDef[];
+  subgraphOutputs?: PortDef[];
+  linkedSourceNodeId?: string | null;
+  linkedSourceLabel?: string | null;
   [key: string]: unknown;
 };
 
+export type ShaderSubgraph = {
+  id: string;
+  name: string;
+  functionName: string;
+  nodes: ShaderNodeInstance[];
+  edges: ShaderEdge[];
+  inputs: PortDef[];
+  outputs: PortDef[];
+  inputMappings: Record<string, { nodeId: string; portId: string }>;
+  outputMappings: Record<string, { nodeId: string; portId: string }>;
+};
+
 export type NodeDef = {
   category: NodeCategory;
   label: string;
@@ -117,8 +255,27 @@ export type PlaygroundTarget = {
   systemIndex: number;
 };
 
+export type ShaderTextureUpload = {
+  filename: string;
+  dataBase64: string;
+};
+
+export type ShaderParameter = {
+  nodeId: string;
+  label: string;
+  uniform: string;
+  type: 'float' | 'vec2' | 'vec3' | 'vec4' | 'color' | 'boolean' | 'texture';
+  defaultValue?: number | number[];
+};
+
 export type GeneratedGlsl = {
   pixel: string;
   vertex: string | null;
   hash: string;
+  textures?: Array<{
+    nodeId: string;
+    uniform: string;
+    label: string;
+  }>;
+  parameters?: ShaderParameter[];
 };
diff --git a/vite.showcase.config.ts b/vite.showcase.config.ts
new file mode 100644
index 00000000..a6d4a333
--- /dev/null
+++ b/vite.showcase.config.ts
@@ -0,0 +1,43 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  base: './',
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    outDir: 'dist-showcase',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        index: path.resolve(__dirname, 'showcase.html'),
+      },
+    },
+  },
+  server: {
+    port: 5174,
+    strictPort: true,
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'credentialless',
+      'Content-Security-Policy':
+        "default-src 'self'; script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; connect-src 'self' blob: data:; worker-src 'self' blob:",
+    },
+  },
+  preview: {
+    port: 4174,
+    strictPort: true,
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'credentialless',
+      'Content-Security-Policy':
+        "default-src 'self'; script-src 'self' 'unsafe-eval' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; connect-src 'self' blob: data:; worker-src 'self' blob:",
+    },
+  },
+});