create-nativecore 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nativecore",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Interactive CLI for scaffolding NativeCore applications",
   "keywords": [
     "nativecore",
@@ -23,7 +23,8 @@
   },
   "files": [
     "bin",
-    "README.md"
+    "README.md",
+    "template"
   ],
   "scripts": {
     "build": "echo create-nativecore is a direct CLI package"

package/template/.env.example

@@ -0,0 +1,28 @@
+# Environment Configuration Template
+# Copy this file to .env and update with your values
+# DO NOT commit .env to version control
+
+# Application Environment
+# Options: development, staging, production
+NODE_ENV=development
+
+# API Configuration
+API_BASE_URL=http://localhost:8000/api
+API_TIMEOUT=30000
+
+# Authentication
+# Options: memory, session, local
+AUTH_STORAGE_STRATEGY=session
+
+# Application Info
+APP_NAME=MyApp
+APP_VERSION=1.0.0
+
+# Feature Flags
+FEATURE_ANALYTICS=false
+FEATURE_DARK_MODE=false
+FEATURE_DEBUG_MODE=true
+
+# Backend URLs (if using external API)
+# BACKEND_API_URL=https://api.yourdomain.com
+# BACKEND_AUTH_URL=https://auth.yourdomain.com

package/template/.htmlhintrc

@@ -0,0 +1,14 @@
+{
+  "tagname-lowercase": false,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "attr-no-duplication": true,
+  "doctype-first": false,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "alt-require": true,
+  "space-tab-mixed-disabled": "space",
+  "attr-unsafe-chars": true
+}

package/template/api/data/dashboard.json

@@ -0,0 +1,11 @@
+{
+  "users": 1234,
+  "sessions": 56,
+  "revenue": 45678,
+  "newToday": 23,
+  "recentActivity": [
+    { "id": 1, "message": "New user registered", "time": "5 minutes ago" },
+    { "id": 2, "message": "Payment received", "time": "12 minutes ago" },
+    { "id": 3, "message": "System backup completed", "time": "1 hour ago" }
+  ]
+}

package/template/api/data/users.json

@@ -0,0 +1,18 @@
+{
+  "users": [
+    {
+      "id": 1,
+      "email": "demo@example.com",
+      "password": "pa$$w0rd",
+      "name": "Demo User",
+      "role": "admin"
+    },
+    {
+      "id": 2,
+      "email": "user@example.com",
+      "password": "password",
+      "name": "Test User",
+      "role": "user"
+    }
+  ]
+}

package/template/api/mockApi.js

@@ -0,0 +1,161 @@
+/**
+ * Mock API Helper Functions
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Simple JWT-like token generation for local development only.
+function generateToken(user) {
+    const header = Buffer.from(JSON.stringify({ alg: 'none', typ: 'JWT' })).toString('base64url');
+    const payload = {
+        userId: user.id,
+        email: user.email,
+        name: user.name,
+        role: user.role,
+        exp: Math.floor(Date.now() / 1000) + (60 * 60) // 1 hour expiry
+    };
+
+    const payloadSegment = Buffer.from(JSON.stringify(payload)).toString('base64url');
+    return `${header}.${payloadSegment}.mock`;
+}
+
+// Read JSON file
+function readJSON(filename) {
+    const filePath = path.join(__dirname, 'data', filename);
+    const data = fs.readFileSync(filePath, 'utf8');
+    return JSON.parse(data);
+}
+
+// Handle login
+function handleLogin(body) {
+    const { email, password } = body;
+    const data = readJSON('users.json');
+    
+    const user = data.users.find(u => u.email === email && u.password === password);
+    
+    if (!user) {
+        return {
+            status: 401,
+            data: { error: 'Invalid email or password' }
+        };
+    }
+    
+    const accessToken = generateToken(user);
+    const refreshToken = generateToken(user); // Same for demo
+    
+    return {
+        status: 200,
+        data: {
+            accessToken,
+            refreshToken,
+            user: {
+                id: user.id,
+                name: user.name,
+                email: user.email,
+                role: user.role
+            }
+        }
+    };
+}
+
+// Handle dashboard stats
+function handleDashboard() {
+    const data = readJSON('dashboard.json');
+    return {
+        status: 200,
+        data
+    };
+}
+
+function handleVerify(user) {
+    return {
+        status: 200,
+        data: {
+            authenticated: true,
+            user: {
+                id: user.userId,
+                email: user.email,
+                name: user.name,
+                role: user.role
+            }
+        }
+    };
+}
+
+function handleUserDetail(userId) {
+    const data = readJSON('users.json');
+    const user = data.users.find(u => String(u.id) === String(userId));
+
+    if (!user) {
+        return {
+            status: 404,
+            data: { error: 'User not found' }
+        };
+    }
+
+    return {
+        status: 200,
+        data: {
+            id: user.id,
+            email: user.email,
+            name: user.name,
+            role: user.role,
+            createdAt: new Date('2026-01-01T00:00:00.000Z').toISOString()
+        }
+    };
+}
+
+// Verify token (simplified - just check if exists)
+function verifyToken(authHeader) {
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+        return false;
+    }
+    
+    const token = authHeader.split(' ')[1];
+
+    const parsePayload = (rawToken) => {
+        if (!rawToken) return null;
+
+        try {
+            if (rawToken.includes('.')) {
+                const [, payloadSegment] = rawToken.split('.');
+                if (!payloadSegment) return null;
+
+                const normalized = payloadSegment.replace(/-/g, '+').replace(/_/g, '/');
+                const padded = normalized.padEnd(normalized.length + ((4 - normalized.length % 4) % 4), '=');
+                return JSON.parse(Buffer.from(padded, 'base64').toString());
+            }
+
+            return JSON.parse(Buffer.from(rawToken, 'base64').toString());
+        } catch {
+            return null;
+        }
+    };
+
+    try {
+        const payload = parsePayload(token);
+        if (!payload) {
+            return false;
+        }
+
+        // Check if expired
+        if (payload.exp && payload.exp < Math.floor(Date.now() / 1000)) {
+            return false;
+        }
+        return payload;
+    } catch (e) {
+        return false;
+    }
+}
+
+export {
+    handleLogin,
+    handleDashboard,
+    handleVerify,
+    handleUserDetail,
+    verifyToken
+};

package/template/assets/icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-labelledby="title desc">
+  <title>NativeCore Icon</title>
+  <desc>Green circular mark with a white play triangle</desc>
+  <defs>
+    <linearGradient id="bg" x1="64" y1="64" x2="448" y2="448" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#34d399"/>
+      <stop offset="1" stop-color="#059669"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="120" fill="#0f172a"/>
+  <circle cx="256" cy="256" r="150" fill="url(#bg)"/>
+  <path d="M221 180l122 76-122 76V180z" fill="#ffffff"/>
+</svg>

package/template/assets/logo.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-labelledby="title desc">
+  <title>NativeCore Logo</title>
+  <desc>Rounded dark square containing a geometric teal N with a circular core at the center.</desc>
+  <defs>
+    <linearGradient id="nativecore-bg" x1="86" y1="64" x2="430" y2="448" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#132238"/>
+      <stop offset="1" stop-color="#09111d"/>
+    </linearGradient>
+    <linearGradient id="nativecore-mark" x1="120" y1="104" x2="372" y2="394" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#8bf5d4"/>
+      <stop offset="0.55" stop-color="#42d6c5"/>
+      <stop offset="1" stop-color="#1595c9"/>
+    </linearGradient>
+    <linearGradient id="nativecore-ring" x1="188" y1="180" x2="325" y2="337" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#effcff" stop-opacity="0.96"/>
+      <stop offset="1" stop-color="#b9f7f0" stop-opacity="0.82"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="128" fill="url(#nativecore-bg)"/>
+  <rect x="22" y="22" width="468" height="468" rx="106" fill="none" stroke="#ffffff" stroke-opacity="0.08"/>
+  <path fill="url(#nativecore-mark)" d="M137 114h63l117 147V114h58v284h-63L195 251v147h-58V114z"/>
+  <circle cx="256" cy="256" r="71" fill="#09111d"/>
+  <circle cx="256" cy="256" r="55" fill="none" stroke="url(#nativecore-ring)" stroke-width="18"/>
+  <circle cx="256" cy="256" r="14" fill="#8bf5d4"/>
+</svg>

package/template/eslint.config.js

@@ -0,0 +1,94 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.es2021
+            }
+        },
+        rules: {
+            'no-console': 'off',
+            'no-debugger': 'error',
+            'no-var': 'error',
+            'prefer-const': 'error',
+            'prefer-arrow-callback': 'warn',
+            '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'off', // Framework code needs flexible typing
+            
+            'no-restricted-globals': [
+                'error',
+                {
+                    name: 'event',
+                    message: 'Use local event parameter instead of global \'event\''
+                }
+            ],
+            
+            'no-restricted-syntax': [
+                'error',
+                {
+                    selector: 'CallExpression[callee.object.name=\'document\'][callee.property.name=\'querySelector\']',
+                    message: 'Use dom.query() in controllers or this.$() in components instead of document.querySelector()'
+                },
+                {
+                    selector: 'CallExpression[callee.object.name=\'document\'][callee.property.name=\'querySelectorAll\']',
+                    message: 'Use dom.queryAll() in controllers or this.$$() in components instead of document.querySelectorAll()'
+                },
+                {
+                    selector: 'CallExpression[callee.object.name=\'document\'][callee.property.name=\'getElementById\']',
+                    message: 'Use dom.query() in controllers or this.$() in components instead of document.getElementById()'
+                },
+                {
+                    selector: 'CallExpression[callee.object.name=\'document\'][callee.property.name=\'getElementsByClassName\']',
+                    message: 'Use dom.queryAll() in controllers or this.$$() in components instead of document.getElementsByClassName()'
+                },
+                {
+                    selector: 'CallExpression[callee.object.name=\'document\'][callee.property.name=\'getElementsByTagName\']',
+                    message: 'Use dom.queryAll() in controllers or this.$$() in components instead of document.getElementsByTagName()'
+                },
+                {
+                    selector: 'MemberExpression[object.name=\'element\'][property.name=\'innerHTML\']',
+                    message: 'Avoid innerHTML for security. Use textContent or render() method instead'
+                }
+            ],
+            
+            'no-eval': 'error',
+            'no-implied-eval': 'error',
+            'no-new-func': 'error'
+        }
+    },
+    {
+        // Controllers and router - allow document.querySelector since they're not components
+        files: ['src/controllers/**/*.{js,ts}', 'src/core/router.{js,ts}', 'src/app.{js,ts}', 'src/utils/**/*.{js,ts}'],
+        rules: {
+            'no-restricted-syntax': 'off'
+        }
+    },
+    {
+        // Dev tools - need direct DOM access at framework level
+        files: ['src/dev/**/*.{js,ts}'],
+        rules: {
+            'no-restricted-syntax': 'off'
+        }
+    },
+    {
+        // Scripts and test files - relaxed rules
+        files: ['scripts/**/*.{js,mjs}', '*.test.{js,ts}', '*.spec.{js,ts}', 'tests/**/*.{js,ts}'],
+        rules: {
+            'no-restricted-syntax': 'off',
+            'no-console': 'off'
+        }
+    },
+    {
+        // Ignore patterns
+        ignores: ['node_modules/**', 'dist/**', 'build/**']
+    }
+);

package/template/index.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: https://ogp.me/ns#" data-public-route="ready">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <base href="/">
+    <!-- Primary Meta Tags -->
+    <title>NativeCore | Modern Reactive JavaScript Framework</title>
+    <meta name="title" content="NativeCore | Modern Reactive JavaScript Framework">
+    <meta name="description" content="A modern, lightweight reactive framework using vanilla JavaScript, Web Components, reactive signals, and zero dependencies. Fast, simple, and powerful.">
+    <meta name="keywords" content="NativeCore, JavaScript framework, reactive signals, Web Components, vanilla JS, SPA, lightweight, TypeScript, frontend framework">
+    <meta name="author" content="NativeCore Framework">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="English">
+    <meta name="revisit-after" content="7 days">
+    <!-- Canonical URL -->
+    <link rel="canonical" href="https://nativecorejs.com/">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://nativecorejs.com/">
+    <meta property="og:title" content="NativeCore | Modern Reactive JavaScript Framework">
+    <meta property="og:description" content="A modern, lightweight reactive framework using vanilla JavaScript, Web Components, reactive signals, and zero dependencies.">
+    <meta property="og:image" content="https://nativecorejs.com/assets/og-image.png">
+    <meta property="og:site_name" content="NativeCore Framework">
+    <meta property="og:locale" content="en_US">
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://nativecorejs.com/">
+    <meta name="twitter:title" content="NativeCore | Modern Reactive JavaScript Framework">
+    <meta name="twitter:description" content="A modern, lightweight reactive framework using vanilla JavaScript, Web Components, reactive signals, and zero dependencies.">
+    <meta name="twitter:image" content="https://nativecorejs.com/assets/twitter-card.png">
+    <meta name="twitter:creator" content="@nativecorejs">
+    <!-- Inline SVG favicon to prevent fetch requests -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>N</text></svg>">
+    <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>N</text></svg>">
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json">
+    <style>
+    html[data-public-route="pending"] body {
+            visibility: hidden;
+            opacity: 0;
+    }
+    </style>
+    <script>
+    (function() {
+            const isRootPath = window.location.pathname === '/';
+            if (!isRootPath) {
+                document.documentElement.setAttribute('data-public-route', 'pending');
+                window.addEventListener('pageloaded', function handlePageLoaded() {
+                    document.documentElement.setAttribute('data-public-route', 'ready');
+                    window.removeEventListener('pageloaded', handlePageLoaded);
+                });
+                return;
+            }
+            document.documentElement.setAttribute('data-public-route', 'ready');
+    })();
+    </script>
+    <!-- JSON-LD Structured Data -->
+    <script type="application/ld+json">
+    {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    "name": "NativeCore Framework",
+    "alternateName": "NativeCore",
+    "url": "https://nativecorejs.com",
+    "logo": "https://nativecorejs.com/assets/logo.svg",
+    "description": "A modern, lightweight reactive framework using vanilla JavaScript, Web Components, reactive signals, and zero dependencies.",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "Any",
+    "offers": {
+    "@type": "Offer",
+    "price": "0",
+    "priceCurrency": "USD"
+    },
+    "author": {
+    "@type": "Organization",
+    "name": "NativeCore Framework",
+    "url": "https://nativecorejs.com"
+    },
+    "keywords": "NativeCore, JavaScript framework, reactive signals, Web Components, vanilla JS"
+    }
+    </script>
+    <!-- Stylesheets with cache busting -->
+    <script>
+    (function() {
+            const isDev = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+            const version = isDev ? Date.now() : '1.0.0-20260414231644';
+            const modulePreloads = [
+                '/dist/app.js',
+                '/dist/controllers/home.controller.js',
+                '/dist/components/core/app-header.js',
+                '/dist/components/core/app-sidebar.js',
+                '/dist/components/core/app-footer.js',
+                '/dist/components/core/loading-spinner.js',
+                '/dist/components/core/nc-a.js',
+                '/dist/components/core/nc-scroll-top.js',
+                '/dist/components/core/nc-snackbar.js'
+            ];
+            modulePreloads.forEach(path => {
+                document.write(`<link rel="modulepreload" href="${path}?v=${version}">`);
+            });
+            document.write(`<link rel="stylesheet" href="/src/styles/core-variables.css?v=${version}">`);
+            document.write(`<link rel="stylesheet" href="/src/styles/core.css?v=${version}">`);
+            document.write(`<link rel="stylesheet" href="/src/styles/variables.css?v=${version}">`);
+            document.write(`<link rel="stylesheet" href="/src/styles/main.css?v=${version}">`);
+    })();
+    </script>
+</head>
+<body>
+    <div id="page-progress" role="progressbar" aria-label="Page loading progress"></div>
+
+    <div id="app" class="no-sidebar">
+        <app-header class="app-header"></app-header>
+        <app-sidebar></app-sidebar>
+
+        <main class="main-content">
+            <div id="main-content" class="page">
+                <loading-spinner message="Loading page..."></loading-spinner>
+            </div>
+            <app-footer></app-footer>
+        </main>
+
+        <nc-scroll-top to="top"></nc-scroll-top>
+    </div>
+
+    <nc-snackbar position="bottom-right"></nc-snackbar>
+
+    <script type="module">
+        (function() {
+            const isDev = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+            const version = isDev ? Date.now() : '1.0.0-20260414231644';
+            import(`/dist/app.js?v=${version}`);
+        })();
+    </script>
+</body>
+</html>

package/template/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "NativeCore - Modern Reactive JavaScript Framework",
+  "short_name": "NativeCore",
+  "description": "A modern, lightweight reactive framework using vanilla JavaScript, Web Components, and reactive signals.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#667eea",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/assets/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ],
+  "categories": ["development", "productivity"]
+}

package/template/public/.well-known/security.txt

@@ -0,0 +1,9 @@
+# Security Policy for nativeCore Framework
+# https://securitytxt.org/
+
+Contact: mailto:security@yourdomain.com
+Expires: 2027-01-22T00:00:00.000Z
+Preferred-Languages: en
+Canonical: https://yourdomain.com/.well-known/security.txt
+Policy: https://yourdomain.com/security-policy
+Acknowledgments: https://yourdomain.com/security-thanks

package/template/public/_headers

@@ -0,0 +1,24 @@
+/*
+  Strict-Transport-Security: max-age=31536000; includeSubDomains
+  Content-Security-Policy: default-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://api.nativecorejs.com https://cloudflareinsights.com https://static.cloudflareinsights.com; manifest-src 'self'; worker-src 'self'
+  X-Frame-Options: SAMEORIGIN
+  Permissions-Policy: accelerometer=(), autoplay=(), camera=(), display-capture=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()
+  Access-Control-Allow-Origin: https://nativecorejs.com
+
+/index.html
+  Cache-Control: no-store
+
+/manifest.json
+  Cache-Control: no-cache, no-store, must-revalidate
+
+/dist/*
+  Cache-Control: no-cache, no-store, must-revalidate
+
+/src/styles/*
+  Cache-Control: no-cache, no-store, must-revalidate
+
+/src/views/*
+  Cache-Control: no-cache, no-store, must-revalidate
+
+/docs/*
+  Cache-Control: no-cache, no-store, must-revalidate

package/template/public/_redirects

@@ -0,0 +1,14 @@
+/docs / 200
+/docs/ / 200
+/login / 200
+/login/ / 200
+/components / 200
+/components/ / 200
+/dashboard / 200
+/dashboard/ / 200
+/under-construction / 200
+/under-construction/ / 200
+/user/:id / 200
+/user/:id/ / 200
+/testpage / 200
+/testpage/ / 200

package/template/public/assets/icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-labelledby="title desc">
+  <title>NativeCore Icon</title>
+  <desc>Green circular mark with a white play triangle</desc>
+  <defs>
+    <linearGradient id="bg" x1="64" y1="64" x2="448" y2="448" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#34d399"/>
+      <stop offset="1" stop-color="#059669"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="120" fill="#0f172a"/>
+  <circle cx="256" cy="256" r="150" fill="url(#bg)"/>
+  <path d="M221 180l122 76-122 76V180z" fill="#ffffff"/>
+</svg>

package/template/public/assets/logo.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-labelledby="title desc">
+  <title>NativeCore Logo</title>
+  <desc>Rounded dark square containing a geometric teal N with a circular core at the center.</desc>
+  <defs>
+    <linearGradient id="nativecore-bg" x1="86" y1="64" x2="430" y2="448" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#132238"/>
+      <stop offset="1" stop-color="#09111d"/>
+    </linearGradient>
+    <linearGradient id="nativecore-mark" x1="120" y1="104" x2="372" y2="394" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#8bf5d4"/>
+      <stop offset="0.55" stop-color="#42d6c5"/>
+      <stop offset="1" stop-color="#1595c9"/>
+    </linearGradient>
+    <linearGradient id="nativecore-ring" x1="188" y1="180" x2="325" y2="337" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#effcff" stop-opacity="0.96"/>
+      <stop offset="1" stop-color="#b9f7f0" stop-opacity="0.82"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="128" fill="url(#nativecore-bg)"/>
+  <rect x="22" y="22" width="468" height="468" rx="106" fill="none" stroke="#ffffff" stroke-opacity="0.08"/>
+  <path fill="url(#nativecore-mark)" d="M137 114h63l117 147V114h58v284h-63L195 251v147h-58V114z"/>
+  <circle cx="256" cy="256" r="71" fill="#09111d"/>
+  <circle cx="256" cy="256" r="55" fill="none" stroke="url(#nativecore-ring)" stroke-width="18"/>
+  <circle cx="256" cy="256" r="14" fill="#8bf5d4"/>
+</svg>

package/template/public/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "nativeCore - Modern Reactive JavaScript Framework",
+  "short_name": "nativeCore",
+  "description": "A modern, lightweight reactive framework using vanilla JavaScript, Web Components, and reactive signals.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#667eea",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/assets/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ],
+  "categories": ["development", "productivity"]
+}