debug-vfx 0.0.7 → 0.1.0

package/dist/index.d.ts

@@ -1,8 +1,5 @@
 import * as THREE from 'three';
 
-declare function renderDebugPanel(values: any, onChange: any): void;
-declare function updateDebugPanel(values: any, onChange: any): void;
-declare function destroyDebugPanel(): void;
 declare const GeometryType: Readonly<{
     NONE: "none";
     BOX: "box";
@@ -19,6 +16,245 @@ declare const GeometryType: Readonly<{
     TETRAHEDRON: "tetrahedron";
     CAPSULE: "capsule";
 }>;
+declare const createGeometry: (type: string, args?: Record<string, number>) => THREE.BufferGeometry | null;
+declare function detectGeometryTypeAndArgs(geo: any): {
+    geometryType: string;
+    geometryArgs: null;
+} | {
+    geometryType: string;
+    geometryArgs: {
+        width: any;
+        height: any;
+        depth: any;
+        widthSegments: any;
+        heightSegments: any;
+        depthSegments: any;
+        radius?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        radialSegments?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radius: any;
+        widthSegments: any;
+        heightSegments: any;
+        width?: undefined;
+        height?: undefined;
+        depth?: undefined;
+        depthSegments?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        radialSegments?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radiusTop: any;
+        radiusBottom: any;
+        height: any;
+        radialSegments: any;
+        heightSegments: any;
+        width?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        depthSegments?: undefined;
+        radius?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radius: any;
+        height: any;
+        radialSegments: any;
+        heightSegments: any;
+        width?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        depthSegments?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radius: any;
+        tube: any;
+        radialSegments: any;
+        tubularSegments: any;
+        width?: undefined;
+        height?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        heightSegments?: undefined;
+        depthSegments?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        width: any;
+        height: any;
+        widthSegments: any;
+        heightSegments: any;
+        depth?: undefined;
+        depthSegments?: undefined;
+        radius?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        radialSegments?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radius: any;
+        segments: any;
+        width?: undefined;
+        height?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        heightSegments?: undefined;
+        depthSegments?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        radialSegments?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        innerRadius: any;
+        outerRadius: any;
+        thetaSegments: any;
+        width?: undefined;
+        height?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        heightSegments?: undefined;
+        depthSegments?: undefined;
+        radius?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        radialSegments?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        detail?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radius: any;
+        detail: any;
+        width?: undefined;
+        height?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        heightSegments?: undefined;
+        depthSegments?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        radialSegments?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        length?: undefined;
+        capSegments?: undefined;
+    };
+} | {
+    geometryType: string;
+    geometryArgs: {
+        radius: any;
+        length: any;
+        capSegments: any;
+        radialSegments: any;
+        width?: undefined;
+        height?: undefined;
+        depth?: undefined;
+        widthSegments?: undefined;
+        heightSegments?: undefined;
+        depthSegments?: undefined;
+        radiusTop?: undefined;
+        radiusBottom?: undefined;
+        tube?: undefined;
+        tubularSegments?: undefined;
+        segments?: undefined;
+        innerRadius?: undefined;
+        outerRadius?: undefined;
+        thetaSegments?: undefined;
+        detail?: undefined;
+    };
+};
+
+declare function renderDebugPanel(values: any, onChange: any, mode?: string): void;
+declare function updateDebugPanel(values: any, onChange: any, mode?: string): void;
+declare function destroyDebugPanel(): void;
 declare const DEFAULT_VALUES: Readonly<{
     maxParticles: 10000;
     size: number[];
@@ -69,6 +305,5 @@ declare const DEFAULT_VALUES: Readonly<{
     softDistance: 0.5;
     collision: null;
 }>;
-declare function createGeometry(type: any, args?: {}): THREE.BoxGeometry | THREE.SphereGeometry | THREE.CylinderGeometry | THREE.TorusGeometry | THREE.PlaneGeometry | THREE.CircleGeometry | THREE.RingGeometry | THREE.DodecahedronGeometry | THREE.IcosahedronGeometry | THREE.OctahedronGeometry | THREE.TetrahedronGeometry | THREE.CapsuleGeometry | null;
 
-export { DEFAULT_VALUES, GeometryType, createGeometry, destroyDebugPanel, renderDebugPanel, updateDebugPanel };
+export { DEFAULT_VALUES, GeometryType, createGeometry, destroyDebugPanel, detectGeometryTypeAndArgs, renderDebugPanel, updateDebugPanel };

package/dist/index.js

@@ -31799,7 +31799,6 @@ var import_client = __toESM(require_client(), 1);
 var import_react2 = __toESM(require_react(), 1);
 import { Appearance, Blending, EmitterShape, Lighting } from "core-vfx";
 import { buildCurveTextureBin } from "core-vfx";
-import * as THREE from "three";
 
 // ../../node_modules/zustand/esm/vanilla.mjs
 var createStoreImpl = (createState) => {
@@ -31845,15 +31844,8 @@ var createImpl = (createState) => {
 };
 var create = ((createState) => createState ? createImpl(createState) : createImpl);
 
-// src/VFXParticlesDebugPanel.jsx
-var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-var useDebugPanelStore = create(() => ({
-  flushChangesRef: { current: null }
-}));
-var getFlushChanges = () => useDebugPanelStore.getState().flushChangesRef.current;
-var setFlushChanges = (fn) => {
-  useDebugPanelStore.getState().flushChangesRef.current = fn;
-};
+// src/geometry.ts
+import * as THREE from "three";
 var GeometryType = Object.freeze({
   NONE: "none",
   // Sprite mode (no geometry)
@@ -31923,69 +31915,6 @@ var geometryDefaults = {
     radialSegments: 8
   }
 };
-var DEFAULT_VALUES = Object.freeze({
-  maxParticles: 1e4,
-  size: [0.1, 0.3],
-  colorStart: ["#ffffff"],
-  colorEnd: null,
-  fadeSize: [1, 0],
-  fadeSizeCurve: null,
-  fadeOpacity: [1, 0],
-  fadeOpacityCurve: null,
-  velocityCurve: null,
-  gravity: [0, 0, 0],
-  lifetime: [1, 2],
-  direction: [
-    [-1, 1],
-    [0, 1],
-    [-1, 1]
-  ],
-  startPosition: [
-    [0, 0],
-    [0, 0],
-    [0, 0]
-  ],
-  speed: [0.1, 0.1],
-  friction: { intensity: 0, easing: "linear" },
-  appearance: Appearance.GRADIENT,
-  rotation: [
-    [0, 0],
-    [0, 0],
-    [0, 0]
-  ],
-  rotationSpeed: [
-    [0, 0],
-    [0, 0],
-    [0, 0]
-  ],
-  rotationSpeedCurve: null,
-  geometryType: GeometryType.NONE,
-  geometryArgs: null,
-  orientToDirection: false,
-  orientAxis: "z",
-  stretchBySpeed: null,
-  lighting: Lighting.STANDARD,
-  shadow: false,
-  blending: Blending.NORMAL,
-  intensity: 1,
-  position: [0, 0, 0],
-  autoStart: true,
-  delay: 0,
-  emitCount: 1,
-  emitterShape: EmitterShape.BOX,
-  emitterRadius: [0, 1],
-  emitterAngle: Math.PI / 4,
-  emitterHeight: [0, 1],
-  emitterSurfaceOnly: false,
-  emitterDirection: [0, 1, 0],
-  turbulence: null,
-  attractors: null,
-  attractToCenter: false,
-  startPositionAsDirection: false,
-  softParticles: false,
-  softDistance: 0.5,
-  collision: null
-});
 var createGeometry = (type, args = {}) => {
   if (type === GeometryType.NONE || !type) return null;
   const defaults = geometryDefaults[type] || {};
@@ -32065,40 +31994,139 @@ var createGeometry = (type, args = {}) => {
       return null;
   }
 };
-var debugRoot = null;
-var debugContainer = null;
-var currentValues = null;
-var currentOnChange = null;
-var wrapped = {
-  // Core backgrounds
-  bg: "rgba(10, 10, 12, 0.92)",
-  bgPanel: "rgba(18, 18, 22, 0.85)",
-  bgSection: "rgba(25, 25, 30, 0.7)",
-  bgInput: "rgba(0, 0, 0, 0.4)",
-  // Warm amber/orange accent (the signature wrapped glow)
-  accent: "#f97316",
-  accentLight: "#fb923c",
-  accentGlow: "rgba(249, 115, 22, 0.5)",
-  accentSoft: "rgba(249, 115, 22, 0.15)",
-  // Borders with soft warm light
-  border: "rgba(255, 255, 255, 0.08)",
-  borderLit: "rgba(251, 146, 60, 0.3)",
-  borderGlow: "rgba(249, 115, 22, 0.2)",
-  // Text colors
-  text: "rgba(255, 255, 255, 0.95)",
-  textMuted: "rgba(255, 255, 255, 0.5)",
-  textDim: "rgba(255, 255, 255, 0.3)",
-  textAccent: "#fdba74",
-  // Soft fading grid background (fades from bottom to top)
-  gridBg: `
-    linear-gradient(to top, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.95) 100%),
-    linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px)
-  `,
-  gridSize: "24px 24px",
-  // Shadow with warm undertone
-  shadow: "0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 0 1px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)"
-};
+function detectGeometryTypeAndArgs(geo) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
+  if (!geo) return { geometryType: "none", geometryArgs: null };
+  const name = geo.constructor.name;
+  const params = geo.parameters || {};
+  switch (name) {
+    case "BoxGeometry":
+      return {
+        geometryType: "box",
+        geometryArgs: {
+          width: (_a = params.width) != null ? _a : 1,
+          height: (_b = params.height) != null ? _b : 1,
+          depth: (_c = params.depth) != null ? _c : 1,
+          widthSegments: (_d = params.widthSegments) != null ? _d : 1,
+          heightSegments: (_e = params.heightSegments) != null ? _e : 1,
+          depthSegments: (_f = params.depthSegments) != null ? _f : 1
+        }
+      };
+    case "SphereGeometry":
+      return {
+        geometryType: "sphere",
+        geometryArgs: {
+          radius: (_g = params.radius) != null ? _g : 0.5,
+          widthSegments: (_h = params.widthSegments) != null ? _h : 16,
+          heightSegments: (_i = params.heightSegments) != null ? _i : 12
+        }
+      };
+    case "CylinderGeometry":
+      return {
+        geometryType: "cylinder",
+        geometryArgs: {
+          radiusTop: (_j = params.radiusTop) != null ? _j : 0.5,
+          radiusBottom: (_k = params.radiusBottom) != null ? _k : 0.5,
+          height: (_l = params.height) != null ? _l : 1,
+          radialSegments: (_m = params.radialSegments) != null ? _m : 16,
+          heightSegments: (_n = params.heightSegments) != null ? _n : 1
+        }
+      };
+    case "ConeGeometry":
+      return {
+        geometryType: "cone",
+        geometryArgs: {
+          radius: (_o = params.radius) != null ? _o : 0.5,
+          height: (_p = params.height) != null ? _p : 1,
+          radialSegments: (_q = params.radialSegments) != null ? _q : 16,
+          heightSegments: (_r = params.heightSegments) != null ? _r : 1
+        }
+      };
+    case "TorusGeometry":
+      return {
+        geometryType: "torus",
+        geometryArgs: {
+          radius: (_s = params.radius) != null ? _s : 0.5,
+          tube: (_t = params.tube) != null ? _t : 0.2,
+          radialSegments: (_u = params.radialSegments) != null ? _u : 12,
+          tubularSegments: (_v = params.tubularSegments) != null ? _v : 24
+        }
+      };
+    case "PlaneGeometry":
+      return {
+        geometryType: "plane",
+        geometryArgs: {
+          width: (_w = params.width) != null ? _w : 1,
+          height: (_x = params.height) != null ? _x : 1,
+          widthSegments: (_y = params.widthSegments) != null ? _y : 1,
+          heightSegments: (_z = params.heightSegments) != null ? _z : 1
+        }
+      };
+    case "CircleGeometry":
+      return {
+        geometryType: "circle",
+        geometryArgs: {
+          radius: (_A = params.radius) != null ? _A : 0.5,
+          segments: (_B = params.segments) != null ? _B : 16
+        }
+      };
+    case "RingGeometry":
+      return {
+        geometryType: "ring",
+        geometryArgs: {
+          innerRadius: (_C = params.innerRadius) != null ? _C : 0.25,
+          outerRadius: (_D = params.outerRadius) != null ? _D : 0.5,
+          thetaSegments: (_E = params.thetaSegments) != null ? _E : 16
+        }
+      };
+    case "DodecahedronGeometry":
+      return {
+        geometryType: "dodecahedron",
+        geometryArgs: {
+          radius: (_F = params.radius) != null ? _F : 0.5,
+          detail: (_G = params.detail) != null ? _G : 0
+        }
+      };
+    case "IcosahedronGeometry":
+      return {
+        geometryType: "icosahedron",
+        geometryArgs: {
+          radius: (_H = params.radius) != null ? _H : 0.5,
+          detail: (_I = params.detail) != null ? _I : 0
+        }
+      };
+    case "OctahedronGeometry":
+      return {
+        geometryType: "octahedron",
+        geometryArgs: {
+          radius: (_J = params.radius) != null ? _J : 0.5,
+          detail: (_K = params.detail) != null ? _K : 0
+        }
+      };
+    case "TetrahedronGeometry":
+      return {
+        geometryType: "tetrahedron",
+        geometryArgs: {
+          radius: (_L = params.radius) != null ? _L : 0.5,
+          detail: (_M = params.detail) != null ? _M : 0
+        }
+      };
+    case "CapsuleGeometry":
+      return {
+        geometryType: "capsule",
+        geometryArgs: {
+          radius: (_N = params.radius) != null ? _N : 0.25,
+          length: (_O = params.length) != null ? _O : 0.5,
+          capSegments: (_P = params.capSegments) != null ? _P : 4,
+          radialSegments: (_Q = params.radialSegments) != null ? _Q : 8
+        }
+      };
+    default:
+      return { geometryType: "none", geometryArgs: null };
+  }
+}
+
+// src/code-generation.ts
 var formatJSXValue = (key, value) => {
   if (value === void 0 || value === null) return null;
   if (typeof value === "boolean") {
@@ -32199,7 +32227,8 @@ var arraysEqual = (a, b) => {
   if (!Array.isArray(a) || !Array.isArray(b)) return false;
   if (a.length !== b.length) return false;
   return a.every((v, i) => {
-    if (Array.isArray(v) && Array.isArray(b[i])) return arraysEqual(v, b[i]);
+    if (Array.isArray(v) && Array.isArray(b[i]))
+      return arraysEqual(v, b[i]);
     return v === b[i];
   });
 };
@@ -32215,54 +32244,113 @@ var isDefaultTurbulence = (t) => {
   if (!t) return true;
   return t.intensity === 0 || t.intensity === void 0;
 };
+var propOrder = [
+  "name",
+  "curveTexturePath",
+  "maxParticles",
+  "position",
+  "autoStart",
+  "emitCount",
+  "delay",
+  "intensity",
+  "size",
+  "fadeSize",
+  "fadeSizeCurve",
+  "colorStart",
+  "colorEnd",
+  "fadeOpacity",
+  "fadeOpacityCurve",
+  "gravity",
+  "speed",
+  "lifetime",
+  "friction",
+  "velocityCurve",
+  "direction",
+  "startPosition",
+  "startPositionAsDirection",
+  "rotation",
+  "rotationSpeed",
+  "rotationSpeedCurve",
+  "orientToDirection",
+  "orientAxis",
+  "stretchBySpeed",
+  "appearance",
+  "blending",
+  "lighting",
+  "shadow",
+  "emitterShape",
+  "emitterRadius",
+  "emitterAngle",
+  "emitterHeight",
+  "emitterDirection",
+  "emitterSurfaceOnly",
+  "turbulence",
+  "collision",
+  "softParticles",
+  "softDistance",
+  "attractToCenter"
+];
+var shouldSkipDefault = (key, value, values) => {
+  if (value === void 0 || value === null) return true;
+  if (key === "name" && !value) return true;
+  if (key === "curveTexturePath" && !value) return true;
+  if (key === "maxParticles" && value === 1e4) return true;
+  if (key === "position" && arraysEqual(value, [0, 0, 0])) return true;
+  if (key === "autoStart" && value === true) return true;
+  if (key === "emitCount" && value === 1) return true;
+  if (key === "delay" && value === 0) return true;
+  if (key === "intensity" && value === 1) return true;
+  if (key === "size" && arraysEqual(value, [0.1, 0.3])) return true;
+  if (key === "speed" && arraysEqual(value, [0.1, 0.1])) return true;
+  if (key === "lifetime" && arraysEqual(value, [1, 2])) return true;
+  if (key === "fadeSize" && arraysEqual(value, [1, 0])) return true;
+  if (key === "fadeOpacity" && arraysEqual(value, [1, 0])) return true;
+  if (key === "colorStart" && arraysEqual(value, ["#ffffff"])) return true;
+  if (key === "gravity" && arraysEqual(value, [0, 0, 0])) return true;
+  if (key === "friction" && isDefaultFriction(value)) return true;
+  if (key === "friction" && values.velocityCurve) return true;
+  if (key === "direction" && arraysEqual(value, [
+    [-1, 1],
+    [0, 1],
+    [-1, 1]
+  ]))
+    return true;
+  if (key === "direction" && values.startPositionAsDirection) return true;
+  if (key === "startPosition" && arraysEqual(value, [
+    [0, 0],
+    [0, 0],
+    [0, 0]
+  ]))
+    return true;
+  if (key === "startPositionAsDirection" && value === false) return true;
+  if (key === "rotation" && arraysEqual(value, [0, 0])) return true;
+  if (key === "rotationSpeed" && arraysEqual(value, [0, 0])) return true;
+  if (key === "appearance" && value === 0) return true;
+  if (key === "blending" && value === 1) return true;
+  if (key === "lighting" && value === 1) return true;
+  if (key === "shadow" && value === false) return true;
+  if (key === "orientToDirection" && value === false) return true;
+  if (key === "orientAxis") {
+    const axisNeeded = values.orientToDirection || values.stretchBySpeed;
+    if (!axisNeeded || value === "z" || value === "+z") return true;
+  }
+  if (key === "stretchBySpeed" && !value) return true;
+  if (key === "emitterShape" && value === 0) return true;
+  if (key === "emitterRadius" && arraysEqual(value, [0, 1])) return true;
+  if (key === "emitterAngle" && Math.abs(value - Math.PI / 4) < 1e-3)
+    return true;
+  if (key === "emitterHeight" && arraysEqual(value, [0, 1])) return true;
+  if (key === "emitterDirection" && arraysEqual(value, [0, 1, 0])) return true;
+  if (key === "emitterSurfaceOnly" && value === false) return true;
+  if (key === "turbulence" && isDefaultTurbulence(value)) return true;
+  if (key === "collision" && !value) return true;
+  if (key === "softParticles" && value === false) return true;
+  if (key === "softDistance" && !values.softParticles) return true;
+  if (key === "attractToCenter" && value === false) return true;
+  return false;
+};
 var generateVFXParticlesJSX = (values) => {
   const props = [];
-  const propOrder = [
-    "name",
-    "curveTexturePath",
-    "maxParticles",
-    "position",
-    "autoStart",
-    "emitCount",
-    "delay",
-    "intensity",
-    "size",
-    "fadeSize",
-    "fadeSizeCurve",
-    "colorStart",
-    "colorEnd",
-    "fadeOpacity",
-    "fadeOpacityCurve",
-    "gravity",
-    "speed",
-    "lifetime",
-    "friction",
-    "velocityCurve",
-    "direction",
-    "startPosition",
-    "startPositionAsDirection",
-    "rotation",
-    "rotationSpeed",
-    "rotationSpeedCurve",
-    "orientToDirection",
-    "orientAxis",
-    "stretchBySpeed",
-    "appearance",
-    "blending",
-    "lighting",
-    "shadow",
-    "emitterShape",
-    "emitterRadius",
-    "emitterAngle",
-    "emitterHeight",
-    "emitterDirection",
-    "emitterSurfaceOnly",
-    "turbulence",
-    "collision",
-    "softParticles",
-    "softDistance",
-    "attractToCenter"
-  ];
   if (values.geometryType && values.geometryType !== GeometryType.NONE) {
     const geoJsx = geometryTypeToJSX(values.geometryType, values.geometryArgs);
     if (geoJsx) {
@@ -32271,62 +32359,7 @@ var generateVFXParticlesJSX = (values) => {
   }
   for (const key of propOrder) {
     const value = values[key];
-    if (value === void 0 || value === null) continue;
-    if (key === "name" && !value) continue;
-    if (key === "curveTexturePath" && !value) continue;
-    if (key === "maxParticles" && value === 1e4) continue;
-    if (key === "position" && arraysEqual(value, [0, 0, 0])) continue;
-    if (key === "autoStart" && value === true) continue;
-    if (key === "emitCount" && value === 1) continue;
-    if (key === "delay" && value === 0) continue;
-    if (key === "intensity" && value === 1) continue;
-    if (key === "size" && arraysEqual(value, [0.1, 0.3])) continue;
-    if (key === "speed" && arraysEqual(value, [0.1, 0.1])) continue;
-    if (key === "lifetime" && arraysEqual(value, [1, 2])) continue;
-    if (key === "fadeSize" && arraysEqual(value, [1, 0])) continue;
-    if (key === "fadeOpacity" && arraysEqual(value, [1, 0])) continue;
-    if (key === "colorStart" && arraysEqual(value, ["#ffffff"])) continue;
-    if (key === "gravity" && arraysEqual(value, [0, 0, 0])) continue;
-    if (key === "friction" && isDefaultFriction(value)) continue;
-    if (key === "friction" && values.velocityCurve) continue;
-    if (key === "direction" && arraysEqual(value, [
-      [-1, 1],
-      [0, 1],
-      [-1, 1]
-    ]))
-      continue;
-    if (key === "direction" && values.startPositionAsDirection) continue;
-    if (key === "startPosition" && arraysEqual(value, [
-      [0, 0],
-      [0, 0],
-      [0, 0]
-    ]))
-      continue;
-    if (key === "startPositionAsDirection" && value === false) continue;
-    if (key === "rotation" && arraysEqual(value, [0, 0])) continue;
-    if (key === "rotationSpeed" && arraysEqual(value, [0, 0])) continue;
-    if (key === "appearance" && value === 0) continue;
-    if (key === "blending" && value === 1) continue;
-    if (key === "lighting" && value === 1) continue;
-    if (key === "shadow" && value === false) continue;
-    if (key === "orientToDirection" && value === false) continue;
-    if (key === "orientAxis") {
-      const axisNeeded = values.orientToDirection || values.stretchBySpeed;
-      if (!axisNeeded || value === "z" || value === "+z") continue;
-    }
-    if (key === "stretchBySpeed" && !value) continue;
-    if (key === "emitterShape" && value === 0) continue;
-    if (key === "emitterRadius" && arraysEqual(value, [0, 1])) continue;
-    if (key === "emitterAngle" && Math.abs(value - Math.PI / 4) < 1e-3)
-      continue;
-    if (key === "emitterHeight" && arraysEqual(value, [0, 1])) continue;
-    if (key === "emitterDirection" && arraysEqual(value, [0, 1, 0])) continue;
-    if (key === "emitterSurfaceOnly" && value === false) continue;
-    if (key === "turbulence" && isDefaultTurbulence(value)) continue;
-    if (key === "collision" && !value) continue;
-    if (key === "softParticles" && value === false) continue;
-    if (key === "softDistance" && !values.softParticles) continue;
-    if (key === "attractToCenter" && value === false) continue;
+    if (shouldSkipDefault(key, value, values)) continue;
     const formatted = formatJSXValue(key, value);
     if (formatted) props.push(formatted);
   }
@@ -32337,6 +32370,114 @@ var generateVFXParticlesJSX = (values) => {
   ${props.join("\n  ")}
 />`;
 };
+var formatObjectProp = (key, value) => {
+  if (value === void 0 || value === null) return null;
+  if (typeof value === "boolean") {
+    return `  ${key}: ${value},`;
+  }
+  if (typeof value === "number") {
+    return `  ${key}: ${value},`;
+  }
+  if (typeof value === "string") {
+    return `  ${key}: "${value}",`;
+  }
+  if (Array.isArray(value)) {
+    if (value.length > 0 && typeof value[0] === "string" && value[0].startsWith("#")) {
+      return `  ${key}: [${value.map((v) => `"${v}"`).join(", ")}],`;
+    }
+    if (value.length > 0 && Array.isArray(value[0])) {
+      return `  ${key}: [${value.map((v) => `[${v.join(", ")}]`).join(", ")}],`;
+    }
+    return `  ${key}: [${value.join(", ")}],`;
+  }
+  if (typeof value === "object") {
+    const formatValue = (v, indent) => {
+      if (v === void 0 || v === null) return "null";
+      if (typeof v === "string") return `"${v}"`;
+      if (typeof v === "number" || typeof v === "boolean") return String(v);
+      if (Array.isArray(v)) {
+        if (v.length > 0 && typeof v[0] === "object" && !Array.isArray(v[0])) {
+          const items = v.map((item) => formatValue(item, indent + 2));
+          return `[
+${items.map((i) => " ".repeat(indent + 2) + i).join(",\n")}
+${" ".repeat(indent)}]`;
+        }
+        return `[${v.map((item) => formatValue(item, indent)).join(", ")}]`;
+      }
+      if (typeof v === "object") {
+        return formatObj(v, indent + 2);
+      }
+      return String(v);
+    };
+    const formatObj = (obj, indent = 4) => {
+      const entries = Object.entries(obj).filter(
+        ([, v]) => v !== void 0 && v !== null
+      );
+      if (entries.length === 0) return "{}";
+      const lines = entries.map(([k, v]) => {
+        return `${" ".repeat(indent)}${k}: ${formatValue(v, indent)}`;
+      });
+      return `{
+${lines.join(",\n")}
+${" ".repeat(indent - 2)}}`;
+    };
+    return `  ${key}: ${formatObj(value, 4)},`;
+  }
+  return null;
+};
+var generateVanillaCode = (values) => {
+  const props = [];
+  if (values.geometryType && values.geometryType !== GeometryType.NONE) {
+    const geoCode = geometryTypeToJSX(values.geometryType, values.geometryArgs);
+    if (geoCode) {
+      props.push(`  geometry: ${geoCode},`);
+    }
+  }
+  for (const key of propOrder) {
+    const value = values[key];
+    if (shouldSkipDefault(key, value, values)) continue;
+    const formatted = formatObjectProp(key, value);
+    if (formatted) props.push(formatted);
+  }
+  if (props.length === 0) {
+    return "const particles = new VFXParticles(renderer)";
+  }
+  return `const particles = new VFXParticles(renderer, {
+${props.join("\n")}
+})`;
+};
+
+// src/styles.ts
+var wrapped = {
+  // Core backgrounds
+  bg: "rgba(10, 10, 12, 0.92)",
+  bgPanel: "rgba(18, 18, 22, 0.85)",
+  bgSection: "rgba(25, 25, 30, 0.7)",
+  bgInput: "rgba(0, 0, 0, 0.4)",
+  // Warm amber/orange accent (the signature wrapped glow)
+  accent: "#f97316",
+  accentLight: "#fb923c",
+  accentGlow: "rgba(249, 115, 22, 0.5)",
+  accentSoft: "rgba(249, 115, 22, 0.15)",
+  // Borders with soft warm light
+  border: "rgba(255, 255, 255, 0.08)",
+  borderLit: "rgba(251, 146, 60, 0.3)",
+  borderGlow: "rgba(249, 115, 22, 0.2)",
+  // Text colors
+  text: "rgba(255, 255, 255, 0.95)",
+  textMuted: "rgba(255, 255, 255, 0.5)",
+  textDim: "rgba(255, 255, 255, 0.3)",
+  textAccent: "#fdba74",
+  // Soft fading grid background (fades from bottom to top)
+  gridBg: `
+    linear-gradient(to top, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.95) 100%),
+    linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px)
+  `,
+  gridSize: "24px 24px",
+  // Shadow with warm undertone
+  shadow: "0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 0 1px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)"
+};
 var styles = {
   container: {
     position: "fixed",
@@ -32609,9 +32750,7 @@ var styles = {
     letterSpacing: "0.05em",
     textTransform: "lowercase"
   },
-  optionalSection: {
-    // Same as regular sections - no special styling
-  },
+  optionalSection: {},
   enableCheckbox: {
     marginBottom: "8px",
     paddingBottom: "8px",
@@ -32693,6 +32832,83 @@ var styles = {
     color: wrapped.accent
   }
 };
+
+// src/VFXParticlesDebugPanel.jsx
+var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
+var useDebugPanelStore = create(() => ({
+  flushChangesRef: { current: null }
+}));
+var getFlushChanges = () => useDebugPanelStore.getState().flushChangesRef.current;
+var setFlushChanges = (fn) => {
+  useDebugPanelStore.getState().flushChangesRef.current = fn;
+};
+var DEFAULT_VALUES = Object.freeze({
+  maxParticles: 1e4,
+  size: [0.1, 0.3],
+  colorStart: ["#ffffff"],
+  colorEnd: null,
+  fadeSize: [1, 0],
+  fadeSizeCurve: null,
+  fadeOpacity: [1, 0],
+  fadeOpacityCurve: null,
+  velocityCurve: null,
+  gravity: [0, 0, 0],
+  lifetime: [1, 2],
+  direction: [
+    [-1, 1],
+    [0, 1],
+    [-1, 1]
+  ],
+  startPosition: [
+    [0, 0],
+    [0, 0],
+    [0, 0]
+  ],
+  speed: [0.1, 0.1],
+  friction: { intensity: 0, easing: "linear" },
+  appearance: Appearance.GRADIENT,
+  rotation: [
+    [0, 0],
+    [0, 0],
+    [0, 0]
+  ],
+  rotationSpeed: [
+    [0, 0],
+    [0, 0],
+    [0, 0]
+  ],
+  rotationSpeedCurve: null,
+  geometryType: GeometryType.NONE,
+  geometryArgs: null,
+  orientToDirection: false,
+  orientAxis: "z",
+  stretchBySpeed: null,
+  lighting: Lighting.STANDARD,
+  shadow: false,
+  blending: Blending.NORMAL,
+  intensity: 1,
+  position: [0, 0, 0],
+  autoStart: true,
+  delay: 0,
+  emitCount: 1,
+  emitterShape: EmitterShape.BOX,
+  emitterRadius: [0, 1],
+  emitterAngle: Math.PI / 4,
+  emitterHeight: [0, 1],
+  emitterSurfaceOnly: false,
+  emitterDirection: [0, 1, 0],
+  turbulence: null,
+  attractors: null,
+  attractToCenter: false,
+  startPositionAsDirection: false,
+  softParticles: false,
+  softDistance: 0.5,
+  collision: null
+});
+var debugRoot = null;
+var debugContainer = null;
+var currentValues = null;
+var currentOnChange = null;
 var parseRange = (value, defaultVal = [0, 0]) => {
   if (value === void 0 || value === null) return defaultVal;
   if (Array.isArray(value))
@@ -35057,7 +35273,7 @@ var LoadingSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ]
   }
 );
-var DebugPanelContent = ({ initialValues, onUpdate }) => {
+var DebugPanelContent = ({ initialValues, onUpdate, mode = "r3f" }) => {
   "use no memo";
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X;
   const [isMinimized, setIsMinimized] = (0, import_react2.useState)(false);
@@ -35123,19 +35339,19 @@ var DebugPanelContent = ({ initialValues, onUpdate }) => {
       }
     };
   }, []);
-  const handleCopyJSX = (0, import_react2.useCallback)(async () => {
+  const handleCopyCode = (0, import_react2.useCallback)(async () => {
     if (hasPendingChanges) {
       flushChanges();
     }
-    const jsx2 = generateVFXParticlesJSX(valuesRef.current);
+    const code = mode === "vanilla" ? generateVanillaCode(valuesRef.current) : generateVFXParticlesJSX(valuesRef.current);
     try {
-      await navigator.clipboard.writeText(jsx2);
+      await navigator.clipboard.writeText(code);
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2e3);
     } catch (err) {
       console.error("Failed to copy:", err);
     }
-  }, [hasPendingChanges, flushChanges]);
+  }, [hasPendingChanges, flushChanges, mode]);
   const handleBakeCurves = (0, import_react2.useCallback)(async () => {
     if (hasPendingChanges) {
       flushChanges();
@@ -35523,7 +35739,7 @@ var DebugPanelContent = ({ initialValues, onUpdate }) => {
           "button",
           {
             style: __spreadValues(__spreadValues({}, styles.copyBtn), copySuccess ? styles.copyBtnSuccess : {}),
-            onClick: handleCopyJSX,
+            onClick: handleCopyCode,
             onMouseEnter: (e) => {
               if (!copySuccess) {
                 Object.assign(e.currentTarget.style, {
@@ -35546,7 +35762,7 @@ var DebugPanelContent = ({ initialValues, onUpdate }) => {
                 });
               }
             },
-            children: copySuccess ? "\u2713 copied" : "copy jsx"
+            children: copySuccess ? "\u2713 copied" : "copy code"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -36844,7 +37060,7 @@ var DebugPanelContent = ({ initialValues, onUpdate }) => {
     ] })
   ] });
 };
-function renderDebugPanel(values, onChange) {
+function renderDebugPanel(values, onChange, mode = "r3f") {
   currentValues = values;
   currentOnChange = onChange;
   if (!debugContainer) {
@@ -36980,15 +37196,22 @@ function renderDebugPanel(values, onChange) {
     debugRoot = (0, import_client.createRoot)(debugContainer);
   }
   debugRoot.render(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugPanelContent, { initialValues: values, onUpdate: onChange })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugPanelContent, { initialValues: values, onUpdate: onChange, mode })
   );
 }
-function updateDebugPanel(values, onChange) {
+function updateDebugPanel(values, onChange, mode = "r3f") {
   currentValues = values;
   currentOnChange = onChange;
   if (debugRoot) {
     debugRoot.render(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugPanelContent, { initialValues: values, onUpdate: onChange })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DebugPanelContent,
+        {
+          initialValues: values,
+          onUpdate: onChange,
+          mode
+        }
+      )
     );
   }
 }
@@ -37013,6 +37236,7 @@ export {
   GeometryType,
   createGeometry,
   destroyDebugPanel,
+  detectGeometryTypeAndArgs,
   renderDebugPanel,
   updateDebugPanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "debug-vfx",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -22,7 +22,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "core-vfx": "0.0.7"
+    "core-vfx": "0.1.0"
   },
   "devDependencies": {
     "@types/react": "19.2.10",