@avora-labs/meta-forge 1.0.5 → 1.0.6

package/README.md

@@ -1,63 +1,112 @@
-# AvoraMetaForge
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build avora-meta-forge
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/avora-meta-forge
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+<div align="center">
+  <img src="https://raw.githubusercontent.com/AvoraLabs/avora-cli/main/assets/logo.png" alt="AvoraMetaForge Logo" width="150" height="150" />
+  <h1>@avora-labs/meta-forge</h1>
+  <p><strong>The Ultimate Meta-Driven Framework for Modern Angular Applications.</strong></p>
+  
+  <p>
+    <a href="https://www.npmjs.com/package/@avora-labs/meta-forge"><img src="https://img.shields.io/npm/v/@avora-labs/meta-forge?color=blue&style=flat-square" alt="NPM Version"></a>
+    <img src="https://img.shields.io/badge/License-Proprietary-red.svg?style=flat-square" alt="License: Proprietary">
+    <img src="https://img.shields.io/badge/Angular-v17+-dd0031.svg?style=flat-square&logo=angular" alt="Angular">
+    <img src="https://img.shields.io/badge/TypeScript-Ready-3178c6.svg?style=flat-square&logo=typescript" alt="TypeScript">
+  </p>
+</div>
+
+<hr/>
+
+## ✨ What is AvoraMetaForge?
+
+**AvoraMetaForge** flips the traditional Angular development model upside down. Instead of writing endless HTML templates and boilerplate component classes, you define your **entire application**—from data tables and dynamic forms to dashboards and interactive dialogs—using strictly typed TypeScript JSON objects (metadata).
+
+The core engine reads this metadata and natively renders beautiful, fully responsive, and highly interactive UI components on the fly. It drastically reduces boilerplate and allows developers to focus on pure business logic.
+
+---
+
+## 🚀 Features
+
+* **Zero-Boilerplate UI:** Build complex dashboards without writing a single line of HTML.
+* **Intelligent Renderers:** Out-of-the-box support for Forms, Tables, Cards, Accordions, Stats Grids, Dialogs, and Page Headers.
+* **Built-in State Management:** The Action Dispatcher handles everything from API calls to dialog triggers seamlessly.
+* **Layout Engine:** Native vertical and horizontal shell layouts designed for SaaS applications.
+* **Highly Extensible:** Inject your own custom renderers directly into the core engine.
+
+---
+
+## 📦 Installation
+
+To get the most out of AvoraMetaForge, we highly recommend using our companion CLI, which handles automatic installation, wiring, and scaffolding!
+
+### The Easy Way (Using the CLI)
+
+```bash
+npm install -g @avora-labs/cli
+avora init
+```
+
+### The Manual Way
+
+```bash
+npm install @avora-labs/meta-forge
+```
+
+Then, inject the providers into your `app.config.ts`:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideAvoraMetaForge } from '@avora-labs/meta-forge';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAvoraMetaForge()
+  ]
+};
+```
+
+---
+
+## 💻 Quick Start: Building a Form
+
+Once configured, building a production-ready form with validation takes seconds:
+
+```typescript
+import { FormMeta } from '@avora-labs/meta-forge';
+
+export const loginForm: FormMeta = {
+  id: 'login',
+  submitLabel: 'Sign In',
+  onSubmit: { type: 'api', config: { action: 'auth.login' } },
+  fields: [
+    { 
+      key: 'email', 
+      type: 'email', 
+      label: 'Email Address', 
+      validators: [{ type: 'required' }, { type: 'email' }] 
+    },
+    { 
+      key: 'password', 
+      type: 'password', 
+      label: 'Password', 
+      validators: [{ type: 'required' }] 
+    }
+  ]
+};
+```
+
+Pass this config to the form renderer and you're done!
+
+---
+
+## 🤝 Maintainer & Author
+
+AvoraMetaForge is built and maintained by:
+
+**Dileesha Ekanayake**  
+📧 [dileesha.r.ekanayake@gmail.com](mailto:dileesha.r.ekanayake@gmail.com)  
+
+Feel free to reach out for support, enterprise inquiries, or just to say hi!
+
+---
+
+## 📄 License
+
+This software is **UNLICENSED** and proprietary. 
+While anyone is free to download and use the compiled bundle from NPM for building applications, the source code remains private and may not be copied, modified, or redistributed.

package/fesm2022/{avora-labs-meta-forge-amf-auth-shell.component-BWSdjBUS.mjs → avora-labs-meta-forge-amf-auth-shell.component-FCubZyZ1.mjs}

@@ -30,66 +30,66 @@ class AmfAuthShellComponent {
     /** Override the card's max-width (default 560px) */
     maxWidth = '560px';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfAuthShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AmfAuthShellComponent, isStandalone: true, selector: "amf-auth-shell", inputs: { brandName: "brandName", brandTagline: "brandTagline", maxWidth: "maxWidth" }, ngImport: i0, template: `
-    <div class="auth-page">
-      <!-- Animated Background Orbs -->
-      <div class="bg-mesh" aria-hidden="true">
-        <div class="orb orb-1"></div>
-        <div class="orb orb-2"></div>
-        <div class="orb orb-3"></div>
-        <div class="orb orb-4"></div>
-      </div>
-
-      <div class="auth-scroll-wrapper">
-        <div class="auth-card" [style.max-width]="maxWidth">
-          <!-- Brand Header -->
-          <div class="brand">
-            <div class="brand-logo">
-              <svg viewBox="0 0 24 24">
-                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
-              </svg>
-            </div>
-            <h1>{{ brandName || 'AvoraMetaForge' }}</h1>
-            <p>{{ brandTagline || 'The universal enterprise shell' }}</p>
-          </div>
-
-          <!-- Projected content slot -->
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AmfAuthShellComponent, isStandalone: true, selector: "amf-auth-shell", inputs: { brandName: "brandName", brandTagline: "brandTagline", maxWidth: "maxWidth" }, ngImport: i0, template: `
+    <div class="auth-page">
+      <!-- Animated Background Orbs -->
+      <div class="bg-mesh" aria-hidden="true">
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+        <div class="orb orb-4"></div>
+      </div>
+
+      <div class="auth-scroll-wrapper">
+        <div class="auth-card" [style.max-width]="maxWidth">
+          <!-- Brand Header -->
+          <div class="brand">
+            <div class="brand-logo">
+              <svg viewBox="0 0 24 24">
+                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+              </svg>
+            </div>
+            <h1>{{ brandName || 'AvoraMetaForge' }}</h1>
+            <p>{{ brandTagline || 'The universal enterprise shell' }}</p>
+          </div>
+
+          <!-- Projected content slot -->
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.auth-page{height:100%;background:#0a0f1e;position:relative;display:flex;flex-direction:column}.bg-mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;will-change:transform}.orb-1{width:clamp(200px,50vw,600px);height:clamp(200px,50vw,600px);background:var(--app-gradient-1, radial-gradient(circle, #6366f1, transparent));top:-20%;right:-10%;animation:blobMove1 18s ease-in-out infinite}.orb-2{width:clamp(160px,40vw,500px);height:clamp(160px,40vw,500px);background:var(--app-gradient-2, radial-gradient(circle, #c084fc, transparent));bottom:-15%;left:-10%;animation:blobMove2 22s ease-in-out infinite}.orb-3{width:clamp(100px,25vw,300px);height:clamp(100px,25vw,300px);background:var(--app-gradient-3, radial-gradient(circle, #38bdf8, transparent));top:50%;left:50%;animation:blobMove3 20s ease-in-out infinite}.orb-4{width:clamp(80px,16vw,200px);height:clamp(80px,16vw,200px);background:var(--app-primary, #6366f1);top:20%;left:20%;opacity:.2;animation:blobMove1 25s ease-in-out infinite reverse}.auth-scroll-wrapper{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:clamp(32px,5vw,56px) clamp(12px,4vw,24px);padding-top:max(env(safe-area-inset-top,0px),clamp(32px,5vw,56px));padding-bottom:max(env(safe-area-inset-bottom,0px),clamp(32px,5vw,56px));position:relative;z-index:1}.auth-card{background:#ffffff0d;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);width:100%;max-width:600px;margin:auto;padding:clamp(16px,3vw,24px) clamp(24px,5vw,52px);border-radius:clamp(14px,2.5vw,20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080,0 0 40px #0003,inset 0 1px #ffffff1a;animation:fadeInUp .5s ease-out both}.auth-card:before{content:\"\";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(255,255,255,.05) 100%);z-index:-1;pointer-events:none}.brand{text-align:center;margin-bottom:clamp(10px,2vw,18px)}.brand-logo{width:clamp(40px,8vw,52px);height:clamp(40px,8vw,52px);background:linear-gradient(135deg,var(--app-primary, #6366f1),var(--app-accent, #c084fc));color:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto clamp(8px,1.5vw,12px);box-shadow:0 0 24px var(--app-glow, rgba(99,102,241,.4));animation:float 4s ease-in-out infinite}.brand-logo svg{width:clamp(20px,4vw,26px);height:clamp(20px,4vw,26px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.brand h1{font-size:clamp(1.2rem,3vw,1.65rem);font-weight:800;margin-bottom:3px;color:#f1f5f9;letter-spacing:-.02em}.brand p{color:#94a3b8;font-size:clamp(.75rem,1.8vw,.82rem)}@media(max-width:359px){.auth-card{border-radius:12px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#0f1428f7}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes blobMove1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-40px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}@keyframes blobMove2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-30px,30px) scale(1.05)}66%{transform:translate(20px,-20px) scale(.95)}}@keyframes blobMove3{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}@media(prefers-reduced-motion:reduce){.orb,.brand-logo,.auth-card{animation:none!important}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AmfAuthShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amf-auth-shell', standalone: true, imports: [], template: `
-    <div class="auth-page">
-      <!-- Animated Background Orbs -->
-      <div class="bg-mesh" aria-hidden="true">
-        <div class="orb orb-1"></div>
-        <div class="orb orb-2"></div>
-        <div class="orb orb-3"></div>
-        <div class="orb orb-4"></div>
-      </div>
-
-      <div class="auth-scroll-wrapper">
-        <div class="auth-card" [style.max-width]="maxWidth">
-          <!-- Brand Header -->
-          <div class="brand">
-            <div class="brand-logo">
-              <svg viewBox="0 0 24 24">
-                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
-              </svg>
-            </div>
-            <h1>{{ brandName || 'AvoraMetaForge' }}</h1>
-            <p>{{ brandTagline || 'The universal enterprise shell' }}</p>
-          </div>
-
-          <!-- Projected content slot -->
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
+            args: [{ selector: 'amf-auth-shell', standalone: true, imports: [], template: `
+    <div class="auth-page">
+      <!-- Animated Background Orbs -->
+      <div class="bg-mesh" aria-hidden="true">
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+        <div class="orb orb-4"></div>
+      </div>
+
+      <div class="auth-scroll-wrapper">
+        <div class="auth-card" [style.max-width]="maxWidth">
+          <!-- Brand Header -->
+          <div class="brand">
+            <div class="brand-logo">
+              <svg viewBox="0 0 24 24">
+                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+              </svg>
+            </div>
+            <h1>{{ brandName || 'AvoraMetaForge' }}</h1>
+            <p>{{ brandTagline || 'The universal enterprise shell' }}</p>
+          </div>
+
+          <!-- Projected content slot -->
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
   `, styles: [":host{display:flex;flex-direction:column;height:100%}.auth-page{height:100%;background:#0a0f1e;position:relative;display:flex;flex-direction:column}.bg-mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;will-change:transform}.orb-1{width:clamp(200px,50vw,600px);height:clamp(200px,50vw,600px);background:var(--app-gradient-1, radial-gradient(circle, #6366f1, transparent));top:-20%;right:-10%;animation:blobMove1 18s ease-in-out infinite}.orb-2{width:clamp(160px,40vw,500px);height:clamp(160px,40vw,500px);background:var(--app-gradient-2, radial-gradient(circle, #c084fc, transparent));bottom:-15%;left:-10%;animation:blobMove2 22s ease-in-out infinite}.orb-3{width:clamp(100px,25vw,300px);height:clamp(100px,25vw,300px);background:var(--app-gradient-3, radial-gradient(circle, #38bdf8, transparent));top:50%;left:50%;animation:blobMove3 20s ease-in-out infinite}.orb-4{width:clamp(80px,16vw,200px);height:clamp(80px,16vw,200px);background:var(--app-primary, #6366f1);top:20%;left:20%;opacity:.2;animation:blobMove1 25s ease-in-out infinite reverse}.auth-scroll-wrapper{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:clamp(32px,5vw,56px) clamp(12px,4vw,24px);padding-top:max(env(safe-area-inset-top,0px),clamp(32px,5vw,56px));padding-bottom:max(env(safe-area-inset-bottom,0px),clamp(32px,5vw,56px));position:relative;z-index:1}.auth-card{background:#ffffff0d;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);width:100%;max-width:600px;margin:auto;padding:clamp(16px,3vw,24px) clamp(24px,5vw,52px);border-radius:clamp(14px,2.5vw,20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #00000080,0 0 40px #0003,inset 0 1px #ffffff1a;animation:fadeInUp .5s ease-out both}.auth-card:before{content:\"\";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(255,255,255,.05) 100%);z-index:-1;pointer-events:none}.brand{text-align:center;margin-bottom:clamp(10px,2vw,18px)}.brand-logo{width:clamp(40px,8vw,52px);height:clamp(40px,8vw,52px);background:linear-gradient(135deg,var(--app-primary, #6366f1),var(--app-accent, #c084fc));color:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto clamp(8px,1.5vw,12px);box-shadow:0 0 24px var(--app-glow, rgba(99,102,241,.4));animation:float 4s ease-in-out infinite}.brand-logo svg{width:clamp(20px,4vw,26px);height:clamp(20px,4vw,26px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.brand h1{font-size:clamp(1.2rem,3vw,1.65rem);font-weight:800;margin-bottom:3px;color:#f1f5f9;letter-spacing:-.02em}.brand p{color:#94a3b8;font-size:clamp(.75rem,1.8vw,.82rem)}@media(max-width:359px){.auth-card{border-radius:12px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#0f1428f7}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes blobMove1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-40px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}@keyframes blobMove2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-30px,30px) scale(1.05)}66%{transform:translate(20px,-20px) scale(.95)}}@keyframes blobMove3{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}@media(prefers-reduced-motion:reduce){.orb,.brand-logo,.auth-card{animation:none!important}}\n"] }]
         }], propDecorators: { brandName: [{
                 type: Input
@@ -100,4 +100,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 export { AmfAuthShellComponent as A };
-//# sourceMappingURL=avora-labs-meta-forge-amf-auth-shell.component-BWSdjBUS.mjs.map
+//# sourceMappingURL=avora-labs-meta-forge-amf-auth-shell.component-FCubZyZ1.mjs.map

package/fesm2022/avora-labs-meta-forge-amf-auth-shell.component-FCubZyZ1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avora-labs-meta-forge-amf-auth-shell.component-FCubZyZ1.mjs","sources":["../../../projects/avora-meta-forge/src/lib/avora-meta-forge/renderers/auth/amf-auth-shell.component.ts"],"sourcesContent":["/**\n * AvoraMetaForge — Auth Shell Component\n *\n * A reusable full-page auth card renderer providing the glassmorphism\n * background and card layout shared by Login, Forgot Password, Contact\n * Support, and any other auth screen built with AvoraMetaForge.\n *\n * ## Responsiveness\n * This shell is fully mobile-first. On small screens (< 480 px) the card\n * fills the viewport and scrolls naturally; on larger screens it is a\n * centered floating card capped at `maxWidth`.\n *\n * ## Usage\n *   <amf-auth-shell [brandName]=\"'MyApp'\" [brandTagline]=\"'Enterprise platform'\">\n *     <!-- your form, steps, or custom HTML here -->\n *   </amf-auth-shell>\n *\n * ## Icon system\n * Use <span class=\"ms\">lock</span> (Material Symbols Rounded) anywhere inside\n * the shell. The .ms class is globally defined in index.html.\n */\nimport { Component, Input } from '@angular/core';\n\n\n@Component({\n  selector: 'amf-auth-shell',\n  standalone: true,\n  imports: [],\n  template: `\n    <div class=\"auth-page\">\n      <!-- Animated Background Orbs -->\n      <div class=\"bg-mesh\" aria-hidden=\"true\">\n        <div class=\"orb orb-1\"></div>\n        <div class=\"orb orb-2\"></div>\n        <div class=\"orb orb-3\"></div>\n        <div class=\"orb orb-4\"></div>\n      </div>\n\n      <div class=\"auth-scroll-wrapper\">\n        <div class=\"auth-card\" [style.max-width]=\"maxWidth\">\n          <!-- Brand Header -->\n          <div class=\"brand\">\n            <div class=\"brand-logo\">\n              <svg viewBox=\"0 0 24 24\">\n                <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"></path>\n              </svg>\n            </div>\n            <h1>{{ brandName || 'AvoraMetaForge' }}</h1>\n            <p>{{ brandTagline || 'The universal enterprise shell' }}</p>\n          </div>\n\n          <!-- Projected content slot -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  `,\n  styles: [`\n    /* ─── Host fills the full slot given by router-outlet ─── */\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    /* ─────────────────────────────────────────\n       PAGE ROOT — fills parent, no overflow clip\n       so the inner scroll wrapper can breathe\n    ───────────────────────────────────────── */\n    .auth-page {\n      height: 100%;\n      background: #0a0f1e;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* ── Animated Background ── */\n    .bg-mesh {\n      position: fixed;\n      inset: 0;\n      z-index: 0;\n      overflow: hidden;\n      pointer-events: none;\n    }\n    .orb {\n      position: absolute;\n      border-radius: 50%;\n      filter: blur(100px);\n      opacity: 0.4;\n      will-change: transform;\n    }\n    .orb-1 {\n      width: clamp(200px, 50vw, 600px);\n      height: clamp(200px, 50vw, 600px);\n      background: var(--app-gradient-1, radial-gradient(circle, #6366f1, transparent));\n      top: -20%; right: -10%;\n      animation: blobMove1 18s ease-in-out infinite;\n    }\n    .orb-2 {\n      width: clamp(160px, 40vw, 500px);\n      height: clamp(160px, 40vw, 500px);\n      background: var(--app-gradient-2, radial-gradient(circle, #c084fc, transparent));\n      bottom: -15%; left: -10%;\n      animation: blobMove2 22s ease-in-out infinite;\n    }\n    .orb-3 {\n      width: clamp(100px, 25vw, 300px);\n      height: clamp(100px, 25vw, 300px);\n      background: var(--app-gradient-3, radial-gradient(circle, #38bdf8, transparent));\n      top: 50%; left: 50%;\n      animation: blobMove3 20s ease-in-out infinite;\n    }\n    .orb-4 {\n      width: clamp(80px, 16vw, 200px);\n      height: clamp(80px, 16vw, 200px);\n      background: var(--app-primary, #6366f1);\n      top: 20%; left: 20%;\n      opacity: 0.2;\n      animation: blobMove1 25s ease-in-out infinite reverse;\n    }\n\n    /* ─────────────────────────────────────────\n       SCROLL WRAPPER\n       On mobile the card can exceed the screen\n       height — this wrapper makes it scrollable.\n    ───────────────────────────────────────── */\n    .auth-scroll-wrapper {\n      flex: 1;\n      display: flex;\n      align-items: flex-start; /* always flex-start; card uses margin:auto to self-center */\n      justify-content: center;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: clamp(32px, 5vw, 56px) clamp(12px, 4vw, 24px);\n      padding-top: max(env(safe-area-inset-top, 0px), clamp(32px, 5vw, 56px));\n      padding-bottom: max(env(safe-area-inset-bottom, 0px), clamp(32px, 5vw, 56px));\n      position: relative;\n      z-index: 1;\n    }\n\n    /* ── Auth Card ── */\n    .auth-card {\n      background: rgba(255, 255, 255, 0.05);\n      backdrop-filter: blur(40px);\n      -webkit-backdrop-filter: blur(40px);\n      width: 100%;\n      max-width: 600px;\n      /* margin:auto centers the card when there is spare space in the scroll wrapper,\n         but unlike align-items:center it does NOT clip the top when the card overflows —\n         the wrapper's padding-top stays visible as the user scrolls up. */\n      margin: auto;\n      /* Vertical padding kept tight to reduce card height; horizontal generous for width */\n      padding: clamp(16px, 3vw, 24px) clamp(24px, 5vw, 52px);\n      border-radius: clamp(14px, 2.5vw, 20px);\n      border: 1px solid rgba(255, 255, 255, 0.1);\n      box-shadow:\n        0 25px 50px -12px rgba(0, 0, 0, 0.5),\n        0 0 40px rgba(0, 0, 0, 0.2),\n        inset 0 1px 0 rgba(255, 255, 255, 0.1);\n      animation: fadeInUp 0.5s ease-out both;\n    }\n    .auth-card::before {\n      content: '';\n      position: absolute;\n      top: -1px; left: -1px; right: -1px; bottom: -1px;\n      border-radius: inherit;\n      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);\n      z-index: -1;\n      pointer-events: none;\n    }\n\n    /* ── Brand — compact horizontal layout on wide screens ── */\n    .brand {\n      text-align: center;\n      margin-bottom: clamp(10px, 2vw, 18px);\n    }\n    .brand-logo {\n      width: clamp(40px, 8vw, 52px);\n      height: clamp(40px, 8vw, 52px);\n      background: linear-gradient(135deg, var(--app-primary, #6366f1), var(--app-accent, #c084fc));\n      color: white;\n      border-radius: 14px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto clamp(8px, 1.5vw, 12px);\n      box-shadow: 0 0 24px var(--app-glow, rgba(99,102,241,0.4));\n      animation: float 4s ease-in-out infinite;\n    }\n    .brand-logo svg {\n      width: clamp(20px, 4vw, 26px);\n      height: clamp(20px, 4vw, 26px);\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n    .brand h1 {\n      font-size: clamp(1.2rem, 3vw, 1.65rem);\n      font-weight: 800;\n      margin-bottom: 3px;\n      color: #f1f5f9;\n      letter-spacing: -0.02em;\n    }\n    .brand p {\n      color: #94a3b8;\n      font-size: clamp(0.75rem, 1.8vw, 0.82rem);\n    }\n\n    /* ─────────────────────────────────────────\n       EXTRA-SMALL SCREENS (< 360 px)\n       Reduce border-radius and disable blur for\n       performance on very low-end devices.\n    ───────────────────────────────────────── */\n    @media (max-width: 359px) {\n      .auth-card {\n        border-radius: 12px;\n        backdrop-filter: none;\n        -webkit-backdrop-filter: none;\n        background: rgba(15, 20, 40, 0.97);\n      }\n    }\n\n    /* ─────────────────────────────────────────\n       ANIMATIONS\n    ───────────────────────────────────────── */\n    @keyframes fadeInUp {\n      from { opacity: 0; transform: translateY(24px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes float {\n      0%, 100% { transform: translateY(0px); }\n      50%       { transform: translateY(-6px); }\n    }\n    @keyframes blobMove1 {\n      0%, 100% { transform: translate(0, 0) scale(1); }\n      33%       { transform: translate(30px, -40px) scale(1.05); }\n      66%       { transform: translate(-20px, 20px) scale(0.95); }\n    }\n    @keyframes blobMove2 {\n      0%, 100% { transform: translate(0, 0) scale(1); }\n      33%       { transform: translate(-30px, 30px) scale(1.05); }\n      66%       { transform: translate(20px, -20px) scale(0.95); }\n    }\n    @keyframes blobMove3 {\n      0%, 100% { transform: translate(-50%, -50%) scale(1); }\n      50%       { transform: translate(-50%, -50%) scale(1.2); }\n    }\n\n    /* ── Reduce motion for accessibility ── */\n    @media (prefers-reduced-motion: reduce) {\n      .orb, .brand-logo, .auth-card {\n        animation: none !important;\n      }\n    }\n  `]\n})\nexport class AmfAuthShellComponent {\n  /** App brand name shown in the card header */\n  @Input() brandName?: string;\n  /** Tagline shown below the brand name */\n  @Input() brandTagline?: string;\n  /** Override the card's max-width (default 560px) */\n  @Input() maxWidth?: string = '560px';\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;AAoBG;MA+OU,qBAAqB,CAAA;;AAEvB,IAAA,SAAS;;AAET,IAAA,YAAY;;IAEZ,QAAQ,GAAY,OAAO;wGANzB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvOtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6kHAAA,CAAA,EAAA,CAAA;;4FA2MU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA3OjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,QAAA,EACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,6kHAAA,CAAA,EAAA;;sBA6MA;;sBAEA;;sBAEA;;;;;"}