@fasteros/themes 1.0.0

package/fesm2022/fasteros-themes.mjs

@@ -0,0 +1,3951 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, Directive, ContentChild, Input, Pipe, EventEmitter, inject, DestroyRef, ContentChildren, Output, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { firstValueFrom, Subject, fromEvent, merge, of } from 'rxjs';
+import { debounceTime, map } from 'rxjs/operators';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class FasterThemesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FasterThemesComponent, isStandalone: false, selector: "lib-faster-themes", ngImport: i0, template: `
+    <p>
+      faster-themes works!
+    </p>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-faster-themes', template: `
+    <p>
+      faster-themes works!
+    </p>
+  `, standalone: false }]
+        }] });
+
+// Base URL for the Napkin themes API. Update this value to point at your
+// deployed backend; the apiUrl below is derived from it at module load.
+const THEME_API_BASE_URL = 'https://bzw27udtrayx7u6pvbnexfdk4i0hcsia.lambda-url.us-east-1.on.aws/api';
+// API-key-authenticated reads against /api/platform-objects/themes.
+// The apiKey identifies the tenant; the backend scopes results accordingly.
+class ThemeService {
+    constructor(http) {
+        this.http = http;
+        this.apiUrl = `${THEME_API_BASE_URL.replace(/\/+$/, '')}/platform-objects/themes`;
+    }
+    headers(apiKey) {
+        return new HttpHeaders({
+            'X-API-Key': apiKey,
+            'Content-Type': 'application/json',
+        });
+    }
+    getThemes(apiKey) {
+        return firstValueFrom(this.http.get(this.apiUrl, {
+            headers: this.headers(apiKey),
+        }));
+    }
+    getTheme(themeId, apiKey) {
+        return firstValueFrom(this.http.get(`${this.apiUrl}/${themeId}`, {
+            headers: this.headers(apiKey),
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class FasterThemesService {
+    // Dead code - @HostListener has no effect on a service. Window resize is handled by listenToWindowSize().
+    // @HostListener('window:resize', ['$event'])
+    // onWindowResize() {
+    //   this.screenWidth = window.innerWidth;
+    //   this.screenHeight = window.innerHeight;
+    // }
+    constructor(
+    /*public global: Globals,*/ ngZone, 
+    // Firebase removed - no longer used
+    // @Inject(FAT) private authPromise: Promise<Auth>,
+    // @Inject(INIT_THEMES) private initThemesPromise: Promise<any>,
+    themeService) {
+        this.ngZone = ngZone;
+        this.themeService = themeService;
+        this.screenWidth = window.innerWidth;
+        this.screenHeight = window.innerHeight;
+        this.parentTheme = {}; // most recent theme assignment
+        this.resize$ = new Subject();
+        this.allThemes = [];
+        // Firebase removed - no longer used
+        // private watching: boolean = false;
+        // private async watchThemes(docId: string) {
+        //   const app: FirebaseApp = (await this.authPromise).app
+        //   const themesQuery = query(collection(getFirestore(app), 'company', docId, 'themes'),
+        //   where("removed","!=", true))
+        //
+        //   onSnapshot(themesQuery, async (snapshot) => {
+        //     snapshot.docChanges().forEach(async (change) => {
+        //       const themeId = change.doc.id;
+        //       //@ts-ignore: Ensure FasterTheme is correctly defined
+        //       const themeData: FasterTheme = change.doc.data();
+        //       themeData.id = themeId;
+        //       if (change.type === 'added') {
+        //         this.allThemes.push(themeData);
+        //       } else if (change.type === 'modified') {
+        //         const index = this.allThemes.findIndex((theme) => theme.id === themeId);
+        //         if (index !== -1) {
+        //           this.allThemes[index] = Object.assign(this.allThemes[index], themeData);
+        //         }
+        //       } else if (change.type === 'removed') {
+        //         const index = this.allThemes.findIndex((theme) => theme.id === themeId);
+        //         if (index !== -1) {
+        //           this.allThemes.splice(index, 1);
+        //         }
+        //       }
+        //     });
+        //   },
+        //     async (error: any) => {
+        //       console.error("Error watching themes: ", error);
+        //       console.log("using platform themes as fallback");
+        //       const themesRef = collection(getFirestore(app), 'platform', 'OdCDgRWTZhTMzW8N0y9y', 'themes');
+        //       const themes = await getDocs(themesRef);
+        //       for (const doc of themes.docs) {
+        //         const data = doc.data() as FasterTheme;
+        //         data.id = doc.id;
+        //         this.allThemes.push(data);
+        //       }
+        //     })
+        // }
+        this.defaultStyle = {
+            editedBy: "napkinPackage",
+            responsiveMarginMax: 175,
+            name: "Default",
+            responsiveFontSizeMin: 70,
+            responsiveName: "removeName",
+            companyId: "napkinPackage",
+            responsiveStandardWidth: 1980,
+            id: "napkinPackage",
+            responsivePaddingMax: 175,
+            removed: false,
+            responsivePaddingMin: 80,
+            palette: [
+                {
+                    colorName: "BrandFocus",
+                    backgroundColor: " #85FFBD",
+                    gradient: "background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)",
+                    color: "#00695c"
+                },
+                {
+                    colorName: "BrandFont",
+                    color: "0xffaaff",
+                    gradient: "background-image: linear-gradient(45deg, #45FA8D 0%, #00457D 100%)",
+                    backgroundColor: "#e1f5fe"
+                },
+                {
+                    backgroundColor: "#80cbc4",
+                    colorName: "Primary",
+                    color: "#5d4037"
+                },
+                {
+                    gradient: "background-image: radial-gradient(circle, rgba(117, 194, 224, 1) 0%, rgba(87, 160, 199, 1) 50%, rgba(83, 104, 237, 1) 100%)",
+                    backgroundColor: "#a6e4fc",
+                    color: "0xffaaff",
+                    colorName: "Settings"
+                },
+                {
+                    backgroundColor: "#4e342e",
+                    color: "#f5f5f5",
+                    colorName: "whiteOnBrown"
+                },
+                {
+                    colorName: "Share",
+                    color: "#0288d1",
+                    backgroundColor: "#adfcac",
+                    gradient: ""
+                }
+            ],
+            share: {
+                writeAccess: "Private",
+                publicWriteAccess: "None",
+                readAccess: "Private",
+                publicReadAccess: "Anyone"
+            },
+            responsiveFontSizeMax: 120,
+            coreTheme: true,
+            accordions: [
+                {
+                    headerClosedBackground: "#81d4fa",
+                    accordionLayout: "row wrap",
+                    accordionAlignment: "center",
+                    headerOpenBackground: "#81d4fa",
+                    accordionPadding: "12px",
+                    accordionName: "base",
+                    headerClosedType: "H4",
+                    accordionExtra: "",
+                    accordionBoxShadow: "",
+                    headerClosedExtra: "",
+                    headerOpenBorder: "1px solid white",
+                    headerOpenType: "H4",
+                    headerClosedBorder: "",
+                    headerOpenMargin: "8px",
+                    headerOpenLayout: "column",
+                    headerClosedAlignment: "center",
+                    accordionBorder: "",
+                    headerOpenExtra: "",
+                    accordionMargin: "12px",
+                    headerClosedBoxShadow: "5px 5px 10px 2px rgba(0, 0, 0, 0.5)",
+                    headerOpenAlignment: "Center",
+                    headerClosedLayout: "row wrap",
+                    accordionBackground: "0xffaaff",
+                    headerClosedMargin: "6px",
+                    headerOpenPadding: "8px",
+                    headerClosedPadding: "8px"
+                },
+                {
+                    headerOpenExtra: "",
+                    accordionAlignment: "center",
+                    accordionBoxShadow: "",
+                    accordionExtra: "",
+                    headerOpenLayout: "column",
+                    accordionLayout: "row wrap",
+                    headerOpenAlignment: "Center",
+                    headerClosedBorder: "2px solid gray",
+                    headerClosedType: "H4",
+                    accordionName: "Level 1",
+                    accordionPadding: "4px",
+                    headerOpenMargin: "1px",
+                    accordionMargin: "",
+                    headerClosedPadding: "8px",
+                    headerOpenBackground: "#d1c4e9",
+                    accordionBackground: "#b39ddb",
+                    headerClosedMargin: "2px",
+                    accordionBorder: "1px solid black",
+                    headerClosedAlignment: "center",
+                    headerOpenType: "H4",
+                    headerClosedBoxShadow: "",
+                    headerClosedExtra: "",
+                    headerOpenPadding: "8px",
+                    headerClosedLayout: "row wrap",
+                    headerClosedBackground: "#d1c4e9"
+                },
+                {
+                    accordionExtra: "",
+                    headerOpenMargin: "0px",
+                    headerClosedExtra: "",
+                    accordionBackground: "",
+                    headerClosedBorder: "",
+                    accordionName: "Level 2",
+                    headerOpenExtra: "",
+                    headerOpenAlignment: "Center",
+                    headerClosedPadding: "14px 12px",
+                    headerClosedBoxShadow: "inset -2px 0px 8px 6px #808080",
+                    accordionBoxShadow: "",
+                    headerClosedType: "H4",
+                    accordionBorder: "",
+                    headerClosedMargin: "6px",
+                    headerOpenBoxShadow: "inset -2px 0px 8px 6px #808080",
+                    headerOpenType: "H4",
+                    headerOpenPadding: "8px",
+                    headerClosedBackground: "#e3f2fd",
+                    accordionMargin: "",
+                    accordionAlignment: "space-evenly",
+                    headerOpenLayout: "row wrap",
+                    headerOpenBackground: "#e3f2fd",
+                    accordionLayout: "row wrap",
+                    headerClosedAlignment: "center",
+                    headerClosedLayout: "row wrap"
+                },
+                {
+                    headerClosedLayout: "row wrap",
+                    accordionName: "Level 3",
+                    headerOpenPadding: "",
+                    accordionBackground: "",
+                    accordionMargin: "0px",
+                    headerClosedAlignment: "center",
+                    headerOpenPalette: "Primary",
+                    headerClosedPadding: "12px 6px",
+                    headerOpenType: "H4",
+                    headerOpenAlignment: "Center",
+                    accordionLayout: "row wrap",
+                    headerClosedBorder: "",
+                    headerClosedType: "H4",
+                    headerOpenBackground: "#b0cad5",
+                    headerClosedBoxShadow: "",
+                    headerOpenLayout: "row wrap",
+                    headerOpenMargin: "8px",
+                    accordionBoxShadow: "",
+                    accordionExtra: "",
+                    accordionAlignment: "space-evenly",
+                    headerClosedMargin: "8px",
+                    headerClosedExtra: "",
+                    headerClosedBackground: "#b0cad5",
+                    headerOpenExtra: ""
+                },
+                {
+                    headerClosedType: "H4",
+                    headerClosedBorder: "1px solid blue",
+                    headerOpenAlignment: "Center",
+                    accordionLayout: "row wrap",
+                    accordionAlignment: "center",
+                    headerOpenLayout: "row wrap",
+                    headerClosedPadding: "14px",
+                    accordionBackground: "#c8e6c9",
+                    headerClosedBoxShadow: "3px 3px grey",
+                    accordionName: "Level 4",
+                    headerOpenPadding: "14px",
+                    accordionBoxShadow: "4px yellow",
+                    headerOpenType: "title",
+                    headerClosedAlignment: "center",
+                    headerClosedExtra: "",
+                    headerOpenMargin: "0px",
+                    headerClosedMargin: "2px",
+                    accordionExtra: "",
+                    headerOpenExtra: "",
+                    headerClosedBackground: "#dcedc8",
+                    headerClosedLayout: "row wrap",
+                    headerOpenBackground: "#b2dfdb"
+                },
+                {
+                    headerClosedAlignment: "center",
+                    headerClosedBorder: "1px solid blue",
+                    headerClosedType: "label",
+                    accordionExtra: "",
+                    headerClosedExtra: "",
+                    accordionLayout: "column",
+                    headerOpenAlignment: "Center",
+                    headerOpenExtra: "",
+                    accordionBackground: "#e1f5fe",
+                    headerOpenLayout: "row wrap",
+                    headerOpenType: "label",
+                    accordionBoxShadow: "4px yellow",
+                    headerOpenPadding: "0px",
+                    headerClosedBoxShadow: "",
+                    headerClosedPadding: "0px",
+                    headerClosedBackground: "#b3e5fc",
+                    accordionName: "Minimal",
+                    accordionAlignment: "center",
+                    headerClosedMargin: "0px",
+                    headerOpenBackground: "#81d4fa",
+                    headerClosedLayout: "row wrap",
+                    headerOpenMargin: "0px"
+                },
+                {
+                    headerOpenAlignment: "Center",
+                    headerOpenBackground: "0xffaaff",
+                    headerClosedBackground: "0xffaaff",
+                    headerOpenWidth: "100vw",
+                    headerOpenExtra: "",
+                    headerOpenType: "H4",
+                    headerClosedType: "H4",
+                    headerOpenLayout: "row wrap",
+                    headerClosedLayout: "row wrap",
+                    accordionName: "Settings",
+                    headerClosedWidth: "100vw",
+                    headerClosedExtra: "",
+                    accordionExtra: "",
+                    accordionMargin: "0px",
+                    accordionBoxShadow: "",
+                    headerClosedAlignment: "center",
+                    headerClosedPalette: "Settings",
+                    headerOpenPalette: "Settings",
+                    accordionLayout: "row wrap",
+                    accordionBackground: "0xffaaff",
+                    headerClosedMargin: "0px",
+                    accordionWidth: "100vw",
+                    accordionPalette: "Settings",
+                    headerClosedBorder: "",
+                    headerClosedPadding: "6px",
+                    accordionPadding: "0px",
+                    accordionAlignment: "center",
+                    headerOpenMargin: "0px",
+                    headerClosedBoxShadow: "",
+                    headerOpenPadding: "0px"
+                },
+                {
+                    headerClosedPadding: "8px",
+                    headerOpenLayout: "row wrap",
+                    headerClosedBackground: "#b5ffbb",
+                    headerOpenMargin: "4px",
+                    headerClosedBorder: "",
+                    headerClosedExtra: "",
+                    accordionLayout: "row wrap",
+                    headerOpenType: "H4",
+                    accordionBoxShadow: "",
+                    headerClosedLayout: "row wrap",
+                    headerClosedType: "H4",
+                    accordionExtra: "",
+                    headerOpenExtra: "",
+                    headerClosedBoxShadow: "inset -2px 0px 7px 6px #aaaaaa99",
+                    accordionBackground: "0xffaaff",
+                    headerOpenBorder: "",
+                    accordionAlignment: "space-evenly",
+                    accordionName: "Object",
+                    headerOpenPadding: "8px",
+                    headerOpenBackground: "#b5ffbb",
+                    headerClosedMargin: "6px",
+                    headerOpenAlignment: "Center"
+                },
+                {
+                    headerClosedExtra: "",
+                    accordionLayout: "row wrap",
+                    headerClosedPadding: "1px",
+                    headerClosedType: "body",
+                    accordionExtra: "",
+                    headerOpenExtra: "",
+                    headerClosedLayout: "row wrap",
+                    headerOpenPadding: "1px",
+                    headerClosedMargin: "0px",
+                    accordionAlignment: "center",
+                    headerOpenMargin: "0px",
+                    headerClosedAlignment: "center",
+                    headerOpenAlignment: "Center",
+                    accordionBackground: "0xffaaff",
+                    headerOpenBackground: "#eceff1",
+                    headerOpenLayout: "row wrap",
+                    accordionBoxShadow: "",
+                    headerClosedBackground: "#b0bec5",
+                    headerClosedBorder: "",
+                    headerOpenType: "body",
+                    accordionName: "Media Details",
+                    headerClosedBoxShadow: ""
+                },
+                {
+                    accordionBackground: "#e1f5fe",
+                    headerClosedType: "H3",
+                    headerOpenExtra: "",
+                    accordionExtra: "",
+                    headerOpenAlignment: "Center",
+                    headerClosedLayout: "row wrap",
+                    headerOpenMargin: "6px",
+                    headerClosedBackground: "#03a9f4",
+                    accordionName: "Docs",
+                    headerOpenBackground: "#b3e5fc",
+                    headerOpenType: "H3",
+                    headerOpenLayout: "row wrap",
+                    headerClosedAlignment: "center",
+                    headerOpenPadding: "6px",
+                    headerClosedPadding: "12px",
+                    headerClosedMargin: "12px",
+                    accordionLayout: "column",
+                    headerClosedExtra: "",
+                    accordionAlignment: "space-evenly"
+                },
+                {
+                    headerOpenPadding: "0px",
+                    accordionMargin: "0px",
+                    headerOpenType: "label",
+                    headerOpenBackground: "#94e4ed",
+                    headerClosedAlignment: "left",
+                    accordionPadding: "4px",
+                    headerClosedMargin: "0px",
+                    headerClosedPadding: "4px",
+                    accordionExtra: "",
+                    accordionName: "Create",
+                    headerClosedExtra: "",
+                    accordionWidth: "fit-content",
+                    accordionAlignment: "left",
+                    headerClosedType: "H5",
+                    accordionLayout: "row wrap",
+                    accordionBackground: "#c3fd95",
+                    headerOpenExtra: "",
+                    headerClosedBackground: "#c3fd95",
+                    headerOpenMargin: "0px"
+                },
+                {
+                    headerOpenBackground: "#81c784",
+                    accordionLayout: "row wrap",
+                    accordionWidth: "auto",
+                    headerOpenType: "H4",
+                    headerOpenExtra: "",
+                    headerClosedType: "H4",
+                    headerClosedMargin: "",
+                    headerClosedExtra: "",
+                    accordionBackground: "#c1e7ad",
+                    headerClosedBackground: "#c1e7ad",
+                    headerOpenPadding: "12px",
+                    accordionExtra: "",
+                    accordionPadding: "",
+                    headerClosedBorder: "1px solid gray",
+                    headerOpenWidth: "auto",
+                    headerClosedWidth: "auto",
+                    accordionName: "TeamChat",
+                    headerClosedPadding: " 12px"
+                },
+                {
+                    headerClosedAlignment: "center",
+                    headerOpenType: "label",
+                    accordionBackground: "#ffccbc",
+                    headerOpenBackground: "#ffccbc",
+                    headerClosedType: "label",
+                    accordionWidth: "100vw",
+                    accordionExtra: "",
+                    headerOpenAlignment: "Center",
+                    accordionName: "Style",
+                    headerClosedBackground: "#ffccbc",
+                    headerClosedExtra: "",
+                    accordionLayout: "column",
+                    headerOpenExtra: "",
+                    accordionAlignment: "space-evenly"
+                },
+                {
+                    accordionBackground: "0xffaaff",
+                    accordionName: "Share",
+                    headerOpenExtra: "",
+                    accordionWidth: "100vw",
+                    headerClosedPalette: "Share",
+                    accordionLayout: "column",
+                    headerOpenAlignment: "Center",
+                    headerOpenBackground: "#b39ddb",
+                    headerClosedAlignment: "center",
+                    accordionAlignment: "space-evenly",
+                    headerClosedType: "label",
+                    accordionPalette: "Share",
+                    headerClosedBackground: "0xffaaff",
+                    accordionExtra: "",
+                    headerOpenType: "label",
+                    headerClosedExtra: ""
+                },
+                {
+                    headerClosedBoxShadow: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
+                    accordionAlignment: "center",
+                    headerClosedType: "H5",
+                    accordionBoxShadow: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset",
+                    headerOpenMargin: "0px",
+                    headerClosedBorder: "",
+                    accordionExtra: "",
+                    headerClosedLayout: "row wrap",
+                    accordionPadding: "0px",
+                    headerOpenExtra: "",
+                    headerClosedBackground: "#80cbc4",
+                    headerClosedMargin: "2px 2px",
+                    headerClosedPadding: "12px 30px",
+                    accordionName: "UI",
+                    headerOpenType: "label",
+                    accordionBackground: "#b2dfdb",
+                    accordionLayout: "row wrap",
+                    headerOpenBackground: "#80cbc4",
+                    accordionMargin: "0px",
+                    accordionBorder: "",
+                    headerOpenLayout: "row wrap",
+                    headerClosedExtra: "",
+                    headerOpenPadding: "6px 12px"
+                },
+                {
+                    accordionExtra: "",
+                    headerOpenExtra: "",
+                    headerOpenBackground: "#bcaaa4",
+                    accordionBackground: "#d7ccc8",
+                    headerClosedType: "H4",
+                    accordionName: "Chat Bots",
+                    headerClosedExtra: "",
+                    headerOpenType: "H4",
+                    headerClosedBackground: "#d7ccc8"
+                },
+                {
+                    headerClosedExtra: "",
+                    headerClosedBackground: "#81d4fa",
+                    accordionAlignment: "space-evenly",
+                    accordionExtra: "",
+                    headerOpenMargin: "0px",
+                    headerOpenExtra: "",
+                    headerClosedMargin: "12px",
+                    accordionPadding: "0px",
+                    accordionMargin: "0px",
+                    accordionLayout: "row wrap",
+                    accordionPalette: "BrandFocus",
+                    accordionName: "Team",
+                    accordionBackground: "0xffaaff",
+                    headerOpenPadding: "0px",
+                    headerClosedType: "title",
+                    headerOpenBackground: "0xffaaff",
+                    headerClosedPadding: "12px",
+                    headerOpenType: "label"
+                },
+                {
+                    headerOpenType: "H3",
+                    headerOpenBackground: "0xffaaff",
+                    headerOpenMargin: "10px",
+                    accordionExtra: "",
+                    headerClosedPadding: "6px",
+                    accordionLayout: "row wrap",
+                    headerClosedBackground: "#ffe0b2",
+                    accordionPadding: "20px",
+                    accordionName: "Sheet",
+                    headerOpenExtra: "",
+                    headerClosedBorder: "2px groove #F54927",
+                    accordionBackground: "#ede7f6",
+                    accordionAlignment: "space-evenly",
+                    headerClosedType: "H3",
+                    headerClosedExtra: "",
+                    headerClosedMargin: "10px"
+                },
+                {
+                    headerClosedBackground: "#b2ebf2",
+                    headerOpenLayout: "row wrap",
+                    accordionExtra: "",
+                    headerClosedExtra: "",
+                    headerClosedLayout: "row wrap",
+                    headerOpenType: "H4",
+                    headerOpenBackground: "0xffaaff",
+                    headerOpenBoxShadow: "",
+                    accordionLayout: "row wrap",
+                    accordionBoxShadow: "",
+                    headerClosedPadding: "12px",
+                    headerClosedType: "H4",
+                    headerOpenAlignment: "Left",
+                    headerClosedAlignment: "center",
+                    accordionName: "App",
+                    headerOpenWidth: "",
+                    headerOpenExtra: "",
+                    headerClosedMargin: "12px",
+                    accordionBackground: "#b2dfdb",
+                    accordionAlignment: "space-evenly",
+                    headerClosedBoxShadow: "6px 4px 3px gray"
+                },
+                {
+                    headerClosedType: "title",
+                    headerClosedBoxShadow: "inset 0 0 10px rgba(0, 0, 0, 0.5)",
+                    accordionLayout: "row wrap",
+                    accordionBackground: "#bbdefb",
+                    accordionAlignment: "center",
+                    accordionExtra: "",
+                    headerOpenExtra: "",
+                    headerClosedMargin: "4px",
+                    headerOpenBackground: "#e3f2fd",
+                    headerOpenType: "title",
+                    headerClosedExtra: "",
+                    accordionBoxShadow: "",
+                    headerClosedPadding: "2px 10px",
+                    accordionName: "Report",
+                    accordionPadding: "0px",
+                    headerClosedBackground: "#90caf9",
+                    accordionMargin: ""
+                }
+            ],
+            responsiveMarginMin: 80,
+            containers: [
+                {
+                    containerBackground: "#eceff1",
+                    containerLayout: "column",
+                    containerAlignmentV: "center",
+                    containerName: "Data Entry",
+                    containerBorder: "none",
+                    containerStyle: "border-radius: 9px;",
+                    containerPadding: "12px 6px",
+                    containerAlignment: "center",
+                    containerMargin: "12px 6px",
+                    containerBoxShadow: "2px 3px 3px gray",
+                    containerPosition: "relative"
+                },
+                {
+                    containerHeight: "80vh",
+                    containerPadding: "4px",
+                    containerName: "Tall",
+                    containerBackground: "",
+                    containerAlignment: "center",
+                    containerPosition: "relative",
+                    containerLineHeight: "150%",
+                    containerStyle: "border-radius: 12px;",
+                    containerWidth: "33vw",
+                    containerBoxShadow: "3px 5px 5px gray",
+                    containerAlignmentV: "center",
+                    containerLayout: "column",
+                    containerBorder: "1px solid gray",
+                    containerMargin: "6px"
+                },
+                {
+                    containerBackground: "0xffaaff",
+                    containerStyle: "border-radius: 12px;",
+                    containerAlignmentV: "center",
+                    containerMargin: "0px",
+                    containerPosition: "relative",
+                    containerLayout: "row wrap",
+                    containerHeight: "33vh",
+                    containerBorder: "",
+                    containerName: "Wide",
+                    containerWidth: "100vw",
+                    containerBoxShadow: "",
+                    containerAlignment: "center",
+                    containerPadding: "4px"
+                },
+                {
+                    containerLayout: "row wrap",
+                    containerPadding: "0px 0px",
+                    containerOverflowX: "scroll",
+                    containerBorder: "none",
+                    containerAlignment: "center",
+                    containerName: "Full Width",
+                    containerBoxShadow: "",
+                    containerWidth: "100vw",
+                    containerPosition: "relative",
+                    containerStyle: "",
+                    //   backgroundImage: "",
+                    containerAlignmentV: "center",
+                    containerBackground: "#cfdbe7",
+                    containerBackgroundGradient: "",
+                    containerOverflowY: "scroll",
+                    containerMargin: "0px"
+                },
+                {
+                    containerPosition: "relative",
+                    containerBoxShadow: "3px 5px 5px gray",
+                    containerBackground: "0xffaaff",
+                    containerMargin: "6px",
+                    containerPadding: "0px",
+                    containerAlignmentV: "center",
+                    containerLayout: "row wrap",
+                    containerName: "Media",
+                    containerAlignment: "center",
+                    containerStyle: "border-radius: 12px;",
+                    containerWidth: "25vw",
+                    containerBorder: "none"
+                },
+                {
+                    containerStyle: "",
+                    containerPadding: "4px",
+                    containerBoxShadow: "",
+                    containerBackground: "0xffaaff",
+                    containerLayout: "row wrap",
+                    containerOverflowX: "hidden",
+                    containerOverflowY: "auto",
+                    containerHeight: "100px",
+                    containerAlignmentV: "center",
+                    containerPosition: "relative",
+                    containerMargin: "",
+                    containerAlignment: "center",
+                    containerName: "Scroller",
+                    containerBorder: "none",
+                    containerWidth: "100vw"
+                },
+                {
+                    containerStyle: "",
+                    containerBackground: "#cfd8dc55",
+                    containerPadding: "6px",
+                    containerBoxShadow: "",
+                    containerName: "Sticky",
+                    containerAlignmentV: "center",
+                    containerMargin: "6px",
+                    containerBorder: "none",
+                    containerLayout: "row wrap",
+                    containerPositioning: "top: 0;",
+                    containerAlignment: "center",
+                    containerPosition: "sticky",
+                    containerHeight: "auto"
+                },
+                {
+                    containerBackground: "0xffaaff",
+                    containerBoxShadow: "",
+                    containerBorder: "",
+                    containerLayout: "row wrap",
+                    containerAlignmentV: "center",
+                    containerName: "1/3 Width",
+                    containerPadding: "0px",
+                    containerWidth: "33%",
+                    containerAlignment: "center",
+                    containerBackgroundGradient: "",
+                    containerMargin: "0px",
+                    containerStyle: ""
+                },
+                {
+                    containerLayout: "column",
+                    containerName: "Messages",
+                    containerBackground: "#ffb74d",
+                    containerBorder: "1px solid white",
+                    containerMargin: "12px 0px",
+                    containerLineHeight: "150%"
+                },
+                {
+                    containerAlignmentV: "center",
+                    containerName: "Report",
+                    containerLayout: "column",
+                    containerOverflowX: "scroll",
+                    containerHeight: "auto",
+                    containerBackground: "#f0edf5",
+                    containerOverflowY: "scroll",
+                    containerMargin: "",
+                    containerBorder: "2px solid black"
+                },
+                {
+                    containerMargin: "0px",
+                    containerPadding: "0px",
+                    containerWidth: "66%",
+                    containerName: "2/3 Width",
+                    containerBackground: "0xffaaff"
+                },
+                {
+                    containerBackground: "0xffaaff",
+                    containerPadding: "6px",
+                    containerMargin: "6px",
+                    containerLayout: "column",
+                    containerAlignmentV: "center",
+                    containerBorder: "2px solid green",
+                    containerPalette: "BrandFocus",
+                    containerName: "teamApp",
+                    containerAlignment: "center"
+                },
+                {
+                    containerLayout: "column",
+                    containerName: "reportHeader",
+                    containerPalette: "BrandFocus",
+                    containerMargin: "10px",
+                    containerPadding: "8px",
+                    containerBackground: "0xffaaff"
+                },
+                {
+                    containerBackground: "#f5f5f5",
+                    containerName: "Inactive"
+                },
+                {
+                    containerName: "Full Screen Media",
+                    containerBorder: "3px light blue",
+                    containerLayout: "column",
+                    containerHeight: "auto",
+                    containerBackground: "0xffaaff",
+                    containerWidth: "100vw",
+                    containerPadding: "20px"
+                },
+                {
+                    containerPadding: "15px",
+                    containerWidth: "50%",
+                    containerName: "Half Width",
+                    containerBackground: "0xffaaff"
+                }
+            ],
+            buttonStyles: [
+                {
+                    buttonPadding: "8px 6px",
+                    buttonMargin: "6px",
+                    buttonRadius: "10px",
+                    buttonTypeStyle: "label",
+                    buttonBorder: "1px light blue solid",
+                    buttonName: "Default Style",
+                    buttonBackground: "#283593",
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonColor: "#ffffff"
+                },
+                {
+                    buttonBorder: "1px solid gray",
+                    buttonTypeStyle: "label",
+                    buttonShadow: " 0 2px 4px 0 rgba(0,0,0,0.2), 0 3px 6px 0 rgba(0,0,0,0.19)",
+                    buttonMargin: "0px",
+                    buttonBackground: "#80deea",
+                    buttonColor: "#000000",
+                    buttonName: "Item Select",
+                    buttonPadding: "8px 6px",
+                    buttonRadius: "0px"
+                },
+                {
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonColor: "#4527a0",
+                    buttonPadding: "8px 6px",
+                    buttonBorder: "none",
+                    buttonTypeStyle: "label",
+                    buttonRadius: "8px",
+                    buttonName: "Create",
+                    buttonMargin: "6px",
+                    buttonBackground: "#b8ff82"
+                },
+                {
+                    buttonTypeStyle: "label",
+                    buttonBackground: "#ad1457",
+                    buttonMargin: "8px",
+                    buttonRadius: "8px",
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonName: "Delete",
+                    buttonColor: "#fafafa",
+                    buttonPadding: "8px 6px",
+                    buttonBorder: "none"
+                },
+                {
+                    buttonRadius: "0px",
+                    buttonMargin: "8px",
+                    buttonTypeStyle: "label",
+                    buttonColor: "#bdbdbd",
+                    buttonShadow: "none",
+                    buttonBorder: "none",
+                    buttonName: "Disabled",
+                    buttonBackground: "#e0e0e0",
+                    buttonPadding: "8px 6px"
+                },
+                {
+                    buttonName: "Highlight",
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonBackground: "#BBDEFB",
+                    buttonTypeStyle: "label",
+                    buttonMargin: "8px",
+                    buttonColor: "#ff8a65",
+                    buttonPadding: "8px 6px",
+                    buttonPalette: "BrandFocus",
+                    buttonRadius: "3px",
+                    buttonBorder: "none"
+                },
+                {
+                    buttonMargin: "8px",
+                    buttonColor: "#ffffff",
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonName: "Function",
+                    buttonPadding: "8px 6px",
+                    buttonTypeStyle: "label",
+                    buttonBorder: "none",
+                    buttonBackground: "#039be5"
+                },
+                {
+                    buttonRadius: "12px",
+                    buttonMargin: "8px",
+                    buttonColor: "0xffaaff",
+                    buttonPadding: "8px 12px",
+                    buttonBackground: "#c8e6c9",
+                    buttonTypeStyle: "label",
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonBorder: "none",
+                    buttonName: "Edit"
+                },
+                {
+                    buttonPadding: "8px 6px 8px 16px",
+                    buttonMargin: "8px",
+                    buttonBackground: "#455a64",
+                    buttonRadius: "0px 18px 18px 0px",
+                    buttonColor: "#fff59d",
+                    buttonName: "Action",
+                    buttonShadow: " 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)",
+                    buttonTypeStyle: "label"
+                },
+                {
+                    buttonColor: "#000000",
+                    buttonBackground: "#e0f7fa",
+                    buttonBorder: "1px solid gray",
+                    buttonShadow: "none",
+                    buttonName: "cell",
+                    buttonMargin: "0px",
+                    buttonPadding: "0px",
+                    buttonTypeStyle: "label"
+                },
+                {
+                    buttonMargin: "6px",
+                    buttonPadding: "8px 6px",
+                    buttonColor: "#3949ab",
+                    buttonName: "Logic",
+                    buttonTypeStyle: "subtitle",
+                    buttonBackground: "#bcaaa4",
+                    buttonBorder: "2px solid black"
+                },
+                {
+                    buttonTypeStyle: "Jade",
+                    buttonName: "Jade",
+                    buttonMargin: "3px",
+                    buttonColor: "0xffaaff",
+                    buttonBackground: "#f3e5f5",
+                    buttonPadding: "8px 6px"
+                },
+                {
+                    buttonMargin: "6px",
+                    buttonBackground: "#ffecb3",
+                    buttonRadius: "9px",
+                    buttonName: "Cancel",
+                    buttonPadding: "8px 6px",
+                    buttonTypeStyle: "label",
+                    buttonColor: "#546e7a"
+                }
+            ],
+            createdBy: "napkinPackage",
+            typeStyles: [
+                {
+                    typeFont: "Noto Sans",
+                    typeName: "H1",
+                    typeBackground: "0xffaaff",
+                    typePadding: "6px 4px",
+                    typeFontColor: "#0e0000",
+                    typeFontWeight: "700",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontSize: "35px"
+                },
+                {
+                    typeFontColor: "#000000",
+                    typeName: "H2",
+                    typeBackground: "0xffaaff",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFont: "Noto Sans",
+                    typeFontWeight: "700",
+                    typeFontSize: "28px",
+                    typePadding: "6px 4px"
+                },
+                {
+                    typeFontSize: "24px",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontColor: "#080000",
+                    typeBackground: "0xffaaff",
+                    typeName: "H3",
+                    typePadding: "",
+                    typeFont: "Noto Sans",
+                    typeFontWeight: "600"
+                },
+                {
+                    typeBackground: "0xffaaff",
+                    typePadding: "",
+                    typeFont: "Noto Sans",
+                    typeName: "H4",
+                    typeFontSize: "19px",
+                    typeFontColor: "0xffaaff",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontWeight: "600"
+                },
+                {
+                    typeFontAlignment: "center",
+                    typeBackground: "0xffaaff",
+                    typeFontColor: "#070000",
+                    typeName: "H5",
+                    typeFontSize: "17px",
+                    typePadding: "",
+                    typeFontWeight: "600",
+                    typeFont: "Noto Sans",
+                    typeTextShadow: ""
+                },
+                {
+                    typeFontSize: "14px",
+                    typeLineHeight: "200%",
+                    typeBackground: "0xffaaff",
+                    typePadding: "",
+                    typeFont: "Noto Sans",
+                    typeFontColor: "0xffaaff",
+                    typeFontWeight: "500",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeName: "body",
+                    typeMargin: ""
+                },
+                {
+                    typeFontWeight: "500",
+                    typeName: "label",
+                    typeFont: "Noto Sans",
+                    typeMargin: "",
+                    typeFontColor: "#000000",
+                    typeFontAlignment: "center",
+                    typePadding: "",
+                    typeBackground: "0xffaaff",
+                    typeFontSize: "19px",
+                    typeTextShadow: "1px 1px 1px #cfd8dc"
+                },
+                {
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFont: "Noto Sans",
+                    typeBackground: "0xffaaff",
+                    typeFontWeight: "600",
+                    typeFontColor: "#303f9f",
+                    typeFontSize: "17px",
+                    typePadding: "4px",
+                    typeName: "user",
+                    typeMargin: "4px"
+                },
+                {
+                    typePadding: "6px 4px",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontWeight: "900",
+                    typeName: "display",
+                    typeFont: "Courier",
+                    typeFontSize: "14px",
+                    typeBackground: "0xffaaff",
+                    typeFontColor: "#00796b"
+                },
+                {
+                    typePadding: "2px 4px",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontWeight: "500",
+                    typeFontAlignment: "center",
+                    typeBackground: "0xffaaff",
+                    typeFont: "Noto Serif",
+                    typeFontColor: "#000000",
+                    typeName: "title",
+                    typeFontSize: "23px",
+                    typeMargin: "2px 4px"
+                },
+                {
+                    typePadding: "4px",
+                    typeBackground: "0xffaaff",
+                    typeFontColor: "0xffaaff",
+                    typeFontSize: "15px",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFont: "Noto Serif",
+                    typeName: "subtitle",
+                    typeFontWeight: "600"
+                },
+                {
+                    typeMargin: "12px",
+                    typePalette: "BrandFocus",
+                    typeName: "Focus",
+                    typeBorder: "2px solid red",
+                    typeFontWeight: "600",
+                    typeBackground: "",
+                    typeFontColor: "",
+                    typePadding: "8px",
+                    typeFont: "Verdana",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontSize: "27px"
+                },
+                {
+                    typeBackground: "0xffaaff",
+                    typeFontColor: "#ffffff",
+                    typeName: "white",
+                    typeTextShadow: "1px 1px 2px gray",
+                    typeFontSize: "35px",
+                    typeFont: "Noto Sans",
+                    typePadding: "6px 4px",
+                    typeFontWeight: "700"
+                },
+                {
+                    typeMargin: "4px",
+                    typeFont: "courier",
+                    typeFontWeight: "600",
+                    typeLineHeight: "1.5",
+                    typeFontColor: "#1259c8",
+                    typePadding: "4px",
+                    typeBackground: "0xffaaff",
+                    typeName: "Jade",
+                    typeFontSize: "19px"
+                }
+            ],
+            createdAt: 1720378730412,
+            classes: [
+                {
+                    class: "color: blue;",
+                    className: "color-blue"
+                },
+                {
+                    class: "justify-content: flex-end;\njustify-self: flex-end;",
+                    className: "justifyRight"
+                }
+            ],
+            editedAt: 1720378730412
+        };
+        this.listenToWindowSize();
+    }
+    /*
+      private analytics: Analytics | null = null;
+    
+      private async getAnalytics(): Promise<Analytics | null> {
+        if (!this.analytics) {
+          this.analytics = await this.analyticsPromise;
+        }
+        return this.analytics;
+      }
+        */
+    listenToWindowSize() {
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(window, 'resize').pipe(debounceTime(50)).subscribe(() => {
+                this.screenWidth = window.innerWidth;
+                this.screenHeight = window.innerHeight;
+                this.ngZone.run(() => this.resize$.next());
+            });
+        });
+    }
+    /**
+     * Fetches themes for the tenant identified by `apiKey` via the Napkin themes
+     * API and writes them into `this.allThemes`. Fetch-once; no real-time updates.
+     *
+     * Delegates to `ThemeService`. The base URL is set by the
+     * `THEME_API_BASE_URL` constant in theme.service.ts.
+     *
+     * If `themeId` is supplied, only that single theme is fetched and the result
+     * replaces `allThemes` with a one-element array. Otherwise all themes for the
+     * tenant are fetched.
+     *
+     * On any failure (missing key, network error, non-2xx, `success: false` from
+     * the backend) the call logs and returns `[]` — `getTheme()` continues to
+     * fall back to `defaultStyle`.
+     *
+     * @param apiKey  tenant API key (required) — sent as Bearer token
+     * @param themeId optional theme id; when present fetches only that one theme
+     * @returns the loaded themes (the same array that was assigned to `allThemes`)
+     */
+    async initThemes(apiKey, themeId) {
+        if (!apiKey) {
+            console.warn('FasterThemesService.initThemes: apiKey is required.');
+            return [];
+        }
+        try {
+            if (themeId) {
+                const resp = await this.themeService.getTheme(themeId, apiKey);
+                if (resp.success && resp.data) {
+                    this.allThemes = [this.toFasterTheme(resp.data)];
+                    return this.allThemes;
+                }
+                console.warn('FasterThemesService.initThemes: themeService.getTheme returned no data.', resp.error);
+                return [];
+            }
+            const resp = await this.themeService.getThemes(apiKey);
+            if (resp.success && resp.data?.length) {
+                this.allThemes = resp.data.map((t) => this.toFasterTheme(t));
+                return this.allThemes;
+            }
+            console.warn('FasterThemesService.initThemes: themeService.getThemes returned no data.', resp.error);
+            return [];
+        }
+        catch (err) {
+            console.error('FasterThemesService.initThemes failed; falling back to defaultStyle.', err);
+            return [];
+        }
+    }
+    /** Map the API's wrapped Theme document to a flat FasterTheme. */
+    toFasterTheme(t) {
+        return {
+            ...t.data,
+            id: t.objectId,
+            companyId: t.companyId,
+        };
+    }
+    getTheme(themeName) {
+        var self = this;
+        var theme;
+        // Check my themes first!!!
+        if (themeName !== null && typeof (themeName) == 'object') {
+            self.parentTheme = themeName;
+            return themeName;
+        }
+        if (themeName && self.allThemes?.length) {
+            theme = self.allThemes.find(p => p.name?.toLowerCase() == themeName.toLowerCase() || p.id == themeName);
+        }
+        if (theme) {
+            self.parentTheme = theme;
+            return theme;
+        }
+        if (self.parentTheme?.containers?.length)
+            return self.parentTheme;
+        return self.defaultStyle;
+    }
+    getPalette(themeName, paletteName) {
+        var self = this;
+        const theme = self.getTheme(themeName);
+        if (!theme.palette || !paletteName?.length)
+            return null;
+        return theme.palette.find(p => p.colorName.toLowerCase() == paletteName.toLowerCase());
+    }
+    getContainer(themeName, container) {
+        var self = this;
+        const theme = self.getTheme(themeName);
+        if (!theme.containers)
+            return null;
+        return theme.containers.find(p => p.containerName?.toLowerCase() == container.toLowerCase());
+    }
+    getButton(themeName, button) {
+        var self = this;
+        const theme = self.getTheme(themeName);
+        if (theme?.buttonStyles) {
+            const style = theme?.buttonStyles?.find(p => p.buttonName?.toLowerCase() == button?.toLowerCase());
+            if (!style) {
+                return theme.buttonStyles[0];
+            }
+            else {
+                return style;
+            }
+        }
+        if (self.defaultStyle?.buttonStyles && self.defaultStyle?.buttonStyles[0])
+            return self.defaultStyle.buttonStyles[0];
+        return null; // Should never happen
+    }
+    class(themeName, className) {
+        var self = this;
+        const theme = self.getTheme(themeName);
+        if (!theme.classes)
+            return "";
+        const style = theme.classes.find(p => p.className?.toLowerCase() == className?.toLowerCase());
+        if (style?.class)
+            return style.class;
+        else
+            return "";
+    }
+    typeObject(themeName, typeName) {
+        var str = "";
+        var self = this;
+        const theme = self.getTheme(themeName);
+        if (!theme.typeStyles)
+            return;
+        var type;
+        if (!typeName)
+            type = theme.typeStyles[0]; // for now
+        else {
+            type = theme.typeStyles.find((p) => p.typeName.toLowerCase() == typeName.toLowerCase());
+            if (!type)
+                type = theme.typeStyles[0]; // for now
+        }
+        return type;
+    }
+    type(themeName, typeName) {
+        var str = "";
+        var self = this;
+        const theme = self.getTheme(themeName);
+        if (!theme.typeStyles)
+            return str;
+        var type;
+        // synonyms
+        if (typeName == "headline1")
+            typeName = "H1";
+        if (typeName == "headline2")
+            typeName = "H2";
+        if (typeName == "headline3")
+            typeName = "H3";
+        if (typeName == "headline4")
+            typeName = "H4";
+        if (typeName == "headline5")
+            typeName = "H5";
+        if (!typeName)
+            type = theme.typeStyles[0]; // for now
+        else {
+            type = theme.typeStyles.find((p) => p.typeName.toLowerCase() == typeName.toLowerCase());
+            if (!type)
+                type = theme.typeStyles[0]; // for now
+        }
+        // Pallete takes precendence over local colors
+        var colors;
+        if (type.typePalette) {
+            colors = this.setPalette(theme, type.typePalette);
+            str += colors;
+        }
+        else if (!colors) {
+            if (type.typeBackground)
+                str += "background-color: " + type.typeBackground + ";";
+            if (type?.typeFontColor)
+                str += "color: " + type.typeFontColor + ";";
+        }
+        if (type.typeFont)
+            str += "font-family: " + type.typeFont + ";";
+        if (type.typeFontSize) {
+            str += "font-size: " + self.responsiveType(theme, type) + "px;";
+        }
+        if (type.typeFontWeight)
+            str += "font-weight: " + type.typeFontWeight + ";";
+        if (type.typeFontAlignment)
+            str += "text-align: " + type.typeFontAlignment + ";";
+        if (type.typeTextShadow)
+            str += "text-shadow: " + type.typeTextShadow + ";";
+        if (type.typePadding)
+            str += "padding: " + self.responsiveSpace(theme, type.typePadding, theme.responsivePaddingMin, theme.responsivePaddingMax) + ";";
+        if (type.typeMargin)
+            str += "margin: " + self.responsiveSpace(theme, type.typeMargin, theme.responsiveMarginMin, theme.responsiveMarginMax) + ';';
+        if (type.typeLineHeight)
+            str += "line-height: " + type.typeLineHeight + ";";
+        // console.log ("Type ", type, typeName, str)
+        return str;
+    }
+    setPalette(theme, paletteName) {
+        var str = "";
+        var palette = this.getPalette(theme, paletteName);
+        if (palette?.backgroundColor)
+            str += "background-color: " + palette.backgroundColor + ";";
+        if (palette?.color)
+            str += "color: " + palette.color + ";";
+        if (palette?.gradient)
+            str += palette.gradient + ';';
+        str = str.replace(";;", ";");
+        return str;
+    }
+    responsiveType(theme, type) {
+        var self = this;
+        // Let's first apply auto-sizing if enabled
+        var str = type.typeFontSize;
+        var numbers = str?.match(/\d+/g)?.map(Number);
+        if (!numbers)
+            numbers = [14];
+        var size = Number(numbers[0]);
+        var factor = self.typeFactor(theme, size);
+        size = size * factor;
+        //     console.log("Font Size: ", size, factor);
+        return size;
+    }
+    responsiveSpace(theme, margin, min, max) {
+        var self = this;
+        var str = margin;
+        var marginArray = margin.split(' ');
+        var standardWidth = 1280;
+        var screenWidth = 1280;
+        var result = "";
+        // No range no update
+        if (typeof (min) != 'number') {
+            //  console.log ("Not a number ", min)
+            min = Number(min);
+            // return margin
+        }
+        if (typeof (max) != 'number') {
+            //  console.log ("Not a number ", max)
+            max = Number(max);
+            // return margin
+        }
+        screenWidth = this.screenWidth;
+        if (theme?.responsiveStandardWidth)
+            standardWidth = theme.responsiveStandardWidth;
+        marginArray.forEach(function (item) {
+            var numbers = item.match(/\d+/g);
+            var number;
+            if (numbers?.length)
+                number = Number(numbers[0]);
+            var operator = item.replace(/\d/g, '');
+            //     console.log("Number/operator: ", number, operator)
+            if (typeof (number) != 'number')
+                result += operator + " ";
+            else {
+                var size = number;
+                if (typeof (min) != 'number')
+                    min = 10;
+                if (typeof (max) != 'number')
+                    max = 200;
+                var factor = mapRange(screenWidth, 0, standardWidth, min / 100, max / 100);
+                size = size * factor;
+                size = roundToOneDecimal(size);
+                //    console.log("Factor: ", factor, );
+                result += size.toString() + operator + " ";
+            }
+        });
+        // if (max==200)
+        //  console.log("result: ", margin, result, min, max );
+        return result;
+    }
+    typeFactor(theme, size) {
+        var factor = (this.screenWidth);
+        var min = 0.7;
+        var max = 1.2;
+        var standardWidth = 1980;
+        if (theme?.responsiveStandardWidth)
+            standardWidth = theme.responsiveStandardWidth;
+        if (theme?.responsiveFontSizeMin)
+            min = theme.responsiveFontSizeMin / 100;
+        if (theme?.responsiveFontSizeMax)
+            max = theme.responsiveFontSizeMax / 100;
+        // console.log("Type; ", standardWidth, min, max)
+        factor = mapRange(factor, 0, standardWidth, min, max);
+        return Number(factor.toFixed(1));
+    }
+    container(themeName, containerName) {
+        var str = "";
+        var self = this;
+        const theme = self.getTheme(themeName);
+        // console.log ("THEME: ", theme)
+        var container;
+        if (containerName && theme.containers) {
+            //@ts-ignore
+            container = theme.containers.find((p) => p.containerName.toLowerCase() == containerName.toLowerCase());
+            //if (!container && theme?.containers) container = theme.containers[0]
+            //   console.log ("Container ", container,containerName);
+        }
+        if (theme.containers && !container)
+            container = theme.containers[0];
+        if (!container)
+            return str;
+        // Palette takes precendence over local colors
+        var colors;
+        if (container.containerPalette) {
+            colors = this.setPalette(theme, container.containerPalette);
+            str += colors;
+        }
+        else if (!colors) {
+            if (container?.containerBackgroundGradient) {
+                str += "background-image: " + container.containerBackgroundGradient;
+            }
+            else if (container.containerBackground)
+                str += "background-color: " + container.containerBackground + ";";
+            else
+                str += "background-color: rgba(255,255,255,0)";
+        }
+        if (container?.backgroundImage?.length) {
+            str += "background-image: url(" + container.backgroundImage + ");";
+            if (container.backgroundRepeat)
+                str += "background-repeat: " + container.backgroundRepeat + ';';
+            if (container.backgroundSize)
+                str += "background-size: " + container.backgroundSize + ';';
+            if (container.backgroundPosition)
+                str += "background-position: " + container.backgroundPosition + ';';
+        }
+        if (container.containerBorder)
+            str += "border: " + container.containerBorder + ";";
+        if (container.containerBoxShadow)
+            str += "box-shadow: " + container.containerBoxShadow + ";";
+        if (container.containerMargin)
+            str += "margin: " + self.responsiveSpace(theme, container.containerMargin, theme.responsiveMarginMin, theme.responsiveMarginMax) + ';';
+        if (container.containerPadding)
+            str += "padding: " + self.responsiveSpace(theme, container.containerPadding, theme.responsivePaddingMin, theme.responsivePaddingMax) + ";";
+        if (container.containerAlignment && !container.containerAlignmentV) {
+            str += "display: flex; justify-content: " + container.containerAlignment + ";";
+            str += "align-items:  " + container.containerAlignment + ";";
+        }
+        else if (container.containerAlignment && container.containerAlignmentV) {
+            str += "display: flex; justify-content: " + container.containerAlignment + ";";
+            str += "align-items:  " + container.containerAlignmentV + ";";
+        }
+        if (container.containerLayout) {
+            str += "flex-flow: " + container.containerLayout + ";";
+        }
+        if (container.containerWidth) {
+            if (container.containerWidth == '100vw') {
+                str += "width: " + this.screenWidth + 'px;';
+                //  console.log ("container style ", str)
+            }
+            else
+                str += "width: " + container.containerWidth + ';';
+        }
+        if (container.containerHeight) {
+            str += "height: " + container.containerHeight + ';';
+        }
+        if (container.containerLineHeight) {
+            str += "line-height: " + container.containerLineHeight + ';';
+        }
+        if (container.containerOverflowX) {
+            str += "overflow-x: " + container.containerOverflowX + ';';
+        }
+        if (container.containerOverflowY) {
+            str += "overflow-y: " + container.containerOverflowY + ';';
+        }
+        if (container.containerPosition) {
+            str += "position: " + container.containerPosition + ';';
+        }
+        /* Add left,right,top,bottom */
+        if (container.containerPositioning) {
+            str += container.containerPositioning;
+        }
+        if (container.containerStyle) {
+            str += container.containerStyle;
+        }
+        return str;
+    }
+    /* not used for now
+      card(themeName?: any, cardName?: any) {
+        var str = "";
+        var self = this;
+    
+        const theme: any = self.getTheme(themeName)
+    
+    
+        if (cardName && theme.cards) {
+          const card = theme.cards.find((p: { cardName: any; }) => p.cardName == cardName)
+    
+          if (!card) return str;
+          if (card.cardBackground)
+            str = "background-color: " + card.cardBackground + ";"
+    
+          if (card.cardBorder)
+            str += "border: " + card.cardBorder + ";"
+    
+          if (card.cardBoxShadow)
+            str += "box-shadow: " + card.cardBoxShadow + ";"
+    
+          if (card.cardMargin)
+            str += "margin: " + card.cardMargin + ";"
+    
+          if (card.cardPadding)
+            str += "padding: " + card.cardPadding + ";"
+    
+          if (card.cardAlignment) {
+            str += "display: flex; justify-content: " + card.cardAlignment + ";"
+            str += "align-items:  " + card.cardAlignment + ";"
+          }
+          if (card.cardLayout) {
+            str += "flex-flow: " + card.cardLayout + ";"
+          }
+          return str;
+        }
+        else {
+          if (theme.cardBackground)
+            str = "background-color: " + theme.cardBackground + ";"
+    
+          if (theme.cardBorder)
+            str += "border: " + theme.cardBorder + ";"
+    
+          if (theme.cardBoxShadow)
+            str += "box-shadow: " + theme.cardBoxShadow + ";"
+    
+          if (theme.cardMargin)
+            str += "margin: " + theme.cardMargin + ";"
+    
+          if (theme.cardPadding)
+            str += "padding: " + theme.cardPadding + ";"
+    
+          if (theme.cardAlignment) {
+            str += "display: flex; justify-content: " + theme.cardAlignment + ";"
+            str += "align-items:  " + theme.cardAlignment + ";"
+          }
+          if (theme.cardLayout) {
+            str += "flex-flow: " + theme.cardLayout + ";"
+          }
+        }
+    
+        return str;
+      }
+    */
+    accordionList(themeName) {
+        var self = this;
+        var list = [];
+        const theme = self.getTheme(themeName);
+        if (!theme)
+            return list; // Should ALWAYS get theme
+        if (theme.accordions?.length)
+            theme.accordions.forEach(function (item) {
+                //?????   list.push(item.accordionName);
+            });
+        return list;
+    }
+    accordion(themeName, accordionName) {
+        var str = "";
+        var self = this;
+        const theme = self.getTheme(themeName);
+        //  console.log ("New Accordion Theme ", theme, accordionName)
+        var acc;
+        if (accordionName && theme.accordions)
+            acc = theme.accordions.find((p) => p.accordionName?.length && p.accordionName.toLowerCase() == accordionName.toLowerCase());
+        if (theme.accordions && !acc)
+            acc = theme.accordions[0]; //default
+        if (acc) {
+            // Palette takes precendence over local colors
+            var colors;
+            if (acc.accordionPalette) {
+                colors = this.setPalette(theme, acc.accordionPalette);
+                str += colors;
+            }
+            else if (!colors) {
+                if (acc.accordionBackground)
+                    str += "background-color: " + acc.accordionBackground + ";";
+            }
+            if (acc.accordionBorder)
+                str += "border: " + acc.accordionBorder + ";";
+            if (acc.accordionBoxShadow)
+                str += "box-shadow: " + acc.accordionBoxShadow + ";";
+            if (acc.accordionWidth)
+                str += "width: " + acc.accordionWidth + ";";
+            if (theme.responsiveMarginMin) {
+                if (acc.accordionMargin)
+                    str += "margin: " + self.responsiveSpace(theme, acc.accordionMargin, theme.responsiveMarginMin, theme.responsiveMarginMax) + ";";
+            }
+            if (theme.responsivePaddingMin) {
+                if (acc.accordionPadding)
+                    str += "padding: " + self.responsiveSpace(theme, acc.accordionPadding, theme.responsivePaddingMin, theme.responsivePaddingMax) + ";";
+            }
+            if (acc.accordionAlignment) {
+                str += "display: flex; justify-content: " + acc.accordionAlignment + ";";
+                str += "align-items:  " + acc.accordionAlignment + ";";
+            }
+            if (acc.accordionLayout) {
+                str += "flex-flow: " + acc.accordionLayout + ";";
+            }
+            if (acc.accordionExtra)
+                str += acc.accordionExtra;
+        }
+        return str;
+    }
+    header(themeName, accordionName, expanded, index) {
+        var str = "cursor: pointer;";
+        var self = this;
+        // console.log ("Header: ", themeName, accordionName, expanded, index)
+        const theme = self.getTheme(themeName);
+        if (!theme) {
+            console.log("WE CANNOT FIND YOUR THEME: ", themeName);
+            return str;
+        }
+        if (accordionName && theme.accordions) {
+            var acc = theme.accordions.find((p) => p.accordionName?.length && p.accordionName.toLowerCase() == accordionName.toLowerCase());
+            //  console.log ("Your Accordion: ", acc, theme, themeName, accordionName)
+        }
+        if (theme.accordions && !acc)
+            acc = theme.accordions[0]; //default    
+        if (acc) {
+            if (expanded) {
+                if (acc.headerOpenWidth == '100vw') {
+                    str += "width: " + self.screenWidth + 'px;';
+                }
+                else
+                    str += "width: " + acc.headerOpenWidth + ';';
+                if (acc.headerOpenType)
+                    str += self.type(themeName, acc.headerOpenType);
+                // Palette takes precendence over local colors
+                var colors;
+                if (acc.headerOpenPalette) {
+                    colors = this.setPalette(theme, acc.headerOpenPalette);
+                    str += colors;
+                }
+                else if (!colors) {
+                    if (acc.headerOpenBackground)
+                        str += "background-color: " + acc.headerOpenBackground + ";";
+                }
+                if (acc.headerOpenBorder)
+                    str += "border: " + acc.headerOpenBorder + ";";
+                if (acc.headerOpenBoxShadow)
+                    str += "box-shadow: " + acc.headerOpenBoxShadow + ";";
+                if (acc.headerOpenMargin)
+                    str += "margin: " + self.responsiveSpace(theme, acc.headerOpenMargin, theme.responsiveMarginMin, theme.responsiveMarginMax) + ";";
+                if (acc.headerOpenPadding)
+                    str += "padding: " + self.responsiveSpace(theme, acc.headerOpenPadding, theme.responsivePaddingMin, theme.responsivePaddingMax) + ";";
+                if (acc.headerOpenAlignment) {
+                    str += "display: flex; justify-content: " + acc.headerOpenAlignment + ";";
+                    str += "align-items:  " + acc.headerOpenAlignment + ";";
+                }
+                if (acc.headerOpenLayout) {
+                    str += "flex-flow: " + acc.headerOpenLayout + ";";
+                }
+                if (acc.headerOpenExtra)
+                    str += acc.headerOpenExtra;
+            }
+            else {
+                if (acc.headerClosedWidth == '100vw') {
+                    str += "width: " + self.screenWidth + 'px;';
+                }
+                else
+                    str += "width: " + acc.headerClosedWidth + ';';
+                if (acc.headerClosedType)
+                    str += self.type(themeName, acc.headerClosedType);
+                // Palette takes precendence over local colors
+                var colors;
+                if (acc.headerClosedPalette) {
+                    colors = this.setPalette(theme, acc.headerClosedPalette);
+                    str += colors;
+                }
+                else if (!colors) {
+                    if (acc.headerClosedBackground)
+                        str += "background-color: " + acc.headerClosedBackground + ";";
+                }
+                if (acc.headerClosedBorder)
+                    str += "border: " + acc.headerClosedBorder + ";";
+                if (acc.headerClosedBoxShadow)
+                    str += "box-shadow: " + acc.headerClosedBoxShadow + ";";
+                if (acc.headerClosedMargin)
+                    str += "margin: " + self.responsiveSpace(theme, acc.headerClosedMargin, theme.responsiveMarginMin, theme.responsiveMarginMax) + ";";
+                if (acc.headerClosedPadding)
+                    str += "padding: " + self.responsiveSpace(theme, acc.headerClosedPadding, theme.responsivePaddingMin, theme.responsivePaddingMax) + ";";
+                if (acc.headerClosedAlignment) {
+                    str += "display: flex; justify-content: " + acc.headerClosedAlignment + ";";
+                    str += "align-items:  " + acc.headerClosedAlignment + ";";
+                }
+                if (acc.headerClosedLayout) {
+                    str += "flex-flow: " + acc.headerClosedLayout + ";";
+                }
+                if (acc.headerClosedExtra)
+                    str += acc.headerClosedExtra;
+            }
+        }
+        else {
+            // DEFAULT ACCORDION STYLING?? Maybe not.
+            console.log("No accordions!");
+        }
+        return str;
+    }
+    button(themeName, buttonName) {
+        var str = "";
+        var self = this;
+        const theme = self.getTheme(themeName);
+        const buttonStyle = self.getButton(theme, buttonName);
+        if (!buttonStyle)
+            return str;
+        const type = self.typeObject(theme, buttonStyle.buttonTypeStyle) || {};
+        // Pallete takes precendence over local colors
+        var colors;
+        if (buttonStyle.buttonPalette) {
+            colors = self.setPalette(theme, buttonStyle.buttonPalette);
+            str += colors;
+        }
+        if (!colors) {
+            if (buttonStyle?.buttonBackground)
+                str += "background-color: " + buttonStyle.buttonBackground + ";";
+            if (buttonStyle?.buttonColor) {
+                str += "color: " + buttonStyle.buttonColor + ";";
+            }
+        }
+        if (buttonStyle?.buttonPadding)
+            str += "padding: " + self.responsiveSpace(theme, buttonStyle.buttonPadding, theme.responsivePaddingMin, theme.responsivePaddingMax) + ";";
+        if (buttonStyle?.buttonMargin)
+            str += "margin: " + self.responsiveSpace(theme, buttonStyle.buttonMargin, theme.responsiveMarginMin, theme.responsiveMarginMax) + ";";
+        if (buttonStyle?.buttonBorder) {
+            str += "border: " + buttonStyle.buttonBorder + ";";
+        }
+        else
+            str += "border: none;";
+        if (buttonStyle?.buttonRadius)
+            str += "border-radius: " + buttonStyle.buttonRadius + ";";
+        if (buttonStyle?.buttonShadow)
+            str += "box-shadow: " + buttonStyle.buttonShadow + ";";
+        if (type.typeFontSize) {
+            str += "font-size: " + self.responsiveType(theme, type) + "px;";
+        }
+        if (type.typeFont)
+            str += "font-family: " + type.typeFont + ";";
+        if (type.typeFontWeight)
+            str += "font-weight: " + type.typeFontWeight + ";";
+        str += "cursor: pointer; box-sizing: border-box;";
+        return str;
+    }
+    paddingAdjust(theme, delta) {
+        this.paddingAdjustment = delta;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesService, deps: [{ token: i0.NgZone }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: ThemeService }] });
+function mapRange(value, inMin, inMax, outMin, outMax) {
+    return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+}
+function roundToOneDecimal(num) {
+    return Math.round(num * 10) / 10;
+}
+
+class AccordionContent {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AccordionContent, isStandalone: false, selector: "[accordionContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[accordionContent]",
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class AccordionHeader {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionHeader, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AccordionHeader, isStandalone: false, selector: "[accordionHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[accordionHeader]",
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class AccordionTitle {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionTitle, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AccordionTitle, isStandalone: false, selector: "[accordionTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[accordionTitle]",
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class AccordionItem {
+    constructor() {
+        this.title = "";
+        this.disabled = false;
+        this.expanded = false;
+        this.loaded = false;
+    }
+    collapse() {
+        this.expanded = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AccordionItem, isStandalone: false, selector: "accordion-item", inputs: { title: "title", disabled: "disabled", expanded: "expanded", closeOther: "closeOther", loaded: "loaded" }, queries: [{ propertyName: "content", first: true, predicate: AccordionContent, descendants: true }, { propertyName: "customTitle", first: true, predicate: AccordionTitle }, { propertyName: "customHeader", first: true, predicate: AccordionHeader }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "accordion-item",
+                    standalone: false
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], closeOther: [{
+                type: Input
+            }], loaded: [{
+                type: Input
+            }], content: [{
+                type: ContentChild,
+                args: [AccordionContent]
+            }], customTitle: [{
+                type: ContentChild,
+                args: [AccordionTitle, { descendants: false }]
+            }], customHeader: [{
+                type: ContentChild,
+                args: [AccordionHeader, { descendants: false }]
+            }] } });
+
+class TogglePipe {
+    /**
+     * Make the toggle function available to be called from
+     * outside.
+     * @param index - index of the accordion item
+     */
+    transform(i, toggleFn) {
+        return () => toggleFn(i);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TogglePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: TogglePipe, isStandalone: false, name: "getToggleFunction" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TogglePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getToggleFunction',
+                    standalone: false
+                }]
+        }] });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class AccordionComponent {
+    constructor(fasterThemes, cdr) {
+        this.fasterThemes = fasterThemes;
+        this.cdr = cdr;
+        this.expanded = new Set();
+        this.collapsing = false;
+        this.focus = false;
+        this.showCaret = true;
+        this.headerClicked = new EventEmitter();
+        this.destroyRef = inject(DestroyRef);
+        this.toggleState = (index) => {
+            const itemsArray = this.items.toArray();
+            if (this.expanded.has(index)) {
+                this.expanded.delete(index);
+                if (this.headerClicked) {
+                    this.headerClicked.emit({ index: index, open: false });
+                }
+                return false;
+            }
+            else {
+                if (this.collapsing) {
+                    this.expanded.clear();
+                }
+                this.expanded.add(index);
+                if (!itemsArray[index]?.loaded) {
+                    itemsArray[index].loaded = true;
+                }
+                if (this.headerClicked) {
+                    this.headerClicked.emit({ index: index, open: true });
+                }
+                return true;
+            }
+        };
+    }
+    ngOnInit() {
+        if (this.collapsing && this.focus)
+            this.focus = false;
+        const input = this.theme ?? this.themeName;
+        if (typeof input === 'string') {
+            this.themeName = this.fasterThemes?.getTheme(input);
+        }
+        else if (input != null) {
+            this.themeName = input;
+        }
+        // If no theme provided, template calls fall back to parentTheme via getTheme(undefined)
+        this.fasterThemes.resize$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.cdr.markForCheck());
+    }
+    ngAfterViewInit() {
+        merge(this.items.changes, of(this.items))
+            .pipe(map(() => this.items.toArray()), takeUntilDestroyed(this.destroyRef))
+            .subscribe((items) => {
+            items.forEach((item, index) => {
+                if (item.expanded) {
+                    this.expanded.add(index);
+                }
+            });
+            this.cdr.markForCheck();
+        });
+    }
+    collapseAll() {
+        this.expanded.clear();
+        this.items?.forEach(item => item.collapse());
+        this.cdr.markForCheck();
+    }
+    activeStyle(index) {
+        return this.expanded.has(index);
+    }
+    onHeaderClick(event, index, item) {
+        event.stopPropagation();
+        let opened = false;
+        if (!item.disabled) {
+            opened = this.toggleState(index);
+        }
+        if (opened && item.closeOther) {
+            this.closeOtherAccordion(item.closeOther);
+        }
+    }
+    closeOtherAccordion(targetTitle) {
+        this.items.forEach((accordion, i) => {
+            if (accordion.title === targetTitle) {
+                this.expanded.delete(i);
+                accordion.collapse();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionComponent, deps: [{ token: FasterThemesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AccordionComponent, isStandalone: false, selector: "accordion", inputs: { name: "name", collapsing: "collapsing", theme: "theme", themeName: "themeName", accordionName: "accordionName", focus: "focus", showCaret: "showCaret" }, outputs: { headerClicked: "headerClicked" }, queries: [{ propertyName: "items", predicate: AccordionItem }], ngImport: i0, template: "<section [style]=\"fasterThemes.accordion(themeName, accordionName)\">\n  <div *ngFor=\"let item of items;index as i\" \n    [class.disabled]=\"item.disabled\" \n    [class.active]=\"expanded.has(i)\"\n    [class.hidden]=\"focus && expanded && expanded.size && \n                    expanded.size > 0 && !expanded.has(i)\">\n    <ng-container \n        [ngTemplateOutlet]=\"(item?.customHeader?.templateRef || defaultHeader)\"\n        [ngTemplateOutletContext]=\"{$implicit: item, index: i, toggle: i | getToggleFunction: toggleState}\">\n      </ng-container>\n        <div [class.expanded]=\"expanded.has(i)\" \n             [style.display]=\"expanded.has(i) ? 'initial' : 'none'\">\n             <ng-container *ngIf=\"item.loaded || item.expanded\">\n                <ng-container *ngTemplateOutlet=\"item?.content?.templateRef || null\">\n                </ng-container>\n            </ng-container>\n    </div>\n  </div>\n</section>\n\n<ng-template #defaultHeader let-item let-index=\"index\">\n  <header [style]=\"fasterThemes.header(themeName, accordionName, activeStyle(index), index)\"\n    (click)=\"onHeaderClick($event, index, item)\">\n    <ng-container *ngTemplateOutlet=\"item?.customTitle?.templateRef || defaultTitle\"></ng-container>\n    <span *ngIf=\"showCaret\" class=\"accordion__caret\" [class.accordion__caret--open]=\"expanded.has(index)\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\" width=\"36\" height=\"36\" aria-hidden=\"true\">\n        <path d=\"M7 10l5 5 5-5z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n  </header>\n  <ng-template #defaultTitle>\n    <p class=\"accordion__title\">{{item?.title}}</p>\n  </ng-template>\n</ng-template>", styles: [":host{--accordion-header-height: 50px;--accordion-header-bg: hsl(0, 0%, 95%);--accordion-disabled: hsl(0, 0%, 60%);--accordion-border-radius: 8px}.accordion{border:1px solid hsl(0,0%,80%);border-radius:var(--accordion-border-radius)}.accordion__item:first-child .accordion__header{border-radius:var(--accordion-border-radius) var(--accordion-border-radius) 0 0}.accordion__item:last-child .accordion__header{border-radius:0 0 var(--accordion-border-radius) var(--accordion-border-radius)}.accordion__header{display:flex;cursor:pointer;background:var(--accordion-header-bg)}.accordion__toggle-btn{border:none;transition:transform .3s ease-in;background:none}.accordion__item.disabled .accordion__header{color:var(--accordion-disabled);cursor:not-allowed}.accordion__toggle-btn:disabled{cursor:not-allowed}.accordion__toggle-btn:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.accordion__item.active .accordion__toggle-btn{transform:rotate(180deg)}.hidden{display:none}.accordion__caret{display:inline-flex;align-items:center;margin-left:auto;transition:transform .2s ease;pointer-events:none}.accordion__caret--open{transform:rotate(180deg)}.accordion__item .accordion__header:focus-within{border-color:var(--primary);border-radius:var(--accordion-border-radius)}.accordion__toggle-btn:focus{outline:none}.accordion__content{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:opacity .3s,height .3s ease-out}.expanded{visibility:visible!important;opacity:1;height:auto;overflow:visible}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TogglePipe, name: "getToggleFunction" }], animations: [
+            trigger('contentExpansion', [
+                state('expanded', style({ height: '*', opacity: 1, visibility: 'visible', overflow: 'visible' })),
+                state('collapsed', style({ width: 'min-content', height: '0px', opacity: 0, visibility: 'hidden', overflow: 'hidden' })),
+                transition('expanded <=> collapsed', animate('200ms cubic-bezier(.37,1.04,.68,.98)')),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'accordion', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('contentExpansion', [
+                            state('expanded', style({ height: '*', opacity: 1, visibility: 'visible', overflow: 'visible' })),
+                            state('collapsed', style({ width: 'min-content', height: '0px', opacity: 0, visibility: 'hidden', overflow: 'hidden' })),
+                            transition('expanded <=> collapsed', animate('200ms cubic-bezier(.37,1.04,.68,.98)')),
+                        ]),
+                    ], standalone: false, template: "<section [style]=\"fasterThemes.accordion(themeName, accordionName)\">\n  <div *ngFor=\"let item of items;index as i\" \n    [class.disabled]=\"item.disabled\" \n    [class.active]=\"expanded.has(i)\"\n    [class.hidden]=\"focus && expanded && expanded.size && \n                    expanded.size > 0 && !expanded.has(i)\">\n    <ng-container \n        [ngTemplateOutlet]=\"(item?.customHeader?.templateRef || defaultHeader)\"\n        [ngTemplateOutletContext]=\"{$implicit: item, index: i, toggle: i | getToggleFunction: toggleState}\">\n      </ng-container>\n        <div [class.expanded]=\"expanded.has(i)\" \n             [style.display]=\"expanded.has(i) ? 'initial' : 'none'\">\n             <ng-container *ngIf=\"item.loaded || item.expanded\">\n                <ng-container *ngTemplateOutlet=\"item?.content?.templateRef || null\">\n                </ng-container>\n            </ng-container>\n    </div>\n  </div>\n</section>\n\n<ng-template #defaultHeader let-item let-index=\"index\">\n  <header [style]=\"fasterThemes.header(themeName, accordionName, activeStyle(index), index)\"\n    (click)=\"onHeaderClick($event, index, item)\">\n    <ng-container *ngTemplateOutlet=\"item?.customTitle?.templateRef || defaultTitle\"></ng-container>\n    <span *ngIf=\"showCaret\" class=\"accordion__caret\" [class.accordion__caret--open]=\"expanded.has(index)\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\" width=\"36\" height=\"36\" aria-hidden=\"true\">\n        <path d=\"M7 10l5 5 5-5z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n  </header>\n  <ng-template #defaultTitle>\n    <p class=\"accordion__title\">{{item?.title}}</p>\n  </ng-template>\n</ng-template>", styles: [":host{--accordion-header-height: 50px;--accordion-header-bg: hsl(0, 0%, 95%);--accordion-disabled: hsl(0, 0%, 60%);--accordion-border-radius: 8px}.accordion{border:1px solid hsl(0,0%,80%);border-radius:var(--accordion-border-radius)}.accordion__item:first-child .accordion__header{border-radius:var(--accordion-border-radius) var(--accordion-border-radius) 0 0}.accordion__item:last-child .accordion__header{border-radius:0 0 var(--accordion-border-radius) var(--accordion-border-radius)}.accordion__header{display:flex;cursor:pointer;background:var(--accordion-header-bg)}.accordion__toggle-btn{border:none;transition:transform .3s ease-in;background:none}.accordion__item.disabled .accordion__header{color:var(--accordion-disabled);cursor:not-allowed}.accordion__toggle-btn:disabled{cursor:not-allowed}.accordion__toggle-btn:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.accordion__item.active .accordion__toggle-btn{transform:rotate(180deg)}.hidden{display:none}.accordion__caret{display:inline-flex;align-items:center;margin-left:auto;transition:transform .2s ease;pointer-events:none}.accordion__caret--open{transform:rotate(180deg)}.accordion__item .accordion__header:focus-within{border-color:var(--primary);border-radius:var(--accordion-border-radius)}.accordion__toggle-btn:focus{outline:none}.accordion__content{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:opacity .3s,height .3s ease-out}.expanded{visibility:visible!important;opacity:1;height:auto;overflow:visible}\n"] }]
+        }], ctorParameters: () => [{ type: FasterThemesService }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+                type: Input
+            }], collapsing: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], themeName: [{
+                type: Input
+            }], accordionName: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], showCaret: [{
+                type: Input
+            }], headerClicked: [{
+                type: Output
+            }], items: [{
+                type: ContentChildren,
+                args: [AccordionItem]
+            }] } });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class nColorDirective {
+    // Selector-aliased form: <div nColor="Primary" [theme]="t">
+    set nColor(v) {
+        if (v !== undefined && v !== '')
+            this.color = v;
+    }
+    constructor(el, fasterThemes) {
+        this.el = el;
+        this.fasterThemes = fasterThemes;
+        this.appliedProps = new Set();
+    }
+    ngOnChanges() {
+        this.clearAppliedStyles();
+        this.apply();
+    }
+    apply() {
+        const theme = this.fasterThemes.getTheme(this.theme);
+        const palette = this.fasterThemes.getPalette(theme, this.color);
+        if (!palette)
+            return;
+        if (palette.backgroundColor)
+            this.setStyle('background-color', palette.backgroundColor);
+        if (palette.color)
+            this.setStyle('color', palette.color);
+        if (palette.gradient?.startsWith('background-image:'))
+            this.setStyle('background-image', palette.gradient.replace('background-image:', ''));
+        else if (palette.gradient?.startsWith('background-color:'))
+            this.setStyle('background-color', palette.gradient.replace('background-color:', ''));
+        else if (palette.gradient?.startsWith('background:'))
+            this.setStyle('background', palette.gradient.replace('background:', ''));
+    }
+    setStyle(prop, value) {
+        this.el.nativeElement.style.setProperty(prop, value);
+        this.appliedProps.add(prop);
+    }
+    clearAppliedStyles() {
+        for (const prop of this.appliedProps) {
+            this.el.nativeElement.style.removeProperty(prop);
+        }
+        this.appliedProps.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nColorDirective, deps: [{ token: i0.ElementRef }, { token: FasterThemesService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: nColorDirective, isStandalone: false, selector: "[nColor]", inputs: { theme: "theme", color: "color", nColor: "nColor" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nColor]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FasterThemesService }], propDecorators: { theme: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], nColor: [{
+                type: Input,
+                args: ['nColor']
+            }] } });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class nContainerDirective {
+    // Selector-aliased form: <div nContainer="Wide" [theme]="t">
+    set nContainer(v) {
+        if (v !== undefined && v !== '')
+            this.container = v;
+    }
+    constructor(el, fasterThemes) {
+        this.el = el;
+        this.fasterThemes = fasterThemes;
+        this.appliedProps = new Set();
+        this.resizeSub = this.fasterThemes.resize$.subscribe(() => this.apply());
+    }
+    ngOnDestroy() {
+        this.resizeSub.unsubscribe();
+    }
+    ngOnChanges() {
+        this.clearAppliedStyles();
+        this.apply();
+    }
+    apply() {
+        const theme = this.fasterThemes.getTheme(this.theme);
+        const container = this.fasterThemes.getContainer(theme, this.container);
+        if (!container)
+            return;
+        // Palette takes precedence over local colors
+        const usedPalette = container.containerPalette
+            ? this.applyPalette(theme, container.containerPalette)
+            : false;
+        if (!usedPalette) {
+            if (container.containerBackgroundGradient)
+                this.setStyle('background-image', container.containerBackgroundGradient);
+            else if (container.containerBackground)
+                this.setStyle('background-color', container.containerBackground);
+        }
+        // Image takes precedence over palette background
+        if (container.backgroundImage?.length) {
+            this.setStyle('background-image', `url(${container.backgroundImage})`);
+            if (container.backgroundSize)
+                this.setStyle('background-size', container.backgroundSize);
+        }
+        if (container.containerBorder)
+            this.setStyle('border', container.containerBorder);
+        if (container.containerBoxShadow)
+            this.setStyle('box-shadow', container.containerBoxShadow);
+        if (container.containerAlignment && !container.containerAlignmentV) {
+            this.setStyle('display', 'flex');
+            this.setStyle('justify-content', container.containerAlignment);
+            this.setStyle('align-items', container.containerAlignment);
+        }
+        else if (container.containerAlignment && container.containerAlignmentV) {
+            this.setStyle('display', 'flex');
+            this.setStyle('justify-content', container.containerAlignment);
+            this.setStyle('align-items', container.containerAlignmentV);
+        }
+        if (container.containerLayout)
+            this.setStyle('flex-flow', container.containerLayout);
+        if (container.containerWidth) {
+            const width = container.containerWidth === '100vw'
+                ? `${this.fasterThemes.screenWidth}px`
+                : container.containerWidth;
+            this.setStyle('width', width);
+        }
+        if (container.containerHeight)
+            this.setStyle('height', container.containerHeight);
+        if (container.containerOverflowX)
+            this.setStyle('overflow-x', container.containerOverflowX);
+        if (container.containerOverflowY)
+            this.setStyle('overflow-y', container.containerOverflowY);
+        if (container.containerPosition)
+            this.setStyle('position', container.containerPosition);
+        if (container.containerMargin)
+            this.setStyle('margin', this.fasterThemes.responsiveSpace(theme, container.containerMargin, theme.responsiveMarginMin, theme.responsiveMarginMax));
+        if (container.containerPadding)
+            this.setStyle('padding', this.fasterThemes.responsiveSpace(theme, container.containerPadding, theme.responsivePaddingMin, theme.responsivePaddingMax));
+    }
+    applyPalette(theme, paletteName) {
+        const palette = this.fasterThemes.getPalette(theme, paletteName);
+        if (!palette)
+            return false;
+        if (palette.backgroundColor)
+            this.setStyle('background-color', palette.backgroundColor);
+        if (palette.color)
+            this.setStyle('color', palette.color);
+        if (palette.gradient?.startsWith('background-image:'))
+            this.setStyle('background-image', palette.gradient.replace('background-image:', ''));
+        else if (palette.gradient?.startsWith('background-color:'))
+            this.setStyle('background-color', palette.gradient.replace('background-color:', ''));
+        else if (palette.gradient?.startsWith('background:'))
+            this.setStyle('background', palette.gradient.replace('background:', ''));
+        return true;
+    }
+    setStyle(prop, value) {
+        this.el.nativeElement.style.setProperty(prop, value);
+        this.appliedProps.add(prop);
+    }
+    clearAppliedStyles() {
+        for (const prop of this.appliedProps) {
+            this.el.nativeElement.style.removeProperty(prop);
+        }
+        this.appliedProps.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nContainerDirective, deps: [{ token: i0.ElementRef }, { token: FasterThemesService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: nContainerDirective, isStandalone: false, selector: "[nContainer]", inputs: { theme: "theme", container: "container", nContainer: "nContainer" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nContainer]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FasterThemesService }], propDecorators: { theme: [{
+                type: Input
+            }], container: [{
+                type: Input
+            }], nContainer: [{
+                type: Input,
+                args: ['nContainer']
+            }] } });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class nTypeDirective {
+    // Selector-aliased form: <div nType="H1" [theme]="t">
+    set nType(v) {
+        if (v !== undefined && v !== '')
+            this.type = v;
+    }
+    constructor(el, fasterThemes) {
+        this.el = el;
+        this.fasterThemes = fasterThemes;
+        this.appliedProps = new Set();
+        this.resizeSub = this.fasterThemes.resize$.subscribe(() => this.apply());
+    }
+    ngOnDestroy() {
+        this.resizeSub.unsubscribe();
+    }
+    ngOnChanges() {
+        this.clearAppliedStyles();
+        this.apply();
+    }
+    apply() {
+        const theme = this.fasterThemes.getTheme(this.theme);
+        // typeface is a backwards-compat alias for type
+        const name = this.type || this.typeface;
+        const t = this.fasterThemes.typeObject(theme, name);
+        if (!t)
+            return;
+        // Palette takes precedence over local colors
+        const usedPalette = t.typePalette
+            ? this.applyPalette(theme, t.typePalette)
+            : false;
+        if (!usedPalette) {
+            if (t.typeBackground)
+                this.setStyle('background-color', t.typeBackground);
+            if (t.typeFontColor)
+                this.setStyle('color', t.typeFontColor);
+        }
+        if (t.typeFont)
+            this.setStyle('font-family', t.typeFont);
+        if (t.typeFontSize)
+            this.setStyle('font-size', `${this.fasterThemes.responsiveType(theme, t)}px`);
+        if (t.typeFontWeight)
+            this.setStyle('font-weight', t.typeFontWeight);
+        if (t.typeFontAlignment)
+            this.setStyle('text-align', t.typeFontAlignment);
+        if (t.typeTextShadow)
+            this.setStyle('text-shadow', t.typeTextShadow);
+        if (t.typePadding)
+            this.setStyle('padding', this.fasterThemes.responsiveSpace(theme, t.typePadding, theme.responsivePaddingMin, theme.responsivePaddingMax));
+        if (t.typeMargin)
+            this.setStyle('margin', this.fasterThemes.responsiveSpace(theme, t.typeMargin, theme.responsiveMarginMin, theme.responsiveMarginMax));
+    }
+    applyPalette(theme, paletteName) {
+        const palette = this.fasterThemes.getPalette(theme, paletteName);
+        if (!palette)
+            return false;
+        if (palette.backgroundColor)
+            this.setStyle('background-color', palette.backgroundColor);
+        if (palette.color)
+            this.setStyle('color', palette.color);
+        if (palette.gradient?.startsWith('background-image:'))
+            this.setStyle('background-image', palette.gradient.replace('background-image:', ''));
+        else if (palette.gradient?.startsWith('background-color:'))
+            this.setStyle('background-color', palette.gradient.replace('background-color:', ''));
+        else if (palette.gradient?.startsWith('background:'))
+            this.setStyle('background', palette.gradient.replace('background:', ''));
+        return true;
+    }
+    setStyle(prop, value) {
+        this.el.nativeElement.style.setProperty(prop, value);
+        this.appliedProps.add(prop);
+    }
+    clearAppliedStyles() {
+        for (const prop of this.appliedProps) {
+            this.el.nativeElement.style.removeProperty(prop);
+        }
+        this.appliedProps.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nTypeDirective, deps: [{ token: i0.ElementRef }, { token: FasterThemesService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: nTypeDirective, isStandalone: false, selector: "[nType]", inputs: { theme: "theme", type: "type", typeface: "typeface", nType: "nType" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nTypeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nType]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FasterThemesService }], propDecorators: { theme: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], typeface: [{
+                type: Input
+            }], nType: [{
+                type: Input,
+                args: ['nType']
+            }] } });
+
+class RippleDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.rippleDuration = ".6"; // Animation duration in ms
+        this.rippleColor = "rgba(255, 255, 255, 0.5)";
+        this.noRipple = false;
+    }
+    ngOnInit() {
+        if (this.noRipple)
+            return;
+        // Ensure the parent element has required styles
+        this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
+        this.renderer.setStyle(this.el.nativeElement, 'overflow', 'hidden');
+        if (!parseFloat(this.rippleDuration)) {
+            this.rippleDuration = ".6";
+        }
+    }
+    createRipple(event) {
+        if (this.noRipple)
+            return;
+        const button = this.el.nativeElement;
+        const ripple = this.renderer.createElement('span');
+        // Get button dimensions
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        // Apply styles dynamically
+        this.renderer.setStyle(ripple, 'position', 'absolute');
+        this.renderer.setStyle(ripple, 'border-radius', '50%');
+        this.renderer.setStyle(ripple, 'background', this.rippleColor);
+        this.renderer.setStyle(ripple, 'width', `${size}px`);
+        this.renderer.setStyle(ripple, 'height', `${size}px`);
+        this.renderer.setStyle(ripple, 'left', `${x}px`);
+        this.renderer.setStyle(ripple, 'top', `${y}px`);
+        this.renderer.setStyle(ripple, 'transform', 'scale(0)');
+        this.renderer.setStyle(ripple, 'opacity', '1');
+        this.renderer.setStyle(ripple, 'transition', `transform ${this.rippleDuration}s ease-out, opacity ${this.rippleDuration}s ease-out`);
+        // Append ripple to the button
+        this.renderer.appendChild(button, ripple);
+        // Trigger animation
+        setTimeout(() => {
+            this.renderer.setStyle(ripple, 'transform', 'scale(4)');
+            this.renderer.setStyle(ripple, 'opacity', '0');
+        });
+        // Remove ripple after animation completes
+        setTimeout(() => {
+            this.renderer.removeChild(button, ripple);
+        }, parseFloat(this.rippleDuration) * 2000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: RippleDirective, isStandalone: true, selector: "[ripple]", inputs: { rippleDuration: "rippleDuration", rippleColor: "rippleColor", noRipple: "noRipple" }, host: { listeners: { "click": "createRipple($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ripple]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { rippleDuration: [{
+                type: Input
+            }], rippleColor: [{
+                type: Input
+            }], noRipple: [{
+                type: Input
+            }], createRipple: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class nButtonDirective {
+    // Selector-aliased form: <button nButton="Create" [theme]="t">
+    set nButton(v) {
+        if (v !== undefined && v !== '')
+            this.button = v;
+    }
+    constructor(el, fasterThemes) {
+        this.el = el;
+        this.fasterThemes = fasterThemes;
+        this.appliedProps = new Set();
+        this.resizeSub = this.fasterThemes.resize$.subscribe(() => this.apply());
+    }
+    ngOnDestroy() {
+        this.resizeSub.unsubscribe();
+    }
+    ngOnChanges() {
+        this.clearAppliedStyles();
+        this.apply();
+    }
+    apply() {
+        const theme = this.fasterThemes.getTheme(this.theme);
+        const name = this.button || this.buttonStyle;
+        const buttonStyle = this.fasterThemes.getButton(theme, name);
+        if (!buttonStyle)
+            return;
+        const type = buttonStyle.buttonTypeStyle
+            ? this.fasterThemes.typeObject(theme, buttonStyle.buttonTypeStyle)
+            : null;
+        // Palette takes precedence over local colors
+        const usedPalette = buttonStyle.buttonPalette
+            ? this.applyPalette(theme, buttonStyle.buttonPalette)
+            : false;
+        if (!usedPalette) {
+            if (buttonStyle.buttonBackground)
+                this.setStyle('background-color', buttonStyle.buttonBackground);
+            if (buttonStyle.buttonColor)
+                this.setStyle('color', buttonStyle.buttonColor);
+        }
+        if (buttonStyle.buttonPadding)
+            this.setStyle('padding', this.fasterThemes.responsiveSpace(theme, buttonStyle.buttonPadding, theme.responsivePaddingMin, theme.responsivePaddingMax));
+        if (buttonStyle.buttonMargin)
+            this.setStyle('margin', this.fasterThemes.responsiveSpace(theme, buttonStyle.buttonMargin, theme.responsiveMarginMin, theme.responsiveMarginMax));
+        this.setStyle('border', buttonStyle.buttonBorder || 'none');
+        if (buttonStyle.buttonRadius)
+            this.setStyle('border-radius', buttonStyle.buttonRadius);
+        if (buttonStyle.buttonShadow)
+            this.setStyle('box-shadow', buttonStyle.buttonShadow);
+        if (type?.typeFont)
+            this.setStyle('font-family', type.typeFont);
+        if (type?.typeFontSize)
+            this.setStyle('font-size', `${this.fasterThemes.responsiveType(theme, type)}px`);
+        if (type?.typeFontWeight)
+            this.setStyle('font-weight', type.typeFontWeight);
+        if (type?.typeFontAlignment)
+            this.setStyle('text-align', type.typeFontAlignment);
+        if (type?.typeTextShadow)
+            this.setStyle('text-shadow', type.typeTextShadow);
+        if (type?.typePadding)
+            this.setStyle('padding', this.fasterThemes.responsiveSpace(theme, type.typePadding, theme.responsivePaddingMin, theme.responsivePaddingMax));
+        if (type?.typeMargin)
+            this.setStyle('margin', this.fasterThemes.responsiveSpace(theme, type.typeMargin, theme.responsiveMarginMin, theme.responsiveMarginMax));
+        this.setStyle('cursor', 'pointer');
+        this.setStyle('box-sizing', 'border-box');
+    }
+    applyPalette(theme, paletteName) {
+        const palette = this.fasterThemes.getPalette(theme, paletteName);
+        if (!palette)
+            return false;
+        if (palette.backgroundColor)
+            this.setStyle('background-color', palette.backgroundColor);
+        if (palette.color)
+            this.setStyle('color', palette.color);
+        if (palette.gradient?.startsWith('background-image:'))
+            this.setStyle('background-image', palette.gradient.replace('background-image:', ''));
+        else if (palette.gradient?.startsWith('background-color:'))
+            this.setStyle('background-color', palette.gradient.replace('background-color:', ''));
+        else if (palette.gradient?.startsWith('background:'))
+            this.setStyle('background', palette.gradient.replace('background:', ''));
+        return true;
+    }
+    setStyle(prop, value) {
+        this.el.nativeElement.style.setProperty(prop, value);
+        this.appliedProps.add(prop);
+    }
+    clearAppliedStyles() {
+        for (const prop of this.appliedProps) {
+            this.el.nativeElement.style.removeProperty(prop);
+        }
+        this.appliedProps.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nButtonDirective, deps: [{ token: i0.ElementRef }, { token: FasterThemesService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: nButtonDirective, isStandalone: false, selector: "[nButton]", inputs: { theme: "theme", button: "button", buttonStyle: "buttonStyle", nButton: "nButton" }, usesOnChanges: true, hostDirectives: [{ directive: RippleDirective, inputs: ["rippleDuration", "rippleDuration", "rippleColor", "rippleColor", "noRipple", "noRipple"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nButton]',
+                    hostDirectives: [
+                        {
+                            directive: RippleDirective,
+                            inputs: ['rippleDuration', 'rippleColor', 'noRipple']
+                        }
+                    ],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FasterThemesService }], propDecorators: { theme: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], nButton: [{
+                type: Input,
+                args: ['nButton']
+            }] } });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class nClassDirective {
+    // Selector-aliased form: <div nClass="color-blue" [theme]="t">
+    set nClass(v) {
+        if (v !== undefined && v !== '')
+            this.class = v;
+    }
+    constructor(el, fasterThemes) {
+        this.el = el;
+        this.fasterThemes = fasterThemes;
+        this.appliedProps = new Set();
+    }
+    ngOnChanges() {
+        this.clearAppliedStyles();
+        this.apply();
+    }
+    apply() {
+        const theme = this.fasterThemes.getTheme(this.theme);
+        const cssText = this.fasterThemes.class(theme, this.class);
+        if (!cssText?.length)
+            return;
+        // Parse "prop: value; prop2: value2;" into individual setProperty calls
+        // so re-applying clears precisely the props we set instead of stomping
+        // the entire style attribute.
+        for (const decl of cssText.split(';')) {
+            const colon = decl.indexOf(':');
+            if (colon < 0)
+                continue;
+            const prop = decl.slice(0, colon).trim();
+            const value = decl.slice(colon + 1).trim();
+            if (prop && value)
+                this.setStyle(prop, value);
+        }
+    }
+    setStyle(prop, value) {
+        this.el.nativeElement.style.setProperty(prop, value);
+        this.appliedProps.add(prop);
+    }
+    clearAppliedStyles() {
+        for (const prop of this.appliedProps) {
+            this.el.nativeElement.style.removeProperty(prop);
+        }
+        this.appliedProps.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nClassDirective, deps: [{ token: i0.ElementRef }, { token: FasterThemesService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: nClassDirective, isStandalone: false, selector: "[nClass]", inputs: { theme: "theme", class: "class", nClass: "nClass" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: nClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nClass]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FasterThemesService }], propDecorators: { theme: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], nClass: [{
+                type: Input,
+                args: ['nClass']
+            }] } });
+
+// Firebase removed - no longer used
+// export interface firebaseConfig  {
+//   initThemes: any;
+//   apiKey: string;
+//   authDomain: string;
+//   databaseURL: string;
+//   projectId: string;
+//   storageBucket: string;
+//   messagingSenderId: string;
+//   appId: string;
+//   measurementId: string;
+// }
+// export const FBT = new InjectionToken<Promise<FirebaseApp>>('FBT');
+// export const FAT = new InjectionToken<Promise<Auth>>('FAT');
+// export const INIT_THEMES = new InjectionToken<Promise<string>>('INIT_THEMES');
+//
+// const test = localStorage.getItem('test')
+// const configPromise = fetch(`https://firebaseconfig-aq3tslzx7a-uc.a.run.app?${test}`)
+//   .then(res => res.json());
+class FasterThemesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesModule, declarations: [FasterThemesComponent,
+            AccordionComponent,
+            AccordionItem,
+            AccordionContent,
+            AccordionTitle,
+            AccordionHeader,
+            TogglePipe,
+            nColorDirective,
+            nContainerDirective,
+            nTypeDirective,
+            nButtonDirective,
+            nClassDirective], imports: [CommonModule,
+            HttpClientModule,
+            RippleDirective], exports: [FasterThemesComponent,
+            AccordionComponent,
+            AccordionTitle,
+            AccordionHeader,
+            AccordionContent,
+            AccordionItem,
+            TogglePipe,
+            RippleDirective,
+            nColorDirective,
+            nContainerDirective,
+            nTypeDirective,
+            nButtonDirective,
+            nClassDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesModule, providers: [
+            // Firebase removed - no longer used
+            // {
+            //     provide: FBT,
+            //     useFactory: async (): Promise<FirebaseApp> => {
+            //         const config = (await configPromise).firebaseConfig;
+            //         const existingApp = getApps().find(app => app.name === "napkin");
+            //         return existingApp ?? initializeApp(config, "napkin");
+            //     }
+            // },
+            // {
+            //     provide: FAT,
+            //     useFactory: async (appPromise: Promise<FirebaseApp>): Promise<Auth> => {
+            //         const app = await appPromise;
+            //         return getAuth(app);
+            //     },
+            //     deps: [FBT]
+            // },
+            // {
+            //     provide: INIT_THEMES,
+            //     useFactory: async (): Promise<string> => {
+            //         const { initThemes } = await configPromise;
+            //         return initThemes;
+            //     }
+            // },
+            FasterThemesService,
+        ], imports: [CommonModule,
+            HttpClientModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FasterThemesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FasterThemesComponent,
+                        AccordionComponent,
+                        AccordionItem,
+                        AccordionContent,
+                        AccordionTitle,
+                        AccordionHeader,
+                        TogglePipe,
+                        nColorDirective,
+                        nContainerDirective,
+                        nTypeDirective,
+                        nButtonDirective,
+                        nClassDirective,
+                    ],
+                    exports: [
+                        FasterThemesComponent,
+                        AccordionComponent,
+                        AccordionTitle,
+                        AccordionHeader,
+                        AccordionContent,
+                        AccordionItem,
+                        TogglePipe,
+                        RippleDirective,
+                        nColorDirective,
+                        nContainerDirective,
+                        nTypeDirective,
+                        nButtonDirective,
+                        nClassDirective
+                    ], imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        RippleDirective
+                    ], providers: [
+                        // Firebase removed - no longer used
+                        // {
+                        //     provide: FBT,
+                        //     useFactory: async (): Promise<FirebaseApp> => {
+                        //         const config = (await configPromise).firebaseConfig;
+                        //         const existingApp = getApps().find(app => app.name === "napkin");
+                        //         return existingApp ?? initializeApp(config, "napkin");
+                        //     }
+                        // },
+                        // {
+                        //     provide: FAT,
+                        //     useFactory: async (appPromise: Promise<FirebaseApp>): Promise<Auth> => {
+                        //         const app = await appPromise;
+                        //         return getAuth(app);
+                        //     },
+                        //     deps: [FBT]
+                        // },
+                        // {
+                        //     provide: INIT_THEMES,
+                        //     useFactory: async (): Promise<string> => {
+                        //         const { initThemes } = await configPromise;
+                        //         return initThemes;
+                        //     }
+                        // },
+                        FasterThemesService,
+                    ]
+                }]
+        }] });
+
+/* Copyright © 2023-2025 Napkin Apps Corp. All rights reserved. */
+class ThemeGeneratorComponent {
+    constructor() {
+        this.themeStyle = 'modern';
+        this.purpose = 'marketing';
+        this.palette = 'ocean';
+        this.layout = 'row wrap';
+        this.elevation = 'medium';
+        this.textShadow = 'none';
+        this.showPreview = false;
+        this.themeGenerated = new EventEmitter();
+    }
+    ngOnInit() {
+        this.regenerate();
+    }
+    ngOnChanges(changes) {
+        if (changes['themeStyle'] ||
+            changes['purpose'] ||
+            changes['palette'] ||
+            changes['layout'] ||
+            changes['elevation'] ||
+            changes['textShadow'] ||
+            changes['name'] ||
+            changes['responsiveStandardWidth'] ||
+            changes['responsiveFontSizeMin'] ||
+            changes['responsiveFontSizeMax'] ||
+            changes['responsiveMarginMin'] ||
+            changes['responsiveMarginMax'] ||
+            changes['responsivePaddingMin'] ||
+            changes['responsivePaddingMax']) {
+            this.regenerate();
+        }
+    }
+    generate() {
+        const palette = Array.isArray(this.palette)
+            ? this.palette
+            : this.buildPalette(this.palette);
+        const style = this.styleProfileFor(this.themeStyle);
+        const purpose = this.purposeProfileFor(this.purpose);
+        const semantics = this.semanticColors();
+        const elevationCss = this.elevationCss(this.elevation, this.themeStyle);
+        const textShadowCss = this.textShadowCss(this.textShadow);
+        const paletteLabel = typeof this.palette === 'string' ? this.capitalize(this.palette) : 'Custom';
+        return {
+            name: this.name ??
+                `${this.capitalize(this.themeStyle)} ${paletteLabel} ${this.capitalize(this.purpose)}`,
+            description: `Generated ${this.themeStyle} ${paletteLabel.toLowerCase()} theme for ${this.purpose}`,
+            responsiveName: 'generated',
+            responsiveStandardWidth: this.responsiveStandardWidth ?? 1440,
+            responsiveFontSizeMin: this.responsiveFontSizeMin ?? 80,
+            responsiveFontSizeMax: this.responsiveFontSizeMax ?? 120,
+            responsiveMarginMin: this.responsiveMarginMin ?? 80,
+            responsiveMarginMax: this.responsiveMarginMax ?? 150,
+            responsivePaddingMin: this.responsivePaddingMin ?? 80,
+            responsivePaddingMax: this.responsivePaddingMax ?? 150,
+            palette,
+            typeStyles: this.buildTypography(style, purpose, semantics, textShadowCss),
+            containers: this.buildContainers(style, purpose, palette, this.layout, elevationCss),
+            buttonStyles: this.buildButtons(style, purpose, palette, semantics, elevationCss),
+            accordions: this.buildAccordions(style, purpose, palette, this.layout, elevationCss),
+            classes: this.buildClasses(),
+        };
+    }
+    /**
+     * Map a ShadowLevel to a box-shadow CSS string. Playful style uses an offset
+     * "hard" shadow that varies in offset rather than blur, so it gets its own
+     * scale.
+     */
+    elevationCss(level, style) {
+        if (level === 'none')
+            return 'none';
+        if (style === 'playful') {
+            return {
+                small: '2px 2px 0 rgba(0,0,0,0.12)',
+                medium: '4px 4px 0 rgba(0,0,0,0.15)',
+                large: '6px 6px 0 rgba(0,0,0,0.18)',
+            }[level];
+        }
+        return {
+            small: '0 1px 3px rgba(0,0,0,0.10)',
+            medium: '0 2px 8px rgba(0,0,0,0.15)',
+            large: '0 6px 16px rgba(0,0,0,0.20)',
+        }[level];
+    }
+    /** Map a ShadowLevel to a text-shadow CSS string. Empty disables. */
+    textShadowCss(level) {
+        if (level === 'none')
+            return '';
+        return {
+            small: '1px 1px 2px rgba(0,0,0,0.15)',
+            medium: '1px 1px 3px rgba(0,0,0,0.25)',
+            large: '2px 2px 4px rgba(0,0,0,0.35)',
+        }[level];
+    }
+    regenerate() {
+        this.theme = this.generate();
+        this.themeGenerated.emit(this.theme);
+    }
+    resolveSwatch(p) {
+        if (typeof p.backgroundColor === 'string')
+            return p.backgroundColor;
+        if (p.backgroundColor?.colorHex)
+            return p.backgroundColor.colorHex;
+        if (typeof p.color === 'string')
+            return p.color;
+        return '#cccccc';
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Profiles
+    // ────────────────────────────────────────────────────────────────────────
+    styleProfileFor(style) {
+        const profiles = {
+            modern: {
+                fontFamily: '"Inter", system-ui, sans-serif',
+                monoFamily: '"JetBrains Mono", "Courier New", monospace',
+                baseFontSize: 16,
+                headingWeight: '600',
+                bodyWeight: '400',
+                borderRadius: '8px',
+                border: 'none',
+            },
+            classic: {
+                fontFamily: '"Georgia", "Times New Roman", serif',
+                monoFamily: '"Courier New", monospace',
+                baseFontSize: 17,
+                headingWeight: '700',
+                bodyWeight: '400',
+                borderRadius: '2px',
+                border: '1px solid rgba(0,0,0,0.15)',
+            },
+            minimal: {
+                fontFamily: '"Helvetica Neue", Arial, sans-serif',
+                monoFamily: '"SF Mono", "Menlo", monospace',
+                baseFontSize: 15,
+                headingWeight: '500',
+                bodyWeight: '300',
+                borderRadius: '0px',
+                border: '1px solid rgba(0,0,0,0.08)',
+            },
+            bold: {
+                fontFamily: '"Montserrat", system-ui, sans-serif',
+                monoFamily: '"Roboto Mono", monospace',
+                baseFontSize: 18,
+                headingWeight: '800',
+                bodyWeight: '500',
+                borderRadius: '4px',
+                border: '2px solid rgba(0,0,0,0.85)',
+            },
+            playful: {
+                fontFamily: '"Comic Neue", "Quicksand", sans-serif',
+                monoFamily: '"Comic Mono", "Courier New", monospace',
+                baseFontSize: 16,
+                headingWeight: '700',
+                bodyWeight: '400',
+                borderRadius: '18px',
+                border: '2px dashed rgba(0,0,0,0.3)',
+            },
+        };
+        return profiles[style];
+    }
+    purposeProfileFor(purpose) {
+        const profiles = {
+            marketing: {
+                containerPadding: '40px 32px',
+                containerMargin: '0px',
+                accordionMode: 'collapsing',
+                emphasizeHeadings: true,
+                buttonPadding: '14px 16px',
+                density: 'roomy',
+            },
+            dashboard: {
+                containerPadding: '16px',
+                containerMargin: '8px',
+                accordionMode: 'open',
+                emphasizeHeadings: false,
+                buttonPadding: '8px 16px',
+                density: 'tight',
+            },
+            documentation: {
+                containerPadding: '24px 32px',
+                containerMargin: '12px 0px',
+                accordionMode: 'collapsing',
+                emphasizeHeadings: true,
+                buttonPadding: '10px 12px',
+                density: 'normal',
+            },
+            form: {
+                containerPadding: '20px',
+                containerMargin: '8px 0px',
+                accordionMode: 'focus',
+                emphasizeHeadings: false,
+                buttonPadding: '12px 16px',
+                density: 'normal',
+            },
+            gallery: {
+                containerPadding: '8px',
+                containerMargin: '4px',
+                accordionMode: 'focus',
+                emphasizeHeadings: false,
+                buttonPadding: '10px 12px',
+                density: 'tight',
+            },
+        };
+        return profiles[purpose];
+    }
+    semanticColors() {
+        return {
+            danger: { bg: '#c62828', fg: '#ffffff' },
+            success: { bg: '#2e7d32', fg: '#ffffff' },
+            warning: { bg: '#f9a825', fg: '#3e2723' },
+            info: { bg: '#0288d1', fg: '#ffffff' },
+            disabled: { bg: '#e0e0e0', fg: '#9e9e9e' },
+            inverse: { bg: '#212121', fg: '#fafafa' },
+        };
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Palette
+    // ────────────────────────────────────────────────────────────────────────
+    buildPalette(preset) {
+        // Every palette defines 8 semantic roles that blend (Primary→Secondary→
+        // Accent→Highlight) and contrast (Surface↔Inverse) within a unified
+        // color story. Consumers can reference any role by colorName.
+        const presets = {
+            // ─────────────── Aesthetic presets ───────────────
+            ocean: [
+                { colorName: 'Primary', backgroundColor: '#0277bd', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#4fc3f7', color: '#01579b' },
+                { colorName: 'Accent', backgroundColor: '#80deea', color: '#004d40' },
+                { colorName: 'Highlight', backgroundColor: '#00bcd4', color: '#003c43' },
+                { colorName: 'Surface', backgroundColor: '#e1f5fe', color: '#01579b' },
+                { colorName: 'Muted', backgroundColor: '#cfd8dc', color: '#37474f' },
+                { colorName: 'Subtle', backgroundColor: '#eceff1', color: '#455a64' },
+                { colorName: 'Inverse', backgroundColor: '#01579b', color: '#e1f5fe' },
+            ],
+            forest: [
+                { colorName: 'Primary', backgroundColor: '#2e7d32', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#81c784', color: '#1b5e20' },
+                { colorName: 'Accent', backgroundColor: '#aed581', color: '#33691e' },
+                { colorName: 'Highlight', backgroundColor: '#fff176', color: '#5d4037' },
+                { colorName: 'Surface', backgroundColor: '#f1f8e9', color: '#33691e' },
+                { colorName: 'Muted', backgroundColor: '#d7ccc8', color: '#3e2723' },
+                { colorName: 'Subtle', backgroundColor: '#efebe9', color: '#5d4037' },
+                { colorName: 'Inverse', backgroundColor: '#1b5e20', color: '#f1f8e9' },
+            ],
+            sunset: [
+                { colorName: 'Primary', backgroundColor: '#ef6c00', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#ffb74d', color: '#bf360c' },
+                { colorName: 'Accent', backgroundColor: '#f48fb1', color: '#880e4f' },
+                { colorName: 'Highlight', backgroundColor: '#ffd54f', color: '#5d4037' },
+                { colorName: 'Surface', backgroundColor: '#fff3e0', color: '#bf360c' },
+                { colorName: 'Muted', backgroundColor: '#ffe0b2', color: '#5d4037' },
+                { colorName: 'Subtle', backgroundColor: '#fff8e1', color: '#6d4c41' },
+                { colorName: 'Inverse', backgroundColor: '#bf360c', color: '#fff3e0' },
+            ],
+            monochrome: [
+                { colorName: 'Primary', backgroundColor: '#212121', color: '#fafafa' },
+                { colorName: 'Secondary', backgroundColor: '#616161', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#9e9e9e', color: '#212121' },
+                { colorName: 'Highlight', backgroundColor: '#ffeb3b', color: '#212121' },
+                { colorName: 'Surface', backgroundColor: '#fafafa', color: '#212121' },
+                { colorName: 'Muted', backgroundColor: '#e0e0e0', color: '#424242' },
+                { colorName: 'Subtle', backgroundColor: '#f5f5f5', color: '#616161' },
+                { colorName: 'Inverse', backgroundColor: '#000000', color: '#fafafa' },
+            ],
+            pastel: [
+                { colorName: 'Primary', backgroundColor: '#b39ddb', color: '#311b92' },
+                { colorName: 'Secondary', backgroundColor: '#f8bbd0', color: '#880e4f' },
+                { colorName: 'Accent', backgroundColor: '#b2ebf2', color: '#006064' },
+                { colorName: 'Highlight', backgroundColor: '#c5e1a5', color: '#33691e' },
+                { colorName: 'Surface', backgroundColor: '#fff9c4', color: '#f57f17' },
+                { colorName: 'Muted', backgroundColor: '#dcedc8', color: '#33691e' },
+                { colorName: 'Subtle', backgroundColor: '#fce4ec', color: '#ad1457' },
+                { colorName: 'Inverse', backgroundColor: '#4527a0', color: '#ede7f6' },
+            ],
+            // ─────────────── Business presets ───────────────
+            // Corporate — navy + steel, conservative trust signals
+            corporate: [
+                { colorName: 'Primary', backgroundColor: '#1a237e', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#3949ab', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#d84315', color: '#ffffff' },
+                { colorName: 'Highlight', backgroundColor: '#fff176', color: '#3e2723' },
+                { colorName: 'Surface', backgroundColor: '#fafafa', color: '#1a237e' },
+                { colorName: 'Muted', backgroundColor: '#eceff1', color: '#37474f' },
+                { colorName: 'Subtle', backgroundColor: '#f5f5f5', color: '#424242' },
+                { colorName: 'Inverse', backgroundColor: '#263238', color: '#eceff1' },
+            ],
+            // Healthcare — calm teals + soft whites, clinical clarity
+            healthcare: [
+                { colorName: 'Primary', backgroundColor: '#00695c', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#00897b', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#e91e63', color: '#ffffff' },
+                { colorName: 'Highlight', backgroundColor: '#b2ebf2', color: '#006064' },
+                { colorName: 'Surface', backgroundColor: '#ffffff', color: '#263238' },
+                { colorName: 'Muted', backgroundColor: '#e0f2f1', color: '#004d40' },
+                { colorName: 'Subtle', backgroundColor: '#f1f8e9', color: '#33691e' },
+                { colorName: 'Inverse', backgroundColor: '#004d40', color: '#e0f2f1' },
+            ],
+            // Finance — deep green + gold, money & gravitas
+            finance: [
+                { colorName: 'Primary', backgroundColor: '#1b5e20', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#2e7d32', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#ff8f00', color: '#1b1b1b' },
+                { colorName: 'Highlight', backgroundColor: '#ffe082', color: '#5d4037' },
+                { colorName: 'Surface', backgroundColor: '#fafafa', color: '#1b1b1b' },
+                { colorName: 'Muted', backgroundColor: '#e8f5e9', color: '#1b5e20' },
+                { colorName: 'Subtle', backgroundColor: '#f1f8e9', color: '#33691e' },
+                { colorName: 'Inverse', backgroundColor: '#1b1b1b', color: '#c8e6c9' },
+            ],
+            // Tech / SaaS — violet + cyan, modern product feel
+            tech: [
+                { colorName: 'Primary', backgroundColor: '#4527a0', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#7e57c2', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#00e5ff', color: '#00363a' },
+                { colorName: 'Highlight', backgroundColor: '#c4b5fd', color: '#311b92' },
+                { colorName: 'Surface', backgroundColor: '#fafafa', color: '#311b92' },
+                { colorName: 'Muted', backgroundColor: '#ede7f6', color: '#311b92' },
+                { colorName: 'Subtle', backgroundColor: '#f3e5f5', color: '#4a148c' },
+                { colorName: 'Inverse', backgroundColor: '#1a1a2e', color: '#ede7f6' },
+            ],
+            // Legal — burgundy + cream, traditional and authoritative
+            legal: [
+                { colorName: 'Primary', backgroundColor: '#4a0e0e', color: '#fff8e1' },
+                { colorName: 'Secondary', backgroundColor: '#5d4037', color: '#fff8e1' },
+                { colorName: 'Accent', backgroundColor: '#b71c1c', color: '#ffecb3' },
+                { colorName: 'Highlight', backgroundColor: '#ffd54f', color: '#3e2723' },
+                { colorName: 'Surface', backgroundColor: '#fff8e1', color: '#3e2723' },
+                { colorName: 'Muted', backgroundColor: '#efebe9', color: '#4e342e' },
+                { colorName: 'Subtle', backgroundColor: '#f5f5f5', color: '#3e2723' },
+                { colorName: 'Inverse', backgroundColor: '#3e2723', color: '#efebe9' },
+            ],
+            // Hospitality — warm coral + cream, welcoming and indulgent
+            hospitality: [
+                { colorName: 'Primary', backgroundColor: '#d84315', color: '#fff8e1' },
+                { colorName: 'Secondary', backgroundColor: '#ff7043', color: '#fff8e1' },
+                { colorName: 'Accent', backgroundColor: '#c2185b', color: '#ffffff' },
+                { colorName: 'Highlight', backgroundColor: '#ffd180', color: '#4e342e' },
+                { colorName: 'Surface', backgroundColor: '#fff8e1', color: '#3e2723' },
+                { colorName: 'Muted', backgroundColor: '#fbe9e7', color: '#bf360c' },
+                { colorName: 'Subtle', backgroundColor: '#fff3e0', color: '#5d4037' },
+                { colorName: 'Inverse', backgroundColor: '#3e2723', color: '#fff8e1' },
+            ],
+            // Retail — vibrant + friendly, attention-grabbing pops
+            retail: [
+                { colorName: 'Primary', backgroundColor: '#d32f2f', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#f57c00', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#00897b', color: '#ffffff' },
+                { colorName: 'Highlight', backgroundColor: '#ffeb3b', color: '#5d4037' },
+                { colorName: 'Surface', backgroundColor: '#fafafa', color: '#212121' },
+                { colorName: 'Muted', backgroundColor: '#f5f5f5', color: '#424242' },
+                { colorName: 'Subtle', backgroundColor: '#fffde7', color: '#5d4037' },
+                { colorName: 'Inverse', backgroundColor: '#212121', color: '#ffeb3b' },
+            ],
+            // Education — friendly blue + warm accents, approachable
+            education: [
+                { colorName: 'Primary', backgroundColor: '#1976d2', color: '#ffffff' },
+                { colorName: 'Secondary', backgroundColor: '#42a5f5', color: '#ffffff' },
+                { colorName: 'Accent', backgroundColor: '#ff7043', color: '#ffffff' },
+                { colorName: 'Highlight', backgroundColor: '#ffd54f', color: '#5d4037' },
+                { colorName: 'Surface', backgroundColor: '#ffffff', color: '#1565c0' },
+                { colorName: 'Muted', backgroundColor: '#e3f2fd', color: '#0d47a1' },
+                { colorName: 'Subtle', backgroundColor: '#f5f5f5', color: '#424242' },
+                { colorName: 'Inverse', backgroundColor: '#0d47a1', color: '#e3f2fd' },
+            ],
+        };
+        return presets[preset];
+    }
+    bgOf(palette, name) {
+        const p = palette.find(x => x.colorName === name) ?? palette[0];
+        if (typeof p.backgroundColor === 'string')
+            return p.backgroundColor;
+        return p.backgroundColor?.colorHex ?? '#cccccc';
+    }
+    fgOf(palette, name) {
+        const p = palette.find(x => x.colorName === name) ?? palette[0];
+        if (typeof p.color === 'string')
+            return p.color;
+        return p.color?.colorHex ?? '#222222';
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Typography — H1-H5, title, subtitle, body, label, user, display, Focus, white, Jade
+    // ────────────────────────────────────────────────────────────────────────
+    buildTypography(style, purpose, semantics, textShadowCss) {
+        const base = style.baseFontSize;
+        const boost = purpose.emphasizeHeadings ? 1.15 : 1.0;
+        const heading = (sizePx) => ({
+            typeFont: style.fontFamily,
+            typeFontSize: `${Math.round(sizePx * boost)}px`,
+            typeFontWeight: style.headingWeight,
+            typeLineHeight: '1.3',
+            typeTextShadow: textShadowCss,
+        });
+        return [
+            { typeName: 'H1', ...heading(base * 2.6), typePadding: '6px 4px' },
+            { typeName: 'H2', ...heading(base * 2.1), typePadding: '6px 4px' },
+            { typeName: 'H3', ...heading(base * 1.75) },
+            { typeName: 'H4', ...heading(base * 1.4) },
+            { typeName: 'H5', ...heading(base * 1.2), typeFontAlignment: 'center' },
+            {
+                typeName: 'title',
+                typeFont: style.fontFamily,
+                typeFontSize: `${Math.round(base * 1.55)}px`,
+                typeFontWeight: style.headingWeight,
+                typeFontAlignment: 'center',
+                typeLineHeight: '1.3',
+                typePadding: '2px 4px',
+                typeMargin: '2px 4px',
+                typeTextShadow: textShadowCss,
+            },
+            {
+                typeName: 'subtitle',
+                typeFont: style.fontFamily,
+                typeFontSize: `${Math.round(base * 1.1)}px`,
+                typeFontWeight: '500',
+                typeLineHeight: '1.4',
+                typePadding: '4px',
+                typeTextShadow: textShadowCss,
+            },
+            {
+                typeName: 'body',
+                typeFont: style.fontFamily,
+                typeFontSize: `${base}px`,
+                typeFontWeight: style.bodyWeight,
+                typeLineHeight: '1.6',
+            },
+            {
+                typeName: 'label',
+                typeFont: style.fontFamily,
+                typeFontSize: `${Math.round(base * 0.9)}px`,
+                typeFontWeight: '500',
+                typeFontAlignment: 'center',
+                typeLineHeight: '1.3',
+            },
+            {
+                typeName: 'user',
+                typeFont: style.fontFamily,
+                typeFontSize: `${Math.round(base * 1.05)}px`,
+                typeFontWeight: '600',
+                typePadding: '4px',
+                typeMargin: '4px',
+                typeFontColor: '#303f9f',
+            },
+            {
+                typeName: 'display',
+                typeFont: style.monoFamily,
+                typeFontSize: `${Math.round(base * 0.9)}px`,
+                typeFontWeight: '900',
+                typeLineHeight: '1.4',
+                typePadding: '6px 4px',
+            },
+            {
+                typeName: 'Focus',
+                typeFont: style.fontFamily,
+                typeFontSize: `${Math.round(base * 1.65)}px`,
+                typeFontWeight: '600',
+                typePalette: 'Accent',
+                typeBorder: `2px solid ${semantics.danger.bg}`,
+                typePadding: '8px',
+                typeMargin: '12px',
+                typeTextShadow: textShadowCss,
+            },
+            {
+                typeName: 'white',
+                typeFont: style.fontFamily,
+                typeFontSize: `${Math.round(base * 2.2)}px`,
+                typeFontWeight: '700',
+                typeFontColor: '#ffffff',
+                typeBackground: semantics.inverse.bg,
+                typePadding: '6px 4px',
+                typeTextShadow: textShadowCss,
+            },
+            {
+                typeName: 'Jade',
+                typeFont: style.monoFamily,
+                typeFontSize: `${Math.round(base * 1.2)}px`,
+                typeFontWeight: '600',
+                typeLineHeight: '1.5',
+                typeFontColor: '#1259c8',
+                typePadding: '4px',
+                typeMargin: '4px',
+            },
+        ];
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Containers — Page Structure: Page, Section, Hero, Header, Footer,
+    // Sidebar, Toolbar | Cards & Panels: Card, Panel, Modal | Content Types:
+    // Data Entry, Article, Feed, Table, Gallery, Dashboard | Width Variants: Narrow,
+    // Half, Wide, Full Width, Full Screen | Functional: Media, Sticky,
+    // Notification, Inactive, Callout
+    // ────────────────────────────────────────────────────────────────────────
+    buildContainers(style, purpose, palette, layout, elevationCss) {
+        const surfaceBg = this.bgOf(palette, 'Surface');
+        const mutedBg = this.bgOf(palette, 'Muted');
+        const primaryBg = this.bgOf(palette, 'Primary');
+        const accentBg = this.bgOf(palette, 'Accent');
+        const tightPad = purpose.density === 'tight' ? '4px' : '6px';
+        const contentPad = purpose.density === 'tight' ? '12px' : purpose.density === 'roomy' ? '32px' : '20px';
+        const radius = style.borderRadius;
+        return [
+            // ── Page Structure ────────────────────────────────────────────────
+            {
+                containerName: 'Page',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerHeight: 'auto',
+                containerPadding: '0px',
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Section',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerPadding: `${contentPad} 0px`,
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Hero',
+                containerPalette: 'Accent',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerPadding: '64px 32px',
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Header',
+                containerPalette: 'Primary',
+                containerLayout: 'row',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerHeight: 'auto',
+                containerPadding: '8px 16px',
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: elevationCss,
+                containerPosition: 'sticky',
+                containerPositioning: 'top: 0; z-index: 100;',
+            },
+            {
+                containerName: 'Footer',
+                containerPalette: 'Muted',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerPadding: `${contentPad} 16px`,
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Sidebar',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '25vw',
+                containerHeight: '100vh',
+                containerPadding: '12px',
+                containerMargin: '0px',
+                containerBorder: style.border === 'none' ? '1px solid rgba(0,0,0,0.1)' : style.border,
+                containerBoxShadow: elevationCss,
+                containerOverflowY: 'auto',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Toolbar',
+                containerPalette: 'Primary',
+                containerLayout: 'row',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerHeight: 'auto',
+                containerPadding: '4px 12px',
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: elevationCss,
+                containerPosition: 'relative',
+            },
+            // ── Cards & Panels ────────────────────────────────────────────────
+            {
+                containerName: 'Card',
+                containerPalette: 'Surface',
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerPadding: '16px',
+                containerMargin: '8px',
+                containerBorder: style.border,
+                containerBoxShadow: elevationCss,
+                containerPosition: 'relative',
+                containerStyle: `border-radius: ${radius};`,
+            },
+            {
+                containerName: 'Panel',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '33vw',
+                containerHeight: '80vh',
+                containerPadding: tightPad,
+                containerMargin: '6px',
+                containerBorder: style.border === 'none' ? '1px solid rgba(0,0,0,0.1)' : style.border,
+                containerBoxShadow: elevationCss,
+                containerLineHeight: '150%',
+                containerPosition: 'relative',
+                containerStyle: `border-radius: ${radius};`,
+            },
+            {
+                containerName: 'Modal',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '480px',
+                containerHeight: 'auto',
+                containerPadding: '24px',
+                containerMargin: '0px auto',
+                containerBorder: style.border,
+                containerBoxShadow: elevationCss || '0 8px 32px rgba(0,0,0,0.2)',
+                containerPosition: 'relative',
+                containerStyle: `border-radius: ${radius};`,
+            },
+            // ── Content Types ─────────────────────────────────────────────────
+            {
+                containerName: 'Data Entry',
+                containerPalette: 'Surface',
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerPadding: '16px 12px',
+                containerMargin: '12px 6px',
+                containerBorder: style.border,
+                containerBoxShadow: elevationCss,
+                containerPosition: 'relative',
+                containerStyle: `border-radius: ${radius};`,
+            },
+            {
+                containerName: 'Article',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'start',
+                containerPadding: contentPad,
+                containerMargin: '0px auto',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerLineHeight: '160%',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Feed',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerWidth: '100%',
+                containerHeight: '100%',
+                containerOverflowX: 'hidden',
+                containerOverflowY: 'auto',
+                containerPadding: tightPad,
+                containerBorder: 'none',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Table',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerHeight: 'auto',
+                containerOverflowX: 'scroll',
+                containerOverflowY: 'scroll',
+                containerBorder: style.border,
+                containerMargin: '0px',
+                containerPadding: '0px',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Gallery',
+                containerPalette: 'Muted',
+                containerLayout: 'row wrap',
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerPadding: tightPad,
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Dashboard',
+                containerPalette: 'Surface',
+                containerLayout: 'row wrap',
+                containerAlignment: 'center',
+                containerWidth: '100%',
+                containerPadding: contentPad,
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            // ── Width Variants ────────────────────────────────────────────────
+            {
+                containerName: 'Narrow',
+                containerPalette: 'Surface',
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerWidth: '33%',
+                containerPadding: '0px',
+                containerMargin: '0px',
+                containerBorder: style.border,
+                containerBoxShadow: '',
+            },
+            {
+                containerName: 'Half',
+                containerPalette: 'Surface',
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerWidth: '50%',
+                containerPadding: '15px',
+                containerBorder: style.border,
+            },
+            {
+                containerName: 'Wide',
+                containerPalette: 'Surface',
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerWidth: '66%',
+                containerPadding: '0px',
+                containerMargin: '0px',
+                containerBorder: style.border,
+            },
+            {
+                containerName: 'Full Width',
+                containerBackground: surfaceBg,
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerWidth: '100vw',
+                containerOverflowX: 'scroll',
+                containerOverflowY: 'scroll',
+                containerPadding: '0px',
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            {
+                containerName: 'Full Screen',
+                containerPalette: 'Surface',
+                containerLayout: 'column',
+                containerWidth: '100vw',
+                containerHeight: '100vh',
+                containerPadding: '0px',
+                containerMargin: '0px',
+                containerBorder: 'none',
+                containerBoxShadow: '',
+                containerPosition: 'relative',
+            },
+            // ── Functional / State ────────────────────────────────────────────
+            {
+                containerName: 'Media',
+                containerPalette: 'Muted',
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerWidth: '25vw',
+                containerPadding: '0px',
+                containerMargin: '6px',
+                containerBorder: 'none',
+                containerBoxShadow: elevationCss,
+                containerPosition: 'relative',
+                containerStyle: `border-radius: ${radius};`,
+            },
+            {
+                containerName: 'Sticky',
+                containerBackground: `${mutedBg}55`,
+                containerLayout: layout,
+                containerAlignment: 'center',
+                containerHeight: 'auto',
+                containerPadding: '6px',
+                containerMargin: '6px',
+                containerBorder: 'none',
+                containerPosition: 'sticky',
+                containerPositioning: 'top: 0; z-index: 50;',
+            },
+            {
+                containerName: 'Notification',
+                containerBackground: accentBg,
+                containerLayout: 'column',
+                containerBorder: '1px solid white',
+                containerMargin: '12px 0px',
+                containerPadding: '12px',
+                containerLineHeight: '150%',
+                containerStyle: `border-radius: ${radius};`,
+            },
+            {
+                containerName: 'Report',
+                //    containerBackground: accentBg,
+                containerLayout: 'column',
+                containerBorder: '2px solid gray',
+                //    containerMargin: '12px 0px',
+                containerPadding: '8px',
+                //    containerLineHeight: '150%',
+                //   containerStyle: `border-radius: ${radius};`,
+            },
+            {
+                containerName: 'Inactive',
+                containerPalette: 'Muted',
+                containerPadding: tightPad,
+            },
+            {
+                containerName: 'Callout',
+                containerPalette: 'Primary',
+                containerLayout: 'column',
+                containerAlignment: 'center',
+                containerPadding: contentPad,
+                containerMargin: '12px 0px',
+                containerBorder: `2px solid ${primaryBg}`,
+                containerBoxShadow: '',
+                containerStyle: `border-radius: ${radius};`,
+            },
+        ];
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Buttons — Default Style, Item Select, Create, Delete, Disabled, Highlight,
+    // Function, Edit, Action, cell, Logic, Jade, Cancel
+    // ────────────────────────────────────────────────────────────────────────
+    buildButtons(style, purpose, palette, semantics, elevationCss) {
+        const padding = purpose.buttonPadding;
+        const radius = style.borderRadius;
+        const shadow = elevationCss;
+        const primaryBg = this.bgOf(palette, 'Primary');
+        const primaryFg = this.fgOf(palette, 'Primary');
+        const secondaryBg = this.bgOf(palette, 'Secondary');
+        const secondaryFg = this.fgOf(palette, 'Secondary');
+        const accentBg = this.bgOf(palette, 'Accent');
+        const accentFg = this.fgOf(palette, 'Accent');
+        const mutedBg = this.bgOf(palette, 'Muted');
+        return [
+            {
+                buttonName: 'Default Style',
+                buttonBackground: primaryBg,
+                buttonColor: primaryFg,
+                buttonPadding: padding,
+                buttonMargin: '6px',
+                buttonRadius: radius,
+                buttonBorder: style.border === 'none' ? 'none' : style.border,
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Item Select',
+                buttonBackground: secondaryBg,
+                buttonColor: secondaryFg,
+                buttonPadding: padding,
+                buttonMargin: '0px',
+                buttonRadius: '0px',
+                buttonBorder: '1px solid rgba(0,0,0,0.25)',
+                buttonShadow: 'none',
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Create',
+                buttonBackground: semantics.success.bg,
+                buttonColor: semantics.success.fg,
+                buttonPadding: padding,
+                buttonMargin: '6px',
+                buttonRadius: radius,
+                buttonBorder: 'none',
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Delete',
+                buttonBackground: semantics.danger.bg,
+                buttonColor: semantics.danger.fg,
+                buttonPadding: padding,
+                buttonMargin: '8px',
+                buttonRadius: radius,
+                buttonBorder: 'none',
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Disabled',
+                buttonBackground: semantics.disabled.bg,
+                buttonColor: semantics.disabled.fg,
+                buttonPadding: padding,
+                buttonMargin: '8px',
+                buttonRadius: '0px',
+                buttonBorder: 'none',
+                buttonShadow: 'none',
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Highlight',
+                buttonPalette: 'Highlight',
+                buttonPadding: padding,
+                buttonMargin: '8px',
+                buttonRadius: radius,
+                buttonBorder: 'none',
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Function',
+                buttonBackground: semantics.info.bg,
+                buttonColor: semantics.info.fg,
+                buttonPadding: padding,
+                buttonMargin: '8px',
+                buttonRadius: radius,
+                buttonBorder: 'none',
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Edit',
+                buttonBackground: accentBg,
+                buttonColor: accentFg,
+                buttonPadding: padding,
+                buttonMargin: '8px',
+                buttonRadius: radius,
+                buttonBorder: 'none',
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Action',
+                buttonBackground: primaryBg,
+                buttonColor: primaryFg,
+                buttonPadding: '8px 6px 8px 16px',
+                buttonMargin: '8px',
+                buttonRadius: `0px ${radius} ${radius} 0px`,
+                buttonBorder: 'none',
+                buttonShadow: shadow,
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'cell',
+                buttonBackground: this.bgOf(palette, 'Surface'),
+                buttonColor: this.fgOf(palette, 'Surface'),
+                buttonPadding: '0px',
+                buttonMargin: '0px',
+                buttonBorder: '1px solid rgba(0,0,0,0.2)',
+                buttonShadow: 'none',
+                buttonRadius: '0px',
+                buttonTypeStyle: 'label',
+            },
+            {
+                buttonName: 'Logic',
+                buttonBackground: mutedBg,
+                buttonColor: primaryBg,
+                buttonPadding: padding,
+                buttonMargin: '6px',
+                buttonBorder: '2px solid rgba(0,0,0,0.7)',
+                buttonRadius: radius,
+                buttonTypeStyle: 'subtitle',
+            },
+            {
+                buttonName: 'Jade',
+                buttonBackground: this.bgOf(palette, 'Surface'),
+                buttonColor: '#1259c8',
+                buttonPadding: padding,
+                buttonMargin: '3px',
+                buttonRadius: radius,
+                buttonTypeStyle: 'Jade',
+            },
+            {
+                buttonName: 'Cancel',
+                buttonBackground: mutedBg,
+                buttonColor: this.fgOf(palette, 'Muted'),
+                buttonPadding: padding,
+                buttonMargin: '6px',
+                buttonRadius: radius,
+                buttonBorder: 'none',
+                buttonShadow: 'none',
+                buttonTypeStyle: 'label',
+            },
+        ];
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Accordions — base, Level 1-4, Minimal, Settings, Data row 1-4, Object,
+    // Media Details, Docs, Create, TeamChat, Style, Share, UI, Chat Bots,
+    // Team, Sheet, App, Report
+    // ────────────────────────────────────────────────────────────────────────
+    buildAccordions(style, purpose, palette, layout, elevationCss) {
+        const headerPad = purpose.accordionMode === 'open' ? '8px 12px' : '12px 16px';
+        const tight = purpose.density === 'tight';
+        // Hierarchy palette walk: Primary → Secondary → Accent → Surface
+        const hierarchy = ['Primary', 'Secondary', 'Accent', 'Surface'];
+        const make = (name, overrides = {}) => ({
+            accordionName: name,
+            accordionPalette: 'Surface',
+            accordionLayout: layout,
+            accordionAlignment: 'stretch',
+            accordionPadding: tight ? '4px' : '8px',
+            accordionMargin: '0px',
+            accordionBorder: style.border,
+            accordionBoxShadow: elevationCss,
+            accordionExtra: 'max-width: 100vw; box-sizing: border-box;',
+            headerOpenPalette: 'Primary',
+            headerOpenType: 'H4',
+            headerOpenLayout: 'row wrap',
+            headerOpenAlignment: 'space-between',
+            headerOpenPadding: headerPad,
+            headerOpenMargin: '0px',
+            headerOpenBorder: 'none',
+            headerClosedPalette: 'Surface',
+            headerClosedType: 'H4',
+            headerClosedLayout: 'row wrap',
+            headerClosedAlignment: 'space-between',
+            headerClosedPadding: headerPad,
+            headerClosedMargin: tight ? '4px' : '6px',
+            headerClosedBorder: style.border,
+            headerClosedBoxShadow: elevationCss,
+            ...overrides,
+        });
+        const primaryBg = this.bgOf(palette, 'Primary');
+        return [
+            make('base'),
+            // Hierarchical levels — palette walks deeper at each level
+            make('Level 1', { accordionPalette: hierarchy[0], headerOpenPalette: hierarchy[0], headerClosedPalette: hierarchy[0] }),
+            make('Level 2', { accordionPalette: hierarchy[1], headerOpenPalette: hierarchy[1], headerClosedPalette: hierarchy[1], headerClosedMargin: '4px 0px 4px 12px' }),
+            make('Level 3', { accordionPalette: hierarchy[2], headerOpenPalette: hierarchy[2], headerClosedPalette: hierarchy[2], headerClosedMargin: '4px 0px 4px 24px' }),
+            make('Level 4', { accordionPalette: hierarchy[3], headerOpenPalette: hierarchy[3], headerClosedPalette: hierarchy[3], headerClosedMargin: '4px 0px 4px 36px' }),
+            // Minimal — compact, no shadow
+            make('Minimal', {
+                accordionPadding: '0px',
+                accordionMargin: '0px',
+                accordionBorder: 'none',
+                accordionBoxShadow: 'none',
+                headerOpenType: 'label',
+                headerClosedType: 'label',
+                headerOpenPadding: '4px 8px',
+                headerClosedPadding: '4px 8px',
+                headerClosedBoxShadow: 'none',
+            }),
+            // Settings — full-width
+            make('Settings', {
+                accordionPalette: 'Secondary',
+                accordionWidth: '100vw',
+                accordionPadding: '0px',
+                accordionMargin: '0px',
+                accordionAlignment: "center",
+                headerOpenWidth: '100vw',
+                headerClosedWidth: '100vw',
+            }),
+            // Object — structured data accordion
+            make('Object', {
+                accordionAlignment: 'space-evenly',
+                headerOpenPalette: 'Accent',
+                headerClosedPalette: 'Surface',
+                headerClosedBoxShadow: 'inset -2px 0px 7px 6px rgba(170,170,170,0.6)',
+            }),
+            // Media Details
+            make('Media Details', {
+                accordionPalette: 'Surface',
+                headerOpenType: 'body',
+                headerClosedType: 'body',
+            }),
+            // Docs
+            make('Docs', {
+                accordionPalette: 'Surface',
+                accordionAlignment: 'space-evenly',
+                headerOpenType: 'H3',
+                headerClosedType: 'H3',
+                headerClosedPadding: '12px',
+                headerClosedMargin: '12px',
+            }),
+            // Create
+            make('Create', {
+                accordionWidth: 'fit-content',
+                accordionAlignment: 'left',
+                accordionPalette: 'Accent',
+                accordionPadding: '4px',
+                accordionMargin: '0px',
+                headerOpenType: 'label',
+                headerClosedType: 'H5',
+                headerOpenPadding: '0px',
+                headerClosedPadding: '4px',
+                headerClosedAlignment: 'left',
+                headerClosedMargin: '0px',
+            }),
+            // TeamChat
+            make('TeamChat', {
+                accordionWidth: 'auto',
+                accordionPalette: 'Secondary',
+                headerOpenPadding: '12px',
+                headerClosedPadding: '12px',
+                headerOpenWidth: 'auto',
+                headerClosedWidth: 'auto',
+                headerClosedBorder: '1px solid rgba(0,0,0,0.2)',
+            }),
+            // Style
+            make('Style', {
+                accordionWidth: '100vw',
+                accordionAlignment: 'space-evenly',
+                accordionPalette: 'Accent',
+                headerOpenType: 'label',
+                headerClosedType: 'label',
+            }),
+            // Share
+            make('Share', {
+                accordionWidth: '100vw',
+                accordionAlignment: 'space-evenly',
+                accordionPalette: 'Secondary',
+                headerOpenPalette: 'Secondary',
+                headerClosedPalette: 'Secondary',
+                headerOpenType: 'label',
+                headerClosedType: 'label',
+            }),
+            // UI
+            make('UI', {
+                accordionPalette: 'Accent',
+                accordionPadding: '0px',
+                accordionMargin: '0px',
+                headerOpenType: 'label',
+                headerClosedType: 'H5',
+                headerClosedPadding: '12px 30px',
+                headerOpenPadding: '6px 12px',
+                headerClosedBoxShadow: 'rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset',
+            }),
+            // Chat Bots
+            make('Chat Bots', {
+                accordionPalette: 'Muted',
+            }),
+            // LabelBox tools — each has a distinct tinted border
+            // Primary app views
+            make('Team', {
+                accordionPalette: 'Primary',
+                accordionAlignment: 'space-evenly',
+                accordionPadding: '0px',
+                accordionMargin: '0px',
+                headerClosedType: 'title',
+            }),
+            make('Sheet', {
+                accordionPalette: 'Surface',
+                headerOpenType: 'H4',
+                headerClosedType: 'H4',
+            }),
+            make('App', {
+                accordionPalette: 'Primary',
+                accordionAlignment: 'center',
+                headerOpenType: 'title',
+                headerClosedType: 'title',
+            }),
+            make('Report', {
+                accordionPalette: 'Surface',
+                accordionLayout: 'column',
+                headerOpenType: 'H3',
+                headerClosedType: 'H3',
+                headerClosedBoxShadow: `inset 0 -1px 0 ${primaryBg}`,
+            }),
+        ];
+    }
+    // ────────────────────────────────────────────────────────────────────────
+    // Classes — color-blue, justifyRight
+    // ────────────────────────────────────────────────────────────────────────
+    buildClasses() {
+        return [
+            { className: 'color-blue', class: 'color: blue;' },
+            { className: 'justifyRight', class: 'justify-content: flex-end;\njustify-self: flex-end;' },
+        ];
+    }
+    capitalize(s) {
+        return s.charAt(0).toUpperCase() + s.slice(1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ThemeGeneratorComponent, isStandalone: true, selector: "faster-theme-generator", inputs: { themeStyle: "themeStyle", purpose: "purpose", palette: "palette", layout: "layout", elevation: "elevation", textShadow: "textShadow", name: "name", showPreview: "showPreview", responsiveStandardWidth: "responsiveStandardWidth", responsiveFontSizeMin: "responsiveFontSizeMin", responsiveFontSizeMax: "responsiveFontSizeMax", responsiveMarginMin: "responsiveMarginMin", responsiveMarginMax: "responsiveMarginMax", responsivePaddingMin: "responsivePaddingMin", responsivePaddingMax: "responsivePaddingMax" }, outputs: { themeGenerated: "themeGenerated" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="ntg-root" *ngIf="showPreview && theme">
+      <div class="ntg-header">
+        <strong>{{ theme.name }}</strong>
+        <span class="ntg-meta">{{ themeStyle }} · {{ purpose }}</span>
+      </div>
+      <div class="ntg-swatches">
+        <span
+          *ngFor="let p of theme.palette"
+          class="ntg-swatch"
+          [title]="p.colorName"
+          [style.background]="resolveSwatch(p)"
+        ></span>
+      </div>
+    </div>
+  `, isInline: true, styles: [".ntg-root{font-family:system-ui,sans-serif;padding:8px 12px;border:1px solid rgba(0,0,0,.1);border-radius:6px;display:inline-flex;flex-direction:column;gap:6px}.ntg-header{display:flex;gap:8px;align-items:baseline}.ntg-meta{font-size:11px;opacity:.6;text-transform:capitalize}.ntg-swatches{display:flex;gap:4px}.ntg-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ThemeGeneratorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'faster-theme-generator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ntg-root" *ngIf="showPreview && theme">
+      <div class="ntg-header">
+        <strong>{{ theme.name }}</strong>
+        <span class="ntg-meta">{{ themeStyle }} · {{ purpose }}</span>
+      </div>
+      <div class="ntg-swatches">
+        <span
+          *ngFor="let p of theme.palette"
+          class="ntg-swatch"
+          [title]="p.colorName"
+          [style.background]="resolveSwatch(p)"
+        ></span>
+      </div>
+    </div>
+  `, styles: [".ntg-root{font-family:system-ui,sans-serif;padding:8px 12px;border:1px solid rgba(0,0,0,.1);border-radius:6px;display:inline-flex;flex-direction:column;gap:6px}.ntg-header{display:flex;gap:8px;align-items:baseline}.ntg-meta{font-size:11px;opacity:.6;text-transform:capitalize}.ntg-swatches{display:flex;gap:4px}.ntg-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}\n"] }]
+        }], propDecorators: { themeStyle: [{
+                type: Input
+            }], purpose: [{
+                type: Input
+            }], palette: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], elevation: [{
+                type: Input
+            }], textShadow: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], showPreview: [{
+                type: Input
+            }], responsiveStandardWidth: [{
+                type: Input
+            }], responsiveFontSizeMin: [{
+                type: Input
+            }], responsiveFontSizeMax: [{
+                type: Input
+            }], responsiveMarginMin: [{
+                type: Input
+            }], responsiveMarginMax: [{
+                type: Input
+            }], responsivePaddingMin: [{
+                type: Input
+            }], responsivePaddingMax: [{
+                type: Input
+            }], themeGenerated: [{
+                type: Output
+            }] } });
+
+// Shared theme types for the Angular service and the framework-agnostic
+// client. Defined locally (not imported from platform-object.service) so a
+// published package has no internal cross-file dependencies.
+
+/*
+ * Public API Surface of faster-themes
+ */
+/* Napkin Tools */
+/*
+export * from './lib/napkin-tools/napkin-tools.module';
+export * from './lib/napkin-tools/button/button-component';
+export * from './lib/napkin-tools/nField.directive';
+*/
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionContent, AccordionHeader, AccordionItem, AccordionTitle, FasterThemesComponent, FasterThemesModule, FasterThemesService, RippleDirective, THEME_API_BASE_URL, ThemeGeneratorComponent, ThemeService, TogglePipe, nButtonDirective, nClassDirective, nColorDirective, nContainerDirective, nTypeDirective };
+//# sourceMappingURL=fasteros-themes.mjs.map