@codefluss/sandbox 0.0.1-alpha.1

package/dist/frameworks/templates/index.js

@@ -0,0 +1,29 @@
+export { reactTemplate } from './react-template';
+export { vueTemplate } from './vue-template';
+export { svelteTemplate } from './svelte-template';
+export { vanillaTemplate } from './vanilla-template';
+import { reactTemplate } from './react-template';
+import { vueTemplate } from './vue-template';
+import { svelteTemplate } from './svelte-template';
+import { vanillaTemplate } from './vanilla-template';
+export function getTemplate(framework) {
+    switch (framework) {
+        case 'react':
+            return reactTemplate;
+        case 'vue':
+            return vueTemplate;
+        case 'svelte':
+            return svelteTemplate;
+        case 'vanilla':
+            return vanillaTemplate;
+        default:
+            return vanillaTemplate;
+    }
+}
+export const allTemplates = {
+    react: reactTemplate,
+    vue: vueTemplate,
+    svelte: svelteTemplate,
+    vanilla: vanillaTemplate,
+};
+//# sourceMappingURL=index.js.map

package/dist/frameworks/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/frameworks/templates/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAMrD,MAAM,UAAU,WAAW,CAAC,SAAoB;IAC/C,QAAQ,SAAS,EAAE,CAAC;QACnB,KAAK,OAAO;YACX,OAAO,aAAa,CAAC;QACtB,KAAK,KAAK;YACT,OAAO,WAAW,CAAC;QACpB,KAAK,QAAQ;YACZ,OAAO,cAAc,CAAC;QACvB,KAAK,SAAS;YACb,OAAO,eAAe,CAAC;QACxB;YACC,OAAO,eAAe,CAAC;IACzB,CAAC;AACF,CAAC;AAKD,MAAM,CAAC,MAAM,YAAY,GAAyC;IACjE,KAAK,EAAE,aAAa;IACpB,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,cAAc;IACtB,OAAO,EAAE,eAAe;CACxB,CAAC"}

package/dist/frameworks/templates/react-template.d.ts

@@ -0,0 +1,3 @@
+import type { FrameworkTemplate } from '../types';
+export declare const reactTemplate: FrameworkTemplate;
+//# sourceMappingURL=react-template.d.ts.map

package/dist/frameworks/templates/react-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-template.d.ts","sourceRoot":"","sources":["../../../src/frameworks/templates/react-template.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,aAAa,EAAE,iBAsX3B,CAAC"}

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

@@ -0,0 +1,376 @@
+export const reactTemplate = {
+    id: 'react',
+    name: 'React',
+    description: 'React 18+ with modern hooks and TypeScript',
+    sandpackTemplate: 'vanilla',
+    files: {
+        '/index.js': {
+            code: `import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+const root = createRoot(document.getElementById('app'));
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+        },
+        '/App.jsx': {
+            code: `import React, { useState, useEffect } from 'react';
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [totalClicks, setTotalClicks] = useState(0);
+
+  useEffect(() => {
+    // Load from localStorage on mount
+    try {
+      const data = localStorage.getItem('react-counter-data');
+      if (data) {
+        const parsed = JSON.parse(data);
+        setCount(parsed.count || 0);
+        setTotalClicks(parsed.totalClicks || 0);
+      }
+    } catch (error) {
+      console.warn('Failed to load from localStorage:', error);
+    }
+  }, []);
+
+  const increment = () => {
+    setCount(prev => prev + 1);
+    setTotalClicks(prev => prev + 1);
+  };
+
+  const decrement = () => {
+    if (count > 0) {
+      setCount(prev => prev - 1);
+      setTotalClicks(prev => prev + 1);
+    }
+  };
+
+  const reset = () => {
+    setCount(0);
+    setTotalClicks(prev => prev + 1);
+  };
+
+  useEffect(() => {
+    // Save to localStorage whenever count changes
+    try {
+      const data = { count, totalClicks };
+      localStorage.setItem('react-counter-data', JSON.stringify(data));
+    } catch (error) {
+      console.warn('Failed to save to localStorage:', error);
+    }
+  }, [count, totalClicks]);
+
+  return (
+    <div className="app">
+      <header>
+        <h1>Hello React! 🎉</h1>
+        <p>Edit this component to see live updates.</p>
+      </header>
+
+      <main>
+        <section className="card">
+          <h2>Counter: <span id="count">{count}</span></h2>
+          <div className="button-group">
+            <button className="btn-primary" onClick={increment}>
+              <span>+</span> Increment
+            </button>
+            <button className="btn-secondary" onClick={decrement}>
+              <span>-</span> Decrement
+            </button>
+            <button className="btn-outline" onClick={reset}>
+              Reset
+            </button>
+          </div>
+          <div className="stats">
+            <small>Total clicks: {totalClicks}</small>
+          </div>
+        </section>
+
+        <section className="card">
+          <h3>Modern React Features</h3>
+          <ul>
+            <li>✅ React 18+ Hooks</li>
+            <li>✅ TypeScript Support</li>
+            <li>✅ LocalStorage Persistence</li>
+            <li>✅ Event Handling</li>
+            <li>✅ Vite Build System</li>
+          </ul>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default App;`,
+        },
+        '/styles.css': {
+            code: `/* Modern React App Styles - Same as Vue 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, #61dafb, #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(97, 218, 251, 0.3)); }
+  to { filter: drop-shadow(0 0 30px rgba(97, 218, 251, 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: #61dafb;
+  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: #61dafb;
+  color: #333;
+  border-color: #61dafb;
+}
+
+.btn-primary:hover {
+  background: #4fa8c5;
+  border-color: #4fa8c5;
+  box-shadow: 0 4px 12px rgba(97, 218, 251, 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 #61dafb;
+  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;
+  }
+}`,
+        },
+        '/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>React App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/index.js"></script>
+  </body>
+</html>`,
+        },
+    },
+    dependencies: {
+        react: '^18.2.0',
+        'react-dom': '^18.2.0',
+    },
+    devDependencies: {
+        '@types/react': '^18.2.0',
+        '@types/react-dom': '^18.2.0',
+        typescript: '^5.0.0',
+    },
+    config: {
+        entry: '/src/main.jsx',
+        main: '/src/App.jsx',
+        showConsole: true,
+        showDevTools: false,
+    },
+};
+//# sourceMappingURL=react-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react-template.js","sourceRoot":"","sources":["../../../src/frameworks/templates/react-template.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC/C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,4CAA4C;IACzD,gBAAgB,EAAE,SAAS;IAC3B,KAAK,EAAE;QACN,WAAW,EAAE;YACZ,IAAI,EAAE;;;;;;;;;;;GAWN;SACA;QACD,UAAU,EAAE;YACX,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAwFW;SACjB;QACD,aAAa,EAAE;YACd,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsOP;SACC;QACD,aAAa,EAAE;YACd,IAAI,EAAE;;;;;;;;;;;QAWD;SACL;KACD;IACD,YAAY,EAAE;QACb,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,SAAS;KACtB;IACD,eAAe,EAAE;QAChB,cAAc,EAAE,SAAS;QACzB,kBAAkB,EAAE,SAAS;QAC7B,UAAU,EAAE,QAAQ;KACpB;IACD,MAAM,EAAE;QACP,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,KAAK;KACnB;CACD,CAAC"}

package/dist/frameworks/templates/svelte-template.d.ts

@@ -0,0 +1,3 @@
+import type { FrameworkTemplate } from '../types';
+export declare const svelteTemplate: FrameworkTemplate;
+//# sourceMappingURL=svelte-template.d.ts.map

package/dist/frameworks/templates/svelte-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte-template.d.ts","sourceRoot":"","sources":["../../../src/frameworks/templates/svelte-template.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,cAAc,EAAE,iBAmX5B,CAAC"}