debug-vfx 0.1.0 → 0.1.2

package/dist/index.js

@@ -32425,6 +32425,75 @@ ${" ".repeat(indent - 2)}}`;
   }
   return null;
 };
+var camelToKebab = (str) => str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var formatVueValue = (key, value) => {
+  if (value === void 0 || value === null) return null;
+  const kebab = camelToKebab(key);
+  if (typeof value === "boolean") {
+    return value ? kebab : `:${kebab}="false"`;
+  }
+  if (typeof value === "number") {
+    return `:${kebab}="${value}"`;
+  }
+  if (typeof value === "string") {
+    return `${kebab}="${value}"`;
+  }
+  if (Array.isArray(value)) {
+    if (value.length > 0 && typeof value[0] === "string" && value[0].startsWith("#")) {
+      return `:${kebab}="[${value.map((v) => `'${v}'`).join(", ")}]"`;
+    }
+    if (value.length > 0 && Array.isArray(value[0])) {
+      return `:${kebab}="[${value.map((v) => `[${v.join(", ")}]`).join(", ")}]"`;
+    }
+    return `:${kebab}="[${value.join(", ")}]"`;
+  }
+  if (typeof value === "object") {
+    const fmtVal = (v) => {
+      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])) {
+          return `[${v.map((item) => fmtVal(item)).join(", ")}]`;
+        }
+        return `[${v.map((item) => fmtVal(item)).join(", ")}]`;
+      }
+      if (typeof v === "object") return fmtObj(v);
+      return String(v);
+    };
+    const fmtObj = (obj) => {
+      const entries = Object.entries(obj).filter(
+        ([, v]) => v !== void 0 && v !== null
+      );
+      if (entries.length === 0) return "{}";
+      return `{ ${entries.map(([k, v]) => `${k}: ${fmtVal(v)}`).join(", ")} }`;
+    };
+    return `:${kebab}="${fmtObj(value)}"`;
+  }
+  return null;
+};
+var generateVueTemplate = (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 = formatVueValue(key, value);
+    if (formatted) props.push(formatted);
+  }
+  if (props.length === 0) {
+    return "<VFXParticles />";
+  }
+  return `<VFXParticles
+  ${props.join("\n  ")}
+/>`;
+};
+var generateSvelteTemplate = generateVFXParticlesJSX;
 var generateVanillaCode = (values) => {
   const props = [];
   if (values.geometryType && values.geometryType !== GeometryType.NONE) {
@@ -32573,7 +32642,7 @@ var styles = {
     position: "relative"
   },
   sectionHover: {
-    borderColor: "transparent",
+    border: "1px solid transparent",
     background: `linear-gradient(${wrapped.bgSection}, ${wrapped.bgSection}) padding-box, linear-gradient(135deg, ${wrapped.accent} 0%, ${wrapped.accentLight} 50%, rgba(251, 191, 36, 0.6) 100%) border-box`
   },
   sectionHeader: {
@@ -32808,21 +32877,21 @@ var styles = {
   },
   copyBtnHover: {
     background: `linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(251, 146, 60, 0.15) 100%)`,
-    borderColor: wrapped.accent,
+    border: `1px solid ${wrapped.accent}`,
     boxShadow: `0 0 20px rgba(249, 115, 22, 0.4), 0 0 40px rgba(249, 115, 22, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)`,
     color: wrapped.accentLight,
     textShadow: `0 0 12px rgba(249, 115, 22, 0.8)`
   },
   copyBtnSuccess: {
     background: `linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.15) 100%)`,
-    borderColor: "rgba(34, 197, 94, 0.6)",
+    border: "1px solid rgba(34, 197, 94, 0.6)",
     color: "#4ade80",
     boxShadow: `0 0 16px rgba(34, 197, 94, 0.4), 0 0 32px rgba(34, 197, 94, 0.2)`,
     textShadow: `0 0 8px rgba(34, 197, 94, 0.6)`
   },
   inputDragging: {
     background: `rgba(249, 115, 22, 0.15) !important`,
-    borderColor: `${wrapped.accent} !important`,
+    border: `1px solid ${wrapped.accent} !important`,
     boxShadow: `0 0 0 2px ${wrapped.accentGlow}, 0 0 12px rgba(249, 115, 22, 0.3)`,
     color: wrapped.accentLight
   },
@@ -33133,7 +33202,7 @@ var ScrubInput = ({
     cursor: "ew-resize"
   }), isDragging ? {
     background: `rgba(249, 115, 22, 0.15)`,
-    borderColor: wrapped.accent,
+    border: `1px solid ${wrapped.accent}`,
     boxShadow: `0 0 0 2px ${wrapped.accentGlow}, 0 0 12px rgba(249, 115, 22, 0.3)`,
     color: wrapped.accentLight
   } : {});
@@ -34919,13 +34988,13 @@ var EasingCurveEditor = ({ value, onChange, label = "Easing Curve" }) => {
                     onMouseEnter: (e) => {
                       e.currentTarget.style.background = "rgba(249, 115, 22, 0.25)";
                       e.currentTarget.style.color = wrapped.accent;
-                      e.currentTarget.style.borderColor = wrapped.accent;
+                      e.currentTarget.style.border = `1px solid ${wrapped.accent}`;
                       e.currentTarget.style.boxShadow = "0 0 8px rgba(249, 115, 22, 0.3)";
                     },
                     onMouseLeave: (e) => {
                       e.currentTarget.style.background = "rgba(249, 115, 22, 0.1)";
                       e.currentTarget.style.color = wrapped.textMuted;
-                      e.currentTarget.style.borderColor = wrapped.border;
+                      e.currentTarget.style.border = `1px solid ${wrapped.border}`;
                       e.currentTarget.style.boxShadow = "none";
                     },
                     children: preset.name
@@ -34961,12 +35030,12 @@ var EasingCurveEditor = ({ value, onChange, label = "Easing Curve" }) => {
                     },
                     onMouseEnter: (e) => {
                       e.currentTarget.style.background = "rgba(100, 200, 255, 0.25)";
-                      e.currentTarget.style.borderColor = "#64c8ff";
+                      e.currentTarget.style.border = "1px solid #64c8ff";
                       e.currentTarget.style.boxShadow = "0 0 8px rgba(100, 200, 255, 0.4)";
                     },
                     onMouseLeave: (e) => {
                       e.currentTarget.style.background = "rgba(100, 200, 255, 0.1)";
-                      e.currentTarget.style.borderColor = "rgba(100, 200, 255, 0.3)";
+                      e.currentTarget.style.border = "1px solid rgba(100, 200, 255, 0.3)";
                       e.currentTarget.style.boxShadow = "none";
                     },
                     children: "\u2195 invert"
@@ -35101,12 +35170,12 @@ var EasingCurveEditor = ({ value, onChange, label = "Easing Curve" }) => {
                           },
                           onMouseEnter: (e) => {
                             e.currentTarget.style.background = "rgba(168, 85, 247, 0.3)";
-                            e.currentTarget.style.borderColor = "#a855f7";
+                            e.currentTarget.style.border = "1px solid #a855f7";
                             e.currentTarget.style.boxShadow = "0 0 8px rgba(168, 85, 247, 0.4)";
                           },
                           onMouseLeave: (e) => {
                             e.currentTarget.style.background = "rgba(168, 85, 247, 0.15)";
-                            e.currentTarget.style.borderColor = "rgba(168, 85, 247, 0.3)";
+                            e.currentTarget.style.border = "1px solid rgba(168, 85, 247, 0.3)";
                             e.currentTarget.style.boxShadow = "none";
                           },
                           children: "bounce"
@@ -35147,12 +35216,12 @@ var EasingCurveEditor = ({ value, onChange, label = "Easing Curve" }) => {
                               },
                               onMouseEnter: (e) => {
                                 e.currentTarget.style.background = "rgba(168, 85, 247, 0.3)";
-                                e.currentTarget.style.borderColor = "#a855f7";
+                                e.currentTarget.style.border = "1px solid #a855f7";
                                 e.currentTarget.style.boxShadow = "0 0 8px rgba(168, 85, 247, 0.4)";
                               },
                               onMouseLeave: (e) => {
                                 e.currentTarget.style.background = "rgba(168, 85, 247, 0.15)";
-                                e.currentTarget.style.borderColor = "rgba(168, 85, 247, 0.3)";
+                                e.currentTarget.style.border = "1px solid rgba(168, 85, 247, 0.3)";
                                 e.currentTarget.style.boxShadow = "none";
                               },
                               children: name
@@ -35192,12 +35261,12 @@ var EasingCurveEditor = ({ value, onChange, label = "Easing Curve" }) => {
                               },
                               onMouseEnter: (e) => {
                                 e.currentTarget.style.background = "rgba(168, 85, 247, 0.3)";
-                                e.currentTarget.style.borderColor = "#a855f7";
+                                e.currentTarget.style.border = "1px solid #a855f7";
                                 e.currentTarget.style.boxShadow = "0 0 8px rgba(168, 85, 247, 0.4)";
                               },
                               onMouseLeave: (e) => {
                                 e.currentTarget.style.background = "rgba(168, 85, 247, 0.15)";
-                                e.currentTarget.style.borderColor = "rgba(168, 85, 247, 0.3)";
+                                e.currentTarget.style.border = "1px solid rgba(168, 85, 247, 0.3)";
                                 e.currentTarget.style.boxShadow = "none";
                               },
                               children: name
@@ -35343,7 +35412,7 @@ var DebugPanelContent = ({ initialValues, onUpdate, mode = "r3f" }) => {
     if (hasPendingChanges) {
       flushChanges();
     }
-    const code = mode === "vanilla" ? generateVanillaCode(valuesRef.current) : generateVFXParticlesJSX(valuesRef.current);
+    const code = mode === "vanilla" ? generateVanillaCode(valuesRef.current) : mode === "tres" ? generateVueTemplate(valuesRef.current) : mode === "threlte" ? generateSvelteTemplate(valuesRef.current) : generateVFXParticlesJSX(valuesRef.current);
     try {
       await navigator.clipboard.writeText(code);
       setCopySuccess(true);
@@ -35744,7 +35813,7 @@ var DebugPanelContent = ({ initialValues, onUpdate, mode = "r3f" }) => {
               if (!copySuccess) {
                 Object.assign(e.currentTarget.style, {
                   background: `linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(251, 146, 60, 0.15) 100%)`,
-                  borderColor: wrapped.accent,
+                  border: `1px solid ${wrapped.accent}`,
                   boxShadow: `0 0 20px rgba(249, 115, 22, 0.4), 0 0 40px rgba(249, 115, 22, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)`,
                   color: wrapped.accentLight,
                   textShadow: `0 0 12px rgba(249, 115, 22, 0.8)`
@@ -35755,7 +35824,7 @@ var DebugPanelContent = ({ initialValues, onUpdate, mode = "r3f" }) => {
               if (!copySuccess) {
                 Object.assign(e.currentTarget.style, {
                   background: `linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%)`,
-                  borderColor: wrapped.borderLit,
+                  border: `1px solid ${wrapped.borderLit}`,
                   boxShadow: `0 0 12px rgba(249, 115, 22, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05)`,
                   color: wrapped.accent,
                   textShadow: `0 0 8px rgba(249, 115, 22, 0.5)`

package/package.json

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