@codefluss/sandbox 0.0.1-alpha.1

package/dist/frameworks/templates/vue-template.js

@@ -0,0 +1,388 @@
+export const vueTemplate = {
+    id: 'vue',
+    name: 'Vue',
+    description: 'Vue 3 with Composition API and TypeScript',
+    sandpackTemplate: 'vue',
+    files: {
+        '/src/App.vue': {
+            code: `<template>
+  <div class="app">
+    <header>
+      <h1>Hello Vue! 💚</h1>
+      <p>Edit this component to see live updates.</p>
+    </header>
+
+    <main>
+      <section class="card">
+        <h2>Counter: <span id="count">{{ count }}</span></h2>
+        <div class="button-group">
+          <button class="btn-primary" @click="increment">
+            <span>+</span> Increment
+          </button>
+          <button class="btn-secondary" @click="decrement">
+            <span>-</span> Decrement
+          </button>
+          <button class="btn-outline" @click="reset">
+            Reset
+          </button>
+        </div>
+        <div class="stats">
+          <small>Total clicks: {{ totalClicks }}</small>
+        </div>
+      </section>
+
+      <section class="card">
+        <h3>Modern Vue Features</h3>
+        <ul>
+          <li>✅ Vue 3+ Composition API</li>
+          <li>✅ TypeScript Support</li>
+          <li>✅ LocalStorage Persistence</li>
+          <li>✅ Event Handling</li>
+          <li>✅ Vite Build System</li>
+        </ul>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+
+const count = ref(0);
+const totalClicks = ref(0);
+const storageKey = 'vue-counter-data';
+
+// Load from localStorage on mount
+onMounted(() => {
+  try {
+    const data = localStorage.getItem(storageKey);
+    if (data) {
+      const parsed = JSON.parse(data);
+      count.value = parsed.count || 0;
+      totalClicks.value = parsed.totalClicks || 0;
+    }
+  } catch (error) {
+    console.warn('Failed to load from localStorage:', error);
+  }
+});
+
+const increment = () => {
+  count.value++;
+  totalClicks.value++;
+};
+
+const decrement = () => {
+  if (count.value > 0) {
+    count.value--;
+    totalClicks.value++;
+  }
+};
+
+const reset = () => {
+  count.value = 0;
+  totalClicks.value++;
+};
+
+// Save to localStorage whenever count changes
+watch([count, totalClicks], () => {
+  try {
+    const data = { count: count.value, totalClicks: totalClicks.value };
+    localStorage.setItem(storageKey, JSON.stringify(data));
+  } catch (error) {
+    console.warn('Failed to save to localStorage:', error);
+  }
+}, { deep: true });
+</script>
+
+<style scoped>
+/* Modern Vue App Styles - Same as Vanilla Template */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  min-height: 100vh;
+  padding: 2rem;
+}
+
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  padding: 2rem;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 800;
+  margin-bottom: 0.5rem;
+  background: linear-gradient(135deg, #42b883, #6366f1);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: titleGlow 3s ease-in-out infinite alternate;
+}
+
+@keyframes titleGlow {
+  from { filter: drop-shadow(0 0 20px rgba(66, 184, 131, 0.3)); }
+  to { filter: drop-shadow(0 0 30px rgba(66, 184, 131, 0.3)); }
+}
+
+p {
+  color: #64748b;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+}
+
+.card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  transform: translateY(-2px);
+}
+
+.card h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  color: #1e293b;
+}
+
+.card h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: #1e293b;
+}
+
+#count {
+  display: inline-block;
+  font-weight: 800;
+  font-size: 2.5rem;
+  color: #42b883;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 100px;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 2rem 0;
+  flex-wrap: wrap;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+button:hover::before {
+  left: 100%;
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+button span {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.btn-primary {
+  background: #42b883;
+  color: white;
+  border-color: #42b883;
+}
+
+.btn-primary:hover {
+  background: #35a372;
+  border-color: #35a372;
+  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.3);
+}
+
+.btn-secondary {
+  background: #6366f1;
+  color: white;
+  border-color: #6366f1;
+}
+
+.btn-secondary:hover {
+  background: #4f46e5;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.btn-outline {
+  background: transparent;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.btn-outline:hover {
+  background: #f8fafc;
+  color: #ef4444;
+  border-color: #ef4444;
+}
+
+.stats {
+  text-align: center;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.stats small {
+  color: #64748b;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  padding: 0.5rem 0;
+  color: #64748b;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+li:last-child {
+  border-bottom: none;
+}
+
+/* Focus styles */
+button:focus-visible {
+  outline: 2px solid #42b883;
+  outline-offset: 2px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  body {
+    padding: 1rem;
+  }
+
+  .app {
+    padding: 1.5rem;
+  }
+
+  .button-group {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  button {
+    width: 100%;
+    max-width: 200px;
+  }
+}
+</style>`,
+        },
+        '/src/main.js': {
+            code: `import { createApp } from 'vue';
+import App from './App.vue';
+import './style.css';
+
+createApp(App).mount('#app');`,
+        },
+        '/src/style.css': {
+            code: `* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: #f5f5f5;
+  padding: 2rem;
+}
+
+#app {
+  max-width: 800px;
+  margin: 0 auto;
+}`,
+        },
+        '/index.html': {
+            code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>`,
+        },
+    },
+    dependencies: {
+        vue: '^3.3.0',
+    },
+    devDependencies: {
+        '@vitejs/plugin-vue': '^4.0.0',
+        typescript: '^5.0.0',
+        'vue-tsc': '^1.8.0',
+    },
+    config: {
+        entry: '/src/main.js',
+        main: '/src/App.vue',
+        showConsole: true,
+        showDevTools: false,
+    },
+};
+//# sourceMappingURL=vue-template.js.map

package/dist/frameworks/templates/vue-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-template.js","sourceRoot":"","sources":["../../../src/frameworks/templates/vue-template.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,WAAW,GAAsB;IAC7C,EAAE,EAAE,KAAK;IACT,IAAI,EAAE,KAAK;IACX,WAAW,EAAE,2CAA2C;IACxD,gBAAgB,EAAE,KAAK;IACvB,KAAK,EAAE;QACN,cAAc,EAAE;YACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAiUA;SACN;QACA,cAAc,EAAE;YAChB,IAAI,EAAE;;;;8BAIqB;SAC3B;QACD,gBAAgB,EAAE;YACjB,IAAI,EAAE;;;;;;;;;;;;;;;;;EAiBP;SACC;QACD,aAAa,EAAE;YACd,IAAI,EAAE;;;;;;;;;;;QAWD;SACL;KACD;IACD,YAAY,EAAE;QACb,GAAG,EAAE,QAAQ;KACb;IACD,eAAe,EAAE;QAChB,oBAAoB,EAAE,QAAQ;QAC9B,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,QAAQ;KACnB;IACD,MAAM,EAAE;QACP,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,KAAK;KACnB;CACD,CAAC"}

package/dist/frameworks/types.d.ts

@@ -0,0 +1,57 @@
+import type { SandpackFiles, SandpackPredefinedTemplate } from '@codesandbox/sandpack-react';
+import type { Framework as StorageFramework } from '../storage/types';
+export type Framework = StorageFramework;
+export interface FrameworkTemplate {
+    id: Framework;
+    name: string;
+    description: string;
+    sandpackTemplate?: SandpackPredefinedTemplate;
+    files: SandpackFiles;
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    config?: {
+        entry?: string;
+        main?: string;
+        showConsole?: boolean;
+        showDevTools?: boolean;
+    };
+}
+export interface FrameworkDetectionResult {
+    framework: Framework;
+    confidence: number;
+    reasons: string[];
+}
+export interface MultiFileConfig {
+    activeFile: string;
+    files: SandpackFiles;
+    framework: Framework;
+    showFileTree?: boolean;
+    showTabs?: boolean;
+    theme?: 'light' | 'dark' | 'auto';
+    showLineNumbers?: boolean;
+    showInlineErrors?: boolean;
+}
+export type FileOperation = {
+    type: 'add';
+    path: string;
+    content: string;
+} | {
+    type: 'delete';
+    path: string;
+} | {
+    type: 'rename';
+    path: string;
+    newPath: string;
+} | {
+    type: 'update';
+    path: string;
+    content: string;
+};
+export interface FileTreeNode {
+    name: string;
+    path: string;
+    type: 'file' | 'directory';
+    children?: FileTreeNode[];
+    extension?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/frameworks/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/frameworks/types.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAKtE,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC;AAKzC,MAAM,WAAW,iBAAiB;IAEjC,EAAE,EAAE,SAAS,CAAC;IAEd,IAAI,EAAE,MAAM,CAAC;IAEb,WAAW,EAAE,MAAM,CAAC;IAEpB,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;IAE9C,KAAK,EAAE,aAAa,CAAC;IAErB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEzC,MAAM,CAAC,EAAE;QAER,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf,IAAI,CAAC,EAAE,MAAM,CAAC;QAEd,WAAW,CAAC,EAAE,OAAO,CAAC;QAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;CACF;AAKD,MAAM,WAAW,wBAAwB;IAExC,SAAS,EAAE,SAAS,CAAC;IAErB,UAAU,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,MAAM,EAAE,CAAC;CAClB;AAKD,MAAM,WAAW,eAAe;IAE/B,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,CAAC;IAErB,SAAS,EAAE,SAAS,CAAC;IAErB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAElC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAKD,MAAM,MAAM,aAAa,GACtB;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrD,MAAM,WAAW,YAAY;IAE5B,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAE3B,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/frameworks/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/frameworks/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/frameworks/types.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './core';
+export * from './converters/shared';
+export * from './converters/codepen';
+export * from './converters/gist';
+export * from './converters/auto-detect';
+export * from './widgets';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAgBA,cAAc,QAAQ,CAAC;AAGvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from './core';
+export * from './converters/shared';
+export * from './converters/codepen';
+export * from './converters/gist';
+export * from './converters/auto-detect';
+export * from './widgets';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAgBA,cAAc,QAAQ,CAAC;AAGvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,WAAW,CAAC"}

package/dist/lib/performance-tracker.d.ts

@@ -0,0 +1,45 @@
+export interface PerformanceMeasurement {
+    id: string;
+    duration: number;
+    cacheHit: boolean;
+    timestamp: number;
+    framework: 'react' | 'vue' | 'svelte' | 'vanilla';
+    codeSize: number;
+}
+export interface PerformanceStats {
+    avg: number;
+    min: number;
+    max: number;
+    p50: number;
+    p95: number;
+    p99: number;
+    count: number;
+}
+export interface PerformanceReport {
+    cacheMiss: PerformanceStats;
+    cacheHit: PerformanceStats;
+    improvement: number;
+    hitRate: number;
+    totalMeasurements: number;
+}
+export declare class SandboxPerformanceTracker {
+    private measurements;
+    private listeners;
+    private autoReportTimer;
+    constructor(autoReportInterval?: number);
+    startMeasurement(id: string): void;
+    endMeasurement(id: string, cacheHit: boolean, framework?: 'react' | 'vue' | 'svelte' | 'vanilla', codeSize?: number): number;
+    private calculateStats;
+    private percentile;
+    getReport(): PerformanceReport;
+    printReport(): void;
+    subscribe(listener: (report: PerformanceReport) => void): () => void;
+    private notifyListeners;
+    private startAutoReport;
+    stopAutoReport(): void;
+    clear(): void;
+    getAllMeasurements(): PerformanceMeasurement[];
+    exportJSON(): string;
+}
+export declare const perfTracker: SandboxPerformanceTracker;
+//# sourceMappingURL=performance-tracker.d.ts.map

package/dist/lib/performance-tracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance-tracker.d.ts","sourceRoot":"","sources":["../../src/lib/performance-tracker.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAClD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,qBAAa,yBAAyB;IACpC,OAAO,CAAC,YAAY,CAAoD;IACxE,OAAO,CAAC,SAAS,CAAuD;IACxE,OAAO,CAAC,eAAe,CAA+B;gBAE1C,kBAAkB,CAAC,EAAE,MAAM;IASvC,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAoBlC,cAAc,CACZ,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,OAAO,EACjB,SAAS,GAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAmB,EAC3D,QAAQ,GAAE,MAAU,GACnB,MAAM;IAgDT,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,UAAU;IAQlB,SAAS,IAAI,iBAAiB;IA0B9B,WAAW,IAAI,IAAI;IAwCnB,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,GAAG,MAAM,IAAI;IAQpE,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAWvB,cAAc,IAAI,IAAI;IAUtB,KAAK,IAAI,IAAI;IAQb,kBAAkB,IAAI,sBAAsB,EAAE;IAS9C,UAAU,IAAI,MAAM;CAcrB;AAGD,eAAO,MAAM,WAAW,2BAAuC,CAAC"}

package/dist/lib/performance-tracker.js

@@ -0,0 +1,165 @@
+export class SandboxPerformanceTracker {
+    measurements = new Map();
+    listeners = new Set();
+    autoReportTimer = null;
+    constructor(autoReportInterval) {
+        if (typeof window !== 'undefined' && autoReportInterval) {
+            this.startAutoReport(autoReportInterval);
+        }
+    }
+    startMeasurement(id) {
+        if (typeof window === 'undefined')
+            return;
+        const key = `sandbox-${id}`;
+        try {
+            performance.clearMarks(`${key}-start`);
+            performance.clearMarks(`${key}-end`);
+            performance.clearMeasures(key);
+        }
+        catch (e) {
+        }
+        performance.mark(`${key}-start`);
+    }
+    endMeasurement(id, cacheHit, framework = 'react', codeSize = 0) {
+        if (typeof window === 'undefined')
+            return 0;
+        const key = `sandbox-${id}`;
+        performance.mark(`${key}-end`);
+        const measure = performance.measure(key, `${key}-start`, `${key}-end`);
+        const duration = measure.duration;
+        const category = cacheHit ? 'cache-hit' : 'cache-miss';
+        const measurement = {
+            id,
+            duration,
+            cacheHit,
+            timestamp: Date.now(),
+            framework,
+            codeSize,
+        };
+        const measurements = this.measurements.get(category) || [];
+        measurements.push(measurement);
+        this.measurements.set(category, measurements);
+        const emoji = cacheHit ? '⚡' : '🔄';
+        console.log(`${emoji} Sandbox ${id}: ${duration.toFixed(0)}ms (${category}, ${framework}, ${(codeSize / 1024).toFixed(1)}KB)`);
+        this.notifyListeners();
+        performance.clearMarks(`${key}-start`);
+        performance.clearMarks(`${key}-end`);
+        performance.clearMeasures(key);
+        return duration;
+    }
+    calculateStats(measurements) {
+        if (measurements.length === 0) {
+            return { avg: 0, min: 0, max: 0, p50: 0, p95: 0, p99: 0, count: 0 };
+        }
+        const durations = measurements.map(m => m.duration).sort((a, b) => a - b);
+        const sum = durations.reduce((a, b) => a + b, 0);
+        return {
+            avg: sum / durations.length,
+            min: Math.min(...durations),
+            max: Math.max(...durations),
+            p50: this.percentile(durations, 0.5),
+            p95: this.percentile(durations, 0.95),
+            p99: this.percentile(durations, 0.99),
+            count: durations.length,
+        };
+    }
+    percentile(sorted, p) {
+        const index = Math.ceil(sorted.length * p) - 1;
+        return sorted[Math.max(0, index)];
+    }
+    getReport() {
+        const misses = this.measurements.get('cache-miss') || [];
+        const hits = this.measurements.get('cache-hit') || [];
+        const total = misses.length + hits.length;
+        const cacheMiss = this.calculateStats(misses);
+        const cacheHit = this.calculateStats(hits);
+        const improvement = cacheMiss.avg > 0
+            ? ((cacheMiss.avg - cacheHit.avg) / cacheMiss.avg) * 100
+            : 0;
+        const hitRate = total > 0 ? (hits.length / total) * 100 : 0;
+        return {
+            cacheMiss,
+            cacheHit,
+            improvement,
+            hitRate,
+            totalMeasurements: total,
+        };
+    }
+    printReport() {
+        const report = this.getReport();
+        console.log('');
+        console.log('====================================');
+        console.log('📊 SANDBOX PERFORMANCE REPORT');
+        console.log('====================================');
+        console.log('');
+        console.log('Cache Miss (First Render):');
+        console.log(`  Count: ${report.cacheMiss.count}`);
+        console.log(`  Avg: ${report.cacheMiss.avg.toFixed(0)}ms`);
+        console.log(`  Min: ${report.cacheMiss.min.toFixed(0)}ms`);
+        console.log(`  Max: ${report.cacheMiss.max.toFixed(0)}ms`);
+        console.log(`  P50: ${report.cacheMiss.p50.toFixed(0)}ms`);
+        console.log(`  P95: ${report.cacheMiss.p95.toFixed(0)}ms`);
+        console.log(`  P99: ${report.cacheMiss.p99.toFixed(0)}ms`);
+        console.log('');
+        console.log('Cache Hit (Cached Render):');
+        console.log(`  Count: ${report.cacheHit.count}`);
+        console.log(`  Avg: ${report.cacheHit.avg.toFixed(0)}ms`);
+        console.log(`  Min: ${report.cacheHit.min.toFixed(0)}ms`);
+        console.log(`  Max: ${report.cacheHit.max.toFixed(0)}ms`);
+        console.log(`  P50: ${report.cacheHit.p50.toFixed(0)}ms`);
+        console.log(`  P95: ${report.cacheHit.p95.toFixed(0)}ms`);
+        console.log(`  P99: ${report.cacheHit.p99.toFixed(0)}ms`);
+        console.log('');
+        if (report.cacheHit.count > 0 && report.cacheMiss.count > 0) {
+            console.log(`⚡ Performance Improvement: ${report.improvement.toFixed(1)}%`);
+            console.log(`📈 Cache Hit Rate: ${report.hitRate.toFixed(1)}%`);
+        }
+        console.log(`📝 Total Measurements: ${report.totalMeasurements}`);
+        console.log('====================================');
+        console.log('');
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    notifyListeners() {
+        const report = this.getReport();
+        this.listeners.forEach(listener => listener(report));
+    }
+    startAutoReport(intervalMs) {
+        this.autoReportTimer = setInterval(() => {
+            if (this.measurements.size > 0) {
+                this.printReport();
+            }
+        }, intervalMs);
+    }
+    stopAutoReport() {
+        if (this.autoReportTimer) {
+            clearInterval(this.autoReportTimer);
+            this.autoReportTimer = null;
+        }
+    }
+    clear() {
+        this.measurements.clear();
+        this.notifyListeners();
+    }
+    getAllMeasurements() {
+        const misses = this.measurements.get('cache-miss') || [];
+        const hits = this.measurements.get('cache-hit') || [];
+        return [...misses, ...hits].sort((a, b) => a.timestamp - b.timestamp);
+    }
+    exportJSON() {
+        const report = this.getReport();
+        const measurements = this.getAllMeasurements();
+        return JSON.stringify({
+            report,
+            measurements,
+            exportedAt: new Date().toISOString(),
+        }, null, 2);
+    }
+}
+export const perfTracker = new SandboxPerformanceTracker(60000);
+if (typeof window !== 'undefined') {
+    window.__sandboxPerfTracker = perfTracker;
+}
+//# sourceMappingURL=performance-tracker.js.map