npm - @core.sbs/create-core-app - Versions diffs - 1.0.0 - Mend

@core.sbs/create-core-app 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +130 -0
package/bin/create-core-app.js +448 -0
package/package.json +31 -0
package/templates/default/README.md +95 -0
package/templates/default/core-components.js +117 -0
package/templates/default/index.html +203 -0
package/templates/default/styles.css +355 -0

package/README.md ADDED Viewed

@@ -0,0 +1,130 @@
+# create-core-app
+Scaffold a new core.js application with zero configuration.
+## Installation
+Install via npm:
+```bash
+npm install -g @core.sbs/create-core-app
+```
+## Usage
+### Quick Start
+After installation:
+```bash
+create-core-app my-app
+```
+The CLI will guide you through setup options:
+- **Development server** - Install and start core-dev for hot reloading
+- **Component generator** - Install core-gen for scaffolding components
+- **Routing** - Enable SPA routing in your app
+## Usage
+### Interactive Prompts
+The CLI will ask about optional tools:
+```bash
+create-core-app my-app
+? Would you like to install the development server? (Y/n)
+? Would you like to install the component generator? (Y/n)
+? Would you like to enable routing? (Y/n)
+```
+### Skip Auto-Start
+If you don't want the dev server to start automatically:
+```bash
+create-core-app my-app --no-server
+cd my-app
+core-dev
+```
+Or link it globally for testing:
+```bash
+cd cli/create-core-app
+npm link
+cd ../..
+create-core-app my-app
+```
+## What You Get
+- Beautiful welcome page with live demos
+- Interactive examples showing:
+  - Reactivity (counter demo)
+  - Data fetching (API integration)
+  - Routing (SPA navigation)
+  - Live framework stats
+- Pre-configured core.js setup
+- Starter styles
+- Getting started guide
+## Templates
+### Default Template
+```bash
+create-core-app my-app
+```
+Creates a welcome page with interactive demos and getting started guide.
+### Coming Soon
+- Dashboard template
+- Blog template
+- E-commerce template
+## Features
+- ✅ Zero build step - just open index.html
+- ✅ No dependencies to install
+- ✅ Works offline after first load
+- ✅ Beautiful welcome page
+- ✅ Live framework metrics
+- ✅ Interactive demos
+- ✅ Mobile responsive
+## Next Steps
+After creating your app:
+1. **Install VS Code Extension** - Get 56 code snippets
+   ```
+   Search for "core.js" in VS Code extensions tab and install
+   ```
+2. **Generate Components** - Use the component generator
+   ```bash
+   core-gen form --validation
+   core-gen table --sortable
+   ```
+3. **Read the Docs** - Learn more about core.js
+   ```
+   https://github.com/Sitezip/core.sbs
+   ```
+## No Build Step Required
+Unlike other frameworks, core.js apps don't need:
+- ❌ npm install
+- ❌ webpack/vite/rollup
+- ❌ babel/typescript compilation
+- ❌ build scripts
+Just include the CDN script and start coding!
+## License
+MIT

package/bin/create-core-app.js ADDED Viewed

@@ -0,0 +1,448 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+const { spawn } = require('child_process');
+const args = process.argv.slice(2);
+const projectName = args[0] || 'my-core-app';
+const template = args.find(arg => arg.startsWith('--template='))?.split('=')[1] || 'default';
+// Embedded templates for standalone installation
+const templates = {
+    default: {
+        'index.html': `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>core.sbs - Smoke Test</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <div class="logo">core.sbs</div>
+        <h1>It works!</h1>
+        <p>A lightweight, progressive JavaScript framework</p>
+        <div class="counter-box">
+            <div class="counter" id="counter">0</div>
+            <div class="counter-label">Live Counter</div>
+        </div>
+        <div class="buttons">
+            <button class="btn" onclick="increment()">+</button>
+            <button class="btn btn-secondary" onclick="decrement()">-</button>
+            <button class="btn btn-secondary" onclick="reset()">Reset</button>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
+    <script>
+        let count = 0;
+        const counterEl = document.getElementById('counter');
+        function updateDisplay() {
+            counterEl.textContent = count;
+        }
+        function increment() {
+            count++;
+            updateDisplay();
+        }
+        function decrement() {
+            count--;
+            updateDisplay();
+        }
+        function reset() {
+            count = 0;
+            updateDisplay();
+        }
+    </script>
+</body>
+</html>`,
+        'styles.css': `/* core.sbs Smoke Test Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+.container {
+    text-align: center;
+    padding: 2rem;
+}
+.logo {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(90deg, #10b981, #06b6d4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+h1 {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+    color: #10b981;
+}
+p {
+    font-size: 1.1rem;
+    opacity: 0.7;
+    margin-bottom: 3rem;
+}
+.counter-box {
+    background: rgba(16, 185, 129, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2rem 4rem;
+    margin-bottom: 2rem;
+    border: 1px solid rgba(16, 185, 129, 0.2);
+}
+.counter {
+    font-size: 5rem;
+    font-weight: 700;
+    line-height: 1;
+    margin-bottom: 0.5rem;
+    color: #10b981;
+    text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
+}
+.counter-label {
+    font-size: 0.9rem;
+    opacity: 0.6;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+.buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+.btn {
+    background: #10b981;
+    color: white;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 10px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 60px;
+}
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
+}
+.btn-secondary {
+    background: rgba(6, 182, 212, 0.2);
+    color: #06b6d4;
+    border: 1px solid rgba(6, 182, 212, 0.3);
+}
+.btn-secondary:hover {
+    background: rgba(6, 182, 212, 0.3);
+    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2);
+}
+@media (max-width: 480px) {
+    .logo { font-size: 2rem; }
+    h1 { font-size: 1.5rem; }
+    .counter { font-size: 3rem; }
+    .counter-box { padding: 1.5rem 2rem; }
+    .buttons { flex-direction: column; }
+    .btn { width: 100%; }
+}`,
+        'core-components.js': `/**
+ * core-components.js
+ * Component loader for core.js applications
+ * No build step required - just include this script
+ */
+(function() {
+    'use strict';
+    // Component cache
+    const componentCache = {};
+    /**
+     * Load a component from the components/ folder
+     * @param {string} componentName - Name of the component file (without .html extension)
+     * @returns {Promise<void>}
+     */
+    window.loadComponent = async function(componentName) {
+        // Check cache first
+        if (componentCache[componentName]) {
+            console.log(\`✓ Component "\${componentName}" already loaded\`);
+            return;
+        }
+        try {
+            const response = await fetch(\`components/\${componentName}.html\`);
+            if (!response.ok) {
+                throw new Error(\`Failed to load component: \${response.statusText}\`);
+            }
+            const html = await response.text();
+            // Create a temporary container to parse the HTML
+            const temp = document.createElement('div');
+            temp.innerHTML = html;
+            // Extract and inject templates into cr-data section
+            const templates = temp.querySelectorAll('template');
+            const crData = document.getElementById('cr-data');
+            if (crData && templates.length > 0) {
+                templates.forEach(template => {
+                    crData.appendChild(template.cloneNode(true));
+                });
+            }
+            // Extract and inject styles
+            const styles = temp.querySelectorAll('style');
+            styles.forEach(style => {
+                document.head.appendChild(style.cloneNode(true));
+            });
+            // Extract and inject scripts
+            const scripts = temp.querySelectorAll('script');
+            scripts.forEach(script => {
+                const newScript = document.createElement('script');
+                newScript.textContent = script.textContent;
+                document.head.appendChild(newScript);
+            });
+            // Mark as loaded
+            componentCache[componentName] = true;
+            console.log(\`✓ Component "\${componentName}" loaded successfully\`);
+        } catch (error) {
+            console.error(\`❌ Failed to load component "\${componentName}":\`, error);
+        }
+    };
+    // Auto-load components when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('🚀 core-components.js loaded');
+        });
+    } else {
+        console.log('🚀 core-components.js loaded');
+    }
+})();`,
+        'README.md': `# Your Core.js App
+Welcome to your new core.js application!
+## Getting Started
+1. **Open index.html in your browser**
+   - No build step required!
+   - Just double-click the file or serve it with a web server
+2. **Start development (optional)**
+   \`\`\`bash
+   # If you installed the CLI tools:
+   core-dev
+   # Or open directly in browser
+   \`\`\`
+## What's Included
+- ✅ **Core.js Framework** - Modern client-side rendering
+- ✅ **Hot Reload Ready** - Use core-dev for live updates
+- ✅ **Component System** - Modular architecture
+- ✅ **Responsive Design** - Mobile-friendly styles
+## Learn More
+- [Core.js Documentation](https://github.com/Sitezip/core.sbs)
+- [VS Code Extension](https://github.com/Sitezip/core.sbs/releases)
+- [Component Generator](https://github.com/Sitezip/core.sbs/tree/main/cli/core-gen)
+## Next Steps
+1. Edit \`index.html\` to build your app
+2. Create components in the \`components/\` folder
+3. Use \`core-gen\` to generate pre-built components:
+   \`\`\`bash
+   core-gen form --validation
+   core-gen table --sortable
+   \`\`\`
+Happy coding! 🚀`
+    }
+};
+// Create readline interface for prompts
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+// Promisify question
+function ask(question) {
+    return new Promise((resolve) => {
+        rl.question(question, (answer) => {
+            resolve(answer.toLowerCase().trim());
+        });
+    });
+}
+console.log(`
+╔═══════════════════════════════════════╗
+║                                       ║
+║            create-core-app            ║
+║                                       ║
+╚═══════════════════════════════════════╝
+`);
+async function main() {
+    console.log(`Creating a new core.js app in ${projectName}/\n`);
+    // Ask user preferences
+    console.log('📋 Let\'s configure your project:\n');
+    const installDevServer = await ask('Install dev server with hot reload? (Y/n): ');
+    const wantsDevServer = installDevServer === '' || installDevServer === 'y' || installDevServer === 'yes';
+    const installComponentGen = await ask('Install component generator? (Y/n): ');
+    const wantsComponentGen = installComponentGen === '' || installComponentGen === 'y' || installComponentGen === 'yes';
+    const enableRoutingAnswer = await ask('Enable routing? (Y/n): ');
+    const wantsRouting = enableRoutingAnswer === '' || enableRoutingAnswer === 'y' || enableRoutingAnswer === 'yes';
+    rl.close();
+    console.log('');
+    // Create project directory
+    const projectPath = path.join(process.cwd(), projectName);
+    if (fs.existsSync(projectPath)) {
+        console.error(`❌ Error: Directory "${projectName}" already exists.`);
+        process.exit(1);
+    }
+    fs.mkdirSync(projectPath, { recursive: true });
+    // Copy template files from embedded templates
+    const templateData = templates[template];
+    if (!templateData) {
+        console.error(`❌ Error: Template "${template}" not found.`);
+        process.exit(1);
+    }
+    console.log('📦 Creating template files...');
+    // Write each template file
+    Object.entries(templateData).forEach(([filename, content]) => {
+        const filePath = path.join(projectPath, filename);
+        fs.writeFileSync(filePath, content);
+        console.log(`   ✓ Created ${filename}`);
+    });
+    // Update routing in index.html based on user choice
+    const indexPath = path.join(projectPath, 'index.html');
+    if (fs.existsSync(indexPath)) {
+        let indexContent = fs.readFileSync(indexPath, 'utf8');
+        if (!wantsRouting) {
+            indexContent = indexContent.replace('core.useRouting = true;', 'core.useRouting = false;');
+        }
+        fs.writeFileSync(indexPath, indexContent);
+    }
+    console.log(`
+✅ Success! Created ${projectName} at ${projectPath}
+Optional: Install the VS Code extension for 56 code snippets:
+  https://github.com/Sitezip/core.sbs/releases
+`);
+    if (wantsComponentGen) {
+        console.log(`
+📦 Component generator available!
+Generate pre-built components:
+  core-gen form --validation --name=contact
+  core-gen table --name=users
+  core-gen modal --name=confirm
+`);
+    }
+    if (!wantsDevServer) {
+        console.log(`
+To start the dev server:
+  cd ${projectName}
+  core-dev
+Happy coding! 🎉
+`);
+    } else {
+        console.log(`
+🚀 Starting dev server...
+`);
+        // Start dev server
+        const coreDevPath = path.join(process.env.USERPROFILE || process.env.HOME, '.core-sbs', 'core-dev.js');
+        console.log('Dev server path:', coreDevPath);
+        const devServer = spawn('node', [coreDevPath], {
+            cwd: projectPath,
+            stdio: 'inherit',
+            shell: true
+        });
+        devServer.on('error', (err) => {
+            console.error(`❌ Failed to start dev server: ${err.message}`);
+            console.log(`
+Make sure core-dev is installed:
+  curl -sSL https://raw.githubusercontent.com/Sitezip/core.sbs/main/install.sh | bash
+Or start it manually:
+  cd ${projectName}
+  core-dev
+`);
+        });
+        // Handle Ctrl+C
+        process.on('SIGINT', () => {
+            devServer.kill();
+            process.exit(0);
+        });
+    }
+}
+// Run main function
+main().catch(err => {
+    console.error('Error:', err);
+    process.exit(1);
+});

package/package.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "name": "@core.sbs/create-core-app",
+  "version": "1.0.0",
+  "description": "Scaffold a new core.js application. Optionally include a development server, component generator, and more.",
+  "bin": {
+    "create-core-app": "./bin/create-core-app.js"
+  },
+  "keywords": [
+    "core.js",
+    "scaffold",
+    "create-app",
+    "boilerplate",
+    "development server",
+    "component generator",
+    "cli",
+    "scaffolding",
+    "create-core-app"
+  ],
+  "author": "core.js team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sitezip/core.sbs"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "@core-js/dev": "^1.0.0"
+  }
+}

package/templates/default/README.md ADDED Viewed

@@ -0,0 +1,95 @@
+# Welcome to Your core.js App!
+Your app is ready to go. Open `index.html` in your browser to see it in action.
+## What's Included
+- **index.html** - Main application file with welcome page
+- **styles.css** - Starter styles
+- **README.md** - This file
+## Getting Started
+1. Open `index.html` in your browser
+2. See the welcome page with live demos
+3. Start editing `index.html` to build your app
+## Quick Tips
+### Adding a New Template
+```html
+<template name="myTemplate">
+    <div>
+        <h2>{{data:myTemplate:title}}</h2>
+        <p>{{data:myTemplate:description}}</p>
+    </div>
+</template>
+```
+### Creating a Pocket
+```html
+<div class="core-pocket"
+     data-core-templates="myTemplate"
+     data-core-source-myTemplate="/api/data">
+</div>
+```
+### Fetching Data
+```javascript
+await core.be.getData('myData', '/api/endpoint');
+```
+## Generate Components
+Use the component generator to quickly add pre-built components:
+```bash
+core-gen form --validation --name=contact
+core-gen table --name=users
+core-gen modal --name=confirm
+```
+Components are generated into the `components/` folder.
+### Loading Components
+Components are automatically loaded using `core-components.js`:
+```html
+<script src="core-components.js"></script>
+<script>
+    // Load a single component
+    loadComponent('contact-form');
+    // Load multiple components
+    loadComponents(['users-table', 'confirm-modal']);
+</script>
+```
+The component loader will:
+- Inject templates into your `#cr-data` section
+- Add styles to the page
+- Execute component scripts
+- Initialize core.js pockets automatically
+**No build step required!** Just generate and load.
+## Resources
+- [Documentation](https://github.com/Sitezip/core.sbs)
+- [VS Code Extension](https://github.com/Sitezip/core.sbs/releases)
+- [GitHub Repository](https://github.com/Sitezip/core.sbs)
+## Next Steps
+1. Install the VS Code extension for 56 code snippets
+2. Read the full documentation
+3. Explore the interactive demos on the welcome page
+4. Start building!
+---
+Built with ❤️ using core.js

package/templates/default/core-components.js ADDED Viewed

@@ -0,0 +1,117 @@
+/**
+ * core-components.js
+ * Component loader for core.js applications
+ * No build step required - just include this script
+ */
+(function() {
+    'use strict';
+    // Component cache
+    const componentCache = {};
+    /**
+     * Load a component from the components/ folder
+     * @param {string} componentName - Name of the component file (without .html extension)
+     * @returns {Promise<void>}
+     */
+    window.loadComponent = async function(componentName) {
+        // Check cache first
+        if (componentCache[componentName]) {
+            console.log(`✓ Component "${componentName}" already loaded`);
+            return;
+        }
+        try {
+            const response = await fetch(`components/${componentName}.html`);
+            if (!response.ok) {
+                throw new Error(`Failed to load component: ${response.statusText}`);
+            }
+            const html = await response.text();
+            // Create a temporary container to parse the HTML
+            const temp = document.createElement('div');
+            temp.innerHTML = html;
+            // Extract and inject templates into cr-data section
+            const templates = temp.querySelectorAll('template');
+            const crData = document.getElementById('cr-data');
+            if (crData && templates.length > 0) {
+                templates.forEach(template => {
+                    crData.appendChild(template.cloneNode(true));
+                });
+            }
+            // Extract and inject styles
+            const styles = temp.querySelectorAll('style');
+            styles.forEach(style => {
+                document.head.appendChild(style.cloneNode(true));
+            });
+            // Extract and execute scripts
+            const scripts = temp.querySelectorAll('script');
+            scripts.forEach(script => {
+                const newScript = document.createElement('script');
+                if (script.src) {
+                    newScript.src = script.src;
+                } else {
+                    newScript.textContent = script.textContent;
+                }
+                document.body.appendChild(newScript);
+            });
+            // Inject pockets into the body (or specified container)
+            const pockets = temp.querySelectorAll('.core-pocket');
+            const componentContainer = document.getElementById('component-container') || document.body;
+            pockets.forEach(pocket => {
+                componentContainer.appendChild(pocket.cloneNode(true));
+            });
+            // Inject any other elements (buttons, etc.)
+            const otherElements = Array.from(temp.children).filter(
+                el => !el.matches('template, style, script, .core-pocket')
+            );
+            otherElements.forEach(el => {
+                componentContainer.appendChild(el.cloneNode(true));
+            });
+            // Mark as loaded
+            componentCache[componentName] = true;
+            console.log(`✓ Component "${componentName}" loaded successfully`);
+            // Reinitialize pockets if core.js is loaded
+            if (window.core && window.core.pk && window.core.pk.init) {
+                await core.pk.init();
+            }
+        } catch (error) {
+            console.error(`✗ Error loading component "${componentName}":`, error);
+            throw error;
+        }
+    };
+    /**
+     * Load multiple components
+     * @param {string[]} componentNames - Array of component names
+     * @returns {Promise<void>}
+     */
+    window.loadComponents = async function(componentNames) {
+        for (const name of componentNames) {
+            await loadComponent(name);
+        }
+    };
+    /**
+     * Check if a component is loaded
+     * @param {string} componentName - Name of the component
+     * @returns {boolean}
+     */
+    window.isComponentLoaded = function(componentName) {
+        return !!componentCache[componentName];
+    };
+    console.log('✓ core-components.js loaded');
+})();

package/templates/default/index.html ADDED Viewed

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to core.js</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Main Container -->
+    <div id="app">
+        <!-- Welcome Pocket -->
+        <div class="core-pocket" data-core-templates="welcome"></div>
+        <!-- Live Stats Pocket -->
+        <div class="core-pocket" data-core-templates="stats"></div>
+        <!-- Demo Sections -->
+        <div class="core-pocket" data-core-templates="demos"></div>
+    </div>
+    <!-- Template Registry -->
+    <section id="cr-data" class="template-registry">
+        <!-- Welcome Template -->
+        <template name="welcome">
+            <div class="welcome-hero">
+                <div class="logo-container">
+                    <svg class="logo" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="100" cy="100" r="90" fill="none" stroke="url(#gradient)" stroke-width="8"/>
+                        <text x="100" y="115" text-anchor="middle" font-size="60" font-weight="bold" fill="url(#gradient)">C</text>
+                        <defs>
+                            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                                <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#10b981;stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+                    </svg>
+                </div>
+                <h1 class="welcome-title">🎉 Your core.js App is Running!</h1>
+                <p class="welcome-subtitle">Everything is working perfectly. Start building something amazing.</p>
+                <div class="quick-links">
+                    <a href="https://github.com/Sitezip/core.sbs" target="_blank" rel="noopener noreferrer" class="btn btn-primary">View Docs</a>
+                    <a href="https://github.com/Sitezip/core.sbs/releases" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">Get VS Code Extension</a>
+                </div>
+            </div>
+        </template>
+        <!-- Stats Template -->
+        <template name="stats">
+            <div class="stats-container">
+                <h2>Live Framework Stats</h2>
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon">📦</div>
+                        <div class="stat-value" id="cacheHits">0</div>
+                        <div class="stat-label">Cache Hits</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">🌐</div>
+                        <div class="stat-value" id="dataCalls">0</div>
+                        <div class="stat-label">Data Calls</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">📄</div>
+                        <div class="stat-value" id="templates">0</div>
+                        <div class="stat-label">Templates</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">🔄</div>
+                        <div class="stat-value" id="clones">0</div>
+                        <div class="stat-label">Clones</div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <!-- Demos Template -->
+        <template name="demos">
+            <div class="demos-container">
+                <h2>Interactive Demos</h2>
+                <!-- Counter Demo -->
+                <div class="demo-card">
+                    <h3>✨ Reactivity Demo</h3>
+                    <p>Click the button to see data binding in action</p>
+                    <div class="counter-demo">
+                        <button onclick="incrementCounter()" class="btn btn-primary">Click Me!</button>
+                        <div class="counter-display">
+                            <span class="counter-label">Count:</span>
+                            <span class="counter-value" id="counterValue">0</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Data Fetch Demo -->
+                <div class="demo-card">
+                    <h3>🌐 Data Fetching Demo</h3>
+                    <p>Fetch and display data from an API</p>
+                    <button onclick="fetchDemoData()" class="btn btn-secondary">Fetch Random User</button>
+                    <div class="core-pocket" data-core-templates="userData" id="userDataPocket"></div>
+                </div>
+                <!-- Routing Demo -->
+                <div class="demo-card">
+                    <h3>🧭 Routing Demo</h3>
+                    <p>Navigate between views without page reload</p>
+                    <div class="routing-links">
+                        <a href="#/_main/welcome" class="route-link">Home</a>
+                        <a href="#/_main/about" class="route-link">About</a>
+                        <a href="#/_main/contact" class="route-link">Contact</a>
+                    </div>
+                </div>
+                <!-- Getting Started -->
+                <div class="demo-card getting-started">
+                    <h3>🚀 Getting Started</h3>
+                    <p>Edit <code>index.html</code> to start building your app</p>
+                    <ul class="checklist">
+                        <li>✅ core.js loaded and running</li>
+                        <li>✅ Templates rendering correctly</li>
+                        <li>✅ Data binding working</li>
+                        <li>✅ Routing enabled</li>
+                    </ul>
+                    <div class="next-steps">
+                        <h4>Next Steps:</h4>
+                        <ol>
+                            <li>Read the <a href="https://github.com/Sitezip/core.sbs" target="_blank" rel="noopener noreferrer">documentation</a></li>
+                            <li>Install the <a href="https://github.com/Sitezip/core.sbs/releases" target="_blank" rel="noopener noreferrer">VS Code extension</a></li>
+                            <li>Generate components with <code>core-gen form</code></li>
+                            <li>Build something awesome!</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <!-- User Data Template -->
+        <template name="userData">
+            <div class="user-card">
+                <div class="user-avatar">
+                    <img src="{{data:userData:picture:large}}" alt="User avatar">
+                </div>
+                <div class="user-info">
+                    <h4>{{data:userData:name:first}} {{data:userData:name:last}}</h4>
+                    <p>{{data:userData:email}}</p>
+                    <p>{{data:userData:location:city}}, {{data:userData:location:country}}</p>
+                </div>
+            </div>
+        </template>
+    </section>
+    <!-- Core.js Framework -->
+    <script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
+    <!-- Component Loader -->
+    <script src="core-components.js"></script>
+    <!-- Application Logic -->
+    <script>
+        // Initialize core.js
+        core.ud.init = () => {
+            core.useRouting = true;
+            core.useDebugger = true;
+        };
+        // Counter state
+        let counter = 0;
+        // Increment counter
+        function incrementCounter() {
+            counter++;
+            document.getElementById('counterValue').textContent = counter;
+        }
+        // Fetch demo data
+        async function fetchDemoData() {
+            await core.be.getData('userData', 'https://randomuser.me/api/', {
+                transform: (data) => data.results[0]
+            });
+        }
+        // Update stats
+        function updateStats() {
+            const cacheHits = Object.keys(core.be.cacheCreateTs.data || {}).length;
+            const dataCalls = Object.keys(core.be.fetchLogFIFO || {}).length;
+            const templates = document.querySelectorAll('#cr-data template').length;
+            const clones = document.querySelectorAll('.core-cloned').length;
+            document.getElementById('cacheHits').textContent = cacheHits;
+            document.getElementById('dataCalls').textContent = dataCalls;
+            document.getElementById('templates').textContent = templates;
+            document.getElementById('clones').textContent = clones;
+        }
+        // Update stats every second
+        setInterval(updateStats, 1000);
+        updateStats();
+    </script>
+</body>
+</html>

package/templates/default/styles.css ADDED Viewed

@@ -0,0 +1,355 @@
+/* Core.js Welcome Page Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+/* Template Registry (hidden) */
+.template-registry {
+    display: none;
+}
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    color: #e2e8f0;
+    min-height: 100vh;
+    padding: 2rem;
+}
+#app {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+/* Welcome Hero */
+.welcome-hero {
+    text-align: center;
+    padding: 4rem 2rem;
+    margin-bottom: 3rem;
+}
+.logo-container {
+    margin-bottom: 2rem;
+    animation: float 3s ease-in-out infinite;
+}
+.logo {
+    width: 150px;
+    height: 150px;
+    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.5));
+}
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+}
+.welcome-title {
+    font-size: 3rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 1rem;
+}
+.welcome-subtitle {
+    font-size: 1.25rem;
+    color: #94a3b8;
+    margin-bottom: 2rem;
+}
+.quick-links {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+/* Buttons */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+}
+.btn-primary {
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    color: white;
+}
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+}
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: #e2e8f0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+/* Stats Container */
+.stats-container {
+    margin-bottom: 3rem;
+}
+.stats-container h2 {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    color: #f1f5f9;
+}
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+}
+.stat-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+.stat-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+.stat-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+}
+.stat-label {
+    font-size: 0.875rem;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+/* Demos Container */
+.demos-container {
+    margin-bottom: 3rem;
+}
+.demos-container h2 {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    color: #f1f5f9;
+}
+.demo-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+    transition: all 0.3s ease;
+}
+.demo-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+.demo-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: #f1f5f9;
+}
+.demo-card p {
+    color: #94a3b8;
+    margin-bottom: 1.5rem;
+}
+/* Counter Demo */
+.counter-demo {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+.counter-display {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: rgba(99, 102, 241, 0.1);
+    padding: 1rem 2rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(99, 102, 241, 0.3);
+}
+.counter-label {
+    font-size: 1rem;
+    color: #94a3b8;
+}
+.counter-value {
+    font-size: 2rem;
+    font-weight: 800;
+    color: #6366f1;
+}
+/* User Card */
+.user-card {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    background: rgba(16, 185, 129, 0.1);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    margin-top: 1rem;
+}
+.user-avatar img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 3px solid #10b981;
+}
+.user-info h4 {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+    color: #f1f5f9;
+}
+.user-info p {
+    color: #94a3b8;
+    margin-bottom: 0.25rem;
+}
+/* Routing Links */
+.routing-links {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+.route-link {
+    padding: 0.75rem 1.5rem;
+    background: rgba(139, 92, 246, 0.1);
+    border: 1px solid rgba(139, 92, 246, 0.3);
+    border-radius: 0.5rem;
+    color: #a78bfa;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+.route-link:hover {
+    background: rgba(139, 92, 246, 0.2);
+    transform: translateY(-2px);
+}
+/* Getting Started */
+.getting-started {
+    background: rgba(16, 185, 129, 0.05);
+    border-color: rgba(16, 185, 129, 0.2);
+}
+.getting-started code {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    color: #10b981;
+    font-family: 'Courier New', monospace;
+}
+.checklist {
+    list-style: none;
+    margin: 1.5rem 0;
+}
+.checklist li {
+    padding: 0.5rem 0;
+    color: #10b981;
+    font-size: 1.1rem;
+}
+.next-steps {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.next-steps h4 {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    color: #f1f5f9;
+}
+.next-steps ol {
+    margin-left: 1.5rem;
+    color: #94a3b8;
+}
+.next-steps li {
+    margin-bottom: 0.75rem;
+    line-height: 1.6;
+}
+.next-steps a {
+    color: #10b981;
+    text-decoration: none;
+}
+.next-steps a:hover {
+    text-decoration: underline;
+}
+/* Responsive */
+@media (max-width: 768px) {
+    .welcome-title {
+        font-size: 2rem;
+    }
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .counter-demo {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .user-card {
+        flex-direction: column;
+        text-align: center;
+    }
+}