npm - @africode/core - Versions diffs - 5.0.0 - Mend

@africode/core 5.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 (136) hide show

package/AFRICODE_FRAMEWORK_GUIDE.md +707 -0
package/LICENSE +623 -0
package/README.md +442 -0
package/bin/africode.js +73 -0
package/bin/africode.js.1758507140 +343 -0
package/bin/cli.ts +83 -0
package/bin/create-africode.js +158 -0
package/bin/scaffold.ts +219 -0
package/components/accordion.js +183 -0
package/components/alert.js +131 -0
package/components/auth.js +172 -0
package/components/avatar.js +117 -0
package/components/badge.js +104 -0
package/components/base.d.ts +139 -0
package/components/base.js +184 -0
package/components/button.js +164 -0
package/components/card.js +137 -0
package/components/cultural-card.js +243 -0
package/components/divider.js +83 -0
package/components/dropdown.js +171 -0
package/components/error-boundary.js +155 -0
package/components/form.js +131 -0
package/components/grid.js +273 -0
package/components/hero.js +138 -0
package/components/icon.js +36 -0
package/components/index.js +57 -0
package/components/input.js +256 -0
package/components/kanga-card.js +185 -0
package/components/language-switcher.js +108 -0
package/components/loader.js +80 -0
package/components/modal.js +262 -0
package/components/motion.js +84 -0
package/components/navbar.js +236 -0
package/components/pattern-showcase.js +225 -0
package/components/progress.js +134 -0
package/components/react.js +111 -0
package/components/section.js +54 -0
package/components/select.js +322 -0
package/components/sidebar.js +180 -0
package/components/skeleton.js +85 -0
package/components/table.js +181 -0
package/components/tabs.js +202 -0
package/components/theme-toggle.js +82 -0
package/components/toast.js +139 -0
package/components/tooltip.js +167 -0
package/core/a2ui-schema-manager.js +344 -0
package/core/a2ui.js +431 -0
package/core/bun-runtime.js +799 -0
package/core/cli/commands/add.js +23 -0
package/core/cli/commands/audit.js +58 -0
package/core/cli/commands/build.js +137 -0
package/core/cli/commands/create-plugin.js +241 -0
package/core/cli/commands/dev.js +228 -0
package/core/cli/commands/lint.js +23 -0
package/core/cli/commands/test.js +34 -0
package/core/cli/migrator.js +71 -0
package/core/cli/ui.js +46 -0
package/core/compliance.js +628 -0
package/core/config.js +263 -0
package/core/db-advanced.js +481 -0
package/core/db.js +284 -0
package/core/enhanced-hmr.js +404 -0
package/core/errors.js +222 -0
package/core/file-router.js +290 -0
package/core/heartbeat.js +64 -0
package/core/hmr-client.js +204 -0
package/core/hmr.js +196 -0
package/core/html.d.ts +116 -0
package/core/html.js +160 -0
package/core/hydration.js +52 -0
package/core/lipa-namba-journey.js +572 -0
package/core/motion.js +106 -0
package/core/nida-cig-middleware.js +455 -0
package/core/patterns.d.ts +124 -0
package/core/patterns.js +833 -0
package/core/plugins/index.js +312 -0
package/core/router.js +387 -0
package/core/sdk-client.js +62 -0
package/core/sdk.d.ts +133 -0
package/core/sdk.js +123 -0
package/core/seo.js +76 -0
package/core/server/auth-endpoints.js +339 -0
package/core/server/auth.js +180 -0
package/core/server/csrf.js +206 -0
package/core/server/db.js +39 -0
package/core/server/middleware.js +324 -0
package/core/server/rate-limit.js +238 -0
package/core/server/render.js +69 -0
package/core/server/router.js +120 -0
package/core/shim.js +28 -0
package/core/state.d.ts +86 -0
package/core/state.js +242 -0
package/core/store.d.ts +122 -0
package/core/store.js +61 -0
package/core/validation.d.ts +233 -0
package/core/validation.js +590 -0
package/core/websocket.js +639 -0
package/dist/africode.js +2905 -0
package/dist/africode.js.map +61 -0
package/dist/build-info.json +23 -0
package/dist/components.js +2888 -0
package/dist/components.js.map +58 -0
package/dist/styles/africanity.css +322 -0
package/dist/styles/typography.css +141 -0
package/docs/IDE-Guide.md +50 -0
package/package.json +110 -0
package/src/index.ts +196 -0
package/styles/africanity.css +322 -0
package/styles/typography.css +141 -0
package/templates/starter/.env.example +15 -0
package/templates/starter/africode.config.js +40 -0
package/templates/starter/package.json +14 -0
package/templates/starter/src/pages/index.html +46 -0
package/templates/starter/src/pages/index.js +32 -0
package/templates/starter/src/styles/main.css +4 -0
package/templates/starter-3d/.env.example +7 -0
package/templates/starter-3d/africode.config.js +29 -0
package/templates/starter-3d/components/af-model-viewer.js +125 -0
package/templates/starter-3d/package.json +15 -0
package/templates/starter-3d/src/pages/index.html +46 -0
package/templates/starter-3d/src/pages/index.js +50 -0
package/templates/starter-3d/src/styles/main.css +4 -0
package/templates/starter-react/.env.example +15 -0
package/templates/starter-react/africode.config.js +40 -0
package/templates/starter-react/package.json +16 -0
package/templates/starter-react/src/pages/index.html +46 -0
package/templates/starter-react/src/pages/index.js +68 -0
package/templates/starter-react/src/styles/main.css +4 -0
package/templates/starter-tailwind/.env.example +15 -0
package/templates/starter-tailwind/africode.config.js +40 -0
package/templates/starter-tailwind/package.json +20 -0
package/templates/starter-tailwind/src/pages/index.html +46 -0
package/templates/starter-tailwind/src/pages/index.js +37 -0
package/templates/starter-tailwind/src/styles/main.css +4 -0
package/templates/starter-tailwind/src/styles/tailwind.css +1 -0
package/templates/starter-tailwind/src/tailwind-loader.js +30 -0

package/templates/starter/package.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+    "name": "africode-starter",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "africode dev",
+        "build": "africode build",
+        "migrate": "africode migrate"
+    },
+    "dependencies": {
+        "africode": "^1.0.0"
+    }
+}

package/templates/starter/src/pages/index.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to AfriCode</title>
+    <!-- Theme -->
+    <link rel="stylesheet" href="/node_modules/africode/styles/africanity.css">
+    <link rel="stylesheet" href="/node_modules/africode/styles/typography.css">
+    <link rel="stylesheet" href="/styles/main.css">
+    <script type="module" src="/node_modules/africode/core/sdk.js"></script>
+    <!-- SDK & Components -->
+    <script type="module">
+        import 'africode/components';
+        import { store } from 'africode';
+        console.log('AfriCode State Engine:', store);
+    </script>
+</head>
+<body>
+    <af-navbar logo="Starter App" theme="dark"></af-navbar>
+    <main style="max-width: 1200px; margin: 0 auto; padding: 40px;">
+        <af-hero title="Umoja" subtitle="You are running on the AfriCode Framework." pattern="kente">
+        </af-hero>
+        <div
+            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px;">
+            <af-card title="Getting Started">
+                <p>Edit <code>pages/index.html</code> to change this page.</p>
+                <af-button variant="primary">Read Docs</af-button>
+            </af-card>
+            <af-kanga-card proverb="Haba na haba hujaza kibaba.">
+                <h3>Steady Progress</h3>
+                <p>Little by little fills the measure.</p>
+            </af-kanga-card>
+        </div>
+    </main>
+</body>
+</html>

package/templates/starter/src/pages/index.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { html, Layout } from 'africode';
+/**
+ * Home Page
+ * Route: /
+ */
+export default function HomePage() {
+    return Layout({
+        title: "Welcome to AfriCode",
+        children: html`
+            <af-navbar logo="My App" theme="dark"></af-navbar>
+            <main style="max-width: 1000px; margin: 0 auto; padding: 40px;">
+                <af-hero
+                    title="Next-Gen African Web"
+                    subtitle="Built with the AfriCode JS Framework."
+                    pattern="kente">
+                </af-hero>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px;">
+                    <af-card title="JS-First Architecture">
+                        <p>No more HTML files. Logic and View utilize <code>pages/index.js</code>.</p>
+                    </af-card>
+                    <af-card title="Component System">
+                        <p>Import components and use them directly in your template literals.</p>
+                    </af-card>
+                </div>
+            </main>
+        `
+    });
+}

package/templates/starter/src/styles/main.css ADDED Viewed

@@ -0,0 +1,4 @@
+/* Custom Application Styles */
+:root {
+    --brand-color: #FCD116;
+}

package/templates/starter-3d/.env.example ADDED Viewed

@@ -0,0 +1,7 @@
+# AfriCode Environment Configuration (3D Starter)
+PORT=3000
+NODE_ENV=development
+DB_FILE=./data.db
+SESSION_SECRET=replace_this_with_a_long_random_string
+JWT_SECRET=replace_this_with_another_long_random_string

package/templates/starter-3d/africode.config.js ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * AfriCode Framework Configuration (3D Starter)
+ */
+export default {
+    entry: 'src/index.js',
+    server: {
+        port: process.env.PORT || 3000,
+        host: '0.0.0.0',
+        staticDir: 'public',
+        cors: true
+    },
+    directories: {
+        src: 'src',
+        pages: 'src/pages',
+        components: 'src/components',
+        styles: 'src/styles',
+        build: 'dist'
+    },
+    database: {
+        client: 'sqlite',
+        connection: { filename: process.env.DB_FILE || './data.db' },
+        useNullAsDefault: true,
+        walMode: true
+    },
+    theme: {
+        default: 'dark',
+        toggleAttribute: 'data-theme'
+    }
+};

package/templates/starter-3d/components/af-model-viewer.js ADDED Viewed

@@ -0,0 +1,125 @@
+import { AfriCodeComponent, registerComponent } from 'africode/components/base.js';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+export class AfriModelViewer extends AfriCodeComponent {
+    constructor() {
+        super();
+        this.container = null;
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.model = null;
+    }
+    connectedCallback() {
+        this.render();
+        this.initThree();
+    }
+    static get observedAttributes() {
+        return ['src', 'auto-rotate'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'src' && this.model) {
+            // Reload logic would go here
+        }
+    }
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    height: 400px;
+                    border-radius: var(--radius-lg);
+                    overflow: hidden;
+                    background: var(--afri-charcoal);
+                    position: relative;
+                }
+                #container {
+                    width: 100%;
+                    height: 100%;
+                }
+                .loader {
+                    position: absolute;
+                    top: 50%; left: 50%;
+                    transform: translate(-50%, -50%);
+                    color: var(--afri-gold);
+                    font-family: var(--font-logo);
+                }
+            </style>
+            <div id="container"></div>
+            <div class="loader">Loading Artifact...</div>
+        `;
+        this.container = this.shadowRoot.getElementById('container');
+    }
+    initThree() {
+        const width = this.clientWidth || 300;
+        const height = this.clientHeight || 400;
+        // Scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color('#1e293b'); // Matches afri-charcoal
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+        this.camera.position.z = 5;
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(width, height);
+        this.container.appendChild(this.renderer.domElement);
+        // Lights
+        const light = new THREE.AmbientLight(0x404040, 2); // Soft white light
+        this.scene.add(light);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+        directionalLight.position.set(1, 1, 1);
+        this.scene.add(directionalLight);
+        // Controls
+        const controls = new OrbitControls(this.camera, this.renderer.domElement);
+        controls.enableDamping = true;
+        // Initial Geometry (Placeholder if no src)
+        const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
+        const material = new THREE.MeshStandardMaterial({
+            color: 0xffb700, // afri-gold
+            metalness: 0.5,
+            roughness: 0.1
+        });
+        const cube = new THREE.Mesh(geometry, material);
+        this.scene.add(cube);
+        this.shadowRoot.querySelector('.loader').style.display = 'none';
+        // Animation Loop
+        const animate = () => {
+            requestAnimationFrame(animate);
+            if (this.hasAttribute('auto-rotate')) {
+                cube.rotation.x += 0.01;
+                cube.rotation.y += 0.01;
+            }
+            controls.update();
+            this.renderer.render(this.scene, this.camera);
+        };
+        animate();
+        // Resize Handler
+        const resizeObserver = new ResizeObserver(() => {
+            const w = this.clientWidth;
+            const h = this.clientHeight;
+            this.camera.aspect = w / h;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(w, h);
+        });
+        resizeObserver.observe(this);
+    }
+}
+registerComponent('af-model-viewer', AfriModelViewer);

package/templates/starter-3d/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+    "name": "africode-starter",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "africode dev",
+        "build": "africode build",
+        "migrate": "africode migrate"
+    },
+    "dependencies": {
+        "africode": "^2.4.0",
+        "three": "^0.160.0"
+    }
+}

package/templates/starter-3d/src/pages/index.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to AfriCode</title>
+    <!-- Theme -->
+    <link rel="stylesheet" href="/node_modules/africode/styles/africanity.css">
+    <link rel="stylesheet" href="/node_modules/africode/styles/typography.css">
+    <link rel="stylesheet" href="/styles/main.css">
+    <script type="module" src="/node_modules/africode/core/sdk.js"></script>
+    <!-- SDK & Components -->
+    <script type="module">
+        import 'africode/components';
+        import { store } from 'africode';
+        console.log('AfriCode State Engine:', store);
+    </script>
+</head>
+<body>
+    <af-navbar logo="Starter App" theme="dark"></af-navbar>
+    <main style="max-width: 1200px; margin: 0 auto; padding: 40px;">
+        <af-hero title="Umoja" subtitle="You are running on the AfriCode Framework." pattern="kente">
+        </af-hero>
+        <div
+            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px;">
+            <af-card title="Getting Started">
+                <p>Edit <code>pages/index.html</code> to change this page.</p>
+                <af-button variant="primary">Read Docs</af-button>
+            </af-card>
+            <af-kanga-card proverb="Haba na haba hujaza kibaba.">
+                <h3>Steady Progress</h3>
+                <p>Little by little fills the measure.</p>
+            </af-kanga-card>
+        </div>
+    </main>
+</body>
+</html>

package/templates/starter-3d/src/pages/index.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { html, Layout } from 'africode';
+/**
+ * Home Page
+ * Route: /
+ */
+export default function HomePage() {
+    return Layout({
+        title: "Welcome to AfriCode",
+        children: html`
+            <script type="module" src="/components/af-model-viewer.js"></script>
+            <af-navbar logo="AfriCode 3D" theme="dark"></af-navbar>
+            <main style="max-width: 1200px; margin: 0 auto; padding: 40px;">
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;">
+                    <div>
+                        <h1 style="font-size: 3.5rem; background: linear-gradient(to right, var(--kente-gold), var(--maasai-red)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                            Future Heritage.
+                        </h1>
+                        <p style="font-size: 1.2rem; opacity: 0.8; line-height: 1.6;">
+                            Experience the fusion of African artistry and WebGL performance.
+                            This starter comes pre-configured with <b>Three.js</b>.
+                        </p>
+                        <div style="margin-top: 30px; display: flex; gap: 15px;">
+                            <af-button variant="primary">Read Docs</af-button>
+                            <af-button variant="outline">Explore 3D Assets</af-button>
+                        </div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 20px;">
+                        <af-model-viewer auto-rotate></af-model-viewer>
+                        <div style="text-align: center; margin-top: 15px; font-size: 0.9rem; opacity: 0.6;">
+                            Interact with the model directly in the browser.
+                        </div>
+                    </div>
+                </div>
+                <div style="margin-top: 80px;">
+                    <af-accordion>
+                        <div slot="header">🏛️ How is this configured?</div>
+                        <div slot="content">
+                            Check <code>components/af-model-viewer.js</code>. We use a standard Custom Element that wraps a Three.js scene.
+                            State updates are handled via attributes.
+                        </div>
+                    </af-accordion>
+                </div>
+            </main>
+        `
+    });
+}

package/templates/starter-3d/src/styles/main.css ADDED Viewed

@@ -0,0 +1,4 @@
+/* Custom Application Styles */
+:root {
+    --brand-color: #FCD116;
+}

package/templates/starter-react/.env.example ADDED Viewed

@@ -0,0 +1,15 @@
+# AfriCode Environment Configuration
+# Server Settings
+PORT=3000
+NODE_ENV=development
+# Database Settings
+DB_FILE=./data.db
+# Security
+SESSION_SECRET=replace_this_with_a_long_random_string
+JWT_SECRET=replace_this_with_another_long_random_string
+# API Keys (Add yours here)
+# PUBLIC_API_URL=http://localhost:3000

package/templates/starter-react/africode.config.js ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * AfriCode Framework Configuration
+ */
+export default {
+    // Project entry point
+    entry: 'src/index.js',
+    // Server Configuration
+    server: {
+        port: process.env.PORT || 3000,
+        host: '0.0.0.0',
+        staticDir: 'public',
+        cors: true
+    },
+    // Directory structure mapping
+    directories: {
+        src: 'src',
+        pages: 'src/pages',
+        components: 'src/components',
+        styles: 'src/styles',
+        build: 'dist'
+    },
+    // Database Configuration (SQLite)
+    database: {
+        client: 'sqlite',
+        connection: {
+            filename: process.env.DB_FILE || './data.db'
+        },
+        useNullAsDefault: true,
+        walMode: true // Write-Ahead Logging for performance
+    },
+    // Theme defaults
+    theme: {
+        default: 'dark',
+        toggleAttribute: 'data-theme'
+    }
+};

package/templates/starter-react/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+    "name": "africode-react-starter",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "africode dev",
+        "build": "africode build",
+        "migrate": "africode migrate"
+    },
+    "dependencies": {
+        "africode": "^1.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    }
+}

package/templates/starter-react/src/pages/index.html ADDED Viewed

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to AfriCode</title>
+    <!-- Theme -->
+    <link rel="stylesheet" href="/node_modules/africode/styles/africanity.css">
+    <link rel="stylesheet" href="/node_modules/africode/styles/typography.css">
+    <link rel="stylesheet" href="/styles/main.css">
+    <script type="module" src="/node_modules/africode/core/sdk.js"></script>
+    <!-- SDK & Components -->
+    <script type="module">
+        import 'africode/components';
+        import { store } from 'africode';
+        console.log('AfriCode State Engine:', store);
+    </script>
+</head>
+<body>
+    <af-navbar logo="Starter App" theme="dark"></af-navbar>
+    <main style="max-width: 1200px; margin: 0 auto; padding: 40px;">
+        <af-hero title="Umoja" subtitle="You are running on the AfriCode Framework." pattern="kente">
+        </af-hero>
+        <div
+            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px;">
+            <af-card title="Getting Started">
+                <p>Edit <code>pages/index.html</code> to change this page.</p>
+                <af-button variant="primary">Read Docs</af-button>
+            </af-card>
+            <af-kanga-card proverb="Haba na haba hujaza kibaba.">
+                <h3>Steady Progress</h3>
+                <p>Little by little fills the measure.</p>
+            </af-kanga-card>
+        </div>
+    </main>
+</body>
+</html>

package/templates/starter-react/src/pages/index.js ADDED Viewed

@@ -0,0 +1,68 @@
+import { html, Layout } from 'africode';
+/**
+ * Home Page — React Interop Starter
+ * Route: /
+ *
+ * This starter demonstrates mounting React components inside AfriCode
+ * pages using the <af-react> wrapper component.
+ *
+ * The React component is loaded via a client-side island script.
+ */
+export default function HomePage() {
+    return Layout({
+        title: "AfriCode + React",
+        children: html`
+            <af-navbar logo="React App" theme="dark"></af-navbar>
+            <main style="max-width: 1000px; margin: 0 auto; padding: 40px;">
+                <af-hero
+                    title="AfriCode + React"
+                    subtitle="React components as islands inside a Bun-first framework."
+                    pattern="kente">
+                </af-hero>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px;">
+                    <af-card>
+                        <h3>Islands Architecture</h3>
+                        <p>React mounts inside <code>&lt;af-react&gt;</code> Web Components. AfriCode handles routing, builds, and HMR.</p>
+                    </af-card>
+                    <af-card>
+                        <h3>State Bridge</h3>
+                        <p>Use <code>useAfriCodeStore()</code> to subscribe React components to AfriCode's reactive state.</p>
+                    </af-card>
+                </div>
+                <af-section title="Live React Island" variant="muted">
+                    <af-react id="react-counter"></af-react>
+                </af-section>
+            </main>
+            <script type="module">
+                import React, { useState } from 'react';
+                import { AfriReact } from 'africode/components/react.js';
+                function Counter() {
+                    const [count, setCount] = useState(0);
+                    return React.createElement('div', { style: { padding: '24px', textAlign: 'center' } },
+                        React.createElement('h3', { style: { color: 'var(--text-primary)' } }, 'React Counter'),
+                        React.createElement('p', { style: { fontSize: '2rem', margin: '16px 0' } }, count),
+                        React.createElement('button', {
+                            onClick: () => setCount(c => c + 1),
+                            style: {
+                                padding: '10px 24px',
+                                background: 'linear-gradient(135deg, #1eb53a, #fcd116)',
+                                border: 'none', borderRadius: '8px',
+                                fontWeight: 700, cursor: 'pointer'
+                            }
+                        }, 'Increment')
+                    );
+                }
+                const wrapper = document.getElementById('react-counter');
+                if (wrapper) wrapper.mount(Counter);
+            </script>
+        `
+    });
+}

package/templates/starter-react/src/styles/main.css ADDED Viewed

@@ -0,0 +1,4 @@
+/* Custom Application Styles */
+:root {
+    --brand-color: #FCD116;
+}

package/templates/starter-tailwind/.env.example ADDED Viewed

@@ -0,0 +1,15 @@
+# AfriCode Environment Configuration
+# Server Settings
+PORT=3000
+NODE_ENV=development
+# Database Settings
+DB_FILE=./data.db
+# Security
+SESSION_SECRET=replace_this_with_a_long_random_string
+JWT_SECRET=replace_this_with_another_long_random_string
+# API Keys (Add yours here)
+# PUBLIC_API_URL=http://localhost:3000

package/templates/starter-tailwind/africode.config.js ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * AfriCode Framework Configuration
+ */
+export default {
+    // Project entry point
+    entry: 'src/index.js',
+    // Server Configuration
+    server: {
+        port: process.env.PORT || 3000,
+        host: '0.0.0.0',
+        staticDir: 'public',
+        cors: true
+    },
+    // Directory structure mapping
+    directories: {
+        src: 'src',
+        pages: 'src/pages',
+        components: 'src/components',
+        styles: 'src/styles',
+        build: 'dist'
+    },
+    // Database Configuration (SQLite)
+    database: {
+        client: 'sqlite',
+        connection: {
+            filename: process.env.DB_FILE || './data.db'
+        },
+        useNullAsDefault: true,
+        walMode: true // Write-Ahead Logging for performance
+    },
+    // Theme defaults
+    theme: {
+        default: 'dark',
+        toggleAttribute: 'data-theme'
+    }
+};

package/templates/starter-tailwind/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+    "name": "africode-tailwind-starter",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "concurrently \"africode dev\" \"npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css --watch\"",
+        "build:css": "npx @tailwindcss/cli -i ./src/styles/tailwind.css -o ./src/styles/tailwind.out.css --minify",
+        "build": "npm run build:css && africode build",
+        "migrate": "africode migrate"
+    },
+    "dependencies": {
+        "africode": "^1.0.0"
+    },
+    "devDependencies": {
+        "@tailwindcss/cli": "^4.0.0",
+        "tailwindcss": "^4.0.0",
+        "concurrently": "^9.0.0"
+    }
+}