@avora-labs/meta-forge 1.0.5

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@avora-labs/meta-forge",
+  "version": "1.0.5",
+  "description": "AvoraMetaForge — A meta-driven Angular framework. Define entire applications through structured TypeScript metadata.",
+  "keywords": [
+    "angular",
+    "meta-driven",
+    "framework",
+    "low-code"
+  ],
+  "peerDependencies": {
+    "@angular/cdk": "^20.0.0 || ^21.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "rxjs": ">=7.8.0",
+    "zone.js": ">=0.15.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/avora-labs-meta-forge.mjs",
+  "typings": "types/avora-labs-meta-forge.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/avora-labs-meta-forge.d.ts",
+      "default": "./fesm2022/avora-labs-meta-forge.mjs"
+    }
+  },
+  "type": "module"
+}

package/styles/_palettes.scss

@@ -0,0 +1,85 @@
+// AvoraMetaForge Glass Design System — Color Palettes
+
+// ─── Glass Tokens ───
+$glass-tokens: (
+  blur: 20px,
+  blur-heavy: 40px,
+  surface-opacity: 0.12,
+  border-opacity: 0.18,
+  glow-spread: 30px
+);
+
+// ─── Default Brand (Teal-Cyan) ───
+$default-brand: (
+  primary: #06b6d4,
+  primary-hover: #0891b2,
+  primary-light: rgba(6, 182, 212, 0.15),
+  on-primary: #ffffff,
+  accent: #8b5cf6,
+  accent-light: rgba(139, 92, 246, 0.12),
+  bg: #0f1729,
+  bg-secondary: #131d35,
+  surface: rgba(255, 255, 255, 0.06),
+  surface-hover: rgba(255, 255, 255, 0.10),
+  sidebar-bg: rgba(15, 23, 42, 0.85),
+  sidebar-text: #cbd5e1,
+  navbar-bg: rgba(15, 23, 42, 0.65),
+  border: rgba(255, 255, 255, 0.08),
+  border-light: rgba(255, 255, 255, 0.12),
+  text: #f1f5f9,
+  text-muted: #94a3b8,
+  gradient-1: #06b6d4,
+  gradient-2: #8b5cf6,
+  gradient-3: #0ea5e9,
+  glow-color: rgba(6, 182, 212, 0.25)
+);
+
+// ─── Blue Brand (Client A) ───
+$blue-brand: (
+  primary: #3b82f6,
+  primary-hover: #2563eb,
+  primary-light: rgba(59, 130, 246, 0.15),
+  on-primary: #ffffff,
+  accent: #6366f1,
+  accent-light: rgba(99, 102, 241, 0.12),
+  bg: #0c1524,
+  bg-secondary: #111c33,
+  surface: rgba(255, 255, 255, 0.06),
+  surface-hover: rgba(255, 255, 255, 0.10),
+  sidebar-bg: rgba(12, 21, 36, 0.88),
+  sidebar-text: #cbd5e1,
+  navbar-bg: rgba(12, 21, 36, 0.65),
+  border: rgba(255, 255, 255, 0.08),
+  border-light: rgba(255, 255, 255, 0.12),
+  text: #f1f5f9,
+  text-muted: #94a3b8,
+  gradient-1: #3b82f6,
+  gradient-2: #6366f1,
+  gradient-3: #0ea5e9,
+  glow-color: rgba(59, 130, 246, 0.25)
+);
+
+// ─── Red Brand (Client B) ───
+$red-brand: (
+  primary: #f43f5e,
+  primary-hover: #e11d48,
+  primary-light: rgba(244, 63, 94, 0.15),
+  on-primary: #ffffff,
+  accent: #f59e0b,
+  accent-light: rgba(245, 158, 11, 0.12),
+  bg: #180a0e,
+  bg-secondary: #1f0f14,
+  surface: rgba(255, 255, 255, 0.06),
+  surface-hover: rgba(255, 255, 255, 0.10),
+  sidebar-bg: rgba(24, 10, 14, 0.88),
+  sidebar-text: #fecdd3,
+  navbar-bg: rgba(24, 10, 14, 0.65),
+  border: rgba(255, 255, 255, 0.08),
+  border-light: rgba(255, 255, 255, 0.12),
+  text: #fff1f2,
+  text-muted: #fda4af,
+  gradient-1: #f43f5e,
+  gradient-2: #f59e0b,
+  gradient-3: #ec4899,
+  glow-color: rgba(244, 63, 94, 0.25)
+);

package/styles/_themes.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use './palettes' as *;
+
+// ─── Mixin for generating theme variables from a palette ───
+@mixin apply-theme($brand) {
+    --app-primary: #{map.get($brand, primary)};
+    --app-primary-hover: #{map.get($brand, primary-hover)};
+    --app-primary-light: #{map.get($brand, primary-light)};
+    --app-on-primary: #{map.get($brand, on-primary)};
+    --app-accent: #{map.get($brand, accent)};
+    --app-accent-light: #{map.get($brand, accent-light)};
+
+    --app-bg: #{map.get($brand, bg)};
+    --app-bg-secondary: #{map.get($brand, bg-secondary)};
+    --app-surface: #{map.get($brand, surface)};
+    --app-surface-hover: #{map.get($brand, surface-hover)};
+    --app-sidebar-bg: #{map.get($brand, sidebar-bg)};
+    --app-sidebar-text: #{map.get($brand, sidebar-text)};
+    --app-navbar-bg: #{map.get($brand, navbar-bg)};
+    --app-border: #{map.get($brand, border)};
+    --app-border-light: #{map.get($brand, border-light)};
+    --app-text: #{map.get($brand, text)};
+    --app-text-muted: #{map.get($brand, text-muted)};
+
+    --app-gradient-1: #{map.get($brand, gradient-1)};
+    --app-gradient-2: #{map.get($brand, gradient-2)};
+    --app-gradient-3: #{map.get($brand, gradient-3)};
+    --app-glow: #{map.get($brand, glow-color)};
+}
+
+[data-theme="client-a"] {
+    @include apply-theme($blue-brand);
+}
+
+[data-theme="client-b"] {
+    @include apply-theme($red-brand);
+}
+
+// ─── Light Mode ───
+// Applied when data-color-scheme="light" is set on <html>.
+// Keeps the same teal primary/accent brand but flips all surfaces
+// to light values and adjusts glass tokens for a bright environment.
+[data-color-scheme="light"] {
+    color-scheme: light;
+
+    // Primary brand — unchanged
+    --app-primary:        #0891b2;
+    --app-primary-hover:  #0e7490;
+    --app-primary-light:  rgba(8, 145, 178, 0.12);
+    --app-on-primary:     #ffffff;
+    --app-accent:         #7c3aed;
+    --app-accent-light:   rgba(124, 58, 237, 0.10);
+
+    // Backgrounds
+    --app-bg:             #f0f4f8;
+    --app-bg-secondary:   #e4eaf2;
+    --app-surface:        rgba(255, 255, 255, 0.80);
+    --app-surface-hover:  rgba(255, 255, 255, 0.95);
+
+    // Layout
+    --app-sidebar-bg:     rgba(248, 250, 252, 0.92);
+    --app-sidebar-text:   #334155;
+    --app-navbar-bg:      rgba(240, 244, 248, 0.88);
+
+    // Borders
+    --app-border:         rgba(0, 0, 0, 0.08);
+    --app-border-light:   rgba(0, 0, 0, 0.05);
+
+    // Text
+    --app-text:           #0f172a;
+    --app-text-muted:     #475569;
+
+    // Gradients & glow
+    --app-gradient-1:     #06b6d4;
+    --app-gradient-2:     #8b5cf6;
+    --app-gradient-3:     #0ea5e9;
+    --app-glow:           rgba(8, 145, 178, 0.20);
+
+    // Glass system — lighter values for a bright surface
+    --glass-bg:           rgba(255, 255, 255, 0.65);
+    --glass-bg-hover:     rgba(255, 255, 255, 0.85);
+    --glass-border:       rgba(0, 0, 0, 0.07);
+    --glass-border-light: rgba(0, 0, 0, 0.12);
+    --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.10);
+    --glass-shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.07);
+
+    // Scrollbar
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+// Scrollbar thumb for light mode
+[data-color-scheme="light"] ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+}
+[data-color-scheme="light"] ::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.25);
+}

package/styles/_variables.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use './palettes' as *;
+
+:root {
+    color-scheme: dark;
+
+    // ─── Primary Colors ───
+    --app-primary: #{map.get($default-brand, primary)};
+    --app-primary-hover: #{map.get($default-brand, primary-hover)};
+    --app-primary-light: #{map.get($default-brand, primary-light)};
+    --app-on-primary: #{map.get($default-brand, on-primary)};
+    --app-accent: #{map.get($default-brand, accent)};
+    --app-accent-light: #{map.get($default-brand, accent-light)};
+
+    // ─── Backgrounds & Surfaces ───
+    --app-bg: #{map.get($default-brand, bg)};
+    --app-bg-secondary: #{map.get($default-brand, bg-secondary)};
+    --app-surface: #{map.get($default-brand, surface)};
+    --app-surface-hover: #{map.get($default-brand, surface-hover)};
+    --app-border: #{map.get($default-brand, border)};
+    --app-border-light: #{map.get($default-brand, border-light)};
+
+    // ─── Text ───
+    --app-text: #{map.get($default-brand, text)};
+    --app-text-muted: #{map.get($default-brand, text-muted)};
+
+    // ─── Layout Surfaces ───
+    --app-sidebar-bg: #{map.get($default-brand, sidebar-bg)};
+    --app-sidebar-text: #{map.get($default-brand, sidebar-text)};
+    --app-navbar-bg: #{map.get($default-brand, navbar-bg)};
+
+    // ─── Gradients & Glows ───
+    --app-gradient-1: #{map.get($default-brand, gradient-1)};
+    --app-gradient-2: #{map.get($default-brand, gradient-2)};
+    --app-gradient-3: #{map.get($default-brand, gradient-3)};
+    --app-glow: #{map.get($default-brand, glow-color)};
+
+    // ─── Glass System ───
+    --glass-blur: #{map.get($glass-tokens, blur)};
+    --glass-blur-heavy: #{map.get($glass-tokens, blur-heavy)};
+    --glass-bg: rgba(255, 255, 255, 0.06);
+    --glass-bg-hover: rgba(255, 255, 255, 0.10);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-border-light: rgba(255, 255, 255, 0.14);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
+    --glass-shadow-glow: 0 0 #{map.get($glass-tokens, glow-spread)} var(--app-glow);
+
+    // ─── Animation Tokens ───
+    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    // ─── Layout ───
+    --sidebar-width: 260px;
+}

package/styles/styles.scss

@@ -0,0 +1,296 @@
+/* ═══════════════════════════════════════════════════════════════
+   AvoraMetaForge — Glass Design System Global Styles
+   ═══════════════════════════════════════════════════════════════ */
+
+@use 'variables' as *;
+@use 'themes' as *;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap');
+
+/* ─── Reset ─── */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* ─── Root height chain — required for auth page scrolling ─── */
+html {
+    height: 100%;
+}
+
+/* ─── Body ─── */
+body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    background-color: var(--app-bg);
+    color: var(--app-text);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100%;
+    overflow-x: hidden; /* allow vertical scroll; block horizontal */
+}
+
+/* ─── Typography ─── */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Outfit', sans-serif;
+    font-weight: 700;
+    color: var(--app-text);
+}
+
+a {
+    color: var(--app-primary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--app-primary-hover);
+}
+
+button {
+    font-family: inherit;
+    cursor: pointer;
+}
+
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Glass Utilities
+   ═══════════════════════════════════════════════════════════════ */
+
+.glass {
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
+}
+
+.card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: var(--glass-shadow-sm);
+    transition: all var(--transition-smooth);
+}
+
+.card:hover {
+    background: var(--glass-bg-hover);
+    border-color: var(--glass-border-light);
+    box-shadow: var(--glass-shadow);
+    transform: translateY(-2px);
+}
+
+/* ─── Buttons ─── */
+.btn-primary {
+    background: linear-gradient(135deg, var(--app-primary), var(--app-accent));
+    color: var(--app-on-primary);
+    border: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all var(--transition-smooth);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-primary::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    right: 0;
+    bottom: 0;
+    width: 200%;
+    background: linear-gradient(90deg,
+            transparent 0%,
+            rgba(255, 255, 255, 0.1) 50%,
+            transparent 100%);
+    transition: left 0.5s ease;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px -4px var(--app-glow);
+}
+
+.btn-primary:hover::after {
+    left: 100%;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Keyframe Animations
+   ═══════════════════════════════════════════════════════════════ */
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% center;
+    }
+
+    100% {
+        background-position: 200% center;
+    }
+}
+
+@keyframes gradientShift {
+
+    0%,
+    100% {
+        background-position: 0% 50%;
+    }
+
+    25% {
+        background-position: 50% 0%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    75% {
+        background-position: 50% 100%;
+    }
+}
+
+@keyframes pulseGlow {
+
+    0%,
+    100% {
+        box-shadow: 0 0 20px var(--app-glow);
+    }
+
+    50% {
+        box-shadow: 0 0 40px var(--app-glow), 0 0 60px var(--app-glow);
+    }
+}
+
+@keyframes float {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes slideInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes blobMove1 {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+    }
+
+    25% {
+        transform: translate(30px, -50px) scale(1.1);
+    }
+
+    50% {
+        transform: translate(-20px, 20px) scale(0.9);
+    }
+
+    75% {
+        transform: translate(50px, 30px) scale(1.05);
+    }
+}
+
+@keyframes blobMove2 {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+    }
+
+    25% {
+        transform: translate(-40px, 30px) scale(0.95);
+    }
+
+    50% {
+        transform: translate(30px, -40px) scale(1.1);
+    }
+
+    75% {
+        transform: translate(-20px, -30px) scale(1);
+    }
+}
+
+@keyframes blobMove3 {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1.05);
+    }
+
+    25% {
+        transform: translate(20px, 40px) scale(1);
+    }
+
+    50% {
+        transform: translate(-40px, -20px) scale(1.1);
+    }
+
+    75% {
+        transform: translate(30px, -30px) scale(0.95);
+    }
+}