@react-synth/synth 0.0.6-alpha

package/README.md

@@ -0,0 +1,187 @@
+# React Synth 🎹
+
+This is a fun little experiment showing that React API can be used outside of
+browser environment to render... music instead of HTML.
+
+Should you use it? I don't know, you are an adult.
+
+## How It Works
+
+Write music using React components:
+
+```tsx
+// song.tsx
+import {
+  Chord,
+  Loop,
+  Note,
+  Sample,
+  Sequence,
+  Synth,
+  Track,
+} from "@react-synth/synth";
+
+export default function MySong() {
+  return (
+    <Track bpm={120}>
+      {/* Simple kick drum pattern */}
+      <Loop id="kick" interval={1}>
+        <Sample name="bd_haus" amp={2} />
+      </Loop>
+
+      {/* Melody arpeggio with prophet synth */}
+      <Loop id="melody" interval={2}>
+        <Synth type="prophet">
+          <Sequence interval={0.25}>
+            <Note note="C4" />
+            <Note note="E4" />
+            <Note note="G4" />
+            <Note note="C5" />
+          </Sequence>
+        </Synth>
+      </Loop>
+
+      {/* Chord progression */}
+      <Loop id="pads" interval={4}>
+        <Synth type="hollow">
+          <Chord notes="Am7" release={4} amp={0.5} />
+        </Synth>
+      </Loop>
+    </Track>
+  );
+}
+```
+
+Then run it with:
+
+```bash
+npx react-synth song.tsx
+```
+
+## Components
+
+### `<Track bpm={number}>`
+
+Root component that sets the tempo and provides audio context.
+
+### `<Loop id={string} interval={number}>`
+
+Repeats its children every `interval` beats.
+
+### `<Synth type={string}>`
+
+Defines the synthesizer for child `Note` and `Chord` components.
+
+Available presets: `"sine"`, `"saw"`, `"square"`, `"tri"`, `"prophet"`,
+`"hollow"`, `"dark_ambience"`, `"bass"`, `"pluck"`
+
+### `<Note>`
+
+Plays a single note with ADSR envelope.
+
+- `note` - Note name ("C4", "A#3") or frequency in Hz
+- `amp` - Volume 0-1 (default: 0.3)
+- `attack`, `decay`, `sustain`, `release` - ADSR envelope in beats
+- `oscillator` - Override synth oscillator type
+- `filter` - Override filter settings `{ cutoff, resonance, type }`
+- `voices` - Override voice settings `{ count, detune, spread }`
+
+### `<Chord notes={string | array}>`
+
+Plays multiple notes simultaneously.
+
+- `notes` - Chord name ("Cmaj7", "Am:4") or array of notes (["C4", "E4", "G4"])
+- Same ADSR and synth overrides as `<Note>`
+
+### `<Sample name={string}>`
+
+Plays an audio sample file.
+
+- `name` - Sample name (without extension)
+- `amp` - Volume
+- `cutoff` - Filter cutoff (MIDI note number)
+- `rate` - Playback rate
+- `pan` - Stereo pan (-1 to 1)
+
+### `<Sequence interval={number}>`
+
+Plays children one after another with `interval` beats between each.
+
+## Installation
+
+```bash
+npm install @react-synth/synth
+```
+
+## CLI Usage
+
+```bash
+# Run with hot reload
+npx react-synth song.tsx
+
+# Or during development
+npm run dev song.tsx
+```
+
+## Prerequisites
+
+- Node.js v18+
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Run type checking
+npm run typecheck
+
+# Live coding with hot reload
+npm run dev examples/simple/simple.tsx
+```
+
+## Project Structure
+
+```
+react-synth/
+├── src/
+│   ├── index.ts            # Main exports
+│   ├── audio/
+│   │   ├── scheduler.ts    # Beat scheduling
+│   │   └── sampleLoader.ts # Audio sample loading
+│   ├── components/
+│   │   ├── Track.tsx       # Root component
+│   │   ├── Loop.tsx        # Looping
+│   │   ├── Note/           # Oscillator notes
+│   │   ├── Chord.tsx       # Chord playback
+│   │   ├── Sample/         # Sample playback
+│   │   ├── Synth/          # Synth presets
+│   │   └── Sequence.tsx    # Sequential playback
+│   ├── types/
+│   │   └── music.ts        # Type definitions
+│   └── utils/
+│       ├── envelope.ts     # ADSR envelope
+│       ├── line.ts         # Value interpolation
+│       └── notes.ts        # Note/chord utilities
+├── cli/
+│   └── cli.ts              # CLI entry point (includes React + JSDOM setup)
+├── examples/
+│   └── simple/
+│       └── simple.tsx      # Demo song
+├── dist/                   # Build output
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+## Inspired By
+
+- [Sonic Pi](https://sonic-pi.net/) - The original live coding synth
+- React's declarative component model
+
+## License
+
+MIT

package/dist/cli.cjs

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+"use strict";
+const path = require("path");
+const vite = require("vite");
+const jsdom = require("jsdom");
+const React = require("react");
+const client = require("react-dom/client");
+const dom = new jsdom.JSDOM('<!DOCTYPE html><div id="root"></div>');
+globalThis.document = dom.window.document;
+globalThis.window = dom.window;
+let root = null;
+function renderSong(SongComponent) {
+  const container = document.getElementById("root");
+  if (!root) {
+    root = client.createRoot(container);
+  }
+  root.render(React.createElement(SongComponent));
+}
+async function main() {
+  const filePath = process.argv[2];
+  if (!filePath) {
+    console.log(`
+🎹 React Synth - Live coding music with React
+
+Usage: 
+  npx react-synth <song.tsx>     Run a song with hot reload
+`);
+    process.exit(0);
+  }
+  const absolutePath = vite.normalizePath(path.resolve(process.cwd(), filePath));
+  console.log(`🎵 Loading ${filePath}...`);
+  const vite$1 = await vite.createServer({
+    configFile: false,
+    root: process.cwd(),
+    server: {
+      middlewareMode: true,
+      hmr: true
+    },
+    appType: "custom",
+    optimizeDeps: {
+      exclude: ["@react-synth/synth", "node-web-audio-api"]
+    },
+    ssr: {
+      external: ["node-web-audio-api", "jsdom"],
+      noExternal: ["@react-synth/synth", "tonal"]
+    },
+    esbuild: {
+      jsx: "automatic"
+    },
+    logLevel: "info"
+  });
+  let currentModuleUrl = null;
+  async function loadSong() {
+    const url = `${absolutePath}?t=${Date.now()}`;
+    if (currentModuleUrl) {
+      const mod = await vite$1.moduleGraph.getModuleByUrl(currentModuleUrl);
+      if (mod) {
+        invalidateModuleAndImporters(mod);
+      }
+    }
+    currentModuleUrl = url;
+    const module2 = await vite$1.ssrLoadModule(url);
+    if (module2.default && typeof module2.default === "function") {
+      renderSong(module2.default);
+    } else {
+      console.warn(
+        "⚠️  No default export found. Song file should export a React component as default."
+      );
+    }
+  }
+  function invalidateModuleAndImporters(mod) {
+    vite$1.moduleGraph.invalidateModule(mod);
+    for (const importer of mod.importers) {
+      invalidateModuleAndImporters(importer);
+    }
+  }
+  function collectDependencies(mod, visited = /* @__PURE__ */ new Set()) {
+    if (mod.file) {
+      visited.add(mod.file);
+    }
+    for (const imported of mod.ssrImportedModules) {
+      if (imported.file && !visited.has(imported.file)) {
+        collectDependencies(imported, visited);
+      }
+    }
+    return visited;
+  }
+  function isDependencyOfSong(changedFile) {
+    const songMod = vite$1.moduleGraph.getModulesByFile(absolutePath);
+    if (!songMod || songMod.size === 0) {
+      return false;
+    }
+    for (const mod of songMod) {
+      const deps = collectDependencies(mod);
+      if (deps.has(changedFile)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  await loadSong();
+  console.log("🎹 Playing track");
+  console.log("   Watching for changes...");
+  let debounce;
+  vite$1.watcher.on("change", async (changedPath) => {
+    const normalizedChanged = vite.normalizePath(path.resolve(changedPath));
+    if (!isDependencyOfSong(normalizedChanged)) {
+      return;
+    }
+    clearTimeout(debounce);
+    debounce = setTimeout(async () => {
+      try {
+        await loadSong();
+        console.log(`✅ Hot reloaded (${changedPath})`);
+      } catch (e) {
+        console.error("❌ Error:", e instanceof Error ? e.message : String(e));
+      }
+    }, 50);
+  });
+  process.on("SIGINT", async () => {
+    console.log("\n👋 Stopping...");
+    await vite$1.close();
+    process.exit(0);
+  });
+}
+main().catch(console.error);
+//# sourceMappingURL=cli.cjs.map

package/dist/cli.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.cjs","sources":["../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\r\nimport { resolve } from \"path\";\r\nimport {\r\n  createServer,\r\n  type ModuleNode,\r\n  normalizePath,\r\n  type ViteDevServer,\r\n} from \"vite\";\r\nimport { JSDOM } from \"jsdom\";\r\nimport { type ComponentType, createElement } from \"react\";\r\nimport { createRoot, type Root } from \"react-dom/client\";\r\n\r\n// Create fake DOM for React\r\nconst dom = new JSDOM('<!DOCTYPE html><div id=\"root\"></div>');\r\n\r\n// Polyfill globals that React needs\r\n(globalThis as any).document = dom.window.document;\r\n(globalThis as any).window = dom.window;\r\n\r\nlet root: Root | null = null;\r\n\r\nfunction renderSong(SongComponent: ComponentType): void {\r\n  const container = document.getElementById(\"root\")!;\r\n\r\n  if (!root) {\r\n    root = createRoot(container);\r\n  }\r\n\r\n  root.render(createElement(SongComponent));\r\n}\r\n\r\nasync function main(): Promise<void> {\r\n  const filePath = process.argv[2];\r\n\r\n  if (!filePath) {\r\n    console.log(`\r\n🎹 React Synth - Live coding music with React\r\n\r\nUsage: \r\n  npx react-synth <song.tsx>     Run a song with hot reload\r\n`);\r\n    process.exit(0);\r\n  }\r\n\r\n  // Use normalizePath for consistent forward slashes (Vite uses forward slashes internally)\r\n  const absolutePath = normalizePath(resolve(process.cwd(), filePath));\r\n  console.log(`🎵 Loading ${filePath}...`);\r\n\r\n  const vite: ViteDevServer = await createServer({\r\n    configFile: false,\r\n    root: process.cwd(),\r\n    server: {\r\n      middlewareMode: true,\r\n      hmr: true,\r\n    },\r\n    appType: \"custom\",\r\n    optimizeDeps: {\r\n      exclude: [\"@react-synth/synth\", \"node-web-audio-api\"],\r\n    },\r\n    ssr: {\r\n      external: [\"node-web-audio-api\", \"jsdom\"],\r\n      noExternal: [\"@react-synth/synth\", \"tonal\"],\r\n    },\r\n    esbuild: {\r\n      jsx: \"automatic\",\r\n    },\r\n    logLevel: \"info\",\r\n  });\r\n\r\n  let currentModuleUrl: string | null = null;\r\n\r\n  async function loadSong(): Promise<void> {\r\n    const url = `${absolutePath}?t=${Date.now()}`;\r\n\r\n    // Invalidate the previous module if it exists\r\n    if (currentModuleUrl) {\r\n      const mod = await vite.moduleGraph.getModuleByUrl(currentModuleUrl);\r\n      if (mod) {\r\n        invalidateModuleAndImporters(mod);\r\n      }\r\n    }\r\n\r\n    currentModuleUrl = url;\r\n    const module = await vite.ssrLoadModule(url);\r\n\r\n    // Auto-render the default export if it's a component\r\n    if (module.default && typeof module.default === \"function\") {\r\n      renderSong(module.default);\r\n    } else {\r\n      console.warn(\r\n        \"⚠️  No default export found. Song file should export a React component as default.\",\r\n      );\r\n    }\r\n  }\r\n\r\n  // Recursively invalidate a module and all its importers\r\n  function invalidateModuleAndImporters(mod: ModuleNode): void {\r\n    vite.moduleGraph.invalidateModule(mod);\r\n    for (const importer of mod.importers) {\r\n      invalidateModuleAndImporters(importer);\r\n    }\r\n  }\r\n\r\n  // Collect all dependencies (imports) of a module recursively\r\n  function collectDependencies(\r\n    mod: ModuleNode,\r\n    visited: Set<string> = new Set(),\r\n  ): Set<string> {\r\n    if (mod.file) {\r\n      visited.add(mod.file);\r\n    }\r\n\r\n    for (const imported of mod.ssrImportedModules) {\r\n      if (imported.file && !visited.has(imported.file)) {\r\n        collectDependencies(imported, visited);\r\n      }\r\n    }\r\n\r\n    return visited;\r\n  }\r\n\r\n  // Check if a file is a dependency of the song module\r\n  function isDependencyOfSong(changedFile: string): boolean {\r\n    const songMod = vite.moduleGraph.getModulesByFile(absolutePath);\r\n    if (!songMod || songMod.size === 0) {\r\n      return false;\r\n    }\r\n\r\n    for (const mod of songMod) {\r\n      const deps = collectDependencies(mod);\r\n      if (deps.has(changedFile)) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  await loadSong();\r\n  console.log(\"🎹 Playing track\");\r\n  console.log(\"   Watching for changes...\");\r\n\r\n  let debounce: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  vite.watcher.on(\"change\", async (changedPath) => {\r\n    // Normalize to forward slashes to match Vite's module graph\r\n    const normalizedChanged = normalizePath(resolve(changedPath));\r\n\r\n    // Reload if the song file itself changed, or any of its dependencies\r\n    if (!isDependencyOfSong(normalizedChanged)) {\r\n      return;\r\n    }\r\n\r\n    clearTimeout(debounce);\r\n    debounce = setTimeout(async () => {\r\n      try {\r\n        await loadSong();\r\n        console.log(`✅ Hot reloaded (${changedPath})`);\r\n      } catch (e) {\r\n        console.error(\"❌ Error:\", e instanceof Error ? e.message : String(e));\r\n      }\r\n    }, 50);\r\n  });\r\n\r\n  process.on(\"SIGINT\", async () => {\r\n    console.log(\"\\n👋 Stopping...\");\r\n    await vite.close();\r\n    process.exit(0);\r\n  });\r\n}\r\n\r\nmain().catch(console.error);\r\n"],"names":["JSDOM","createRoot","createElement","normalizePath","resolve","vite","createServer","module"],"mappings":"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"}

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export { }

package/dist/cli.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+import { resolve } from "path";
+import { normalizePath, createServer } from "vite";
+import { JSDOM } from "jsdom";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+const dom = new JSDOM('<!DOCTYPE html><div id="root"></div>');
+globalThis.document = dom.window.document;
+globalThis.window = dom.window;
+let root = null;
+function renderSong(SongComponent) {
+  const container = document.getElementById("root");
+  if (!root) {
+    root = createRoot(container);
+  }
+  root.render(createElement(SongComponent));
+}
+async function main() {
+  const filePath = process.argv[2];
+  if (!filePath) {
+    console.log(`
+🎹 React Synth - Live coding music with React
+
+Usage: 
+  npx react-synth <song.tsx>     Run a song with hot reload
+`);
+    process.exit(0);
+  }
+  const absolutePath = normalizePath(resolve(process.cwd(), filePath));
+  console.log(`🎵 Loading ${filePath}...`);
+  const vite = await createServer({
+    configFile: false,
+    root: process.cwd(),
+    server: {
+      middlewareMode: true,
+      hmr: true
+    },
+    appType: "custom",
+    optimizeDeps: {
+      exclude: ["@react-synth/synth", "node-web-audio-api"]
+    },
+    ssr: {
+      external: ["node-web-audio-api", "jsdom"],
+      noExternal: ["@react-synth/synth", "tonal"]
+    },
+    esbuild: {
+      jsx: "automatic"
+    },
+    logLevel: "info"
+  });
+  let currentModuleUrl = null;
+  async function loadSong() {
+    const url = `${absolutePath}?t=${Date.now()}`;
+    if (currentModuleUrl) {
+      const mod = await vite.moduleGraph.getModuleByUrl(currentModuleUrl);
+      if (mod) {
+        invalidateModuleAndImporters(mod);
+      }
+    }
+    currentModuleUrl = url;
+    const module = await vite.ssrLoadModule(url);
+    if (module.default && typeof module.default === "function") {
+      renderSong(module.default);
+    } else {
+      console.warn(
+        "⚠️  No default export found. Song file should export a React component as default."
+      );
+    }
+  }
+  function invalidateModuleAndImporters(mod) {
+    vite.moduleGraph.invalidateModule(mod);
+    for (const importer of mod.importers) {
+      invalidateModuleAndImporters(importer);
+    }
+  }
+  function collectDependencies(mod, visited = /* @__PURE__ */ new Set()) {
+    if (mod.file) {
+      visited.add(mod.file);
+    }
+    for (const imported of mod.ssrImportedModules) {
+      if (imported.file && !visited.has(imported.file)) {
+        collectDependencies(imported, visited);
+      }
+    }
+    return visited;
+  }
+  function isDependencyOfSong(changedFile) {
+    const songMod = vite.moduleGraph.getModulesByFile(absolutePath);
+    if (!songMod || songMod.size === 0) {
+      return false;
+    }
+    for (const mod of songMod) {
+      const deps = collectDependencies(mod);
+      if (deps.has(changedFile)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  await loadSong();
+  console.log("🎹 Playing track");
+  console.log("   Watching for changes...");
+  let debounce;
+  vite.watcher.on("change", async (changedPath) => {
+    const normalizedChanged = normalizePath(resolve(changedPath));
+    if (!isDependencyOfSong(normalizedChanged)) {
+      return;
+    }
+    clearTimeout(debounce);
+    debounce = setTimeout(async () => {
+      try {
+        await loadSong();
+        console.log(`✅ Hot reloaded (${changedPath})`);
+      } catch (e) {
+        console.error("❌ Error:", e instanceof Error ? e.message : String(e));
+      }
+    }, 50);
+  });
+  process.on("SIGINT", async () => {
+    console.log("\n👋 Stopping...");
+    await vite.close();
+    process.exit(0);
+  });
+}
+main().catch(console.error);
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sources":["../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\r\nimport { resolve } from \"path\";\r\nimport {\r\n  createServer,\r\n  type ModuleNode,\r\n  normalizePath,\r\n  type ViteDevServer,\r\n} from \"vite\";\r\nimport { JSDOM } from \"jsdom\";\r\nimport { type ComponentType, createElement } from \"react\";\r\nimport { createRoot, type Root } from \"react-dom/client\";\r\n\r\n// Create fake DOM for React\r\nconst dom = new JSDOM('<!DOCTYPE html><div id=\"root\"></div>');\r\n\r\n// Polyfill globals that React needs\r\n(globalThis as any).document = dom.window.document;\r\n(globalThis as any).window = dom.window;\r\n\r\nlet root: Root | null = null;\r\n\r\nfunction renderSong(SongComponent: ComponentType): void {\r\n  const container = document.getElementById(\"root\")!;\r\n\r\n  if (!root) {\r\n    root = createRoot(container);\r\n  }\r\n\r\n  root.render(createElement(SongComponent));\r\n}\r\n\r\nasync function main(): Promise<void> {\r\n  const filePath = process.argv[2];\r\n\r\n  if (!filePath) {\r\n    console.log(`\r\n🎹 React Synth - Live coding music with React\r\n\r\nUsage: \r\n  npx react-synth <song.tsx>     Run a song with hot reload\r\n`);\r\n    process.exit(0);\r\n  }\r\n\r\n  // Use normalizePath for consistent forward slashes (Vite uses forward slashes internally)\r\n  const absolutePath = normalizePath(resolve(process.cwd(), filePath));\r\n  console.log(`🎵 Loading ${filePath}...`);\r\n\r\n  const vite: ViteDevServer = await createServer({\r\n    configFile: false,\r\n    root: process.cwd(),\r\n    server: {\r\n      middlewareMode: true,\r\n      hmr: true,\r\n    },\r\n    appType: \"custom\",\r\n    optimizeDeps: {\r\n      exclude: [\"@react-synth/synth\", \"node-web-audio-api\"],\r\n    },\r\n    ssr: {\r\n      external: [\"node-web-audio-api\", \"jsdom\"],\r\n      noExternal: [\"@react-synth/synth\", \"tonal\"],\r\n    },\r\n    esbuild: {\r\n      jsx: \"automatic\",\r\n    },\r\n    logLevel: \"info\",\r\n  });\r\n\r\n  let currentModuleUrl: string | null = null;\r\n\r\n  async function loadSong(): Promise<void> {\r\n    const url = `${absolutePath}?t=${Date.now()}`;\r\n\r\n    // Invalidate the previous module if it exists\r\n    if (currentModuleUrl) {\r\n      const mod = await vite.moduleGraph.getModuleByUrl(currentModuleUrl);\r\n      if (mod) {\r\n        invalidateModuleAndImporters(mod);\r\n      }\r\n    }\r\n\r\n    currentModuleUrl = url;\r\n    const module = await vite.ssrLoadModule(url);\r\n\r\n    // Auto-render the default export if it's a component\r\n    if (module.default && typeof module.default === \"function\") {\r\n      renderSong(module.default);\r\n    } else {\r\n      console.warn(\r\n        \"⚠️  No default export found. Song file should export a React component as default.\",\r\n      );\r\n    }\r\n  }\r\n\r\n  // Recursively invalidate a module and all its importers\r\n  function invalidateModuleAndImporters(mod: ModuleNode): void {\r\n    vite.moduleGraph.invalidateModule(mod);\r\n    for (const importer of mod.importers) {\r\n      invalidateModuleAndImporters(importer);\r\n    }\r\n  }\r\n\r\n  // Collect all dependencies (imports) of a module recursively\r\n  function collectDependencies(\r\n    mod: ModuleNode,\r\n    visited: Set<string> = new Set(),\r\n  ): Set<string> {\r\n    if (mod.file) {\r\n      visited.add(mod.file);\r\n    }\r\n\r\n    for (const imported of mod.ssrImportedModules) {\r\n      if (imported.file && !visited.has(imported.file)) {\r\n        collectDependencies(imported, visited);\r\n      }\r\n    }\r\n\r\n    return visited;\r\n  }\r\n\r\n  // Check if a file is a dependency of the song module\r\n  function isDependencyOfSong(changedFile: string): boolean {\r\n    const songMod = vite.moduleGraph.getModulesByFile(absolutePath);\r\n    if (!songMod || songMod.size === 0) {\r\n      return false;\r\n    }\r\n\r\n    for (const mod of songMod) {\r\n      const deps = collectDependencies(mod);\r\n      if (deps.has(changedFile)) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  await loadSong();\r\n  console.log(\"🎹 Playing track\");\r\n  console.log(\"   Watching for changes...\");\r\n\r\n  let debounce: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  vite.watcher.on(\"change\", async (changedPath) => {\r\n    // Normalize to forward slashes to match Vite's module graph\r\n    const normalizedChanged = normalizePath(resolve(changedPath));\r\n\r\n    // Reload if the song file itself changed, or any of its dependencies\r\n    if (!isDependencyOfSong(normalizedChanged)) {\r\n      return;\r\n    }\r\n\r\n    clearTimeout(debounce);\r\n    debounce = setTimeout(async () => {\r\n      try {\r\n        await loadSong();\r\n        console.log(`✅ Hot reloaded (${changedPath})`);\r\n      } catch (e) {\r\n        console.error(\"❌ Error:\", e instanceof Error ? e.message : String(e));\r\n      }\r\n    }, 50);\r\n  });\r\n\r\n  process.on(\"SIGINT\", async () => {\r\n    console.log(\"\\n👋 Stopping...\");\r\n    await vite.close();\r\n    process.exit(0);\r\n  });\r\n}\r\n\r\nmain().catch(console.error);\r\n"],"names":[],"mappings":"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"}