@codefluss/sandbox 0.0.1-alpha.1

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

@@ -0,0 +1,373 @@
+export const svelteTemplate = {
+    id: 'svelte',
+    name: 'Svelte',
+    description: 'Svelte with reactive statements',
+    sandpackTemplate: 'svelte',
+    files: {
+        '/App.svelte': {
+            code: `<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let count = 0;
+  let totalClicks = 0;
+  const storageKey = 'svelte-counter-data';
+
+  // Load from localStorage on mount
+  onMount(() => {
+    try {
+      const data = localStorage.getItem(storageKey);
+      if (data) {
+        const parsed = JSON.parse(data);
+        count = parsed.count || 0;
+        totalClicks = parsed.totalClicks || 0;
+      }
+    } catch (error) {
+      console.warn('Failed to load from localStorage:', error);
+    }
+  });
+
+  const increment = () => {
+    count += 1;
+    totalClicks += 1;
+    saveToStorage();
+  };
+
+  const decrement = () => {
+    if (count > 0) {
+      count -= 1;
+      totalClicks += 1;
+      saveToStorage();
+    }
+  };
+
+  const reset = () => {
+    count = 0;
+    totalClicks += 1;
+    saveToStorage();
+  };
+
+  const saveToStorage = () => {
+    try {
+      const data = { count, totalClicks };
+      localStorage.setItem(storageKey, JSON.stringify(data));
+    } catch (error) {
+      console.warn('Failed to save to localStorage:', error);
+    }
+  };
+
+  // Reactive statement to save whenever count changes
+  $: if (count >= 0) saveToStorage();
+</script>
+
+<div class="app">
+  <header>
+    <h1>Hello Svelte! 🧡</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" on:click={increment}>
+          <span>+</span> Increment
+        </button>
+        <button class="btn-secondary" on:click={decrement}>
+          <span>-</span> Decrement
+        </button>
+        <button class="btn-outline" on:click={reset}>
+          Reset
+        </button>
+      </div>
+      <div class="stats">
+        <small>Total clicks: {totalClicks}</small>
+      </div>
+    </section>
+
+    <section class="card">
+      <h3>Modern Svelte Features</h3>
+      <ul>
+        <li>✅ Reactive Statements</li>
+        <li>✅ TypeScript Support</li>
+        <li>✅ LocalStorage Persistence</li>
+        <li>✅ Event Handling</li>
+        <li>✅ Vite Build System</li>
+      </ul>
+    </section>
+  </main>
+</div>
+
+<style>
+/* Modern Svelte 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, #ff3e00, #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(255, 62, 0, 0.3)); }
+  to { filter: drop-shadow(0 0 30px rgba(255, 62, 0, 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: #ff3e00;
+  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: #ff3e00;
+  color: white;
+  border-color: #ff3e00;
+}
+
+.btn-primary:hover {
+  background: #e63600;
+  border-color: #e63600;
+  box-shadow: 0 4px 12px rgba(255, 62, 0, 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 #ff3e00;
+  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>`,
+        },
+        '/main.ts': {
+            code: `import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app')!,
+});
+
+export default app;`,
+        },
+        '/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>Svelte App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>`,
+        },
+    },
+    dependencies: {
+        svelte: '^3.58.0',
+    },
+    devDependencies: {
+        '@sveltejs/vite-plugin-svelte': '^2.4.0',
+        'svelte-check': '^3.5.0',
+        typescript: '^5.0.0',
+    },
+    config: {
+        entry: '/main.ts',
+        main: '/App.svelte',
+        showConsole: true,
+        showDevTools: false,
+    },
+};
+//# sourceMappingURL=svelte-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"svelte-template.js","sourceRoot":"","sources":["../../../src/frameworks/templates/svelte-template.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,cAAc,GAAsB;IAChD,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,iCAAiC;IAC9C,gBAAgB,EAAE,QAAQ;IAC1B,KAAK,EAAE;QACN,aAAa,EAAE;YACd,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoUA;SACN;QACC,UAAU,EAAE;YACb,IAAI,EAAE;;;;;;oBAMW;SACjB;QACC,aAAa,EAAE;YAChB,IAAI,EAAE;;;;;;;;;;;QAWD;SACL;KACD;IACD,YAAY,EAAE;QACb,MAAM,EAAE,SAAS;KACjB;IACD,eAAe,EAAE;QAChB,8BAA8B,EAAE,QAAQ;QACxC,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACpB;IACD,MAAM,EAAE;QACP,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,KAAK;KACnB;CACD,CAAC"}

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

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

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

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