@africode/core 5.0.8 → 5.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africode/core",
-  "version": "5.0.8",
+  "version": "5.0.9",
   "description": "Bun-native full-stack framework with generative AI, fintech compliance, and real-time performance - built for Tanzanian digital economy",
   "module": "core/sdk.js",
   "main": "core/sdk.js",

package/templates/starter/package.json

@@ -4,11 +4,11 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "africode dev",
-        "build": "africode build",
-        "migrate": "africode migrate"
+        "dev": "bun run ./bin/africode.js dev",
+        "build": "bun run ./bin/africode.js build",
+        "migrate": "bun run ./bin/africode.js migrate"
     },
     "dependencies": {
-        "@africode/core": "^5.0.2"
+        "@africode/core": "^5.0.9"
     }
-}
+}

package/templates/starter/src/index.js

@@ -0,0 +1,18 @@
+import { html, Layout } from '@africode/core';
+
+export function loader() {
+  return { title: 'Welcome to AfriCode' };
+}
+
+export default function App({ data }) {
+  return Layout({
+    title: data?.title || 'Welcome to AfriCode',
+    children: html`
+      <main>
+        <h1>Welcome to AfriCode</h1>
+        <p>Your African-centric full-stack framework is ready.</p>
+        <p>Use the CLI to add pages and components, then edit this starter app.</p>
+      </main>
+    `
+  });
+}

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

@@ -1,4 +1,4 @@
-import { html, Layout } from 'africode';
+import { html, Layout } from '@africode/core';
 
 export function loader() {
   return { title: 'Welcome to AfriCode' };

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

@@ -4,12 +4,12 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "africode dev",
-        "build": "africode build",
-        "migrate": "africode migrate"
+        "dev": "bun run ./bin/africode.js dev",
+        "build": "bun run ./bin/africode.js build",
+        "migrate": "bun run ./bin/africode.js migrate"
     },
     "dependencies": {
-        "@africode/core": "^5.0.2",
+        "@africode/core": "^5.0.9",
         "three": "^0.160.0"
     }
-}
+}

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

@@ -1,4 +1,4 @@
-import { html, Layout } from 'africode';
+import { html, Layout } from '@africode/core';
 
 /**
  * Home Page

package/templates/starter-dashboard/.env.example

@@ -0,0 +1,21 @@
+# AfriCode Dashboard Starter Environment
+
+# Server
+PORT=3000
+NODE_ENV=development
+PUBLIC_API_URL=http://localhost:3000
+
+# Local analytics data
+DB_FILE=./data.db
+ANALYTICS_SOURCE=mock
+ANALYTICS_REFRESH_SECONDS=30
+
+# Session and admin access
+SESSION_SECRET=replace_this_with_a_long_random_string
+JWT_SECRET=replace_this_with_another_long_random_string
+ADMIN_EMAIL=admin@example.com
+ADMIN_PASSWORD=change_me_before_production
+
+# Optional reporting integrations
+REPORTS_ENABLED=true
+EXPORTS_DIR=./exports

package/templates/starter-dashboard/africode.config.js

@@ -0,0 +1,20 @@
+/**
+ * AfriCode Dashboard Starter Configuration
+ */
+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'
+  },
+  theme: { default: 'dark', toggleAttribute: 'data-theme' }
+};

package/templates/starter-dashboard/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "africode-dashboard-starter",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bun run ./bin/africode.js dev",
+    "build": "bun run ./bin/africode.js build",
+    "migrate": "bun run ./bin/africode.js migrate"
+  },
+  "dependencies": {
+    "@africode/core": "^5.0.9"
+  }
+}

package/templates/starter-dashboard/src/index.js

@@ -0,0 +1,17 @@
+import { html, Layout } from '@africode/core';
+
+export function loader() {
+  return { title: 'AfriCode Dashboard Starter' };
+}
+
+export default function App({ data }) {
+  return Layout({
+    title: data?.title || 'AfriCode Dashboard Starter',
+    children: html`
+      <main>
+        <h1>Dashboard starter ready</h1>
+        <p>Use this template for admin panels, analytics, and internal tools.</p>
+      </main>
+    `
+  });
+}

package/templates/starter-dashboard/src/pages/api/analytics.js

@@ -0,0 +1,24 @@
+function json(data, status = 200) {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { 'Content-Type': 'application/json' }
+  });
+}
+
+export function GET() {
+  return json({
+    ok: true,
+    source: process.env.ANALYTICS_SOURCE || 'mock',
+    refreshedAt: new Date().toISOString(),
+    metrics: [
+      { id: 'revenue', label: 'Revenue', value: 48250, unit: 'USD', change: 12.4 },
+      { id: 'users', label: 'Active users', value: 18420, unit: 'count', change: 8.1 },
+      { id: 'conversion', label: 'Conversion', value: 6.8, unit: 'percent', change: -1.2 }
+    ],
+    activity: [
+      { id: 'act_001', title: 'New enterprise account', status: 'review', timestamp: '2026-07-07T08:30:00.000Z' },
+      { id: 'act_002', title: 'Revenue report exported', status: 'complete', timestamp: '2026-07-07T09:20:00.000Z' },
+      { id: 'act_003', title: 'Usage threshold reached', status: 'attention', timestamp: '2026-07-07T10:05:00.000Z' }
+    ]
+  });
+}

package/templates/starter-dashboard/src/pages/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AfriCode Dashboard Starter</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "africode": "/node_modules/@africode/core/core/sdk-browser.js",
+      "africode/components": "/node_modules/@africode/core/components/index.js"
+    }
+  }
+  </script>
+  <link rel="stylesheet" href="/node_modules/@africode/core/styles/africanity.css" />
+  <link rel="stylesheet" href="/styles/main.css" />
+  <script type="module" src="/node_modules/@africode/core/core/sdk-browser.js"></script>
+</head>
+<body>
+  <main class="dashboard-shell">
+    <section class="topbar">
+      <div>
+        <span class="eyebrow">AfriCode Dashboard Starter</span>
+        <h1>Operations overview</h1>
+      </div>
+      <button class="button" id="theme-toggle" type="button">Toggle theme</button>
+    </section>
+
+    <section class="grid">
+      <div>
+        <section class="metrics" id="metrics"></section>
+        <section class="panel" style="margin-top: 16px;">
+          <h2>Weekly signal</h2>
+          <div class="chart" id="chart" aria-label="Weekly analytics chart"></div>
+        </section>
+      </div>
+
+      <aside class="panel">
+        <h2>Activity</h2>
+        <div class="activity-list" id="activity-list"></div>
+      </aside>
+    </section>
+  </main>
+
+  <script type="module">
+    const formatMetric = (metric) => {
+      if (metric.unit === 'USD') return '$' + Number(metric.value).toLocaleString('en-US');
+      if (metric.unit === 'percent') return Number(metric.value).toFixed(1) + '%';
+      return Number(metric.value).toLocaleString('en-US');
+    };
+
+    function renderMetrics(metrics) {
+      const root = document.querySelector('#metrics');
+      root.replaceChildren(...metrics.map((metric) => {
+        const card = document.createElement('article');
+        const label = document.createElement('span');
+        const value = document.createElement('strong');
+        const trend = document.createElement('span');
+
+        card.className = 'metric';
+        label.className = 'label';
+        value.className = 'value';
+        trend.className = metric.change >= 0 ? 'trend good' : 'trend bad';
+        label.textContent = metric.label;
+        value.textContent = formatMetric(metric);
+        trend.textContent = (metric.change >= 0 ? '+' : '') + metric.change + '%';
+
+        card.append(label, value, trend);
+        return card;
+      }));
+    }
+
+    function renderActivity(items) {
+      const root = document.querySelector('#activity-list');
+      root.replaceChildren(...items.map((item) => {
+        const row = document.createElement('article');
+        const title = document.createElement('strong');
+        const meta = document.createElement('span');
+
+        row.className = 'activity-row';
+        meta.className = 'meta';
+        title.textContent = item.title;
+        meta.textContent = item.status + ' - ' + new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+        row.append(title, meta);
+        return row;
+      }));
+    }
+
+    function renderChart(metrics) {
+      const values = [42, 58, 51, 66, 72, 69, 84];
+      const root = document.querySelector('#chart');
+      root.replaceChildren(...values.map((value) => {
+        const bar = document.createElement('div');
+        bar.className = 'bar';
+        bar.style.height = value + '%';
+        bar.title = value + '%';
+        return bar;
+      }));
+    }
+
+    async function loadAnalytics() {
+      const response = await fetch('/api/analytics');
+      const data = await response.json();
+      renderMetrics(data.metrics);
+      renderActivity(data.activity);
+      renderChart(data.metrics);
+    }
+
+    document.querySelector('#theme-toggle').addEventListener('click', () => {
+      const root = document.documentElement;
+      root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
+    });
+
+    loadAnalytics();
+  </script>
+</body>
+</html>

package/templates/starter-dashboard/src/pages/index.js

@@ -0,0 +1,110 @@
+import { html, Layout } from '@africode/core';
+
+export function loader() {
+  return { title: 'AfriCode Dashboard Starter' };
+}
+
+export default function DashboardPage({ data }) {
+  return Layout({
+    title: data?.title || 'AfriCode Dashboard Starter',
+    children: html`
+      <main class="dashboard-shell">
+        <section class="topbar">
+          <div>
+            <span class="eyebrow">AfriCode Dashboard Starter</span>
+            <h1>Operations overview</h1>
+          </div>
+          <button class="button" id="theme-toggle" type="button">Toggle theme</button>
+        </section>
+
+        <section class="grid">
+          <div>
+            <section class="metrics" id="metrics"></section>
+            <section class="panel" style="margin-top: 16px;">
+              <h2>Weekly signal</h2>
+              <div class="chart" id="chart" aria-label="Weekly analytics chart"></div>
+            </section>
+          </div>
+
+          <aside class="panel">
+            <h2>Activity</h2>
+            <div class="activity-list" id="activity-list"></div>
+          </aside>
+        </section>
+      </main>
+
+      <script type="module">
+        const formatMetric = (metric) => {
+          if (metric.unit === 'USD') return '$' + Number(metric.value).toLocaleString('en-US');
+          if (metric.unit === 'percent') return Number(metric.value).toFixed(1) + '%';
+          return Number(metric.value).toLocaleString('en-US');
+        };
+
+        function renderMetrics(metrics) {
+          const root = document.querySelector('#metrics');
+          root.replaceChildren(...metrics.map((metric) => {
+            const card = document.createElement('article');
+            const label = document.createElement('span');
+            const value = document.createElement('strong');
+            const trend = document.createElement('span');
+
+            card.className = 'metric';
+            label.className = 'label';
+            value.className = 'value';
+            trend.className = metric.change >= 0 ? 'trend good' : 'trend bad';
+            label.textContent = metric.label;
+            value.textContent = formatMetric(metric);
+            trend.textContent = (metric.change >= 0 ? '+' : '') + metric.change + '%';
+
+            card.append(label, value, trend);
+            return card;
+          }));
+        }
+
+        function renderActivity(items) {
+          const root = document.querySelector('#activity-list');
+          root.replaceChildren(...items.map((item) => {
+            const row = document.createElement('article');
+            const title = document.createElement('strong');
+            const meta = document.createElement('span');
+
+            row.className = 'activity-row';
+            meta.className = 'meta';
+            title.textContent = item.title;
+            meta.textContent = item.status + ' - ' + new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+            row.append(title, meta);
+            return row;
+          }));
+        }
+
+        function renderChart(metrics) {
+          const values = [42, 58, 51, 66, 72, 69, 84];
+          const root = document.querySelector('#chart');
+          root.replaceChildren(...values.map((value) => {
+            const bar = document.createElement('div');
+            bar.className = 'bar';
+            bar.style.height = value + '%';
+            bar.title = value + '%';
+            return bar;
+          }));
+        }
+
+        async function loadAnalytics() {
+          const response = await fetch('/api/analytics');
+          const data = await response.json();
+          renderMetrics(data.metrics);
+          renderActivity(data.activity);
+          renderChart(data.metrics);
+        }
+
+        document.querySelector('#theme-toggle').addEventListener('click', () => {
+          const root = document.documentElement;
+          root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
+        });
+
+        loadAnalytics();
+      </script>
+    `
+  });
+}

package/templates/starter-dashboard/src/styles/main.css

@@ -0,0 +1,172 @@
+:root {
+  color-scheme: light;
+  --bg: #f5f7fb;
+  --surface: #ffffff;
+  --surface-muted: #eef3f8;
+  --text: #172033;
+  --muted: #647084;
+  --border: #d7deea;
+  --primary: #2563eb;
+  --good: #087443;
+  --warn: #b7791f;
+  --danger: #b42318;
+  --shadow: 0 14px 34px rgba(23, 32, 51, 0.08);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #07111f;
+  --surface: #101b2d;
+  --surface-muted: #17243a;
+  --text: #f8fafc;
+  --muted: #a7b4c8;
+  --border: #26364f;
+  --primary: #60a5fa;
+  --good: #34d399;
+  --warn: #f5b84b;
+  --danger: #fb7185;
+  --shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button {
+  font: inherit;
+}
+
+.dashboard-shell {
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 28px 0;
+}
+
+.topbar,
+.metric,
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 20px;
+}
+
+.eyebrow,
+.label,
+.meta,
+.status {
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: clamp(1.45rem, 3vw, 2.2rem);
+  line-height: 1.1;
+}
+
+.button {
+  min-height: 40px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 14px;
+  background: var(--surface-muted);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.metric,
+.panel {
+  padding: 18px;
+}
+
+.value {
+  display: block;
+  margin-top: 10px;
+  font-size: 1.6rem;
+  font-weight: 760;
+}
+
+.trend.good {
+  color: var(--good);
+}
+
+.trend.bad {
+  color: var(--danger);
+}
+
+.activity-list {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.activity-row {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 6px;
+  background: var(--surface-muted);
+}
+
+.chart {
+  display: grid;
+  align-items: end;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+  height: 220px;
+  margin-top: 18px;
+  padding: 12px;
+  border-radius: 8px;
+  background: var(--surface-muted);
+}
+
+.bar {
+  min-height: 18px;
+  border-radius: 5px 5px 0 0;
+  background: var(--primary);
+}
+
+@media (max-width: 860px) {
+  .topbar,
+  .grid,
+  .metrics {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}

package/templates/starter-fintech/.env.example

@@ -0,0 +1,28 @@
+# AfriCode Fintech Starter Environment
+
+# Server
+PORT=3000
+NODE_ENV=development
+PUBLIC_API_URL=http://localhost:3000
+
+# Local data
+DB_FILE=./data.db
+
+# Session and signing secrets
+SESSION_SECRET=replace_this_with_a_long_random_string
+JWT_SECRET=replace_this_with_another_long_random_string
+WEBHOOK_SIGNING_SECRET=whsec_mock_africode_fintech
+
+# Sandbox payment and identity placeholders
+PAYMENT_PROVIDER=sandbox
+PAYMENT_PUBLIC_KEY=pk_test_africode
+PAYMENT_SECRET_KEY=sk_test_africode
+NIDA_CIG_BASE_URL=https://sandbox.nida.local
+NIDA_CLIENT_ID=africode_sandbox_client
+NIDA_PRIVATE_KEY_PATH=./secrets/nida-private.pem
+TIPS_BASE_URL=https://sandbox.tips.local
+TIPS_MERCHANT_ID=AFRICODE_SANDBOX_MERCHANT
+
+# Compliance simulation
+AML_DAILY_LIMIT_TZS=50000000
+KYC_REQUIRED=true

package/templates/starter-fintech/africode.config.js

@@ -0,0 +1,20 @@
+/**
+ * AfriCode Fintech Starter Configuration
+ */
+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'
+  },
+  theme: { default: 'dark', toggleAttribute: 'data-theme' }
+};

package/templates/starter-fintech/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "africode-fintech-starter",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bun run ./bin/africode.js dev",
+    "build": "bun run ./bin/africode.js build",
+    "migrate": "bun run ./bin/africode.js migrate"
+  },
+  "dependencies": {
+    "@africode/core": "^5.0.9",
+    "chart.js": "^4.0.0"
+  }
+}

package/templates/starter-fintech/src/index.js

@@ -0,0 +1,17 @@
+import { html, Layout } from '@africode/core';
+
+export function loader() {
+  return { title: 'AfriCode Fintech Starter' };
+}
+
+export default function App({ data }) {
+  return Layout({
+    title: data?.title || 'AfriCode Fintech Starter',
+    children: html`
+      <main>
+        <h1>Fintech starter ready</h1>
+        <p>Use this template for wallets, payments, KYC, and merchant flows.</p>
+      </main>
+    `
+  });
+}