@avora-labs/meta-forge 1.0.5 → 1.1.2

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@avora-labs/meta-forge",
-  "version": "1.0.5",
+  "version": "1.1.2",
   "description": "AvoraMetaForge — A meta-driven Angular framework. Define entire applications through structured TypeScript metadata.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AvoraLabs/avora-meta-forge.git"
+  },
+  "homepage": "https://github.com/AvoraLabs/avora-meta-forge#readme",
   "keywords": [
     "angular",
     "meta-driven",
@@ -10,11 +15,11 @@
   ],
   "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",
+    "@angular/common": "^20.0.0 || ^21.0.0",
+    "@angular/core": "^20.0.0 || ^21.0.0",
+    "@angular/forms": "^20.0.0 || ^21.0.0",
+    "@angular/platform-browser": "^20.0.0 || ^21.0.0",
+    "@angular/router": "^20.0.0 || ^21.0.0",
     "rxjs": ">=7.8.0",
     "zone.js": ">=0.15.0"
   },
@@ -22,6 +27,8 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "author": "Dileesha Ekanayake <dileesha.r.ekanayake@gmail.com>",
+  "license": "UNLICENSED",
   "module": "fesm2022/avora-labs-meta-forge.mjs",
   "typings": "types/avora-labs-meta-forge.d.ts",
   "exports": {

package/styles/_palettes.scss

@@ -1,85 +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)
+// 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

@@ -1,97 +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);
+@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

@@ -1,57 +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;
+@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;
 }