@africode/core 5.0.0

package/dist/styles/africanity.css

@@ -0,0 +1,322 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Inter:wght@400;500;600;700;800;900&display=swap');
+
+:root {
+   /* =========================================
+     CULTURAL PALETTES (Immutable Design Tokens)
+     ========================================= */
+   /* Accents */
+   --afri-green: #1EB53A; /* Growth (Tanzania) */
+   --afri-gold: #FCD116;  /* Wealth */
+   --afri-blue: #00A3DD;  /* Water */
+   --afri-red: #EF3340;   /* Vitality */
+
+   /* Maasai (Kenya/Tanzania) */
+   --maasai-red: #E31C23;
+   --maasai-blue: #00A3DD;
+
+   /* Kente (Ghana) */
+   --kente-gold: #FFD700;
+   --kente-green: #00966C;
+
+   /* Tuareg (Sahara) */
+   --tuareg-indigo: #2D3D6B;
+   --tuareg-sky: #6B8CC7;
+   --sahara-sand: #F4A460;
+
+   /* Ndebele (South Africa) */
+   --ndebele-pink: #FF69B4;
+   --ndebele-turquoise: #40E0D0;
+
+   /* =========================================
+     FRACTAL SPACING (FIBONACCI)
+     ========================================= */
+   --space-5: 5px;
+   --space-8: 8px;
+   --space-13: 13px;
+   --space-21: 21px;
+   --space-34: 34px;
+   --space-55: 55px;
+   --space-89: 89px;
+
+   /* Motion */
+   --ease-drum: cubic-bezier(0.1, 0.9, 0.2, 1.0);
+   --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+   /* Typography */
+   --font-logo: 'Space Grotesk', sans-serif;
+   --font-body: 'Inter', system-ui, sans-serif;
+
+   /* Layout Standards */
+   --page-max-width: 1280px;
+   --nav-height: 80px;
+   --radius-lg: 12px;
+   --radius-md: 8px;
+   --radius-sm: 6px;
+   --glass-blur: 12px;
+
+   /* Backward-compatible aliases */
+   --brand-gold: var(--afri-gold);
+   --brand-green: var(--afri-green);
+   --slate-800: #1e293b;
+   --slate-900: #0f172a;
+   --slate-950: #020617;
+}
+
+/* =========================================
+  THEME: PROFOUND DARK (Default)
+  ========================================= */
+:root, [data-theme="dark"] {
+   /* Base Backgrounds */
+   --afri-black: #050505;
+   --afri-void: #0f172a;      /* Page Background */
+   --afri-charcoal: #1e293b;  /* Surface 1 */
+   --afri-obsidian: #334155;  /* Surface 2 */
+
+   /* Text System */
+   --text-primary: #f8fafc;
+   --text-secondary: #cbd5e1;
+   --text-muted: #94a3b8;
+
+   /* Structural Variables */
+   --bg-base: var(--afri-void);
+   --glass-bg: rgba(15, 23, 42, 0.7);
+   --glass-border: rgba(255, 255, 255, 0.1);
+   --border-color: var(--glass-border);
+   --text-main: var(--text-primary);
+}
+
+/* =========================================
+  THEME: RADIANT LIGHT
+  ========================================= */
+[data-theme="light"] {
+   /* Base Backgrounds */
+   --afri-black: #ffffff;
+   --afri-void: #f8fafc;      /* Page Background */
+   --afri-charcoal: #ffffff;  /* Surface 1 */
+   --afri-obsidian: #e2e8f0;  /* Surface 2 */
+
+   /* Text System */
+   --text-primary: #0f172a;
+   --text-secondary: #334155;
+   --text-muted: #64748b;
+
+   /* Structural Variables */
+   --bg-base: var(--afri-void);
+   --glass-bg: rgba(255, 255, 255, 0.7);
+   --glass-border: rgba(0, 0, 0, 0.1);
+   --border-color: var(--glass-border);
+   --text-main: var(--text-primary);
+}
+
+body {
+   background-color: var(--afri-void);
+   color: var(--text-primary);
+   font-family: var(--font-body);
+   margin: 0;
+   padding: 0;
+   line-height: 1.6;
+   overflow-x: hidden;
+}
+
+/* Typography Overrides */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+   font-family: var(--font-logo);
+   font-weight: 700;
+   letter-spacing: -0.025em;
+   color: var(--text-primary);
+   margin-top: 0;
+   margin-bottom: var(--space-21);
+}
+
+h1 {
+   font-size: clamp(2.5rem, 5vw, 4rem);
+}
+
+h2 {
+   font-size: clamp(2rem, 4vw, 3rem);
+}
+
+h3 {
+   font-size: 1.5rem;
+}
+
+/* =========================================
+   COMPONENT PREVIEW CARD (Global Design System)
+   Used in Showcase, Patterns, Components pages
+   ========================================= */
+.preview-card {
+   background: var(--afri-charcoal);
+   border: 1px solid var(--afri-obsidian);
+   border-radius: var(--radius-lg);
+   overflow: hidden;
+   display: flex;
+   flex-direction: column;
+   transition: border-color 0.3s ease, transform 0.3s ease;
+}
+
+.preview-card:hover {
+   border-color: var(--afri-green);
+   transform: translateY(-4px);
+}
+
+.preview-header {
+   border-bottom: 1px solid var(--afri-obsidian);
+   padding: 16px 24px;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   background: rgba(0, 0, 0, 0.2);
+}
+
+.preview-title {
+   font-weight: 600;
+   font-size: 0.9rem;
+   color: var(--text-primary);
+   text-transform: uppercase;
+   letter-spacing: 0.05em;
+}
+
+.preview-canvas {
+   padding: 40px;
+   background-image: radial-gradient(var(--afri-obsidian) 1px, transparent 1px);
+   background-size: 20px 20px;
+   flex-grow: 1;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   min-height: 200px;
+}
+
+/* Layout Utilities */
+.page-container {
+   max-width: var(--page-max-width);
+   margin: 0 auto;
+   padding: 100px var(--space-34) var(--space-89);
+   min-height: 100vh;
+}
+
+.page-header {
+   text-align: center;
+   margin-bottom: var(--space-89);
+   position: relative;
+}
+
+.page-header h1 {
+   background: linear-gradient(to right, #4ade80, #38bdf8);
+   background-clip: text;
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+   margin-bottom: var(--space-13);
+}
+
+.page-header p {
+   font-size: 1.25rem;
+   color: var(--text-secondary);
+   max-width: 600px;
+   margin: 0 auto;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+   width: var(--space-8);
+}
+
+::-webkit-scrollbar-track {
+   background: var(--afri-black);
+}
+
+::-webkit-scrollbar-thumb {
+   background: var(--afri-obsidian);
+   border-radius: var(--space-5);
+   border: 2px solid var(--afri-black);
+}
+
+::-webkit-scrollbar-thumb:hover {
+   background: var(--afri-green);
+}
+
+/* =========================================
+   RESPONSIVE BREAKPOINTS
+   ========================================= */
+
+@media (max-width: 768px) {
+   :root {
+      --space-34: 24px;
+      --space-55: 40px;
+      --space-89: 60px;
+   }
+
+   .page-container {
+      padding: 90px 20px 60px;
+   }
+
+   .preview-card {
+      border-radius: var(--space-8);
+   }
+
+   .preview-canvas {
+      padding: 24px;
+      min-height: 150px;
+   }
+
+   h1 {
+      font-size: 2.5rem;
+   }
+
+   h2 {
+      font-size: 1.8rem;
+   }
+
+   h3 {
+      font-size: 1.25rem;
+   }
+
+   .page-header p {
+      font-size: 1rem;
+   }
+}
+
+/* Mobile Small */
+@media (max-width: 480px) {
+   :root {
+      --space-21: 16px;
+   }
+
+   .page-container {
+      padding: 85px 16px 40px;
+   }
+
+   /* =========================================
+   COMPONENT FALLBACKS (Headless Proofing)
+   ========================================= */
+
+   af-navbar:not(:defined) {
+      display: flex;
+      height: 80px;
+      background: rgba(15, 23, 42, 0.9);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      align-items: center;
+      padding: 0 5%;
+      gap: 24px;
+   }
+
+   af-navbar:not(:defined) a {
+      color: #94a3b8;
+      text-decoration: none;
+      font-size: 0.9rem;
+   }
+
+   af-button:not(:defined) {
+      display: inline-flex;
+      padding: 12px 24px;
+      background: #1EB53A;
+      color: white;
+      border-radius: 8px;
+      font-weight: 600;
+   }
+}

package/dist/styles/typography.css

@@ -0,0 +1,141 @@
+/* 
+ * AFRICODE CUSTOM TYPOGRAPHY SYSTEM
+ * "Our Own Font" - Pattern-Driven Text
+ * 
+ * Instead of relying on external fonts, we create our own
+ * distinctive type using pattern fills, gradients, and effects.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+
+:root {
+    /* Base fonts - clean foundation */
+    --font-base: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-geo: var(--font-base);
+}
+
+body {
+    font-family: var(--font-base);
+    font-weight: 400;
+}
+
+/* 
+ * AFRICODE DISPLAY TYPE
+ * Bold, geometric, pattern-filled
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-base);
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: 1.0;
+}
+
+/* 
+ * PATTERN-FILLED TEXT
+ * Text becomes a mask for our African patterns
+ */
+.afri-text {
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    background: linear-gradient(135deg, var(--afri-green), var(--afri-gold));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+}
+
+/* Pattern variants using SVG fills (set via JS) */
+.afri-text-pattern {
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    background-size: 30px 30px;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+}
+
+/* 
+ * GLOW EFFECT
+ * Adds depth and "vibrancy"
+ */
+.afri-text-glow {
+    text-shadow:
+        0 0 10px var(--afri-green),
+        0 0 20px rgba(30, 181, 58, 0.5),
+        0 0 40px rgba(30, 181, 58, 0.3);
+}
+
+/* 
+ * STROKE OUTLINE STYLE
+ * For headers that need impact
+ */
+.afri-text-outline {
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: transparent;
+    -webkit-text-stroke: 2px var(--afri-gold);
+    text-stroke: 2px var(--afri-gold);
+}
+
+/* 
+ * DUOTONE GRADIENT
+ * African sunset/earth tones
+ */
+.afri-text-earth {
+    font-weight: 900;
+    background: linear-gradient(180deg, #CD853F 0%, #8B4513 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.afri-text-sunset {
+    font-weight: 900;
+    background: linear-gradient(135deg, #FF6B00 0%, #FCD116 50%, #1EB53A 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+/* 
+ * STACKED/LAYERED TEXT
+ * Creates depth illusion
+ */
+.afri-text-stack {
+    position: relative;
+    font-weight: 900;
+    text-transform: uppercase;
+    color: var(--afri-gold);
+}
+
+.afri-text-stack::before {
+    content: attr(data-text);
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    color: var(--afri-green);
+    z-index: -1;
+}
+
+/* 
+ * VERNACULAR ACCENT
+ * For energetic callouts
+ */
+.vernacular {
+    font-weight: 800;
+    font-style: italic;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    transform: skewX(-5deg);
+    display: inline-block;
+}

package/docs/IDE-Guide.md

@@ -0,0 +1,50 @@
+# AfriCode IDE Guide
+
+## Purpose
+
+This document is the public-facing guide for IDE and editor workflows when using AfriCode.
+It is included in the npm package so users downloading or installing `@africode/core` can access it directly from the package contents.
+
+## What it contains
+
+- Quick start for VS Code, WebStorm, and other modern IDEs
+- Recommended extensions and settings for AfriCode development
+- `bun` commands for development, build, and test
+- How to work with file-based routing and Web Components
+- Notes on the dual-license setup and public distribution
+
+## Public Availability
+
+This file is intentionally published with the package so IDE users can open it immediately after install.
+It does not include the private `afrucode v0` secret guide.
+
+## Recommended IDE setup
+
+- Use **VS Code** or **any editor with TypeScript support**
+- Enable `typescript.tsdk` if using a custom `typescript` version
+- Install recommended extensions:
+  - ESLint
+  - Prettier
+  - Bun Language Mode
+  - GitHub Copilot or compatible AI assistant
+
+## Key commands
+
+```bash
+bun install
+bun run dev
+bun run build
+bun test
+bun run scripts/a2ui-generator.js
+```
+
+## Branch workflow summary for public users
+
+- `main`: Protected stable baseline and internal secret branch
+- `develop`: Active integration branch for testing and new features
+- `public`: Public release branch for npm and distributable content
+
+## License note
+
+The public package is distributed under the open source license in `LICENSE`.
+The commercial enterprise terms are maintained separately in `LICENSE_COMMERCIAL` and are not part of the public npm package.

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@africode/core",
+  "version": "5.0.0",
+  "description": "Bun-native full-stack framework with generative AI, fintech compliance, and real-time performance - built for Tanzanian digital economy",
+  "module": "src/index.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./styles/africanity.css",
+    "./core/*": "./core/*",
+    "./components": "./components/index.js",
+    "./components/*": "./components/*"
+  },
+  "bin": {
+    "africode": "./bin/cli.ts",
+    "create-africode": "./bin/scaffold.ts"
+  },
+  "scripts": {
+    "dev": "bun run bin/africode.js dev",
+    "build": "bun run build.ts",
+    "start": "bun run server.js",
+    "test": "bun test",
+    "prepublishOnly": "bun run build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
+    "benchmark": "bun run scripts/benchmark.js",
+    "prepare": "husky",
+    "hot": "bun run bin/africode.js dev --hot",
+    "a2ui": "bun run scripts/a2ui-generator.js"
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,css}": [
+      "prettier --write"
+    ]
+  },
+  "keywords": [
+    "african",
+    "framework",
+    "full-stack",
+    "websocket",
+    "middleware",
+    "orm",
+    "ui",
+    "components",
+    "patterns",
+    "bun",
+    "vanilla-js",
+    "real-time",
+    "generative-ai",
+    "fintech",
+    "compliance",
+    "nida",
+    "tips",
+    "aml",
+    "tanzania",
+    "a2ui",
+    "hot-reload"
+  ],
+  "author": "tap2payco",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tap2payco/AfriCode-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/tap2payco/AfriCode-js/issues"
+  },
+  "homepage": "https://github.com/tap2payco/AfriCode-js#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "framer-motion": "^12.38.0",
+    "zod": "^3.22.0",
+    "@modelcontextprotocol/sdk": "^0.4.0",
+    "jose": "^5.2.0",
+    "node-forge": "^1.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/bun": "latest",
+    "eslint": "^10.2.1",
+    "eslint-config-prettier": "^10.1.8",
+    "globals": "^17.5.0",
+    "happy-dom": "^20.9.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "prettier": "^3.8.3"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "files": [
+    "bin",
+    "core",
+    "components",
+    "styles",
+    "templates",
+    "dist",
+    "AFRICODE_FRAMEWORK_GUIDE.md",
+    "docs/IDE-Guide.md"
+  ]
+}