@nucleus-suite-pe/core 0.7.0 → 1.1.0

package/fesm2022/nucleus-suite-pe-core.mjs

@@ -1,47 +1,47 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injector, signal, computed, Injectable, effect, model, input, untracked, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, output, TemplateRef, Directive, contentChildren } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injector, signal, computed, Injectable, effect, DestroyRef, ElementRef, input, Directive, model, untracked, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild, output, afterNextRender, TemplateRef, contentChildren } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpErrorResponse } from '@angular/common/http';
 import { firstValueFrom, catchError, throwError, from, switchMap } from 'rxjs';
-import * as i6 from '@angular/forms';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1 from 'primeng/select';
+import * as i2 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { definePreset } from '@primeuix/themes';
 import Lara from '@primeuix/themes/lara';
 import { providePrimeNG } from 'primeng/config';
+import * as i1$1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import { RouterLink, Router } from '@angular/router';
 import { ConfirmationService, MessageService } from 'primeng/api';
-import * as i1$1 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import * as i2 from 'primeng/inputtext';
+import * as i2$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i4 from 'primeng/textarea';
+import * as i3 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import * as i2$2 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i5 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i5 from 'primeng/toggleswitch';
+import * as i6 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i1$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i2$1 from 'primeng/table';
+import * as i3$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i3 from 'primeng/tag';
+import * as i4 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i4$1 from 'primeng/tooltip';
+import * as i5$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { Router } from '@angular/router';
 import * as i1$3 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i2$2 from 'primeng/breadcrumb';
+import * as i2$3 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i4$2 from 'primeng/confirmdialog';
+import * as i4$1 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i5$1 from 'primeng/toast';
+import * as i5$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i6$1 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
-import * as i7 from 'primeng/listbox';
-import { ListboxModule } from 'primeng/listbox';
-import * as i8 from 'primeng/popover';
-import { PopoverModule } from 'primeng/popover';
 
 const NUCLEUS_CONFIG = new InjectionToken('NUCLEUS_CONFIG');
 const CONFIG_URL = 'config.json';
@@ -225,6 +225,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const COMMON_COPY = {
+    es: {
+        search: 'Buscar',
+        choose: 'Selecciona',
+        noIcon: 'Sin icono',
+        noColor: 'Sin color',
+        searchIcon: 'Busca un icono',
+        noMatches: 'Ningún icono coincide',
+        sessionExpired: 'Tu sesión expiró. Vuelve a iniciar sesión.',
+        errorNetwork: 'No se pudo conectar con el servidor. Revisa tu conexión o inténtalo en unos minutos.',
+        errorTimeout: 'El servidor tardó demasiado en responder. Inténtalo de nuevo.',
+        errorServer: 'Algo falló en el servidor y no pudimos completar la operación. Inténtalo de nuevo en unos ' +
+            'minutos; si sigue pasando, avísale al equipo.',
+        errorInvalid: 'Revisa los datos: hay algo que no es válido.',
+        errorForbidden: 'No tienes permiso para hacer esto.',
+        errorNotFound: 'No encontramos lo que buscabas. Puede que ya no exista.',
+        errorConflict: 'Ese cambio choca con algo que ya existe.',
+        errorUnknown: 'No se pudo completar la operación. Inténtalo de nuevo.',
+    },
+    en: {
+        search: 'Search',
+        choose: 'Select',
+        noIcon: 'No icon',
+        noColor: 'No colour',
+        searchIcon: 'Search an icon',
+        noMatches: 'No icon matches',
+        sessionExpired: 'Your session expired. Sign in again.',
+        errorNetwork: 'Could not reach the server. Check your connection or try again in a moment.',
+        errorTimeout: 'The server took too long to answer. Try again.',
+        errorServer: 'Something broke on the server and we could not finish. Try again in a few minutes; if it ' +
+            'keeps happening, tell the team.',
+        errorInvalid: 'Check the data: something is not valid.',
+        errorForbidden: 'You do not have permission to do this.',
+        errorNotFound: 'We could not find that. It may no longer exist.',
+        errorConflict: 'That change clashes with something that already exists.',
+        errorUnknown: 'We could not finish the operation. Try again.',
+    },
+};
+function commonCopyOf(lang) {
+    return lang === 'en' ? COMMON_COPY.en : COMMON_COPY.es;
+}
+
+const NUCLEUS_LANGS = ['es', 'en'];
+const STORAGE_KEY$3 = 'nucleus_lang';
+function isLang(value) {
+    return value === 'es' || value === 'en';
+}
+function readStored$2() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY$3);
+        if (isLang(stored))
+            return stored;
+    }
+    catch { }
+    return 'es';
+}
+let current = readStored$2();
+function nucleusLang() {
+    return current;
+}
+class NucleusLanguage {
+    _lang = signal(readStored$2(), ...(ngDevMode ? [{ debugName: "_lang" }] : /* istanbul ignore next */ []));
+    lang = this._lang.asReadonly();
+    constructor() {
+        effect(() => {
+            const lang = this._lang();
+            current = lang;
+            document.documentElement.lang = lang;
+            try {
+                localStorage.setItem(STORAGE_KEY$3, lang);
+            }
+            catch { }
+        });
+    }
+    setLang(lang) {
+        this._lang.set(lang);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLanguage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLanguage, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLanguage, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const SPOKEN = [400, 402, 403, 404, 409, 422];
+function problemOf(error) {
+    const body = error.error;
+    return body !== null && typeof body === 'object' ? body : null;
+}
+function fieldErrorsOf(problem) {
+    const groups = problem?.errors;
+    if (!groups)
+        return '';
+    return Object.values(groups)
+        .flat()
+        .map((message) => message.trim())
+        .filter(Boolean)
+        .join(' ');
+}
+function nucleusErrorMessage(error, lang) {
+    const copy = commonCopyOf(lang ?? nucleusLang());
+    if (!(error instanceof HttpErrorResponse))
+        return copy.errorUnknown;
+    const status = error.status;
+    if (status === 0)
+        return copy.errorNetwork;
+    if (status === 401)
+        return copy.sessionExpired;
+    if (status === 408 || status === 504)
+        return copy.errorTimeout;
+    if (SPOKEN.includes(status)) {
+        const problem = problemOf(error);
+        const fields = fieldErrorsOf(problem);
+        if (fields)
+            return fields;
+        const detail = problem?.detail?.trim() || problem?.title?.trim();
+        if (detail)
+            return detail;
+    }
+    if (status === 400 || status === 422)
+        return copy.errorInvalid;
+    if (status === 403)
+        return copy.errorForbidden;
+    if (status === 404)
+        return copy.errorNotFound;
+    if (status === 409)
+        return copy.errorConflict;
+    if (status >= 500)
+        return copy.errorServer;
+    return copy.errorUnknown;
+}
+
+const DEFAULT_TTL_MS = 30_000;
+class NucleusCache {
+    entries = new Map();
+    inFlight = new Map();
+    read(key, loader, ttlMs = DEFAULT_TTL_MS) {
+        const entry = this.entries.get(key);
+        if (entry && Date.now() - entry.at < ttlMs) {
+            return Promise.resolve(entry.value);
+        }
+        return this.load(key, loader);
+    }
+    prefetch(key, loader, ttlMs = DEFAULT_TTL_MS) {
+        const entry = this.entries.get(key);
+        if (entry && Date.now() - entry.at < ttlMs)
+            return;
+        if (this.inFlight.has(key))
+            return;
+        void this.load(key, loader).catch(() => undefined);
+    }
+    invalidate(...prefixes) {
+        if (prefixes.length === 0) {
+            this.entries.clear();
+            return;
+        }
+        for (const key of [...this.entries.keys()]) {
+            if (prefixes.some((prefix) => key.startsWith(prefix)))
+                this.entries.delete(key);
+        }
+    }
+    load(key, loader) {
+        const running = this.inFlight.get(key);
+        if (running)
+            return running;
+        const promise = loader()
+            .then((value) => {
+            this.entries.set(key, { at: Date.now(), value });
+            return value;
+        })
+            .finally(() => {
+            this.inFlight.delete(key);
+        });
+        this.inFlight.set(key, promise);
+        return promise;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCache, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCache, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCache, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const NO_PERMISSIONS = {
     canView: false,
     canInsert: false,
@@ -263,8 +448,10 @@ class SessionService {
     _me = signal(null, ...(ngDevMode ? [{ debugName: "_me" }] : /* istanbul ignore next */ []));
     _menu = signal([], ...(ngDevMode ? [{ debugName: "_menu" }] : /* istanbul ignore next */ []));
     _access = signal(null, ...(ngDevMode ? [{ debugName: "_access" }] : /* istanbul ignore next */ []));
+    _globalRole = signal(null, ...(ngDevMode ? [{ debugName: "_globalRole" }] : /* istanbul ignore next */ []));
     _scope = signal(null, ...(ngDevMode ? [{ debugName: "_scope" }] : /* istanbul ignore next */ []));
     _apps = signal([], ...(ngDevMode ? [{ debugName: "_apps" }] : /* istanbul ignore next */ []));
+    _catalog = signal([], ...(ngDevMode ? [{ debugName: "_catalog" }] : /* istanbul ignore next */ []));
     _siteId = signal(null, ...(ngDevMode ? [{ debugName: "_siteId" }] : /* istanbul ignore next */ []));
     _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
     _switching = signal(false, ...(ngDevMode ? [{ debugName: "_switching" }] : /* istanbul ignore next */ []));
@@ -277,11 +464,13 @@ class SessionService {
     access = this._access.asReadonly();
     scope = this._scope.asReadonly();
     apps = this._apps.asReadonly();
+    catalog = this._catalog.asReadonly();
+    currentApp = computed(() => this._catalog().find((app) => app.id.toLowerCase() === this.config.appId) ?? null, ...(ngDevMode ? [{ debugName: "currentApp" }] : /* istanbul ignore next */ []));
     siteId = this._siteId.asReadonly();
     loading = this._loading.asReadonly();
     switching = this._switching.asReadonly();
     error = this._error.asReadonly();
-    roleName = computed(() => this._access()?.roleName ?? null, ...(ngDevMode ? [{ debugName: "roleName" }] : /* istanbul ignore next */ []));
+    roleName = computed(() => this._access()?.roleName ?? this._globalRole(), ...(ngDevMode ? [{ debugName: "roleName" }] : /* istanbul ignore next */ []));
     siteName = computed(() => this._access()?.siteName ?? null, ...(ngDevMode ? [{ debugName: "siteName" }] : /* istanbul ignore next */ []));
     companies = computed(() => {
         const me = this._me();
@@ -337,12 +526,17 @@ class SessionService {
                 firstValueFrom(this.http.get(`${this.config.securityApiUrl}/apps`)),
             ]);
             this._me.set(me);
+            this._catalog.set([...catalog].sort((a, b) => a.sortOrder - b.sortOrder));
             this._apps.set(this.buildLauncher(catalog));
             await this.resolveMenu(me, language);
         }
         catch (error) {
             this._menu.set([]);
-            this._error.set(describe(error));
+            if (isSessionRejected(error)) {
+                await this.signOutToLanding();
+                return;
+            }
+            this._error.set(nucleusErrorMessage(error, this.language));
             console.error('[session] no se pudo cargar la sesión del backend', error);
         }
         finally {
@@ -350,6 +544,22 @@ class SessionService {
             this._loading.set(false);
         }
     }
+    async signOutToLanding() {
+        const landing = this.config.landingUrl;
+        this.loadedKey = null;
+        this._me.set(null);
+        this._access.set(null);
+        this._globalRole.set(null);
+        this._apps.set([]);
+        this._catalog.set([]);
+        if (!landing) {
+            this._error.set(commonCopyOf(this.language).sessionExpired);
+            return;
+        }
+        await this.sessionAuth.clear();
+        await this.auth?.signOut?.();
+        window.location.href = nucleusLogoutUrl(landing);
+    }
     permissionsFor(route) {
         return permissionsOf(findMenuByRoute(this._menu(), route));
     }
@@ -386,7 +596,11 @@ class SessionService {
             }
         }
         catch (error) {
-            this._error.set(describe(error));
+            if (isSessionRejected(error)) {
+                await this.signOutToLanding();
+                return;
+            }
+            this._error.set(nucleusErrorMessage(error, this.language));
             console.error('[session] no se pudo cambiar de sede', error);
         }
         finally {
@@ -401,12 +615,15 @@ class SessionService {
         const access = entries.find((entry) => entry.siteId === wanted) ?? entries[0] ?? null;
         if (access) {
             this._access.set(access);
+            this._globalRole.set(null);
             this._siteId.set(access.siteId);
             this._scope.set('site');
             this._menu.set(await this.siteMenu(access.siteId, language));
             return;
         }
+        const global = (me.globalAccess ?? []).find((entry) => entry.appId.toLowerCase() === this.config.appId);
         this._access.set(null);
+        this._globalRole.set(global?.roleName ?? null);
         this._siteId.set(wanted);
         this._scope.set('account');
         this._menu.set(await this.accountMenu(language));
@@ -439,52 +656,375 @@ function toOption(company, relation) {
         relation,
     };
 }
-function describe(error) {
-    if (error instanceof HttpErrorResponse) {
-        const problem = error.error;
-        return problem?.detail ?? problem?.title ?? `HTTP ${error.status}`;
+function isSessionRejected(error) {
+    return error instanceof HttpErrorResponse && (error.status === 401 || error.status === 403);
+}
+
+const DATE_LOCALES = {
+    es: 'es-PE',
+    en: 'en-US',
+};
+const NUMBER_LOCALE = 'es-PE';
+const DAY_MS = 86400000;
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+const MONEY = new Intl.NumberFormat(NUMBER_LOCALE, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const QTY = new Intl.NumberFormat(NUMBER_LOCALE, { maximumFractionDigits: 4 });
+const INTEGER = new Intl.NumberFormat(NUMBER_LOCALE, { maximumFractionDigits: 0 });
+const dates = new Map();
+function formatter(kind) {
+    const locale = DATE_LOCALES[nucleusLang()];
+    const key = `${kind}:${locale}`;
+    const cached = dates.get(key);
+    if (cached)
+        return cached;
+    const options = kind === 'date'
+        ? { day: '2-digit', month: 'short', year: 'numeric' }
+        : kind === 'stamp'
+            ? { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }
+            : { hour: '2-digit', minute: '2-digit' };
+    const built = new Intl.DateTimeFormat(locale, options);
+    dates.set(key, built);
+    return built;
+}
+function nucleusParseDate(value) {
+    if (!value)
+        return null;
+    if (DATE_ONLY.test(value)) {
+        const [year, month, day] = value.split('-').map(Number);
+        return new Date(year, month - 1, day);
+    }
+    const parsed = new Date(value);
+    return Number.isNaN(parsed.valueOf()) ? null : parsed;
+}
+function money(value) {
+    return value === null || value === undefined ? '' : MONEY.format(value);
+}
+function signedMoney(value) {
+    if (value === null || value === undefined)
+        return '';
+    return value > 0 ? `+${MONEY.format(value)}` : MONEY.format(value);
+}
+function qty(value) {
+    return value === null || value === undefined ? '' : QTY.format(value);
+}
+function integer(value) {
+    return value === null || value === undefined ? '' : INTEGER.format(value);
+}
+function percent(value) {
+    return value === null || value === undefined ? '' : `${MONEY.format(value)}%`;
+}
+function day(value) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? formatter('date').format(parsed) : '';
+}
+function stamp(value) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? formatter('stamp').format(parsed) : '';
+}
+function clock(value) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? formatter('clock').format(parsed) : '';
+}
+function minutesAsClock(value) {
+    if (value === null || value === undefined)
+        return '';
+    const total = Math.max(Math.trunc(value), 0);
+    const hours = Math.trunc(total / 60);
+    const minutes = total % 60;
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+function isoDay(value) {
+    const parsed = typeof value === 'string' || value === null || value === undefined
+        ? nucleusParseDate(value)
+        : value;
+    if (!parsed)
+        return '';
+    const year = parsed.getFullYear();
+    const month = String(parsed.getMonth() + 1).padStart(2, '0');
+    const date = String(parsed.getDate()).padStart(2, '0');
+    return `${year}-${month}-${date}`;
+}
+function toNumber(value) {
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function shiftDay(value, days) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? isoDay(new Date(parsed.valueOf() + days * DAY_MS)) : '';
+}
+function isToday(value) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? isoDay(parsed) === isoDay(new Date()) : false;
+}
+function isBeforeToday(value) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? isoDay(parsed) < isoDay(new Date()) : false;
+}
+function isOnOrBeforeToday(value) {
+    const parsed = nucleusParseDate(value);
+    return parsed ? isoDay(parsed) <= isoDay(new Date()) : false;
+}
+function startOfDayUtc(value) {
+    return `${isoDay(nucleusParseDate(value))}T00:00:00.000Z`;
+}
+function endOfDayUtc(value) {
+    return `${isoDay(nucleusParseDate(value))}T23:59:59.999Z`;
+}
+
+const FIELD_TARGETS = [
+    'input:not([type="hidden"]):not([disabled])',
+    'textarea:not([disabled])',
+    'select:not([disabled])',
+    '[role="combobox"]:not([aria-disabled="true"])',
+].join(',');
+const TEXTUAL = ['text', 'email', 'password', 'number', 'search', 'tel', 'url'];
+function isReachable(element) {
+    return element.tabIndex >= 0 && element.offsetParent !== null;
+}
+function fieldsIn(root) {
+    return Array.from(root.querySelectorAll(FIELD_TARGETS)).filter(isReachable);
+}
+function moveTo(element) {
+    element.focus({ preventScroll: true });
+    if (element instanceof HTMLInputElement && TEXTUAL.includes(element.type)) {
+        element.select();
     }
-    return 'Error desconocido';
 }
 
-const NUCLEUS_LANGS = ['es', 'en'];
-const STORAGE_KEY$1 = 'nucleus_lang';
-function isLang(value) {
-    return value === 'es' || value === 'en';
+const MODIFIERS = ['ctrl', 'alt', 'shift'];
+const ALIASES = {
+    cmd: 'ctrl',
+    meta: 'ctrl',
+    command: 'ctrl',
+    control: 'ctrl',
+    option: 'alt',
+    esc: 'escape',
+    ' ': 'space',
+};
+function normalizeKeys(keys) {
+    const parts = keys
+        .toLowerCase()
+        .split('+')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .map((part) => ALIASES[part] ?? part);
+    const modifiers = MODIFIERS.filter((modifier) => parts.includes(modifier));
+    const rest = parts.filter((part) => !MODIFIERS.includes(part));
+    return [...modifiers, ...rest].join('+');
 }
-function readStored() {
+function comboOf(event) {
+    const key = event.key.toLowerCase();
+    const parts = [];
+    if (event.ctrlKey || event.metaKey)
+        parts.push('ctrl');
+    if (event.altKey)
+        parts.push('alt');
+    if (event.shiftKey && key.length > 1)
+        parts.push('shift');
+    parts.push(ALIASES[key] ?? key);
+    return parts.join('+');
+}
+function hasModifier(keys) {
+    return keys.startsWith('ctrl+') || keys.startsWith('alt+');
+}
+function isTypingTarget(target) {
+    const element = target;
+    if (!element || typeof element.tagName !== 'string')
+        return false;
+    if (element.isContentEditable)
+        return true;
+    return ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName);
+}
+function isApplePlatform() {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+}
+const DISPLAY = {
+    escape: 'Esc',
+    enter: 'Enter',
+    space: 'Espacio',
+    arrowup: '↑',
+    arrowdown: '↓',
+    arrowleft: '←',
+    arrowright: '→',
+};
+function shortcutHint(keys) {
+    const apple = isApplePlatform();
+    return normalizeKeys(keys)
+        .split('+')
+        .map((part) => {
+        if (part === 'ctrl')
+            return apple ? '⌘' : 'Ctrl';
+        if (part === 'alt')
+            return apple ? '⌥' : 'Alt';
+        if (part === 'shift')
+            return apple ? '⇧' : 'Shift';
+        return DISPLAY[part] ?? part.toUpperCase();
+    })
+        .join(apple ? '' : '+');
+}
+const ARIA = {
+    ctrl: 'Control',
+    alt: 'Alt',
+    shift: 'Shift',
+    escape: 'Escape',
+    enter: 'Enter',
+    space: 'Space',
+};
+function ariaKeysOf(keys) {
+    return normalizeKeys(keys)
+        .split('+')
+        .map((part) => ARIA[part] ?? part.toUpperCase())
+        .join('+');
+}
+
+const MODAL_SELECTOR = '.p-drawer-mask, .p-dialog-mask, .p-overlay-mask';
+const STORAGE_KEY$2 = 'nucleus_shortcuts';
+function readStored$1() {
     try {
-        const stored = localStorage.getItem(STORAGE_KEY$1);
-        if (isLang(stored))
-            return stored;
+        return localStorage.getItem(STORAGE_KEY$2) !== 'off';
+    }
+    catch {
+        return true;
     }
-    catch { }
-    return 'es';
 }
-class NucleusLanguage {
-    _lang = signal(readStored(), ...(ngDevMode ? [{ debugName: "_lang" }] : /* istanbul ignore next */ []));
-    lang = this._lang.asReadonly();
+class NucleusShortcuts {
+    document = inject(DOCUMENT);
+    _bindings = signal([], ...(ngDevMode ? [{ debugName: "_bindings" }] : /* istanbul ignore next */ []));
+    _enabled = signal(readStored$1(), ...(ngDevMode ? [{ debugName: "_enabled" }] : /* istanbul ignore next */ []));
+    bindings = this._bindings.asReadonly();
+    enabled = this._enabled.asReadonly();
     constructor() {
-        effect(() => {
-            const lang = this._lang();
-            document.documentElement.lang = lang;
-            try {
-                localStorage.setItem(STORAGE_KEY$1, lang);
-            }
-            catch { }
-        });
+        const listener = (event) => this.handle(event);
+        this.document.addEventListener('keydown', listener);
+        inject(DestroyRef).onDestroy(() => this.document.removeEventListener('keydown', listener));
     }
-    setLang(lang) {
-        this._lang.set(lang);
+    setEnabled(enabled) {
+        this._enabled.set(enabled);
+        try {
+            localStorage.setItem(STORAGE_KEY$2, enabled ? 'on' : 'off');
+        }
+        catch { }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLanguage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLanguage, providedIn: 'root' });
+    register(binding) {
+        this._bindings.update((list) => [...list, binding]);
+        return () => this._bindings.update((list) => list.filter((entry) => entry !== binding));
+    }
+    handle(event) {
+        if (!this._enabled() || event.isComposing || event.repeat)
+            return;
+        const combo = comboOf(event);
+        const typing = isTypingTarget(event.target);
+        const blocked = this.document.querySelector(MODAL_SELECTOR) !== null;
+        const bindings = this._bindings();
+        for (let index = bindings.length - 1; index >= 0; index -= 1) {
+            const binding = bindings[index];
+            if (!binding || binding.keys !== combo)
+                continue;
+            if (typing && !binding.whileTyping)
+                continue;
+            if (blocked && !hasModifier(binding.keys))
+                continue;
+            event.preventDefault();
+            binding.run();
+            return;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShortcuts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShortcuts, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusLanguage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShortcuts, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+const CLICKABLE = 'button, a, input';
+class NucleusShortcut {
+    host = inject(ElementRef);
+    shortcuts = inject(NucleusShortcuts);
+    nucleusShortcut = input.required(...(ngDevMode ? [{ debugName: "nucleusShortcut" }] : /* istanbul ignore next */ []));
+    shortcutLabel = input('', ...(ngDevMode ? [{ debugName: "shortcutLabel" }] : /* istanbul ignore next */ []));
+    shortcutWhileTyping = input(null, ...(ngDevMode ? [{ debugName: "shortcutWhileTyping" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const keys = normalizeKeys(this.nucleusShortcut());
+            const label = this.shortcutLabel();
+            const whileTyping = this.shortcutWhileTyping() ?? hasModifier(keys);
+            this.host.nativeElement.setAttribute('aria-keyshortcuts', ariaKeysOf(keys));
+            const dispose = this.shortcuts.register({
+                keys,
+                label,
+                whileTyping,
+                run: () => this.press(),
+            });
+            onCleanup(dispose);
+        });
+    }
+    press() {
+        const element = this.host.nativeElement;
+        const target = element.matches(CLICKABLE)
+            ? element
+            : element.querySelector(CLICKABLE);
+        if (!target || target.hasAttribute('disabled'))
+            return;
+        target.click();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: NucleusShortcut, isStandalone: true, selector: "[nucleusShortcut]", inputs: { nucleusShortcut: { classPropertyName: "nucleusShortcut", publicName: "nucleusShortcut", isSignal: true, isRequired: true, transformFunction: null }, shortcutLabel: { classPropertyName: "shortcutLabel", publicName: "shortcutLabel", isSignal: true, isRequired: false, transformFunction: null }, shortcutWhileTyping: { classPropertyName: "shortcutWhileTyping", publicName: "shortcutWhileTyping", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShortcut, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nucleusShortcut]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { nucleusShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "nucleusShortcut", required: true }] }], shortcutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcutLabel", required: false }] }], shortcutWhileTyping: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcutWhileTyping", required: false }] }] } });
+
+const SCOPES = 'nucleus-card, form, .p-drawer-content';
+const ACTIONS = '.actions button:not([disabled]), .drawer-actions button:not([disabled])';
+class NucleusEnterAdvance {
+    host = inject(ElementRef);
+    onKeyDown(event) {
+        if (event.key !== 'Enter' || event.isComposing)
+            return;
+        if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
+            return;
+        const source = event.target;
+        if (!source || source.tagName === 'TEXTAREA')
+            return;
+        if (source.getAttribute('aria-expanded') === 'true')
+            return;
+        const scope = this.scope();
+        const targets = fieldsIn(scope);
+        const index = targets.indexOf(source);
+        if (index === -1)
+            return;
+        event.preventDefault();
+        const next = targets[index + 1];
+        if (next) {
+            moveTo(next);
+            return;
+        }
+        scope.querySelector(ACTIONS)?.focus();
+    }
+    scope() {
+        const element = this.host.nativeElement;
+        return element.closest(SCOPES) ?? element;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusEnterAdvance, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: NucleusEnterAdvance, isStandalone: true, selector: "[nucleusEnterAdvance]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusEnterAdvance, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nucleusEnterAdvance]',
+                    host: { '(keydown)': 'onKeyDown($event)' },
+                }]
+        }] });
+
 const EMPTY_GEO_VALUE = { countryId: null, divisionId: null };
 function flagOf(code) {
     if (code.length !== 2)
@@ -495,8 +1035,6 @@ function flagOf(code) {
 const GEO_COPY = {
     es: {
         country: 'País',
-        choose: 'Selecciona',
-        search: 'Buscar',
         levels: ['Región', 'Provincia', 'Distrito', 'Zona'],
         kinds: {
             department: 'Departamento',
@@ -525,8 +1063,6 @@ const GEO_COPY = {
     },
     en: {
         country: 'Country',
-        choose: 'Select',
-        search: 'Search',
         levels: ['Region', 'Province', 'District', 'Area'],
         kinds: {
             department: 'Department',
@@ -622,6 +1158,7 @@ class NucleusGeoSelect {
     countries = signal([], ...(ngDevMode ? [{ debugName: "countries" }] : /* istanbul ignore next */ []));
     steps = signal([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     labels = computed(() => geoCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    words = computed(() => commonCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []));
     syncedKey = null;
     constructor() {
         effect(() => {
@@ -701,8 +1238,9 @@ class NucleusGeoSelect {
         this.steps.set(built);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusGeoSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusGeoSelect, isStandalone: true, selector: "nucleus-geo-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusGeoSelect, isStandalone: true, selector: "nucleus-geo-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, hostDirectives: [{ directive: NucleusEnterAdvance }], ngImport: i0, template: `
     @let copy = labels();
+    @let shared = words();
 
     <div class="ns-form-grid" [class]="gridClass()">
       <div class="ns-field is-span-1 is-size-md">
@@ -717,9 +1255,11 @@ class NucleusGeoSelect {
           [disabled]="readonly()"
           [filter]="true"
           filterBy="name"
-          [filterPlaceholder]="copy.search"
+          [filterPlaceholder]="shared.search"
+          [autofocusFilter]="true"
+          [resetFilterOnHide]="true"
           [showClear]="true"
-          [placeholder]="copy.choose"
+          [placeholder]="shared.choose"
           [ngModelOptions]="{ standalone: true }"
           fluid
         />
@@ -736,23 +1276,26 @@ class NucleusGeoSelect {
             [ngModel]="step.selectedId"
             (ngModelChange)="pick(index, $event)"
             [disabled]="readonly()"
-            [filter]="step.items.length > 12"
+            [filter]="true"
             filterBy="name"
-            [filterPlaceholder]="copy.search"
+            [filterPlaceholder]="shared.search"
+            [autofocusFilter]="true"
+            [resetFilterOnHide]="true"
             [showClear]="true"
-            [placeholder]="copy.choose"
+            [placeholder]="shared.choose"
             [ngModelOptions]="{ standalone: true }"
             fluid
           />
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusGeoSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'nucleus-geo-select', imports: [SelectModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'nucleus-geo-select', imports: [SelectModule, FormsModule], hostDirectives: [NucleusEnterAdvance], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @let copy = labels();
+    @let shared = words();
 
     <div class="ns-form-grid" [class]="gridClass()">
       <div class="ns-field is-span-1 is-size-md">
@@ -767,9 +1310,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [disabled]="readonly()"
           [filter]="true"
           filterBy="name"
-          [filterPlaceholder]="copy.search"
+          [filterPlaceholder]="shared.search"
+          [autofocusFilter]="true"
+          [resetFilterOnHide]="true"
           [showClear]="true"
-          [placeholder]="copy.choose"
+          [placeholder]="shared.choose"
           [ngModelOptions]="{ standalone: true }"
           fluid
         />
@@ -786,11 +1331,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [ngModel]="step.selectedId"
             (ngModelChange)="pick(index, $event)"
             [disabled]="readonly()"
-            [filter]="step.items.length > 12"
+            [filter]="true"
             filterBy="name"
-            [filterPlaceholder]="copy.search"
+            [filterPlaceholder]="shared.search"
+            [autofocusFilter]="true"
+            [resetFilterOnHide]="true"
             [showClear]="true"
-            [placeholder]="copy.choose"
+            [placeholder]="shared.choose"
             [ngModelOptions]="{ standalone: true }"
             fluid
           />
@@ -811,306 +1358,608 @@ function deepestOf(steps) {
     return null;
 }
 
-const THEMES = [
+const TEXT_CONTRAST = 4.5;
+const CONTROL_CONTRAST = 3;
+const DARK_INK = '#101014';
+const LIGHT_INK = '#ffffff';
+function relativeLuminance(hex) {
+    const channel = (offset) => {
+        const value = parseInt(hex.slice(offset, offset + 2), 16) / 255;
+        return value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);
+}
+function contrastRatio(foreground, background) {
+    const first = relativeLuminance(foreground);
+    const second = relativeLuminance(background);
+    return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
+}
+function readableOn(background) {
+    return contrastRatio(DARK_INK, background) >= contrastRatio(LIGHT_INK, background)
+        ? DARK_INK
+        : LIGHT_INK;
+}
+function mixHex(foreground, background, ratio) {
+    const amount = Math.min(Math.max(ratio, 0), 1);
+    const channel = (offset) => {
+        const front = parseInt(foreground.slice(offset, offset + 2), 16);
+        const back = parseInt(background.slice(offset, offset + 2), 16);
+        return Math.round(front * amount + back * (1 - amount))
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${channel(1)}${channel(3)}${channel(5)}`;
+}
+function meetsContrast(foreground, background, required) {
+    return contrastRatio(foreground, background) >= required;
+}
+function contrastIssue(scope, pair, foreground, background, required) {
+    const ratio = contrastRatio(foreground, background);
+    return ratio >= required ? null : { scope, pair, ratio, required };
+}
+
+const FRAMES = [
     {
         id: 'nucleus',
         scheme: 'dark',
-        swatch: '#7c6cf5',
         starfield: true,
+        accent: 'violet',
         tokens: {
-            bg: '#050508',
-            surface: '#0d0d15',
-            surfaceAlt: '#16161f',
-            text: '#ffffff',
-            textMuted: 'rgba(255, 255, 255, 0.6)',
-            border: 'rgba(255, 255, 255, 0.14)',
-            accent: '#7c6cf5',
-            onAccent: '#ffffff',
+            bg: '#16132b',
+            raised: '#241f42',
+            ink: '#ece9fb',
+            muted: '#9d95c6',
+            line: '#302a54',
+            glow: '#8c7ff0',
         },
     },
     {
-        id: 'light',
-        scheme: 'light',
-        swatch: '#f5f5f5',
+        id: 'midnight',
+        scheme: 'dark',
         starfield: false,
+        accent: 'blue',
         tokens: {
-            bg: '#ffffff',
-            surface: '#f5f5f5',
-            surfaceAlt: '#eeeeee',
-            text: '#1e1e1e',
-            textMuted: '#5a5a5a',
-            border: '#cccedb',
-            accent: '#0078d4',
-            onAccent: '#ffffff',
+            bg: '#131f33',
+            raised: '#1e2e48',
+            ink: '#e3ecfa',
+            muted: '#94a9c9',
+            line: '#2b3d5d',
+            glow: '#6ea8f0',
         },
     },
     {
-        id: 'dark',
+        id: 'ocean',
         scheme: 'dark',
-        swatch: '#1e1e1e',
         starfield: false,
+        accent: 'cyan',
         tokens: {
-            bg: '#1e1e1e',
-            surface: '#252526',
-            surfaceAlt: '#2d2d30',
-            text: '#f1f1f1',
-            textMuted: '#a0a0a0',
-            border: '#3f3f46',
-            accent: '#0097fb',
-            onAccent: '#ffffff',
+            bg: '#0d2a30',
+            raised: '#153c45',
+            ink: '#e0f2f4',
+            muted: '#8cb3b9',
+            line: '#1d4e58',
+            glow: '#4cc5e8',
         },
     },
     {
-        id: 'bubblegum',
-        scheme: 'light',
-        swatch: '#f7b8d4',
+        id: 'forest',
+        scheme: 'dark',
         starfield: false,
+        accent: 'green',
         tokens: {
-            bg: '#fff0f6',
-            surface: '#ffe0ed',
-            surfaceAlt: '#ffd0e4',
-            text: '#3d1029',
-            textMuted: '#8a4c6c',
-            border: '#f0aac9',
-            accent: '#d6337f',
-            onAccent: '#ffffff',
+            bg: '#122419',
+            raised: '#1d3526',
+            ink: '#e2f1e7',
+            muted: '#93b8a1',
+            line: '#28462f',
+            glow: '#5cc47f',
         },
     },
     {
-        id: 'cool-breeze',
-        scheme: 'light',
-        swatch: '#a8d5e8',
+        id: 'plum',
+        scheme: 'dark',
         starfield: false,
+        accent: 'rose',
         tokens: {
-            bg: '#eef7fb',
-            surface: '#dcecf5',
-            surfaceAlt: '#cbe2ef',
-            text: '#102a38',
-            textMuted: '#4a6b7d',
-            border: '#a5c9db',
-            accent: '#0f7ba8',
-            onAccent: '#ffffff',
+            bg: '#241330',
+            raised: '#341e43',
+            ink: '#f3e8f7',
+            muted: '#b596c3',
+            line: '#452851',
+            glow: '#cf7fdb',
         },
     },
     {
-        id: 'cool-slate',
+        id: 'ember',
         scheme: 'dark',
-        swatch: '#3b4a5c',
         starfield: false,
+        accent: 'red',
         tokens: {
-            bg: '#232b36',
-            surface: '#2c3644',
-            surfaceAlt: '#354152',
-            text: '#e6ecf4',
-            textMuted: '#9fb0c4',
-            border: '#44546a',
-            accent: '#5fa8e8',
-            onAccent: '#0b1118',
+            bg: '#2a1113',
+            raised: '#3d1b1f',
+            ink: '#f8e6e7',
+            muted: '#c9979c',
+            line: '#4d2429',
+            glow: '#f0797b',
         },
     },
     {
-        id: 'icy-mint',
-        scheme: 'light',
-        swatch: '#c4ece5',
+        id: 'sand',
+        scheme: 'dark',
         starfield: false,
+        accent: 'amber',
         tokens: {
-            bg: '#f0fbf8',
-            surface: '#dcf3ee',
-            surfaceAlt: '#c9eae3',
-            text: '#0d2f2a',
-            textMuted: '#4a706a',
-            border: '#a3d6cd',
-            accent: '#0d8f7d',
-            onAccent: '#ffffff',
+            bg: '#2b2415',
+            raised: '#3d3320',
+            ink: '#f6efdd',
+            muted: '#c2b18b',
+            line: '#4b3f28',
+            glow: '#e0a33a',
         },
     },
     {
-        id: 'juicy-plum',
+        id: 'slate',
         scheme: 'dark',
-        swatch: '#6b3a7a',
         starfield: false,
+        accent: 'blue',
         tokens: {
-            bg: '#2a1633',
-            surface: '#372042',
-            surfaceAlt: '#452a52',
-            text: '#f3e8f7',
-            textMuted: '#b795c4',
-            border: '#57366a',
-            accent: '#c86dd7',
-            onAccent: '#1a0d20',
+            bg: '#232b36',
+            raised: '#313c4b',
+            ink: '#e6ecf4',
+            muted: '#9fb0c4',
+            line: '#3d4a5b',
+            glow: '#6fb2ea',
         },
     },
     {
-        id: 'mango-paradise',
-        scheme: 'light',
-        swatch: '#f7c48a',
+        id: 'ink',
+        scheme: 'dark',
         starfield: false,
+        accent: 'blue',
         tokens: {
-            bg: '#fff6ec',
-            surface: '#ffe9d4',
-            surfaceAlt: '#ffdcbc',
-            text: '#3d2410',
-            textMuted: '#8a5f38',
-            border: '#f0c096',
-            accent: '#e07314',
-            onAccent: '#ffffff',
+            bg: '#101318',
+            raised: '#1b2129',
+            ink: '#edf0f4',
+            muted: '#97a1ae',
+            line: '#262d37',
+            glow: '#7fb3d9',
         },
     },
     {
-        id: 'moonlight-glow',
+        id: 'graphite',
         scheme: 'dark',
-        swatch: '#1f3a5f',
         starfield: false,
+        accent: 'violet',
         tokens: {
-            bg: '#131f33',
-            surface: '#1c2b45',
-            surfaceAlt: '#243657',
-            text: '#e3ecfa',
-            textMuted: '#94a9c9',
-            border: '#33496e',
-            accent: '#6ea8f0',
-            onAccent: '#0a1020',
+            bg: '#17171a',
+            raised: '#232327',
+            ink: '#eeeef0',
+            muted: '#9c9ca4',
+            line: '#2f2f35',
+            glow: '#b9b9c2',
         },
     },
     {
-        id: 'mystical-forest',
-        scheme: 'dark',
-        swatch: '#1f4a2e',
+        id: 'paper',
+        scheme: 'light',
         starfield: false,
+        accent: 'violet',
         tokens: {
-            bg: '#132419',
-            surface: '#1b3223',
-            surfaceAlt: '#24422e',
-            text: '#e4f2e8',
-            textMuted: '#93b7a0',
-            border: '#325a41',
-            accent: '#4caf70',
-            onAccent: '#0a1610',
+            bg: '#ffffff',
+            raised: '#f1f0f5',
+            ink: '#16151d',
+            muted: '#5e5c6b',
+            line: '#e3e2ea',
+            glow: '#5b4fd6',
         },
     },
     {
-        id: 'silky-pink',
+        id: 'mist',
         scheme: 'light',
-        swatch: '#f3c2d6',
         starfield: false,
+        accent: 'blue',
         tokens: {
-            bg: '#fdf2f7',
-            surface: '#fae3ed',
-            surfaceAlt: '#f6d3e2',
-            text: '#3a1626',
-            textMuted: '#87566a',
-            border: '#eeb4cb',
-            accent: '#c14b82',
-            onAccent: '#ffffff',
+            bg: '#eef1f6',
+            raised: '#e2e7ef',
+            ink: '#141a24',
+            muted: '#576274',
+            line: '#d3dae5',
+            glow: '#1160b8',
         },
     },
+];
+const CANVASES = [
     {
-        id: 'spicy-red',
-        scheme: 'dark',
-        swatch: '#8f1f24',
-        starfield: false,
+        id: 'light',
         tokens: {
-            bg: '#2a1113',
-            surface: '#3a181b',
-            surfaceAlt: '#4a1f23',
-            text: '#f8e6e7',
-            textMuted: '#c79398',
-            border: '#5f2a2f',
-            accent: '#e8555e',
-            onAccent: '#1a0809',
+            bg: '#edeff3',
+            surface: '#ffffff',
+            surfaceAlt: '#e2e6ed',
+            text: '#16151d',
+            textMuted: '#5a5f6b',
+            border: '#d3d8e1',
+        },
+        effects: {
+            shadowOne: '0 1px 2px rgb(16 20 30 / 6%), 0 2px 8px rgb(16 20 30 / 5%)',
+            shadowTwo: '0 4px 12px rgb(16 20 30 / 8%), 0 12px 32px rgb(16 20 30 / 7%)',
+            wash: 0.1,
+            washStrong: 0.18,
+            headerBg: '#d8dee8',
+            headerInk: '#39404e',
+            headerLine: '#bcc5d4',
+            danger: '#b02121',
+            success: '#136b35',
+            warning: '#8a5a00',
         },
     },
     {
-        id: 'sunny-day',
-        scheme: 'light',
-        swatch: '#efe4b0',
-        starfield: false,
+        id: 'dim',
+        tokens: {
+            bg: '#1b1a22',
+            surface: '#23222c',
+            surfaceAlt: '#2c2b37',
+            text: '#e9e8ef',
+            textMuted: '#a6a4b4',
+            border: '#383744',
+        },
+        effects: {
+            shadowOne: '0 1px 2px rgb(0 0 0 / 24%)',
+            shadowTwo: '0 10px 34px rgb(0 0 0 / 40%)',
+            wash: 0.09,
+            washStrong: 0.17,
+            headerBg: '#302f3d',
+            headerInk: '#c8c6d4',
+            headerLine: '#423f50',
+            danger: '#f0797b',
+            success: '#5bd98a',
+            warning: '#e0a33a',
+        },
+    },
+    {
+        id: 'dark',
         tokens: {
-            bg: '#fdf9e8',
-            surface: '#f7efd2',
-            surfaceAlt: '#f0e5bd',
-            text: '#332d10',
-            textMuted: '#736a38',
-            border: '#ddcf94',
-            accent: '#a8860b',
-            onAccent: '#ffffff',
+            bg: '#0e0d13',
+            surface: '#17161f',
+            surfaceAlt: '#211f2a',
+            text: '#f2f1f6',
+            textMuted: '#a09eb0',
+            border: '#2a2833',
+        },
+        effects: {
+            shadowOne: '0 1px 2px rgb(0 0 0 / 28%)',
+            shadowTwo: '0 10px 34px rgb(0 0 0 / 45%)',
+            wash: 0.08,
+            washStrong: 0.16,
+            headerBg: '#262433',
+            headerInk: '#c2c0ce',
+            headerLine: '#3a3745',
+            danger: '#f0797b',
+            success: '#5bd98a',
+            warning: '#e0a33a',
         },
     },
 ];
-const THEME_LABELS = {
+const ACCENTS = [
+    { id: 'violet', light: '#5b4fd6', dark: '#9b8ef5' },
+    { id: 'blue', light: '#1160b8', dark: '#6fb2f2' },
+    { id: 'cyan', light: '#0d6f87', dark: '#4cc5e8' },
+    { id: 'green', light: '#157a3c', dark: '#5bd98a' },
+    { id: 'lime', light: '#4d7c0f', dark: '#a3d94b' },
+    { id: 'amber', light: '#8a5a00', dark: '#e0a33a' },
+    { id: 'orange', light: '#b2430c', dark: '#f2934f' },
+    { id: 'rose', light: '#b21b5c', dark: '#f07aab' },
+    { id: 'red', light: '#b02121', dark: '#f0797b' },
+];
+const DENSITIES = [
+    { id: 'comfortable', scale: 1 },
+    { id: 'compact', scale: 0.72 },
+];
+const DEFAULT_APPEARANCE = {
+    frame: 'nucleus',
+    canvas: 'dark',
+    accent: 'auto',
+    density: 'comfortable',
+};
+const LEGACY_THEMES = {
+    nucleus: { frame: 'nucleus', canvas: 'dark', accent: 'auto' },
+    light: { frame: 'paper', canvas: 'light', accent: 'blue' },
+    dark: { frame: 'graphite', canvas: 'dark', accent: 'blue' },
+    bubblegum: { frame: 'plum', canvas: 'light', accent: 'rose' },
+    'cool-breeze': { frame: 'ocean', canvas: 'light', accent: 'cyan' },
+    'cool-slate': { frame: 'slate', canvas: 'dark', accent: 'blue' },
+    'icy-mint': { frame: 'ocean', canvas: 'light', accent: 'green' },
+    'juicy-plum': { frame: 'plum', canvas: 'dark', accent: 'rose' },
+    'mango-paradise': { frame: 'sand', canvas: 'light', accent: 'orange' },
+    'moonlight-glow': { frame: 'midnight', canvas: 'dark', accent: 'blue' },
+    'mystical-forest': { frame: 'forest', canvas: 'dark', accent: 'green' },
+    'silky-pink': { frame: 'plum', canvas: 'light', accent: 'rose' },
+    'spicy-red': { frame: 'ember', canvas: 'dark', accent: 'red' },
+    'sunny-day': { frame: 'sand', canvas: 'light', accent: 'amber' },
+    system: { frame: 'paper', canvas: 'system', accent: 'blue' },
+};
+const FRAME_BY_ID = new Map(FRAMES.map((frame) => [frame.id, frame]));
+const CANVAS_BY_ID = new Map(CANVASES.map((canvas) => [canvas.id, canvas]));
+const ACCENT_BY_ID = new Map(ACCENTS.map((accent) => [accent.id, accent]));
+const DENSITY_BY_ID = new Map(DENSITIES.map((density) => [density.id, density]));
+function frameById(id) {
+    return FRAME_BY_ID.get(id) ?? FRAME_BY_ID.get(DEFAULT_APPEARANCE.frame);
+}
+function canvasById(id) {
+    return CANVAS_BY_ID.get(id) ?? CANVAS_BY_ID.get('dark');
+}
+function accentById(id) {
+    return ACCENT_BY_ID.get(id) ?? ACCENT_BY_ID.get('violet');
+}
+function densityById(id) {
+    return DENSITY_BY_ID.get(id) ?? DENSITY_BY_ID.get('comfortable');
+}
+function isFrameId(value) {
+    return typeof value === 'string' && FRAME_BY_ID.has(value);
+}
+function isCanvasPreference(value) {
+    return value === 'system' || (typeof value === 'string' && CANVAS_BY_ID.has(value));
+}
+function isAccentPreference(value) {
+    return value === 'auto' || (typeof value === 'string' && ACCENT_BY_ID.has(value));
+}
+function isDensityId(value) {
+    return typeof value === 'string' && DENSITY_BY_ID.has(value);
+}
+function resolveAccent(frame, preference) {
+    return accentById(preference === 'auto' ? frame.accent : preference);
+}
+function accentOn(accent, canvas) {
+    return canvas === 'light' ? accent.light : accent.dark;
+}
+function isDarkCanvas(canvas) {
+    return canvas !== 'light';
+}
+function auditAppearance() {
+    const issues = [];
+    for (const canvas of CANVASES) {
+        const { bg, surface, surfaceAlt } = canvas.tokens;
+        const { danger, success, warning } = canvas.effects;
+        const scope = `semantic:${canvas.id}`;
+        for (const [name, color] of [
+            ['danger', danger],
+            ['success', success],
+            ['warning', warning],
+        ]) {
+            issues.push(contrastIssue(scope, `${name}/bg`, color, bg, TEXT_CONTRAST), contrastIssue(scope, `${name}/surface`, color, surface, TEXT_CONTRAST), contrastIssue(scope, `${name}/surfaceAlt`, color, surfaceAlt, TEXT_CONTRAST));
+        }
+    }
+    for (const frame of FRAMES) {
+        const { bg, raised, ink, muted, glow } = frame.tokens;
+        const scope = `frame:${frame.id}`;
+        issues.push(contrastIssue(scope, 'ink/bg', ink, bg, TEXT_CONTRAST), contrastIssue(scope, 'ink/raised', ink, raised, TEXT_CONTRAST), contrastIssue(scope, 'muted/bg', muted, bg, TEXT_CONTRAST), contrastIssue(scope, 'muted/raised', muted, raised, TEXT_CONTRAST), contrastIssue(scope, 'glow/bg', glow, bg, CONTROL_CONTRAST), contrastIssue(scope, 'glow/raised', glow, raised, CONTROL_CONTRAST), contrastIssue(scope, 'onGlow/glow', readableOn(glow), glow, TEXT_CONTRAST));
+    }
+    for (const canvas of CANVASES) {
+        const { bg, surface, surfaceAlt, text, textMuted } = canvas.tokens;
+        const scope = `canvas:${canvas.id}`;
+        issues.push(contrastIssue(scope, 'text/bg', text, bg, TEXT_CONTRAST), contrastIssue(scope, 'text/surface', text, surface, TEXT_CONTRAST), contrastIssue(scope, 'muted/bg', textMuted, bg, TEXT_CONTRAST), contrastIssue(scope, 'muted/surface', textMuted, surface, TEXT_CONTRAST), contrastIssue(scope, 'muted/surfaceAlt', textMuted, surfaceAlt, TEXT_CONTRAST));
+    }
+    for (const accent of ACCENTS) {
+        for (const canvas of CANVASES) {
+            const color = accentOn(accent, canvas.id);
+            const scope = `accent:${accent.id}/${canvas.id}`;
+            issues.push(contrastIssue(scope, 'accent/bg', color, canvas.tokens.bg, CONTROL_CONTRAST), contrastIssue(scope, 'accent/surface', color, canvas.tokens.surface, CONTROL_CONTRAST), contrastIssue(scope, 'accent/surfaceAlt', color, canvas.tokens.surfaceAlt, CONTROL_CONTRAST), contrastIssue(scope, 'onAccent/accent', readableOn(color), color, TEXT_CONTRAST));
+        }
+    }
+    return issues.filter((issue) => issue !== null);
+}
+
+const FRAMES_ES = {
     nucleus: 'Nucleus',
-    light: 'Light',
-    dark: 'Dark',
-    bubblegum: 'Bubblegum',
-    'cool-breeze': 'Cool Breeze',
-    'cool-slate': 'Cool Slate',
-    'icy-mint': 'Icy Mint',
-    'juicy-plum': 'Juicy Plum',
-    'mango-paradise': 'Mango Paradise',
-    'moonlight-glow': 'Moonlight Glow',
-    'mystical-forest': 'Mystical Forest',
-    'silky-pink': 'Silky Pink',
-    'spicy-red': 'Spicy Red',
-    'sunny-day': 'Sunny Day',
+    midnight: 'Medianoche',
+    ocean: 'Océano',
+    forest: 'Bosque',
+    plum: 'Ciruela',
+    ember: 'Brasa',
+    sand: 'Arena',
+    slate: 'Pizarra',
+    ink: 'Tinta',
+    graphite: 'Grafito',
+    paper: 'Papel',
+    mist: 'Bruma',
 };
-const DEFAULT_THEME = 'nucleus';
-const BY_ID = new Map(THEMES.map((theme) => [theme.id, theme]));
-function themeById(id) {
-    return BY_ID.get(id) ?? BY_ID.get(DEFAULT_THEME);
+const FRAMES_EN = {
+    nucleus: 'Nucleus',
+    midnight: 'Midnight',
+    ocean: 'Ocean',
+    forest: 'Forest',
+    plum: 'Plum',
+    ember: 'Ember',
+    sand: 'Sand',
+    slate: 'Slate',
+    ink: 'Ink',
+    graphite: 'Graphite',
+    paper: 'Paper',
+    mist: 'Mist',
+};
+const ACCENTS_ES = {
+    auto: 'Del marco',
+    violet: 'Violeta',
+    blue: 'Azul',
+    cyan: 'Cian',
+    green: 'Verde',
+    lime: 'Lima',
+    amber: 'Ámbar',
+    orange: 'Naranja',
+    rose: 'Rosa',
+    red: 'Rojo',
+};
+const ACCENTS_EN = {
+    auto: 'From the frame',
+    violet: 'Violet',
+    blue: 'Blue',
+    cyan: 'Cyan',
+    green: 'Green',
+    lime: 'Lime',
+    amber: 'Amber',
+    orange: 'Orange',
+    rose: 'Rose',
+    red: 'Red',
+};
+const THEME_COPY = {
+    es: {
+        title: 'Apariencia',
+        frameTitle: 'Marco',
+        frameHint: 'El color de la barra superior y del menú lateral.',
+        canvasTitle: 'Lienzo',
+        canvasHint: 'La superficie donde lees y escribes. Nunca se tiñe.',
+        accentTitle: 'Acción',
+        accentHint: 'El color del botón principal, del foco y de lo seleccionado.',
+        densityTitle: 'Densidad',
+        densityHint: 'Cuántas filas quieres ver de una sola pasada.',
+        frames: FRAMES_ES,
+        canvases: { light: 'Claro', dim: 'Atenuado', dark: 'Oscuro', system: 'Del sistema' },
+        accents: ACCENTS_ES,
+        densities: { comfortable: 'Cómoda', compact: 'Compacta' },
+    },
+    en: {
+        title: 'Appearance',
+        frameTitle: 'Frame',
+        frameHint: 'The color of the top bar and the side menu.',
+        canvasTitle: 'Canvas',
+        canvasHint: 'The surface where you read and type. Never tinted.',
+        accentTitle: 'Action',
+        accentHint: 'The color of the primary button, the focus ring and the selected row.',
+        densityTitle: 'Density',
+        densityHint: 'How many rows you want to see at a glance.',
+        frames: FRAMES_EN,
+        canvases: { light: 'Light', dim: 'Dim', dark: 'Dark', system: 'System' },
+        accents: ACCENTS_EN,
+        densities: { comfortable: 'Comfortable', compact: 'Compact' },
+    },
+};
+function themeCopyOf(lang) {
+    return THEME_COPY[lang] ?? THEME_COPY.es;
 }
-function isThemePreference(value) {
-    return value === 'system' || (typeof value === 'string' && BY_ID.has(value));
+function accentLabelOf(lang, id) {
+    return themeCopyOf(lang).accents[id];
 }
 
-const STORAGE_KEY = 'nucleus_theme';
-function readStoredPreference() {
+const STORAGE_KEY$1 = 'nucleus_appearance';
+const LEGACY_STORAGE_KEY = 'nucleus_theme';
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+function parseAppearance(raw) {
+    if (!raw)
+        return null;
     try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        if (isThemePreference(stored))
-            return stored;
+        const parsed = JSON.parse(raw);
+        return {
+            frame: isFrameId(parsed.frame) ? parsed.frame : DEFAULT_APPEARANCE.frame,
+            canvas: isCanvasPreference(parsed.canvas) ? parsed.canvas : DEFAULT_APPEARANCE.canvas,
+            accent: isAccentPreference(parsed.accent) ? parsed.accent : DEFAULT_APPEARANCE.accent,
+            density: isDensityId(parsed.density) ? parsed.density : DEFAULT_APPEARANCE.density,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+function migrateLegacy(raw) {
+    if (!raw)
+        return null;
+    const legacy = LEGACY_THEMES[raw];
+    return legacy ? { ...DEFAULT_APPEARANCE, ...legacy } : null;
+}
+function readStored() {
+    try {
+        const current = parseAppearance(localStorage.getItem(STORAGE_KEY$1));
+        if (current)
+            return current;
+        const migrated = migrateLegacy(localStorage.getItem(LEGACY_STORAGE_KEY));
+        if (migrated) {
+            localStorage.removeItem(LEGACY_STORAGE_KEY);
+            return migrated;
+        }
     }
     catch { }
-    return DEFAULT_THEME;
+    return DEFAULT_APPEARANCE;
 }
 function prefersDark() {
-    return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+    return globalThis.matchMedia?.(DARK_QUERY).matches ?? false;
 }
 class ThemeService {
-    _preference = signal(readStoredPreference(), ...(ngDevMode ? [{ debugName: "_preference" }] : /* istanbul ignore next */ []));
+    _appearance = signal(readStored(), ...(ngDevMode ? [{ debugName: "_appearance" }] : /* istanbul ignore next */ []));
     systemDark = signal(prefersDark(), ...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
-    preference = this._preference.asReadonly();
-    theme = computed(() => {
-        const preference = this._preference();
-        if (preference === 'system')
-            return themeById(this.systemDark() ? 'dark' : 'light');
-        return themeById(preference);
-    }, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    starfield = computed(() => this.theme().starfield, ...(ngDevMode ? [{ debugName: "starfield" }] : /* istanbul ignore next */ []));
+    appearance = this._appearance.asReadonly();
+    frame = computed(() => frameById(this._appearance().frame), ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+    canvasId = computed(() => {
+        const preference = this._appearance().canvas;
+        if (preference !== 'system')
+            return preference;
+        return this.systemCanvasId();
+    }, ...(ngDevMode ? [{ debugName: "canvasId" }] : /* istanbul ignore next */ []));
+    systemCanvasId = computed(() => (this.systemDark() ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "systemCanvasId" }] : /* istanbul ignore next */ []));
+    canvas = computed(() => canvasById(this.canvasId()), ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+    accent = computed(() => resolveAccent(this.frame(), this._appearance().accent), ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    accentColor = computed(() => accentOn(this.accent(), this.canvasId()), ...(ngDevMode ? [{ debugName: "accentColor" }] : /* istanbul ignore next */ []));
+    density = computed(() => densityById(this._appearance().density), ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    starfield = computed(() => this.frame().starfield && isDarkCanvas(this.canvasId()), ...(ngDevMode ? [{ debugName: "starfield" }] : /* istanbul ignore next */ []));
     constructor() {
         globalThis
-            .matchMedia?.('(prefers-color-scheme: dark)')
+            .matchMedia?.(DARK_QUERY)
             .addEventListener('change', (event) => this.systemDark.set(event.matches));
         effect(() => {
-            const preference = this._preference();
-            const theme = this.theme();
-            this.applyToDom(theme);
+            const appearance = this._appearance();
+            this.applyToDom();
             try {
-                localStorage.setItem(STORAGE_KEY, preference);
+                localStorage.setItem(STORAGE_KEY$1, JSON.stringify(appearance));
             }
             catch { }
         });
     }
-    setPreference(preference) {
-        this._preference.set(preference);
+    setFrame(frame) {
+        this.patch({ frame });
+    }
+    setCanvas(canvas) {
+        this.patch({ canvas });
+    }
+    setAccent(accent) {
+        this.patch({ accent });
+    }
+    setDensity(density) {
+        this.patch({ density });
+    }
+    reset() {
+        this._appearance.set(DEFAULT_APPEARANCE);
     }
-    applyToDom(theme) {
+    patch(change) {
+        this._appearance.update((appearance) => ({ ...appearance, ...change }));
+    }
+    applyToDom() {
         const root = document.documentElement;
-        for (const [name, value] of Object.entries(theme.tokens)) {
-            root.style.setProperty(`--ac-${name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`, value);
+        const frame = this.frame();
+        const canvas = this.canvas();
+        const accent = this.accentColor();
+        const density = this.density();
+        for (const [name, value] of Object.entries(frame.tokens)) {
+            root.style.setProperty(`--ns-frame-${kebab(name)}`, value);
+        }
+        root.style.setProperty('--ns-frame-on-glow', readableOn(frame.tokens.glow));
+        for (const [name, value] of Object.entries(canvas.tokens)) {
+            root.style.setProperty(`--ac-${kebab(name)}`, value);
         }
-        root.dataset['theme'] = theme.id;
-        root.classList.toggle('ns-dark', theme.scheme === 'dark');
-        root.style.colorScheme = theme.scheme;
+        root.style.setProperty('--ac-accent', accent);
+        root.style.setProperty('--ac-on-accent', readableOn(accent));
+        root.style.setProperty('--ns-shadow-1', canvas.effects.shadowOne);
+        root.style.setProperty('--ns-shadow-2', canvas.effects.shadowTwo);
+        root.style.setProperty('--ns-header-bg', canvas.effects.headerBg);
+        root.style.setProperty('--ns-header-ink', canvas.effects.headerInk);
+        root.style.setProperty('--ns-header-line', canvas.effects.headerLine);
+        root.style.setProperty('--ns-danger', canvas.effects.danger);
+        root.style.setProperty('--ns-success', canvas.effects.success);
+        root.style.setProperty('--ns-warning', canvas.effects.warning);
+        root.style.setProperty('--ns-accent-wash', mixHex(accent, canvas.tokens.surface, canvas.effects.wash));
+        root.style.setProperty('--ns-accent-wash-strong', mixHex(accent, canvas.tokens.surface, canvas.effects.washStrong));
+        root.style.setProperty('--ns-density', String(density.scale));
+        root.dataset['frame'] = frame.id;
+        root.dataset['canvas'] = canvas.id;
+        root.dataset['density'] = density.id;
+        root.classList.toggle('ns-dark', isDarkCanvas(canvas.id));
+        root.style.colorScheme = isDarkCanvas(canvas.id) ? 'dark' : 'light';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ThemeService, providedIn: 'root' });
@@ -1119,12 +1968,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
+function kebab(name) {
+    return name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
 
 const MASK = {
     background: 'rgba(0, 0, 0, 0.55)',
     color: 'var(--ac-text)',
 };
-const SHADOW = '0 10px 40px rgba(0, 0, 0, 0.45)';
+const SHADOW = 'var(--ns-shadow-2, 0 10px 40px rgb(0 0 0 / 45%))';
 const PANEL = {
     background: 'var(--ac-surface)',
     borderColor: 'var(--ac-border)',
@@ -1174,6 +2026,7 @@ const schemeTokens = {
         },
     },
     formField: {
+        paddingY: 'var(--ns-control-y, 0.55rem)',
         background: 'var(--ac-bg)',
         disabledBackground: 'var(--ac-surface-alt)',
         filledBackground: 'var(--ac-surface-alt)',
@@ -1279,9 +2132,9 @@ class NucleusLordicon {
     size = input(48, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     tone = input('accent', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     colors = computed(() => {
-        const theme = this.themes.theme();
-        const primary = this.tone() === 'danger' ? '#e8555e' : theme.tokens.accent;
-        return `primary:${primary},secondary:${theme.tokens.text}`;
+        const canvas = this.themes.canvas();
+        const primary = this.tone() === 'danger' ? canvas.effects.danger : this.themes.accentColor();
+        return `primary:${primary},secondary:${canvas.tokens.text}`;
     }, ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
     constructor() {
         void loadLordicon();
@@ -1316,8 +2169,23 @@ class NucleusCard {
     heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
     subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     size = input('full', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    skeletonRows = input(4, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    static widths = [
+        ['46%', '22%'],
+        ['62%', '17%'],
+        ['38%', '25%'],
+        ['54%', '19%'],
+        ['44%', '23%'],
+        ['58%', '16%'],
+    ];
+    placeholders = computed(() => Array.from({ length: Math.max(this.skeletonRows(), 1) }, (_, index) => ({
+        index,
+        left: NucleusCard.widths[index % NucleusCard.widths.length][0],
+        right: NucleusCard.widths[index % NucleusCard.widths.length][1],
+    })), ...(ngDevMode ? [{ debugName: "placeholders" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusCard, isStandalone: true, selector: "nucleus-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusCard, isStandalone: true, selector: "nucleus-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, ngImport: i0, template: `
     @if (heading() || subtitle()) {
       <div class="head">
         @if (heading()) {
@@ -1329,16 +2197,29 @@ class NucleusCard {
       </div>
     }
 
-    <ng-content />
+    @if (loading()) {
+      <div class="skeleton-rows">
+        @for (row of placeholders(); track row.index) {
+          <div class="skeleton-row">
+            <p-skeleton height="13px" [width]="row.left" />
+            <p-skeleton height="12px" [width]="row.right" />
+          </div>
+        }
+      </div>
+    }
+
+    <div class="body" [style.display]="loading() ? 'none' : null">
+      <ng-content />
+    </div>
 
     <div class="actions">
       <ng-content select="[nucleusCardActions]" />
     </div>
-  `, isInline: true, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:color-mix(in srgb,var(--ac-surface) 70%,transparent)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.body{display:contents}.skeleton-rows{display:grid}.skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ac-border) 60%,transparent)}.skeleton-row:last-child{border-bottom:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCard, decorators: [{
             type: Component,
-            args: [{ selector: 'nucleus-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-size]': 'size()' }, template: `
+            args: [{ selector: 'nucleus-card', imports: [SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-size]': 'size()' }, template: `
     @if (heading() || subtitle()) {
       <div class="head">
         @if (heading()) {
@@ -1350,13 +2231,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       </div>
     }
 
-    <ng-content />
+    @if (loading()) {
+      <div class="skeleton-rows">
+        @for (row of placeholders(); track row.index) {
+          <div class="skeleton-row">
+            <p-skeleton height="13px" [width]="row.left" />
+            <p-skeleton height="12px" [width]="row.right" />
+          </div>
+        }
+      </div>
+    }
+
+    <div class="body" [style.display]="loading() ? 'none' : null">
+      <ng-content />
+    </div>
 
     <div class="actions">
       <ng-content select="[nucleusCardActions]" />
     </div>
-  `, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:color-mix(in srgb,var(--ac-surface) 70%,transparent)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"] }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+  `, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);box-shadow:var(--ns-shadow-1)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.body{display:contents}.skeleton-rows{display:grid}.skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ac-border) 60%,transparent)}.skeleton-row:last-child{border-bottom:0}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }] } });
+
+class NucleusMetrics {
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMetrics, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: NucleusMetrics, isStandalone: true, selector: "nucleus-metrics", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(var(--ns-metric-min, 210px),1fr))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMetrics, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-metrics', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content />', styles: [":host{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(var(--ns-metric-min, 210px),1fr))}\n"] }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+class NucleusMetric {
+    group = inject(NucleusMetrics, { optional: true });
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    link = input('', ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+    tone = input('plain', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    loading = input(null, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    busy = computed(() => this.loading() ?? this.group?.loading() ?? false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMetric, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusMetric, isStandalone: true, selector: "nucleus-metric", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-tone": "tone() === 'accent' ? 'accent' : null" } }, ngImport: i0, template: `
+    @if (link().length) {
+      <a class="tile" [routerLink]="link()">
+        <ng-container [ngTemplateOutlet]="body" />
+      </a>
+    } @else {
+      <div class="tile">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    }
+
+    <ng-template #body>
+      <span class="label">{{ label() }}</span>
+
+      @if (busy()) {
+        <p-skeleton styleClass="value-skeleton" height="23px" width="92px" />
+        @if (hint().length) {
+          <p-skeleton styleClass="hint-skeleton" height="10px" width="132px" />
+        }
+      } @else {
+        <strong class="value">{{ value() }}</strong>
+        @if (hint().length) {
+          <small class="hint">{{ hint() }}</small>
+        }
+      }
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.tile{display:grid;align-content:start;gap:5px;height:100%;padding:18px 20px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);color:inherit;text-decoration:none;transition:border-color .14s ease}a.tile:hover{border-color:var(--ac-accent)}:host([data-tone=\"accent\"]) .tile{border-color:var(--ac-accent)}.label{color:var(--ac-text-muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.value{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.hint{color:var(--ac-text-muted);font-size:12px}.value-skeleton{margin:1px 0 2px}.hint-skeleton{margin:3px 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMetric, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-metric', imports: [NgTemplateOutlet, RouterLink, SkeletonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-tone]': "tone() === 'accent' ? 'accent' : null" }, template: `
+    @if (link().length) {
+      <a class="tile" [routerLink]="link()">
+        <ng-container [ngTemplateOutlet]="body" />
+      </a>
+    } @else {
+      <div class="tile">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    }
+
+    <ng-template #body>
+      <span class="label">{{ label() }}</span>
+
+      @if (busy()) {
+        <p-skeleton styleClass="value-skeleton" height="23px" width="92px" />
+        @if (hint().length) {
+          <p-skeleton styleClass="hint-skeleton" height="10px" width="132px" />
+        }
+      } @else {
+        <strong class="value">{{ value() }}</strong>
+        @if (hint().length) {
+          <small class="hint">{{ hint() }}</small>
+        }
+      }
+    </ng-template>
+  `, styles: [":host{display:block}.tile{display:grid;align-content:start;gap:5px;height:100%;padding:18px 20px;border:1px solid var(--ac-border);border-radius:12px;background:var(--ac-surface);color:inherit;text-decoration:none;transition:border-color .14s ease}a.tile:hover{border-color:var(--ac-accent)}:host([data-tone=\"accent\"]) .tile{border-color:var(--ac-accent)}.label{color:var(--ac-text-muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.value{font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.hint{color:var(--ac-text-muted);font-size:12px}.value-skeleton{margin:1px 0 2px}.hint-skeleton{margin:3px 0}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 class NucleusTabs {
     tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
@@ -1465,8 +2438,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 function resolveFieldSize(field) {
     if (field.size)
         return field.size;
-    if (field.kind === 'textarea')
+    if (field.kind === 'textarea' || field.kind === 'color')
         return 'full';
+    if (field.kind === 'icon')
+        return 'md';
     const max = field.maxlength;
     if (max === undefined)
         return 'md';
@@ -1480,13 +2455,343 @@ function resolveFieldSize(field) {
         return 'lg';
     return 'full';
 }
+function isFieldSearchable(field) {
+    return field.searchable !== false;
+}
+
+const NUCLEUS_ICON_CATALOG = [
+    'address-book', 'align-center', 'align-justify', 'align-left', 'align-right', 'amazon',
+    'android', 'angle-double-down', 'angle-double-left', 'angle-double-right', 'angle-double-up',
+    'angle-down', 'angle-left', 'angle-right', 'angle-up', 'apple', 'arrow-circle-down',
+    'arrow-circle-left', 'arrow-circle-right', 'arrow-circle-up', 'arrow-down', 'arrow-down-left',
+    'arrow-down-left-and-arrow-up-right-to-center', 'arrow-down-right', 'arrow-left',
+    'arrow-right', 'arrow-right-arrow-left', 'arrow-u-turn-up-left', 'arrow-u-turn-up-right',
+    'arrow-up', 'arrow-up-left', 'arrow-up-right',
+    'arrow-up-right-and-arrow-down-left-from-center', 'arrows-alt', 'arrows-h', 'arrows-v',
+    'asterisk', 'at', 'backward', 'ban', 'barcode', 'bars', 'bell', 'bell-slash', 'bitcoin',
+    'block-quote', 'bold', 'bolt', 'book', 'bookmark', 'bookmark-fill', 'box', 'briefcase',
+    'building', 'building-columns', 'bullseye', 'calculator', 'calendar', 'calendar-clock',
+    'calendar-minus', 'calendar-plus', 'calendar-times', 'camera', 'car', 'caret-down',
+    'caret-left', 'caret-right', 'caret-up', 'cart-arrow-down', 'cart-minus', 'cart-plus',
+    'case-sensitive', 'chart-bar', 'chart-line', 'chart-pie', 'chart-scatter', 'check',
+    'check-circle', 'check-square', 'chevron-circle-down', 'chevron-circle-left',
+    'chevron-circle-right', 'chevron-circle-up', 'chevron-down', 'chevron-left', 'chevron-right',
+    'chevron-up', 'circle', 'circle-fill', 'circle-off', 'circle-on', 'clipboard', 'clock',
+    'clone', 'cloud', 'cloud-download', 'cloud-upload', 'code', 'code-branch', 'cog', 'columns-2',
+    'comment', 'comments', 'compass', 'compress', 'copy', 'credit-card', 'crown', 'database',
+    'delete-left', 'desktop', 'directions', 'directions-alt', 'discord', 'dollar', 'dot',
+    'download', 'eject', 'ellipsis-h', 'ellipsis-v', 'envelope', 'equals', 'eraser', 'ethereum',
+    'euro', 'exclamation-circle', 'exclamation-triangle', 'expand', 'external-link', 'eye',
+    'eye-dropper', 'eye-slash', 'face-smile', 'facebook', 'fast-backward', 'fast-forward', 'file',
+    'file-arrow-up', 'file-check', 'file-edit', 'file-excel', 'file-export', 'file-import',
+    'file-o', 'file-pdf', 'file-plus', 'file-word', 'filter', 'filter-fill', 'filter-slash',
+    'flag', 'flag-fill', 'folder', 'folder-open', 'folder-plus', 'forward', 'gauge', 'gift',
+    'github', 'globe', 'google', 'graduation-cap', 'grid-2', 'grip', 'grip-horizontal',
+    'grip-vertical', 'hammer', 'hashtag', 'heading', 'heading-1', 'heading-2', 'heading-3',
+    'heading-4', 'heading-5', 'heading-6', 'headphones', 'heart', 'heart-fill', 'highlighter',
+    'history', 'home', 'horizontal-rule', 'hourglass', 'id-card', 'image', 'images', 'inbox',
+    'indent', 'indian-rupee', 'info', 'info-circle', 'instagram', 'italic', 'key', 'language',
+    'lightbulb', 'link', 'linkedin', 'list', 'list-check', 'list-ol', 'list-tree', 'lock',
+    'lock-open', 'map', 'map-marker', 'mars', 'megaphone', 'microchip', 'microchip-ai',
+    'microphone', 'microsoft', 'minus', 'minus-circle', 'mobile', 'money-bill', 'moon',
+    'note-sticky', 'objects-column', 'outdent', 'palette', 'paperclip', 'paragraph-left',
+    'paragraph-right', 'pause', 'pause-circle', 'paypal', 'pen-line', 'pen-to-square', 'pencil',
+    'percentage', 'phone', 'pinterest', 'play', 'play-circle', 'plus', 'plus-circle', 'pound',
+    'power-off', 'prime', 'print', 'qrcode', 'question', 'question-circle', 'receipt',
+    'rectangle-xmark', 'reddit', 'refresh', 'replay', 'reply', 'rows-2', 'save', 'search',
+    'search-minus', 'search-plus', 'send', 'server', 'share-alt', 'shield', 'shop', 'shopping-bag',
+    'shopping-cart', 'sidebar', 'sign-in', 'sign-out', 'signature', 'sitemap', 'slack', 'slash',
+    'sliders-h', 'sliders-v', 'sort', 'sort-alpha-down', 'sort-alpha-down-alt', 'sort-alpha-up',
+    'sort-alpha-up-alt', 'sort-alt', 'sort-alt-slash', 'sort-amount-down', 'sort-amount-down-alt',
+    'sort-amount-up', 'sort-amount-up-alt', 'sort-down', 'sort-down-fill', 'sort-numeric-down',
+    'sort-numeric-down-alt', 'sort-numeric-up', 'sort-numeric-up-alt', 'sort-up', 'sort-up-fill',
+    'sparkles', 'spinner', 'spinner-dotted', 'square', 'stamp', 'star', 'star-fill', 'star-half',
+    'star-half-fill', 'step-backward', 'step-backward-alt', 'step-forward', 'step-forward-alt',
+    'stop', 'stop-circle', 'stopwatch', 'strikethrough', 'subscript', 'sun', 'superscript', 'sync',
+    'table', 'tablet', 'tag', 'tags', 'telegram', 'text', 'text-color', 'th-large', 'thumbs-down',
+    'thumbs-down-fill', 'thumbs-up', 'thumbs-up-fill', 'thumbtack', 'ticket', 'tiktok', 'times',
+    'times-circle', 'trash', 'trophy', 'truck', 'turkish-lira', 'twitch', 'twitter', 'underline',
+    'undo', 'unlock', 'upload', 'user', 'user-edit', 'user-minus', 'user-plus', 'users', 'venus',
+    'verified', 'video', 'vimeo', 'volume-down', 'volume-off', 'volume-up', 'wallet', 'warehouse',
+    'wave-pulse', 'whatsapp', 'wifi', 'window-maximize', 'window-minimize', 'wrench', 'youtube'
+];
+function searchIcons(term) {
+    const needle = term.trim().toLowerCase();
+    if (!needle)
+        return NUCLEUS_ICON_CATALOG;
+    return NUCLEUS_ICON_CATALOG.filter((name) => name.includes(needle));
+}
+function iconClassOf(name) {
+    return name ? (name.startsWith('pi ') ? name : `pi pi-${name}`) : '';
+}
+function iconNameOf(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim().replace(/^pi\s+/, '').replace(/^pi-/, '');
+    return trimmed || null;
+}
+
+class NucleusIconPicker {
+    language = inject(NucleusLanguage);
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    panel = viewChild.required('popover');
+    search = viewChild('searchBox', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    term = signal('', ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+    labels = computed(() => commonCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    name = computed(() => iconNameOf(this.value()), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    iconClass = computed(() => iconClassOf(this.name()), ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    results = computed(() => searchIcons(this.term()), ...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
+    onShow() {
+        this.term.set('');
+        setTimeout(() => this.search()?.nativeElement.focus(), 0);
+    }
+    pick(icon) {
+        this.value.set(icon ? `pi pi-${icon}` : null);
+        this.panel().hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusIconPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusIconPicker, isStandalone: true, selector: "nucleus-icon-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["searchBox"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @let copy = labels();
+
+    <button
+      type="button"
+      class="trigger"
+      [id]="inputId()"
+      [disabled]="disabled()"
+      [attr.aria-label]="copy.searchIcon"
+      (click)="panel().toggle($event)"
+    >
+      <span class="preview" [class.is-empty]="!name()">
+        <i [class]="name() ? iconClass() : 'pi pi-image'" aria-hidden="true"></i>
+      </span>
+      <span class="name" [class.is-empty]="!name()">{{ name() ?? copy.noIcon }}</span>
+      <i class="pi pi-chevron-down caret" aria-hidden="true"></i>
+    </button>
+
+    <p-popover #popover appendTo="body" [dismissable]="true" (onShow)="onShow()">
+      <div class="panel">
+        <div class="panel-head">
+          <input
+            #searchBox
+            pInputText
+            type="search"
+            autocomplete="off"
+            [placeholder]="copy.searchIcon"
+            [ngModel]="term()"
+            (ngModelChange)="term.set($event)"
+            [ngModelOptions]="{ standalone: true }"
+          />
+          <button type="button" class="clear" (click)="pick(null)">{{ copy.noIcon }}</button>
+        </div>
+
+        @if (results().length) {
+          <div class="grid">
+            @for (icon of results(); track icon) {
+              <button
+                type="button"
+                class="cell"
+                [class.is-active]="icon === name()"
+                [title]="icon"
+                [attr.aria-label]="icon"
+                (click)="pick(icon)"
+              >
+                <i [class]="'pi pi-' + icon" aria-hidden="true"></i>
+              </button>
+            }
+          </div>
+        } @else {
+          <p class="empty">{{ copy.noMatches }}</p>
+        }
+      </div>
+    </p-popover>
+  `, isInline: true, styles: [":host{display:block}.trigger{display:flex;align-items:center;gap:10px;width:100%;padding:0 10px;height:38px;border:1px solid var(--ac-border);border-radius:8px;background:var(--ac-surface);color:var(--ac-text);font:inherit;font-size:14px;text-align:left;cursor:pointer}.trigger:disabled{opacity:.6;cursor:default}.trigger:not(:disabled):hover{border-color:color-mix(in srgb,var(--ac-accent) 55%,var(--ac-border))}.preview{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent);font-size:13px}.preview.is-empty{background:color-mix(in srgb,var(--ac-text) 8%,transparent);color:var(--ac-text-muted)}.name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name.is-empty{color:var(--ac-text-muted)}.caret{color:var(--ac-text-muted);font-size:11px}.panel{width:min(21rem,80vw)}.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.panel-head input{flex:1}.clear{padding:0 10px;height:34px;border:1px solid var(--ac-border);border-radius:8px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.clear:hover{color:var(--ac-text)}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;overflow-y:auto;max-height:16rem}.cell{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ac-text);font-size:15px;cursor:pointer}.cell:hover{background:color-mix(in srgb,var(--ac-text) 10%,transparent)}.cell.is-active{border-color:var(--ac-accent);background:color-mix(in srgb,var(--ac-accent) 18%,transparent);color:var(--ac-accent)}.empty{padding:18px 4px;color:var(--ac-text-muted);font-size:13px;text-align:center}@media(max-width:420px){.grid{grid-template-columns:repeat(6,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusIconPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-icon-picker', imports: [FormsModule, InputTextModule, PopoverModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let copy = labels();
+
+    <button
+      type="button"
+      class="trigger"
+      [id]="inputId()"
+      [disabled]="disabled()"
+      [attr.aria-label]="copy.searchIcon"
+      (click)="panel().toggle($event)"
+    >
+      <span class="preview" [class.is-empty]="!name()">
+        <i [class]="name() ? iconClass() : 'pi pi-image'" aria-hidden="true"></i>
+      </span>
+      <span class="name" [class.is-empty]="!name()">{{ name() ?? copy.noIcon }}</span>
+      <i class="pi pi-chevron-down caret" aria-hidden="true"></i>
+    </button>
+
+    <p-popover #popover appendTo="body" [dismissable]="true" (onShow)="onShow()">
+      <div class="panel">
+        <div class="panel-head">
+          <input
+            #searchBox
+            pInputText
+            type="search"
+            autocomplete="off"
+            [placeholder]="copy.searchIcon"
+            [ngModel]="term()"
+            (ngModelChange)="term.set($event)"
+            [ngModelOptions]="{ standalone: true }"
+          />
+          <button type="button" class="clear" (click)="pick(null)">{{ copy.noIcon }}</button>
+        </div>
+
+        @if (results().length) {
+          <div class="grid">
+            @for (icon of results(); track icon) {
+              <button
+                type="button"
+                class="cell"
+                [class.is-active]="icon === name()"
+                [title]="icon"
+                [attr.aria-label]="icon"
+                (click)="pick(icon)"
+              >
+                <i [class]="'pi pi-' + icon" aria-hidden="true"></i>
+              </button>
+            }
+          </div>
+        } @else {
+          <p class="empty">{{ copy.noMatches }}</p>
+        }
+      </div>
+    </p-popover>
+  `, styles: [":host{display:block}.trigger{display:flex;align-items:center;gap:10px;width:100%;padding:0 10px;height:38px;border:1px solid var(--ac-border);border-radius:8px;background:var(--ac-surface);color:var(--ac-text);font:inherit;font-size:14px;text-align:left;cursor:pointer}.trigger:disabled{opacity:.6;cursor:default}.trigger:not(:disabled):hover{border-color:color-mix(in srgb,var(--ac-accent) 55%,var(--ac-border))}.preview{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent);font-size:13px}.preview.is-empty{background:color-mix(in srgb,var(--ac-text) 8%,transparent);color:var(--ac-text-muted)}.name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name.is-empty{color:var(--ac-text-muted)}.caret{color:var(--ac-text-muted);font-size:11px}.panel{width:min(21rem,80vw)}.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.panel-head input{flex:1}.clear{padding:0 10px;height:34px;border:1px solid var(--ac-border);border-radius:8px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.clear:hover{color:var(--ac-text)}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;overflow-y:auto;max-height:16rem}.cell{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ac-text);font-size:15px;cursor:pointer}.cell:hover{background:color-mix(in srgb,var(--ac-text) 10%,transparent)}.cell.is-active{border-color:var(--ac-accent);background:color-mix(in srgb,var(--ac-accent) 18%,transparent);color:var(--ac-accent)}.empty{padding:18px 4px;color:var(--ac-text-muted);font-size:13px;text-align:center}@media(max-width:420px){.grid{grid-template-columns:repeat(6,1fr)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], panel: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], search: [{ type: i0.ViewChild, args: ['searchBox', { isSignal: true }] }] } });
+
+const NUCLEUS_ACCENTS = ACCENTS.map((accent) => ({
+    id: accent.id,
+    light: accent.light,
+    dark: accent.dark,
+}));
+class NucleusColorPicker {
+    language = inject(NucleusLanguage);
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    labels = computed(() => commonCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    options = computed(() => {
+        const names = themeCopyOf(this.language.lang()).accents;
+        return NUCLEUS_ACCENTS.map((accent) => ({ color: accent.light, label: names[accent.id] }));
+    }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    pick(color) {
+        this.value.set(color);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusColorPicker, isStandalone: true, selector: "nucleus-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    @let copy = labels();
+
+    <div class="row" role="radiogroup" [attr.aria-label]="ariaLabel() || copy.choose">
+      <button
+        type="button"
+        class="none"
+        role="radio"
+        [class.is-active]="!value()"
+        [attr.aria-checked]="!value()"
+        [attr.aria-label]="copy.noColor"
+        [title]="copy.noColor"
+        [disabled]="disabled()"
+        (click)="pick(null)"
+      >
+        <i class="pi pi-ban" aria-hidden="true"></i>
+      </button>
+
+      @for (option of options(); track option.color) {
+        <button
+          type="button"
+          class="swatch"
+          role="radio"
+          [class.is-active]="option.color === value()"
+          [attr.aria-checked]="option.color === value()"
+          [attr.aria-label]="option.label"
+          [title]="option.label + ' · ' + option.color"
+          [style.background]="option.color"
+          [disabled]="disabled()"
+          (click)="pick(option.color)"
+        >
+          @if (option.color === value()) {
+            <i class="pi pi-check" aria-hidden="true"></i>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:38px}.swatch{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:2px solid transparent;border-radius:50%;color:#fff;cursor:pointer;transition:transform .12s ease}.swatch:hover:not(:disabled){transform:scale(1.12)}.swatch:disabled{cursor:default;opacity:.6}.swatch.is-active{border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-bg) inset}.swatch i{font-size:11px;text-shadow:0 0 3px rgba(0,0,0,.5)}.none{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px dashed var(--ac-border);border-radius:50%;background:transparent;color:var(--ac-text-muted);cursor:pointer}.none.is-active{border-style:solid;border-color:var(--ac-text);color:var(--ac-text)}.none i{font-size:11px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @let copy = labels();
+
+    <div class="row" role="radiogroup" [attr.aria-label]="ariaLabel() || copy.choose">
+      <button
+        type="button"
+        class="none"
+        role="radio"
+        [class.is-active]="!value()"
+        [attr.aria-checked]="!value()"
+        [attr.aria-label]="copy.noColor"
+        [title]="copy.noColor"
+        [disabled]="disabled()"
+        (click)="pick(null)"
+      >
+        <i class="pi pi-ban" aria-hidden="true"></i>
+      </button>
+
+      @for (option of options(); track option.color) {
+        <button
+          type="button"
+          class="swatch"
+          role="radio"
+          [class.is-active]="option.color === value()"
+          [attr.aria-checked]="option.color === value()"
+          [attr.aria-label]="option.label"
+          [title]="option.label + ' · ' + option.color"
+          [style.background]="option.color"
+          [disabled]="disabled()"
+          (click)="pick(option.color)"
+        >
+          @if (option.color === value()) {
+            <i class="pi pi-check" aria-hidden="true"></i>
+          }
+        </button>
+      }
+    </div>
+  `, styles: [":host{display:block}.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:38px}.swatch{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:2px solid transparent;border-radius:50%;color:#fff;cursor:pointer;transition:transform .12s ease}.swatch:hover:not(:disabled){transform:scale(1.12)}.swatch:disabled{cursor:default;opacity:.6}.swatch.is-active{border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-bg) inset}.swatch i{font-size:11px;text-shadow:0 0 3px rgba(0,0,0,.5)}.none{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px dashed var(--ac-border);border-radius:50%;background:transparent;color:var(--ac-text-muted);cursor:pointer}.none.is-active{border-style:solid;border-color:var(--ac-text);color:var(--ac-text)}.none i{font-size:11px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class NucleusForm {
+    language = inject(NucleusLanguage);
+    host = inject(ElementRef);
+    injector = inject(Injector);
     fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
     valueChange = output();
+    labels = computed(() => commonCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    landed = false;
+    constructor() {
+        effect(() => {
+            const ready = this.autofocus() && !this.readonly() && this.fields().length > 0;
+            if (!ready || this.landed)
+                return;
+            this.landed = true;
+            afterNextRender(() => {
+                const first = fieldsIn(this.host.nativeElement)[0];
+                if (first)
+                    moveTo(first);
+            }, { injector: this.injector });
+        });
+    }
     read(field) {
         return this.value()[field.key] ?? null;
     }
@@ -1494,6 +2799,10 @@ class NucleusForm {
         const raw = this.value()[field.key];
         return raw === null || raw === undefined ? '' : String(raw);
     }
+    nullableText(field) {
+        const raw = this.value()[field.key];
+        return raw === null || raw === undefined || raw === '' ? null : String(raw);
+    }
     checked(field) {
         return this.value()[field.key] === true;
     }
@@ -1503,6 +2812,9 @@ class NucleusForm {
     isDisabled(field) {
         return this.readonly() || field.disabled === true;
     }
+    isSearchable(field) {
+        return isFieldSearchable(field);
+    }
     fieldClass(field) {
         const span = field.span ?? 1;
         return `is-span-${span === 'full' ? 'full' : span} is-size-${resolveFieldSize(field)}`;
@@ -1518,7 +2830,7 @@ class NucleusForm {
         return field.kind ?? 'text';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusForm, isStandalone: true, selector: "nucleus-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ns-form-grid\" [class]=\"gridClass()\">\n  @for (field of fields(); track field.key) {\n    <div class=\"ns-field\" [class]=\"fieldClass(field)\">\n      @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n        <label [attr.for]=\"'nf-' + field.key\">{{ field.label }}</label>\n      }\n\n      @switch (kindOf(field)) {\n        @case ('textarea') {\n          <textarea\n            pTextarea\n            [id]=\"'nf-' + field.key\"\n            [rows]=\"field.rows ?? 3\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          ></textarea>\n        }\n        @case ('select') {\n          <p-select\n            [inputId]=\"'nf-' + field.key\"\n            [options]=\"optionsOf(field)\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"read(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [placeholder]=\"field.placeholder ?? ''\"\n            [showClear]=\"field.clearable === true\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          />\n        }\n        @case ('checkbox') {\n          <div class=\"ns-inline\">\n            <p-checkbox\n              [inputId]=\"'nf-' + field.key\"\n              [binary]=\"true\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @case ('switch') {\n          <div class=\"ns-inline\">\n            <p-toggleswitch\n              [inputId]=\"'nf-' + field.key\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @default {\n          <input\n            pInputText\n            [id]=\"'nf-' + field.key\"\n            [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            autocomplete=\"off\"\n            fluid\n          />\n        }\n      }\n\n      @if (field.hint) {\n        <p class=\"ns-hint\">{{ field.hint }}</p>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i1$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusForm, isStandalone: true, selector: "nucleus-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, hostDirectives: [{ directive: NucleusEnterAdvance }], ngImport: i0, template: "<div class=\"ns-form-grid\" [class]=\"gridClass()\">\n  @for (field of fields(); track field.key) {\n    <div class=\"ns-field\" [class]=\"fieldClass(field)\">\n      @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n        <label [attr.for]=\"kindOf(field) === 'color' ? null : 'nf-' + field.key\">\n          {{ field.label }}\n        </label>\n      }\n\n      @switch (kindOf(field)) {\n        @case ('textarea') {\n          <textarea\n            pTextarea\n            [id]=\"'nf-' + field.key\"\n            [rows]=\"field.rows ?? 3\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          ></textarea>\n        }\n        @case ('select') {\n          <p-select\n            [inputId]=\"'nf-' + field.key\"\n            [options]=\"optionsOf(field)\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"read(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [placeholder]=\"field.placeholder ?? labels().choose\"\n            [showClear]=\"field.clearable === true\"\n            [filter]=\"isSearchable(field)\"\n            filterBy=\"label\"\n            [filterPlaceholder]=\"labels().search\"\n            [autofocusFilter]=\"true\"\n            [resetFilterOnHide]=\"true\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          />\n        }\n        @case ('icon') {\n          <nucleus-icon-picker\n            [inputId]=\"'nf-' + field.key\"\n            [value]=\"nullableText(field)\"\n            (valueChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n          />\n        }\n        @case ('color') {\n          <nucleus-color-picker\n            [value]=\"nullableText(field)\"\n            (valueChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [ariaLabel]=\"field.label\"\n          />\n        }\n        @case ('checkbox') {\n          <div class=\"ns-inline\">\n            <p-checkbox\n              [inputId]=\"'nf-' + field.key\"\n              [binary]=\"true\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @case ('switch') {\n          <div class=\"ns-inline\">\n            <p-toggleswitch\n              [inputId]=\"'nf-' + field.key\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @default {\n          <input\n            pInputText\n            [id]=\"'nf-' + field.key\"\n            [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            autocomplete=\"off\"\n            fluid\n          />\n        }\n      }\n\n      @if (field.hint) {\n        <p class=\"ns-hint\">{{ field.hint }}</p>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i6.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NucleusColorPicker, selector: "nucleus-color-picker", inputs: ["value", "disabled", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: NucleusIconPicker, selector: "nucleus-icon-picker", inputs: ["value", "disabled", "inputId"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusForm, decorators: [{
             type: Component,
@@ -1529,8 +2841,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         TextareaModule,
                         ToggleSwitchModule,
                         FormsModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ns-form-grid\" [class]=\"gridClass()\">\n  @for (field of fields(); track field.key) {\n    <div class=\"ns-field\" [class]=\"fieldClass(field)\">\n      @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n        <label [attr.for]=\"'nf-' + field.key\">{{ field.label }}</label>\n      }\n\n      @switch (kindOf(field)) {\n        @case ('textarea') {\n          <textarea\n            pTextarea\n            [id]=\"'nf-' + field.key\"\n            [rows]=\"field.rows ?? 3\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          ></textarea>\n        }\n        @case ('select') {\n          <p-select\n            [inputId]=\"'nf-' + field.key\"\n            [options]=\"optionsOf(field)\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"read(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [placeholder]=\"field.placeholder ?? ''\"\n            [showClear]=\"field.clearable === true\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          />\n        }\n        @case ('checkbox') {\n          <div class=\"ns-inline\">\n            <p-checkbox\n              [inputId]=\"'nf-' + field.key\"\n              [binary]=\"true\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @case ('switch') {\n          <div class=\"ns-inline\">\n            <p-toggleswitch\n              [inputId]=\"'nf-' + field.key\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @default {\n          <input\n            pInputText\n            [id]=\"'nf-' + field.key\"\n            [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            autocomplete=\"off\"\n            fluid\n          />\n        }\n      }\n\n      @if (field.hint) {\n        <p class=\"ns-hint\">{{ field.hint }}</p>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+                        NucleusColorPicker,
+                        NucleusIconPicker,
+                    ], hostDirectives: [NucleusEnterAdvance], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ns-form-grid\" [class]=\"gridClass()\">\n  @for (field of fields(); track field.key) {\n    <div class=\"ns-field\" [class]=\"fieldClass(field)\">\n      @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n        <label [attr.for]=\"kindOf(field) === 'color' ? null : 'nf-' + field.key\">\n          {{ field.label }}\n        </label>\n      }\n\n      @switch (kindOf(field)) {\n        @case ('textarea') {\n          <textarea\n            pTextarea\n            [id]=\"'nf-' + field.key\"\n            [rows]=\"field.rows ?? 3\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          ></textarea>\n        }\n        @case ('select') {\n          <p-select\n            [inputId]=\"'nf-' + field.key\"\n            [options]=\"optionsOf(field)\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [ngModel]=\"read(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [placeholder]=\"field.placeholder ?? labels().choose\"\n            [showClear]=\"field.clearable === true\"\n            [filter]=\"isSearchable(field)\"\n            filterBy=\"label\"\n            [filterPlaceholder]=\"labels().search\"\n            [autofocusFilter]=\"true\"\n            [resetFilterOnHide]=\"true\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            fluid\n          />\n        }\n        @case ('icon') {\n          <nucleus-icon-picker\n            [inputId]=\"'nf-' + field.key\"\n            [value]=\"nullableText(field)\"\n            (valueChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n          />\n        }\n        @case ('color') {\n          <nucleus-color-picker\n            [value]=\"nullableText(field)\"\n            (valueChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [ariaLabel]=\"field.label\"\n          />\n        }\n        @case ('checkbox') {\n          <div class=\"ns-inline\">\n            <p-checkbox\n              [inputId]=\"'nf-' + field.key\"\n              [binary]=\"true\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @case ('switch') {\n          <div class=\"ns-inline\">\n            <p-toggleswitch\n              [inputId]=\"'nf-' + field.key\"\n              [ngModel]=\"checked(field)\"\n              (ngModelChange)=\"write(field, $event)\"\n              [disabled]=\"isDisabled(field)\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n            <label [attr.for]=\"'nf-' + field.key\" class=\"ns-inline-label\">{{ field.label }}</label>\n          </div>\n        }\n        @default {\n          <input\n            pInputText\n            [id]=\"'nf-' + field.key\"\n            [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n            [ngModel]=\"text(field)\"\n            (ngModelChange)=\"write(field, $event)\"\n            [disabled]=\"isDisabled(field)\"\n            [attr.maxlength]=\"field.maxlength ?? null\"\n            [attr.placeholder]=\"field.placeholder ?? null\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            autocomplete=\"off\"\n            fluid\n          />\n        }\n      }\n\n      @if (field.hint) {\n        <p class=\"ns-hint\">{{ field.hint }}</p>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class NucleusCell {
     nucleusCell = input.required(...(ngDevMode ? [{ debugName: "nucleusCell" }] : /* istanbul ignore next */ []));
@@ -1552,12 +2866,24 @@ class NucleusList {
     empty = input('', ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     minWidth = input('640px', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    skeletonRows = input(5, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     rowClass = input(() => '', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
     action = output();
     toggle = output();
     cells = contentChildren(NucleusCell, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
     tableStyle = computed(() => ({ 'min-width': this.minWidth() }), ...(ngDevMode ? [{ debugName: "tableStyle" }] : /* istanbul ignore next */ []));
     showEmpty = computed(() => !this.loading() && this.rows().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    placeholders = computed(() => Array.from({ length: Math.max(this.skeletonRows(), 1) }, (_, index) => ({ index })), ...(ngDevMode ? [{ debugName: "placeholders" }] : /* istanbul ignore next */ []));
+    data = computed(() => this.loading() ? this.placeholders() : this.rows(), ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    skeletonWidth(column) {
+        if (column.kind === 'switch')
+            return '84px';
+        if (column.align === 'right')
+            return '40px';
+        if (column.width)
+            return '60%';
+        return column.strong ? '58%' : '78%';
+    }
     cellTemplate(key) {
         return this.cells().find((cell) => cell.nucleusCell() === key)?.template ?? null;
     }
@@ -1573,6 +2899,9 @@ class NucleusList {
     visibleActions(row) {
         return this.actions().filter((entry) => !entry.visible || entry.visible(row));
     }
+    isActionLocked(entry, row) {
+        return entry.disabled ? entry.disabled(row) : false;
+    }
     run(entry, row) {
         this.action.emit({ id: entry.id, row });
     }
@@ -1591,12 +2920,37 @@ class NucleusList {
         this.toggle.emit({ key: column.key, row, value: !this.isChecked(column, row) });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusList, isStandalone: true, selector: "nucleus-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", toggle: "toggle" }, queries: [{ propertyName: "cells", predicate: NucleusCell, isSignal: true }], ngImport: i0, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <p-table [value]=\"rows()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n    <ng-template #header>\n      <tr>\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row>\n      <tr [class]=\"rowClass()(row)\">\n        @for (column of columns(); track column.key) {\n          <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n            @if (cellTemplate(column.key); as custom) {\n              <ng-container\n                [ngTemplateOutlet]=\"custom\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n              />\n            } @else if (column.kind === 'switch') {\n              <span class=\"switch-cell\">\n                <button\n                  type=\"button\"\n                  class=\"ns-switch\"\n                  role=\"switch\"\n                  [class.is-on]=\"isChecked(column, row)\"\n                  [attr.aria-checked]=\"isChecked(column, row)\"\n                  [attr.aria-label]=\"text(column, row)\"\n                  [disabled]=\"isLocked(column, row)\"\n                  [pTooltip]=\"hintOf(column, row)\"\n                  tooltipPosition=\"top\"\n                  (click)=\"flip(column, row)\"\n                >\n                  <span class=\"knob\"></span>\n                </button>\n                <span class=\"switch-label\">{{ text(column, row) }}</span>\n              </span>\n            } @else {\n              {{ text(column, row) }}\n              @if (tagOf(column, row); as tag) {\n                <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n              }\n            }\n          </td>\n        }\n\n        @if (actions().length) {\n          <td class=\"align-right actions\">\n            @for (entry of visibleActions(row); track entry.id) {\n              <p-button\n                [icon]=\"entry.icon\"\n                [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                size=\"small\"\n                [text]=\"true\"\n                [rounded]=\"true\"\n                [pTooltip]=\"entry.label\"\n                tooltipPosition=\"left\"\n                [ariaLabel]=\"entry.label\"\n                (onClick)=\"run(entry, row)\"\n              />\n            }\n          </td>\n        }\n      </tr>\n    </ng-template>\n  </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusList, isStandalone: true, selector: "nucleus-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", toggle: "toggle" }, queries: [{ propertyName: "cells", predicate: NucleusCell, isSignal: true }], ngImport: i0, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <p-table [value]=\"data()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n    <ng-template #header>\n      <tr>\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row>\n      @if (loading()) {\n        <tr class=\"is-skeleton\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\">\n              <p-skeleton height=\"13px\" [width]=\"skeletonWidth(column)\" />\n            </td>\n          }\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              <p-skeleton shape=\"circle\" size=\"26px\" />\n            </td>\n          }\n        </tr>\n      } @else {\n        <tr [class]=\"rowClass()(row)\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n              @if (cellTemplate(column.key); as custom) {\n                <ng-container\n                  [ngTemplateOutlet]=\"custom\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                />\n              } @else if (column.kind === 'switch') {\n                <span class=\"switch-cell\">\n                  <button\n                    type=\"button\"\n                    class=\"ns-switch\"\n                    role=\"switch\"\n                    [class.is-on]=\"isChecked(column, row)\"\n                    [attr.aria-checked]=\"isChecked(column, row)\"\n                    [attr.aria-label]=\"text(column, row)\"\n                    [disabled]=\"isLocked(column, row)\"\n                    [pTooltip]=\"hintOf(column, row)\"\n                    tooltipPosition=\"top\"\n                    (click)=\"flip(column, row)\"\n                  >\n                    <span class=\"knob\"></span>\n                  </button>\n                  <span class=\"switch-label\">{{ text(column, row) }}</span>\n                </span>\n              } @else {\n                {{ text(column, row) }}\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                }\n              }\n            </td>\n          }\n\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              @for (entry of visibleActions(row); track entry.id) {\n                <p-button\n                  [icon]=\"entry.icon\"\n                  [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                  size=\"small\"\n                  [text]=\"true\"\n                  [rounded]=\"true\"\n                  [pTooltip]=\"entry.label\"\n                  tooltipPosition=\"left\"\n                  [ariaLabel]=\"entry.label\"\n                  [disabled]=\"isActionLocked(entry, row)\"\n                  (onClick)=\"run(entry, row)\"\n                />\n              }\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusList, decorators: [{
             type: Component,
-            args: [{ selector: 'nucleus-list', imports: [NgTemplateOutlet, ButtonModule, TableModule, TagModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <p-table [value]=\"rows()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n    <ng-template #header>\n      <tr>\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row>\n      <tr [class]=\"rowClass()(row)\">\n        @for (column of columns(); track column.key) {\n          <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n            @if (cellTemplate(column.key); as custom) {\n              <ng-container\n                [ngTemplateOutlet]=\"custom\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n              />\n            } @else if (column.kind === 'switch') {\n              <span class=\"switch-cell\">\n                <button\n                  type=\"button\"\n                  class=\"ns-switch\"\n                  role=\"switch\"\n                  [class.is-on]=\"isChecked(column, row)\"\n                  [attr.aria-checked]=\"isChecked(column, row)\"\n                  [attr.aria-label]=\"text(column, row)\"\n                  [disabled]=\"isLocked(column, row)\"\n                  [pTooltip]=\"hintOf(column, row)\"\n                  tooltipPosition=\"top\"\n                  (click)=\"flip(column, row)\"\n                >\n                  <span class=\"knob\"></span>\n                </button>\n                <span class=\"switch-label\">{{ text(column, row) }}</span>\n              </span>\n            } @else {\n              {{ text(column, row) }}\n              @if (tagOf(column, row); as tag) {\n                <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n              }\n            }\n          </td>\n        }\n\n        @if (actions().length) {\n          <td class=\"align-right actions\">\n            @for (entry of visibleActions(row); track entry.id) {\n              <p-button\n                [icon]=\"entry.icon\"\n                [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                size=\"small\"\n                [text]=\"true\"\n                [rounded]=\"true\"\n                [pTooltip]=\"entry.label\"\n                tooltipPosition=\"left\"\n                [ariaLabel]=\"entry.label\"\n                (onClick)=\"run(entry, row)\"\n              />\n            }\n          </td>\n        }\n      </tr>\n    </ng-template>\n  </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"] }]
-        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NucleusCell), { isSignal: true }] }] } });
+            args: [{ selector: 'nucleus-list', imports: [NgTemplateOutlet, ButtonModule, SkeletonModule, TableModule, TagModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"head\">\n  <ng-content select=\"[nucleusListTitle]\" />\n  <div class=\"head-actions\">\n    <ng-content select=\"[nucleusListActions]\" />\n  </div>\n</div>\n\n@if (showEmpty()) {\n  <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n  <p-table [value]=\"data()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n    <ng-template #header>\n      <tr>\n        @for (column of columns(); track column.key) {\n          <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n            {{ column.header }}\n          </th>\n        }\n        @if (actions().length) {\n          <th class=\"align-right\"></th>\n        }\n      </tr>\n    </ng-template>\n\n    <ng-template #body let-row>\n      @if (loading()) {\n        <tr class=\"is-skeleton\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\">\n              <p-skeleton height=\"13px\" [width]=\"skeletonWidth(column)\" />\n            </td>\n          }\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              <p-skeleton shape=\"circle\" size=\"26px\" />\n            </td>\n          }\n        </tr>\n      } @else {\n        <tr [class]=\"rowClass()(row)\">\n          @for (column of columns(); track column.key) {\n            <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n              @if (cellTemplate(column.key); as custom) {\n                <ng-container\n                  [ngTemplateOutlet]=\"custom\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n                />\n              } @else if (column.kind === 'switch') {\n                <span class=\"switch-cell\">\n                  <button\n                    type=\"button\"\n                    class=\"ns-switch\"\n                    role=\"switch\"\n                    [class.is-on]=\"isChecked(column, row)\"\n                    [attr.aria-checked]=\"isChecked(column, row)\"\n                    [attr.aria-label]=\"text(column, row)\"\n                    [disabled]=\"isLocked(column, row)\"\n                    [pTooltip]=\"hintOf(column, row)\"\n                    tooltipPosition=\"top\"\n                    (click)=\"flip(column, row)\"\n                  >\n                    <span class=\"knob\"></span>\n                  </button>\n                  <span class=\"switch-label\">{{ text(column, row) }}</span>\n                </span>\n              } @else {\n                {{ text(column, row) }}\n                @if (tagOf(column, row); as tag) {\n                  <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n                }\n              }\n            </td>\n          }\n\n          @if (actions().length) {\n            <td class=\"align-right actions\">\n              @for (entry of visibleActions(row); track entry.id) {\n                <p-button\n                  [icon]=\"entry.icon\"\n                  [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n                  size=\"small\"\n                  [text]=\"true\"\n                  [rounded]=\"true\"\n                  [pTooltip]=\"entry.label\"\n                  tooltipPosition=\"left\"\n                  [ariaLabel]=\"entry.label\"\n                  [disabled]=\"isActionLocked(entry, row)\"\n                  (onClick)=\"run(entry, row)\"\n                />\n              }\n            </td>\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NucleusCell), { isSignal: true }] }] } });
+
+function toggleCollapsed(collapsed, id) {
+    const next = new Set(collapsed);
+    if (!next.delete(id))
+        next.add(id);
+    return next;
+}
+function hasChildren(rows, id) {
+    return rows.some((row) => row.parentId === id);
+}
+function visibleTreeRows(rows, collapsed) {
+    if (collapsed.size === 0)
+        return [...rows];
+    const parents = new Map(rows.map((row) => [row.id, row.parentId]));
+    const buried = (row) => {
+        let parentId = row.parentId;
+        while (parentId) {
+            if (collapsed.has(parentId))
+                return true;
+            parentId = parents.get(parentId) ?? null;
+        }
+        return false;
+    };
+    return rows.filter((row) => !buried(row));
+}
 
 const ORBIT = { rx: 78, ry: 196 };
 class NucleusMark {
@@ -1650,6 +3004,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
   `, styles: [":host{display:block}svg{display:block}\n"] }]
         }], propDecorators: { accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+class NucleusAppearance {
+    theme = inject(ThemeService);
+    language = inject(NucleusLanguage);
+    copy = computed(() => themeCopyOf(this.language.lang()), ...(ngDevMode ? [{ debugName: "copy" }] : /* istanbul ignore next */ []));
+    appearance = this.theme.appearance;
+    canvasId = this.theme.canvasId;
+    frames = computed(() => {
+        const labels = this.copy().frames;
+        return FRAMES.map((frame) => ({ id: frame.id, label: labels[frame.id], tokens: frame.tokens }));
+    }, ...(ngDevMode ? [{ debugName: "frames" }] : /* istanbul ignore next */ []));
+    canvases = computed(() => {
+        const labels = this.copy().canvases;
+        const preview = (id) => {
+            const resolved = canvasById(id === 'system' ? this.theme.systemCanvasId() : id);
+            return {
+                id,
+                label: labels[id],
+                bg: resolved.tokens.bg,
+                surface: resolved.tokens.surface,
+                text: resolved.tokens.text,
+                icon: id === 'system' ? 'pi pi-desktop' : null,
+            };
+        };
+        return [...CANVASES.map((canvas) => preview(canvas.id)), preview('system')];
+    }, ...(ngDevMode ? [{ debugName: "canvases" }] : /* istanbul ignore next */ []));
+    accents = computed(() => {
+        const labels = this.copy().accents;
+        const canvas = this.canvasId();
+        const auto = accentOn(accentById(this.theme.frame().accent), canvas);
+        return [
+            { id: 'auto', label: labels.auto, color: auto, ink: readableOn(auto) },
+            ...ACCENTS.map((accent) => {
+                const color = accentOn(accent, canvas);
+                return { id: accent.id, label: labels[accent.id], color, ink: readableOn(color) };
+            }),
+        ];
+    }, ...(ngDevMode ? [{ debugName: "accents" }] : /* istanbul ignore next */ []));
+    densities = computed(() => {
+        const labels = this.copy().densities;
+        return DENSITIES.map((density) => ({
+            id: density.id,
+            label: labels[density.id],
+            gap: Math.round(6 * density.scale),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "densities" }] : /* istanbul ignore next */ []));
+    pickFrame(id) {
+        this.theme.setFrame(id);
+    }
+    pickCanvas(id) {
+        this.theme.setCanvas(id);
+    }
+    pickAccent(id) {
+        this.theme.setAccent(id);
+    }
+    pickDensity(id) {
+        this.theme.setDensity(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusAppearance, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusAppearance, isStandalone: true, selector: "nucleus-appearance", ngImport: i0, template: "@let t = copy();\n@let current = appearance();\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.frameTitle }}</h3>\n  <p class=\"group-hint\">{{ t.frameHint }}</p>\n\n  <div class=\"frames\" role=\"radiogroup\" [attr.aria-label]=\"t.frameTitle\">\n    @for (frame of frames(); track frame.id) {\n      <button\n        type=\"button\"\n        class=\"frame\"\n        role=\"radio\"\n        [class.is-active]=\"frame.id === current.frame\"\n        [attr.aria-checked]=\"frame.id === current.frame\"\n        [attr.aria-label]=\"frame.label\"\n        [style.--f-bg]=\"frame.tokens.bg\"\n        [style.--f-raised]=\"frame.tokens.raised\"\n        [style.--f-ink]=\"frame.tokens.ink\"\n        [style.--f-muted]=\"frame.tokens.muted\"\n        [style.--f-line]=\"frame.tokens.line\"\n        [style.--f-glow]=\"frame.tokens.glow\"\n        (click)=\"pickFrame(frame.id)\"\n      >\n        <span class=\"frame-chip\" aria-hidden=\"true\">\n          <span class=\"frame-bar\">\n            <span class=\"frame-dot\"></span>\n          </span>\n          <span class=\"frame-lower\">\n            <span class=\"frame-rail\">\n              <span class=\"frame-pin\"></span>\n              <span class=\"frame-row is-on\"></span>\n              <span class=\"frame-row\"></span>\n              <span class=\"frame-row\"></span>\n            </span>\n            <span class=\"frame-canvas\"></span>\n          </span>\n        </span>\n        <span class=\"frame-name\">{{ frame.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.canvasTitle }}</h3>\n  <p class=\"group-hint\">{{ t.canvasHint }}</p>\n\n  <div class=\"canvases\" role=\"radiogroup\" [attr.aria-label]=\"t.canvasTitle\">\n    @for (canvas of canvases(); track canvas.id) {\n      <button\n        type=\"button\"\n        class=\"canvas\"\n        role=\"radio\"\n        [class.is-active]=\"canvas.id === current.canvas\"\n        [attr.aria-checked]=\"canvas.id === current.canvas\"\n        (click)=\"pickCanvas(canvas.id)\"\n      >\n        <span\n          class=\"canvas-chip\"\n          aria-hidden=\"true\"\n          [style.background]=\"canvas.bg\"\n          [style.color]=\"canvas.text\"\n        >\n          @if (canvas.icon) {\n            <i [class]=\"canvas.icon\"></i>\n          } @else {\n            <span class=\"canvas-sheet\" [style.background]=\"canvas.surface\"></span>\n          }\n        </span>\n        <span class=\"canvas-name\">{{ canvas.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.accentTitle }}</h3>\n  <p class=\"group-hint\">{{ t.accentHint }}</p>\n\n  <div class=\"accents\" role=\"radiogroup\" [attr.aria-label]=\"t.accentTitle\">\n    @for (accent of accents(); track accent.id) {\n      <button\n        type=\"button\"\n        class=\"accent\"\n        role=\"radio\"\n        [class.is-auto]=\"accent.id === 'auto'\"\n        [class.is-active]=\"accent.id === current.accent\"\n        [attr.aria-checked]=\"accent.id === current.accent\"\n        [attr.aria-label]=\"accent.label\"\n        [title]=\"accent.label\"\n        [style.background]=\"accent.color\"\n        [style.color]=\"accent.ink\"\n        (click)=\"pickAccent(accent.id)\"\n      >\n        @if (accent.id === current.accent) {\n          <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n        } @else if (accent.id === 'auto') {\n          <i class=\"pi pi-sparkles\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.densityTitle }}</h3>\n  <p class=\"group-hint\">{{ t.densityHint }}</p>\n\n  <div class=\"densities\" role=\"radiogroup\" [attr.aria-label]=\"t.densityTitle\">\n    @for (density of densities(); track density.id) {\n      <button\n        type=\"button\"\n        class=\"density\"\n        role=\"radio\"\n        [class.is-active]=\"density.id === current.density\"\n        [attr.aria-checked]=\"density.id === current.density\"\n        (click)=\"pickDensity(density.id)\"\n      >\n        <span class=\"density-chip\" aria-hidden=\"true\" [style.gap.px]=\"density.gap\">\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n        </span>\n        <span class=\"density-name\">{{ density.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;gap:26px}.group{display:flex;flex-direction:column;gap:2px}.group-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em}.group-hint{margin:0 0 12px;color:var(--ac-text-muted);font-size:12px;font-weight:300;line-height:1.45}.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.frame{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.frame:hover{color:var(--ac-text)}.frame.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.frame-chip{display:flex;overflow:hidden;flex-direction:column;height:52px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-bg)}.frame-bar{display:flex;flex:none;align-items:center;height:12px;padding-left:5px;border-bottom:1px solid var(--f-line)}.frame-dot{width:5px;height:5px;border-radius:50%;background:var(--f-glow)}.frame-lower{display:flex;flex:1;min-height:0}.frame-rail{display:flex;flex:none;flex-direction:column;gap:3px;width:22px;padding:4px 3px;border-right:1px solid var(--f-line)}.frame-pin{height:7px;border-left:2px solid var(--f-glow);border-radius:2px;background:var(--f-raised)}.frame-row{height:3px;border-radius:2px;background:var(--f-muted);opacity:.55}.frame-row.is-on{background:var(--f-glow);opacity:1}.frame-canvas{flex:1;background:var(--ac-bg)}.frame-name{overflow:hidden;font-size:11px;font-weight:500;text-align:center;text-overflow:ellipsis;white-space:nowrap}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.canvas{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.canvas:hover{color:var(--ac-text)}.canvas.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.canvas-chip{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac-border);border-radius:6px}.canvas-chip i{font-size:15px}.canvas-sheet{width:60%;height:58%;border-radius:3px;box-shadow:0 1px 4px #00000038}.canvas-name{font-size:11px;font-weight:500;text-align:center}.accents{display:flex;flex-wrap:wrap;gap:9px}.accent{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .12s ease}.accent:hover{transform:scale(1.12)}.accent.is-auto{border-style:dashed;border-color:var(--ac-border)}.accent.is-active{border-style:solid;border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-surface) inset}.accent i{font-size:11px}.densities{display:flex;gap:10px}.density{display:flex;flex:1;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.density:hover{color:var(--ac-text)}.density.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.density-chip{display:flex;flex-direction:column;justify-content:center;height:42px;padding:0 10px;border:1px solid var(--ac-border);border-radius:6px;background:var(--ac-surface)}.density-row{height:3px;border-radius:2px;background:var(--ac-text-muted);opacity:.5}.density-name{font-size:11px;font-weight:500;text-align:center}@media(prefers-reduced-motion:reduce){.accent{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusAppearance, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-appearance', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let current = appearance();\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.frameTitle }}</h3>\n  <p class=\"group-hint\">{{ t.frameHint }}</p>\n\n  <div class=\"frames\" role=\"radiogroup\" [attr.aria-label]=\"t.frameTitle\">\n    @for (frame of frames(); track frame.id) {\n      <button\n        type=\"button\"\n        class=\"frame\"\n        role=\"radio\"\n        [class.is-active]=\"frame.id === current.frame\"\n        [attr.aria-checked]=\"frame.id === current.frame\"\n        [attr.aria-label]=\"frame.label\"\n        [style.--f-bg]=\"frame.tokens.bg\"\n        [style.--f-raised]=\"frame.tokens.raised\"\n        [style.--f-ink]=\"frame.tokens.ink\"\n        [style.--f-muted]=\"frame.tokens.muted\"\n        [style.--f-line]=\"frame.tokens.line\"\n        [style.--f-glow]=\"frame.tokens.glow\"\n        (click)=\"pickFrame(frame.id)\"\n      >\n        <span class=\"frame-chip\" aria-hidden=\"true\">\n          <span class=\"frame-bar\">\n            <span class=\"frame-dot\"></span>\n          </span>\n          <span class=\"frame-lower\">\n            <span class=\"frame-rail\">\n              <span class=\"frame-pin\"></span>\n              <span class=\"frame-row is-on\"></span>\n              <span class=\"frame-row\"></span>\n              <span class=\"frame-row\"></span>\n            </span>\n            <span class=\"frame-canvas\"></span>\n          </span>\n        </span>\n        <span class=\"frame-name\">{{ frame.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.canvasTitle }}</h3>\n  <p class=\"group-hint\">{{ t.canvasHint }}</p>\n\n  <div class=\"canvases\" role=\"radiogroup\" [attr.aria-label]=\"t.canvasTitle\">\n    @for (canvas of canvases(); track canvas.id) {\n      <button\n        type=\"button\"\n        class=\"canvas\"\n        role=\"radio\"\n        [class.is-active]=\"canvas.id === current.canvas\"\n        [attr.aria-checked]=\"canvas.id === current.canvas\"\n        (click)=\"pickCanvas(canvas.id)\"\n      >\n        <span\n          class=\"canvas-chip\"\n          aria-hidden=\"true\"\n          [style.background]=\"canvas.bg\"\n          [style.color]=\"canvas.text\"\n        >\n          @if (canvas.icon) {\n            <i [class]=\"canvas.icon\"></i>\n          } @else {\n            <span class=\"canvas-sheet\" [style.background]=\"canvas.surface\"></span>\n          }\n        </span>\n        <span class=\"canvas-name\">{{ canvas.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.accentTitle }}</h3>\n  <p class=\"group-hint\">{{ t.accentHint }}</p>\n\n  <div class=\"accents\" role=\"radiogroup\" [attr.aria-label]=\"t.accentTitle\">\n    @for (accent of accents(); track accent.id) {\n      <button\n        type=\"button\"\n        class=\"accent\"\n        role=\"radio\"\n        [class.is-auto]=\"accent.id === 'auto'\"\n        [class.is-active]=\"accent.id === current.accent\"\n        [attr.aria-checked]=\"accent.id === current.accent\"\n        [attr.aria-label]=\"accent.label\"\n        [title]=\"accent.label\"\n        [style.background]=\"accent.color\"\n        [style.color]=\"accent.ink\"\n        (click)=\"pickAccent(accent.id)\"\n      >\n        @if (accent.id === current.accent) {\n          <i class=\"pi pi-check\" aria-hidden=\"true\"></i>\n        } @else if (accent.id === 'auto') {\n          <i class=\"pi pi-sparkles\" aria-hidden=\"true\"></i>\n        }\n      </button>\n    }\n  </div>\n</section>\n\n<section class=\"group\">\n  <h3 class=\"group-title\">{{ t.densityTitle }}</h3>\n  <p class=\"group-hint\">{{ t.densityHint }}</p>\n\n  <div class=\"densities\" role=\"radiogroup\" [attr.aria-label]=\"t.densityTitle\">\n    @for (density of densities(); track density.id) {\n      <button\n        type=\"button\"\n        class=\"density\"\n        role=\"radio\"\n        [class.is-active]=\"density.id === current.density\"\n        [attr.aria-checked]=\"density.id === current.density\"\n        (click)=\"pickDensity(density.id)\"\n      >\n        <span class=\"density-chip\" aria-hidden=\"true\" [style.gap.px]=\"density.gap\">\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n          <span class=\"density-row\"></span>\n        </span>\n        <span class=\"density-name\">{{ density.label }}</span>\n      </button>\n    }\n  </div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;gap:26px}.group{display:flex;flex-direction:column;gap:2px}.group-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em}.group-hint{margin:0 0 12px;color:var(--ac-text-muted);font-size:12px;font-weight:300;line-height:1.45}.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.frame{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.frame:hover{color:var(--ac-text)}.frame.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.frame-chip{display:flex;overflow:hidden;flex-direction:column;height:52px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-bg)}.frame-bar{display:flex;flex:none;align-items:center;height:12px;padding-left:5px;border-bottom:1px solid var(--f-line)}.frame-dot{width:5px;height:5px;border-radius:50%;background:var(--f-glow)}.frame-lower{display:flex;flex:1;min-height:0}.frame-rail{display:flex;flex:none;flex-direction:column;gap:3px;width:22px;padding:4px 3px;border-right:1px solid var(--f-line)}.frame-pin{height:7px;border-left:2px solid var(--f-glow);border-radius:2px;background:var(--f-raised)}.frame-row{height:3px;border-radius:2px;background:var(--f-muted);opacity:.55}.frame-row.is-on{background:var(--f-glow);opacity:1}.frame-canvas{flex:1;background:var(--ac-bg)}.frame-name{overflow:hidden;font-size:11px;font-weight:500;text-align:center;text-overflow:ellipsis;white-space:nowrap}.canvases{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}.canvas{display:flex;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.canvas:hover{color:var(--ac-text)}.canvas.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.canvas-chip{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--ac-border);border-radius:6px}.canvas-chip i{font-size:15px}.canvas-sheet{width:60%;height:58%;border-radius:3px;box-shadow:0 1px 4px #00000038}.canvas-name{font-size:11px;font-weight:500;text-align:center}.accents{display:flex;flex-wrap:wrap;gap:9px}.accent{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .12s ease}.accent:hover{transform:scale(1.12)}.accent.is-auto{border-style:dashed;border-color:var(--ac-border)}.accent.is-active{border-style:solid;border-color:var(--ac-text);box-shadow:0 0 0 2px var(--ac-surface) inset}.accent i{font-size:11px}.densities{display:flex;gap:10px}.density{display:flex;flex:1;flex-direction:column;gap:6px;padding:4px;border:2px solid transparent;border-radius:10px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.density:hover{color:var(--ac-text)}.density.is-active{border-color:var(--ac-accent);color:var(--ac-text)}.density-chip{display:flex;flex-direction:column;justify-content:center;height:42px;padding:0 10px;border:1px solid var(--ac-border);border-radius:6px;background:var(--ac-surface)}.density-row{height:3px;border-radius:2px;background:var(--ac-text-muted);opacity:.5}.density-name{font-size:11px;font-weight:500;text-align:center}@media(prefers-reduced-motion:reduce){.accent{transition:none}}\n"] }]
+        }] });
+
+function menuTile(label, icon, color) {
+    return { label, icon, color, ink: color ? readableOn(color) : null, ghost: false };
+}
+function menuGlyph(icon) {
+    return { label: '', icon, color: null, ink: null, ghost: true };
+}
+function foldText(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase();
+}
+function matchesRow(row, term) {
+    return foldText(row.name).includes(term) || foldText(row.meta ?? '').includes(term);
+}
+function selectableRows(sections) {
+    return sections.flatMap((section) => section.rows).filter((row) => !row.disabled && !row.current);
+}
+
+class NucleusMenu {
+    sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    emptyText = input('', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    keyboardHint = input('', ...(ngDevMode ? [{ debugName: "keyboardHint" }] : /* istanbul ignore next */ []));
+    width = input(320, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    select = output();
+    dismiss = output();
+    term = signal('', ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+    searchBox = viewChild('searchBox', ...(ngDevMode ? [{ debugName: "searchBox" }] : /* istanbul ignore next */ []));
+    root = viewChild.required('root');
+    visible = computed(() => {
+        const term = foldText(this.term().trim());
+        if (!term)
+            return this.sections();
+        const rows = this.sections()
+            .flatMap((section) => section.rows)
+            .filter((row) => !row.current && matchesRow(row, term));
+        return [{ id: 'results', label: null, rows }];
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.visible().every((s) => s.rows.length === 0), ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    showSearch = computed(() => this.searchable(), ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    reachable = computed(() => selectableRows(this.visible()), ...(ngDevMode ? [{ debugName: "reachable" }] : /* istanbul ignore next */ []));
+    activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    syncActive = effect(() => {
+        const rows = this.reachable();
+        const current = this.activeId();
+        if (rows.some((row) => row.id === current))
+            return;
+        this.activeId.set(rows[0]?.id ?? null);
+    }, ...(ngDevMode ? [{ debugName: "syncActive" }] : /* istanbul ignore next */ []));
+    constructor() {
+        queueMicrotask(() => this.focusEntry());
+    }
+    isActive(row) {
+        return row.id === this.activeId();
+    }
+    onTerm(value) {
+        this.term.set(value);
+    }
+    choose(row) {
+        if (row.disabled || row.current)
+            return;
+        this.select.emit(row);
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.dismiss.emit();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.step(event.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        if (event.key === 'Enter') {
+            const row = this.reachable().find((item) => item.id === this.activeId());
+            if (!row)
+                return;
+            event.preventDefault();
+            this.choose(row);
+        }
+    }
+    step(delta) {
+        const rows = this.reachable();
+        if (!rows.length)
+            return;
+        const index = rows.findIndex((row) => row.id === this.activeId());
+        const next = (index + delta + rows.length) % rows.length;
+        this.activeId.set(rows[next].id);
+        this.scrollIntoView(rows[next].id);
+    }
+    scrollIntoView(id) {
+        const target = this.root().nativeElement.querySelector(`[data-row="${id}"]`);
+        target?.scrollIntoView({ block: 'nearest' });
+    }
+    focusEntry() {
+        const box = this.searchBox()?.nativeElement;
+        if (box) {
+            box.focus();
+            return;
+        }
+        this.root().nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusMenu, isStandalone: true, selector: "nucleus-menu", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, keyboardHint: { classPropertyName: "keyboardHint", publicName: "keyboardHint", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", dismiss: "dismiss" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.width.px": "width()" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"menu\" #root tabindex=\"-1\">\n  @if (heading()) {\n    <div class=\"menu-head\">\n      <h4>{{ heading() }}</h4>\n      @if (badge(); as count) {\n        <span class=\"menu-badge\">{{ count }}</span>\n      }\n    </div>\n  }\n\n  @if (showSearch()) {\n    <div class=\"menu-search\">\n      <label class=\"menu-field\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          #searchBox\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"term()\"\n          (input)=\"onTerm($any($event.target).value)\"\n        />\n      </label>\n    </div>\n  }\n\n  <div class=\"menu-body\" role=\"listbox\" [attr.aria-label]=\"heading()\">\n    @if (isEmpty()) {\n      <p class=\"menu-empty\">{{ emptyText() }}</p>\n    }\n\n    @for (section of visible(); track section.id) {\n      @if (section.rows.length) {\n        @if (section.label) {\n          <p class=\"menu-section\">{{ section.label }}</p>\n        }\n\n        @for (row of section.rows; track row.id) {\n          <button\n            type=\"button\"\n            class=\"menu-row\"\n            role=\"option\"\n            [attr.data-row]=\"row.id\"\n            [class.is-current]=\"row.current\"\n            [class.is-locked]=\"row.disabled\"\n            [class.is-active]=\"isActive(row)\"\n            [attr.aria-selected]=\"isActive(row)\"\n            [disabled]=\"row.disabled || row.current\"\n            (click)=\"choose(row)\"\n          >\n            @if (row.tile; as tile) {\n              <span\n                class=\"menu-tile\"\n                [class.is-ghost]=\"tile.ghost\"\n                [style.background]=\"tile.ghost ? null : tile.color\"\n                [style.color]=\"tile.ghost ? null : tile.ink\"\n                aria-hidden=\"true\"\n              >\n                @if (tile.icon) {\n                  <i [class]=\"tile.icon\"></i>\n                } @else {\n                  {{ tile.label }}\n                }\n              </span>\n            }\n\n            <span class=\"menu-text\">\n              <span class=\"menu-name\">{{ row.name }}</span>\n              @if (row.meta) {\n                <span class=\"menu-meta\">{{ row.meta }}</span>\n              }\n            </span>\n\n            <span class=\"menu-end\">\n              @if (row.tag) {\n                <span class=\"menu-tag\" [class.is-current]=\"row.current\">{{ row.tag }}</span>\n              } @else if (!row.disabled && !row.current) {\n                <i class=\"pi pi-chevron-right menu-chevron\" aria-hidden=\"true\"></i>\n              }\n            </span>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  @if (showSearch() && keyboardHint()) {\n    <p class=\"menu-foot\">{{ keyboardHint() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.menu{display:flex;flex-direction:column;min-width:0}.menu:focus-visible{outline:none}.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.menu-head h4{margin:0;overflow:hidden;color:var(--ns-header-ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.menu-badge{flex:none;padding:1px 8px;border-radius:var(--ac-radius-pill);background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.menu-search{padding:9px 10px;border-bottom:1px solid var(--ac-border)}.menu-field{position:relative;display:block}.menu-field i{position:absolute;top:50%;left:11px;color:var(--ac-text-muted);font-size:12px;pointer-events:none;transform:translateY(-50%)}.menu-field input{width:100%;box-sizing:border-box;padding:7px 10px 7px 31px;border:1px solid var(--ac-border);border-radius:7px;background:var(--ac-bg);color:var(--ac-text);font:inherit;font-size:13px}.menu-field input::placeholder{color:var(--ac-text-muted)}.menu-field input:focus-visible{border-color:var(--ac-accent);outline:2px solid color-mix(in srgb,var(--ac-accent) 45%,transparent);outline-offset:1px}.menu-body{display:flex;max-height:348px;flex-direction:column;gap:1px;padding:6px;overflow-y:auto}.menu-section{margin:0;padding:11px 9px 5px;color:var(--ac-text-muted);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.menu-empty{margin:0;padding:26px 14px;color:var(--ac-text-muted);font-size:12px;text-align:center}.menu-row{display:flex;width:100%;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ac-text);font:inherit;text-align:left;cursor:pointer}.menu-row:hover:not(:disabled),.menu-row.is-active:not(:disabled){background:var(--ns-accent-wash);box-shadow:inset 2px 0 0 var(--ac-accent)}.menu-row:focus-visible{outline:none}.menu-row.is-current{background:var(--ac-surface-alt);box-shadow:none;cursor:default}.menu-row.is-locked{cursor:default;opacity:.55}.menu-tile{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;font-size:11.5px;font-weight:600;letter-spacing:.02em}.menu-tile i{font-size:14px}.menu-tile.is-ghost{background:var(--ac-surface-alt);color:var(--ac-text-muted)}.menu-row:hover:not(:disabled) .menu-tile.is-ghost,.menu-row.is-active:not(:disabled) .menu-tile.is-ghost{color:var(--ac-accent)}.menu-text{display:flex;min-width:0;flex-direction:column;gap:1px}.menu-name{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.menu-meta{overflow:hidden;color:var(--ac-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.menu-end{display:flex;flex:none;align-items:center;margin-left:auto}.menu-chevron{color:var(--ac-accent);font-size:11px;opacity:0}.menu-row:hover:not(:disabled) .menu-chevron,.menu-row.is-active:not(:disabled) .menu-chevron{opacity:1}.menu-tag{padding:2px 7px;border-radius:4px;background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.menu-tag.is-current{background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent)}.menu-foot{margin:0;padding:8px 14px;border-top:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:10.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'nucleus-menu', host: {
+                        '[style.width.px]': 'width()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #root tabindex=\"-1\">\n  @if (heading()) {\n    <div class=\"menu-head\">\n      <h4>{{ heading() }}</h4>\n      @if (badge(); as count) {\n        <span class=\"menu-badge\">{{ count }}</span>\n      }\n    </div>\n  }\n\n  @if (showSearch()) {\n    <div class=\"menu-search\">\n      <label class=\"menu-field\">\n        <i class=\"pi pi-search\" aria-hidden=\"true\"></i>\n        <input\n          #searchBox\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"term()\"\n          (input)=\"onTerm($any($event.target).value)\"\n        />\n      </label>\n    </div>\n  }\n\n  <div class=\"menu-body\" role=\"listbox\" [attr.aria-label]=\"heading()\">\n    @if (isEmpty()) {\n      <p class=\"menu-empty\">{{ emptyText() }}</p>\n    }\n\n    @for (section of visible(); track section.id) {\n      @if (section.rows.length) {\n        @if (section.label) {\n          <p class=\"menu-section\">{{ section.label }}</p>\n        }\n\n        @for (row of section.rows; track row.id) {\n          <button\n            type=\"button\"\n            class=\"menu-row\"\n            role=\"option\"\n            [attr.data-row]=\"row.id\"\n            [class.is-current]=\"row.current\"\n            [class.is-locked]=\"row.disabled\"\n            [class.is-active]=\"isActive(row)\"\n            [attr.aria-selected]=\"isActive(row)\"\n            [disabled]=\"row.disabled || row.current\"\n            (click)=\"choose(row)\"\n          >\n            @if (row.tile; as tile) {\n              <span\n                class=\"menu-tile\"\n                [class.is-ghost]=\"tile.ghost\"\n                [style.background]=\"tile.ghost ? null : tile.color\"\n                [style.color]=\"tile.ghost ? null : tile.ink\"\n                aria-hidden=\"true\"\n              >\n                @if (tile.icon) {\n                  <i [class]=\"tile.icon\"></i>\n                } @else {\n                  {{ tile.label }}\n                }\n              </span>\n            }\n\n            <span class=\"menu-text\">\n              <span class=\"menu-name\">{{ row.name }}</span>\n              @if (row.meta) {\n                <span class=\"menu-meta\">{{ row.meta }}</span>\n              }\n            </span>\n\n            <span class=\"menu-end\">\n              @if (row.tag) {\n                <span class=\"menu-tag\" [class.is-current]=\"row.current\">{{ row.tag }}</span>\n              } @else if (!row.disabled && !row.current) {\n                <i class=\"pi pi-chevron-right menu-chevron\" aria-hidden=\"true\"></i>\n              }\n            </span>\n          </button>\n        }\n      }\n    }\n  </div>\n\n  @if (showSearch() && keyboardHint()) {\n    <p class=\"menu-foot\">{{ keyboardHint() }}</p>\n  }\n</div>\n", styles: [":host{display:block}.menu{display:flex;flex-direction:column;min-width:0}.menu:focus-visible{outline:none}.menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.menu-head h4{margin:0;overflow:hidden;color:var(--ns-header-ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.menu-badge{flex:none;padding:1px 8px;border-radius:var(--ac-radius-pill);background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.menu-search{padding:9px 10px;border-bottom:1px solid var(--ac-border)}.menu-field{position:relative;display:block}.menu-field i{position:absolute;top:50%;left:11px;color:var(--ac-text-muted);font-size:12px;pointer-events:none;transform:translateY(-50%)}.menu-field input{width:100%;box-sizing:border-box;padding:7px 10px 7px 31px;border:1px solid var(--ac-border);border-radius:7px;background:var(--ac-bg);color:var(--ac-text);font:inherit;font-size:13px}.menu-field input::placeholder{color:var(--ac-text-muted)}.menu-field input:focus-visible{border-color:var(--ac-accent);outline:2px solid color-mix(in srgb,var(--ac-accent) 45%,transparent);outline-offset:1px}.menu-body{display:flex;max-height:348px;flex-direction:column;gap:1px;padding:6px;overflow-y:auto}.menu-section{margin:0;padding:11px 9px 5px;color:var(--ac-text-muted);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.menu-empty{margin:0;padding:26px 14px;color:var(--ac-text-muted);font-size:12px;text-align:center}.menu-row{display:flex;width:100%;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ac-text);font:inherit;text-align:left;cursor:pointer}.menu-row:hover:not(:disabled),.menu-row.is-active:not(:disabled){background:var(--ns-accent-wash);box-shadow:inset 2px 0 0 var(--ac-accent)}.menu-row:focus-visible{outline:none}.menu-row.is-current{background:var(--ac-surface-alt);box-shadow:none;cursor:default}.menu-row.is-locked{cursor:default;opacity:.55}.menu-tile{display:inline-flex;width:34px;height:34px;flex:none;align-items:center;justify-content:center;border-radius:9px;font-size:11.5px;font-weight:600;letter-spacing:.02em}.menu-tile i{font-size:14px}.menu-tile.is-ghost{background:var(--ac-surface-alt);color:var(--ac-text-muted)}.menu-row:hover:not(:disabled) .menu-tile.is-ghost,.menu-row.is-active:not(:disabled) .menu-tile.is-ghost{color:var(--ac-accent)}.menu-text{display:flex;min-width:0;flex-direction:column;gap:1px}.menu-name{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.menu-meta{overflow:hidden;color:var(--ac-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.menu-end{display:flex;flex:none;align-items:center;margin-left:auto}.menu-chevron{color:var(--ac-accent);font-size:11px;opacity:0}.menu-row:hover:not(:disabled) .menu-chevron,.menu-row.is-active:not(:disabled) .menu-chevron{opacity:1}.menu-tag{padding:2px 7px;border-radius:4px;background:var(--ac-surface-alt);color:var(--ac-text-muted);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.menu-tag.is-current{background:color-mix(in srgb,var(--ac-accent) 16%,transparent);color:var(--ac-accent)}.menu-foot{margin:0;padding:8px 14px;border-top:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:10.5px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], keyboardHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardHint", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], searchBox: [{ type: i0.ViewChild, args: ['searchBox', { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
+
+const STORAGE_KEY = 'nucleus_recent_apps';
+const KEEP = 8;
+function readIds() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return [];
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed.filter((value) => typeof value === 'string').slice(0, KEEP);
+    }
+    catch {
+        return [];
+    }
+}
+class NucleusRecentApps {
+    _ids = signal(readIds(), ...(ngDevMode ? [{ debugName: "_ids" }] : /* istanbul ignore next */ []));
+    ids = this._ids.asReadonly();
+    remember(appId) {
+        const key = appId.toLowerCase();
+        this._ids.update((ids) => [key, ...ids.filter((id) => id !== key)].slice(0, KEEP));
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(this._ids()));
+        }
+        catch { }
+    }
+    pick(source, limit) {
+        const byId = new Map(source.map((item) => [item.id.toLowerCase(), item]));
+        return this._ids()
+            .map((id) => byId.get(id))
+            .filter((item) => item !== undefined)
+            .slice(0, limit);
+    }
+    clear() {
+        this._ids.set([]);
+        try {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+        catch { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusRecentApps, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusRecentApps, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusRecentApps, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const W = 1280;
 const H = 720;
 const STARS = Array.from({ length: 130 }, (_, i) => {
@@ -1745,10 +3331,17 @@ const SHELL_COPY = {
         navToggle: 'Mostrar u ocultar el menú',
         appsLauncher: 'Aplicaciones',
         appsEmpty: 'No hay otras aplicaciones',
+        appsSwitch: 'Cambiar de aplicación',
+        appsSearch: 'Buscar aplicación',
+        appsNoMatch: 'Ninguna aplicación coincide con lo que escribiste.',
+        appsRecent: 'Recientes',
+        appsAll: 'Todas',
+        appsAvailable: 'Disponibles',
+        appsHere: 'Aquí',
+        keyboardHint: '↑ ↓ moverse · ↵ abrir · esc cerrar',
+        accountSwitchHint: 'Entrar con otro correo',
+        signOutHint: 'Salir de la suite',
         settingsTitle: 'Ajustes',
-        settingsTheme: 'Tema',
-        settingsThemeHint: 'Elige cómo se ve la suite en este dispositivo.',
-        themeSystem: 'Del sistema',
         signOut: 'Cerrar sesión',
         accountManage: 'Gestionar mi cuenta',
         accountSwitch: 'Cambiar de cuenta',
@@ -1757,19 +3350,15 @@ const SHELL_COPY = {
         accountScope: 'Mi cuenta',
         hintComingSoon: 'Próximamente',
         hintNotDeployed: 'Sin publicar',
-        switchSite: 'Cambiar sede',
-        contextTitle: 'Compañía y sede',
-        contextHint: 'Elige dónde quieres trabajar. El menú se carga según tu rol en la sede.',
+        roleCaption: 'Tu rol',
         companyLabel: 'Compañía',
         companyPlaceholder: 'Selecciona una compañía',
         siteLabel: 'Sede',
         sitePlaceholder: 'Selecciona una sede',
         sitesLoading: 'Cargando sedes...',
         sitesEmpty: 'Esta compañía no tiene sedes a tu alcance',
-        confirmSwitch: 'Cambiar',
         relationOwner: 'Propietario',
         relationCollaborator: 'Colaborador',
-        noContext: 'Sin sede seleccionada',
         noCompanyTitle: 'Te falta una compañía',
         noCompanyHint: 'Para trabajar en las aplicaciones necesitas al menos una compañía con una sede, ' +
             'propia o donde te hayan invitado. Puedes entrar igual, pero el menú saldrá vacío.',
@@ -1778,10 +3367,17 @@ const SHELL_COPY = {
         navToggle: 'Show or hide the menu',
         appsLauncher: 'Applications',
         appsEmpty: 'No other applications',
+        appsSwitch: 'Switch application',
+        appsSearch: 'Search applications',
+        appsNoMatch: 'No application matches what you typed.',
+        appsRecent: 'Recent',
+        appsAll: 'All',
+        appsAvailable: 'Available',
+        appsHere: 'Here',
+        keyboardHint: '↑ ↓ move · ↵ open · esc close',
+        accountSwitchHint: 'Sign in with another address',
+        signOutHint: 'Leave the suite',
         settingsTitle: 'Settings',
-        settingsTheme: 'Theme',
-        settingsThemeHint: 'Choose how the suite looks on this device.',
-        themeSystem: 'System',
         signOut: 'Sign out',
         accountManage: 'Manage my account',
         accountSwitch: 'Switch account',
@@ -1790,29 +3386,29 @@ const SHELL_COPY = {
         accountScope: 'My account',
         hintComingSoon: 'Coming soon',
         hintNotDeployed: 'Not deployed',
-        switchSite: 'Switch site',
-        contextTitle: 'Company and site',
-        contextHint: 'Choose where you want to work. The menu loads from your role at that site.',
+        roleCaption: 'Your role',
         companyLabel: 'Company',
         companyPlaceholder: 'Select a company',
         siteLabel: 'Site',
         sitePlaceholder: 'Select a site',
         sitesLoading: 'Loading sites...',
         sitesEmpty: 'This company has no sites available to you',
-        confirmSwitch: 'Switch',
         relationOwner: 'Owner',
         relationCollaborator: 'Collaborator',
-        noContext: 'No site selected',
         noCompanyTitle: 'You need a company',
         noCompanyHint: 'To work in the applications you need at least one company with a site, your own or ' +
             'one you have been invited to. You can still open them, but the menu will be empty.',
     },
 };
 
+const LAUNCHER_RICH_THRESHOLD = 6;
+const RECENT_LIMIT = 3;
+const FALLBACK_APP_COLOR = '#64748b';
 class NucleusShell {
     session = inject(SessionService);
     sessionAuth = inject(NucleusSessionAuth);
     themes = inject(ThemeService);
+    recents = inject(NucleusRecentApps);
     language = inject(NucleusLanguage);
     page = inject(NucleusPage);
     config = inject(NUCLEUS_CONFIG);
@@ -1828,6 +3424,7 @@ class NucleusShell {
     menuSelect = output();
     lang = this.language.lang;
     icons = NUCLEUS_ICONS;
+    menuPlaceholders = ['64%', '80%', '52%', '72%', '58%'];
     title = computed(() => this.heading() || this.page.heading(), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     subtitle = computed(() => this.lead() || this.page.lead(), ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     home = computed(() => ({ icon: 'pi pi-home', routerLink: '/' }), ...(ngDevMode ? [{ debugName: "home" }] : /* istanbul ignore next */ []));
@@ -1837,20 +3434,22 @@ class NucleusShell {
     })), ...(ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []));
     copy = computed(() => SHELL_COPY[this.lang()], ...(ngDevMode ? [{ debugName: "copy" }] : /* istanbul ignore next */ []));
     starfield = this.themes.starfield;
-    themePreference = this.themes.preference;
     menu = this.session.menu;
+    collapsedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedIds" }] : /* istanbul ignore next */ []));
     menuLoading = this.session.loading;
     menuError = this.session.error;
     launcherApps = this.session.apps;
     switching = this.session.switching;
-    sidebarOpen = signal(true, ...(ngDevMode ? [{ debugName: "sidebarOpen" }] : /* istanbul ignore next */ []));
+    narrowQuery = typeof window === 'undefined' ? null : window.matchMedia('(max-width: 720px)');
+    narrow = signal(this.narrowQuery?.matches ?? false, ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    sidebarOpen = signal(!(this.narrowQuery?.matches ?? false), ...(ngDevMode ? [{ debugName: "sidebarOpen" }] : /* istanbul ignore next */ []));
     settingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "settingsOpen" }] : /* istanbul ignore next */ []));
-    contextOpen = signal(false, ...(ngDevMode ? [{ debugName: "contextOpen" }] : /* istanbul ignore next */ []));
     companyChoice = signal(null, ...(ngDevMode ? [{ debugName: "companyChoice" }] : /* istanbul ignore next */ []));
     siteChoice = signal(null, ...(ngDevMode ? [{ debugName: "siteChoice" }] : /* istanbul ignore next */ []));
     siteOptions = signal([], ...(ngDevMode ? [{ debugName: "siteOptions" }] : /* istanbul ignore next */ []));
     sitesLoading = signal(false, ...(ngDevMode ? [{ debugName: "sitesLoading" }] : /* istanbul ignore next */ []));
     auth = this.injector.get(NucleusAuth, null);
+    sitesCompanyId = null;
     identity = computed(() => {
         const me = this.session.me();
         if (me) {
@@ -1879,26 +3478,102 @@ class NucleusShell {
             tag: company.relation === 'owner' ? t.relationOwner : t.relationCollaborator,
         }));
     }, ...(ngDevMode ? [{ debugName: "companyChoices" }] : /* istanbul ignore next */ []));
-    contextCaption = computed(() => {
-        const role = this.session.roleName();
-        const site = this.session.siteName();
-        const company = this.session.companyName();
-        if (role && site)
-            return company ? `${company} · ${site}` : site;
-        if (this.session.scope() === 'account')
-            return this.copy().accountScope;
-        return this.copy().noContext;
-    }, ...(ngDevMode ? [{ debugName: "contextCaption" }] : /* istanbul ignore next */ []));
     roleName = this.session.roleName;
-    canConfirm = computed(() => this.companyChoice() !== null && this.siteChoice() !== null && !this.switching(), ...(ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []));
-    themeOptions = computed(() => [
-        ...THEMES.map((theme) => ({
-            value: theme.id,
-            label: THEME_LABELS[theme.id],
-            swatch: theme.swatch,
-        })),
-        { value: 'system', label: this.copy().themeSystem, swatch: null },
-    ], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    words = computed(() => commonCopyOf(this.lang()), ...(ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []));
+    hasSiteContext = computed(() => this.session.scope() === 'site', ...(ngDevMode ? [{ debugName: "hasSiteContext" }] : /* istanbul ignore next */ []));
+    launcherRich = computed(() => this.launcherApps().length > LAUNCHER_RICH_THRESHOLD, ...(ngDevMode ? [{ debugName: "launcherRich" }] : /* istanbul ignore next */ []));
+    launcherCount = computed(() => {
+        const total = this.launcherApps().length + (this.session.currentApp() ? 1 : 0);
+        return total > LAUNCHER_RICH_THRESHOLD ? String(total) : null;
+    }, ...(ngDevMode ? [{ debugName: "launcherCount" }] : /* istanbul ignore next */ []));
+    launcherSections = computed(() => {
+        const t = this.copy();
+        const apps = this.launcherApps();
+        const current = this.session.currentApp();
+        const sections = [];
+        if (current) {
+            sections.push({ id: 'current', label: null, rows: [this.appRow(current, true)] });
+        }
+        if (!apps.length)
+            return sections;
+        if (this.launcherRich()) {
+            const recent = this.recents.pick(apps, RECENT_LIMIT);
+            if (recent.length) {
+                sections.push({
+                    id: 'recent',
+                    label: t.appsRecent,
+                    rows: recent.map((app) => this.appRow(app, false)),
+                });
+            }
+            sections.push({
+                id: 'all',
+                label: t.appsAll,
+                rows: apps.map((app) => this.appRow(app, false)),
+            });
+            return sections;
+        }
+        sections.push({
+            id: 'all',
+            label: current ? t.appsAvailable : null,
+            rows: apps.map((app) => this.appRow(app, false)),
+        });
+        return sections;
+    }, ...(ngDevMode ? [{ debugName: "launcherSections" }] : /* istanbul ignore next */ []));
+    accountSections = computed(() => {
+        const t = this.copy();
+        const rows = [];
+        if (this.canSwitchAccount()) {
+            rows.push({
+                id: 'switch',
+                name: t.accountSwitch,
+                meta: t.accountSwitchHint,
+                tile: menuGlyph('pi pi-users'),
+                tag: null,
+                current: false,
+                disabled: false,
+            });
+        }
+        rows.push({
+            id: 'signout',
+            name: t.signOut,
+            meta: t.signOutHint,
+            tile: menuGlyph('pi pi-sign-out'),
+            tag: null,
+            current: false,
+            disabled: false,
+        });
+        return [{ id: 'actions', label: null, rows }];
+    }, ...(ngDevMode ? [{ debugName: "accountSections" }] : /* istanbul ignore next */ []));
+    accountContext = computed(() => {
+        const company = this.companyChoices().find((item) => item.id === this.companyChoice());
+        const site = this.session.siteName();
+        if (company && site)
+            return `${company.name} · ${site}`;
+        if (company)
+            return company.name;
+        return this.copy().accountScope;
+    }, ...(ngDevMode ? [{ debugName: "accountContext" }] : /* istanbul ignore next */ []));
+    sitePlaceholder = computed(() => {
+        const t = this.copy();
+        if (this.sitesLoading())
+            return t.sitesLoading;
+        if (!this.siteOptions().length)
+            return t.sitesEmpty;
+        return t.sitePlaceholder;
+    }, ...(ngDevMode ? [{ debugName: "sitePlaceholder" }] : /* istanbul ignore next */ []));
+    topbarHeight = computed(() => this.narrow() && this.hasSiteContext() ? '100px' : '56px', ...(ngDevMode ? [{ debugName: "topbarHeight" }] : /* istanbul ignore next */ []));
+    syncContext = effect(() => {
+        const companyId = this.session.companyId();
+        const siteId = this.session.siteId();
+        untracked(() => {
+            this.companyChoice.set(companyId);
+            this.siteChoice.set(siteId);
+            if (companyId)
+                void this.loadSites(companyId);
+            else
+                this.siteOptions.set([]);
+        });
+    }, ...(ngDevMode ? [{ debugName: "syncContext" }] : /* istanbul ignore next */ []));
     loadSession = effect(() => {
         const language = this.lang();
         const user = this.auth?.user() ?? null;
@@ -1906,49 +3581,97 @@ class NucleusShell {
             return;
         untracked(() => void this.session.load(language));
     }, ...(ngDevMode ? [{ debugName: "loadSession" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const query = this.narrowQuery;
+        if (!query)
+            return;
+        const onChange = (event) => {
+            this.narrow.set(event.matches);
+            this.sidebarOpen.set(!event.matches);
+        };
+        query.addEventListener('change', onChange);
+        inject(DestroyRef).onDestroy(() => query.removeEventListener('change', onChange));
+    }
     setLang(lang) {
         this.language.setLang(lang);
     }
     toggleSidebar() {
         this.sidebarOpen.update((open) => !open);
     }
-    selectTheme(preference) {
-        if (preference)
-            this.themes.setPreference(preference);
-    }
     selectNav(id) {
         this.navSelect.emit(id);
+        this.closeSidebarOnNarrow();
+    }
+    isGroup(node) {
+        return node.children.length > 0;
+    }
+    isExpanded(node) {
+        return !this.collapsedIds().has(node.id);
     }
     selectMenu(node) {
+        if (this.isGroup(node)) {
+            this.collapsedIds.update((ids) => {
+                const next = new Set(ids);
+                if (!next.delete(node.id))
+                    next.add(node.id);
+                return next;
+            });
+            return;
+        }
+        if (!node.route)
+            return;
         this.menuSelect.emit(node);
-        if (node.route)
-            void this.router.navigateByUrl(node.route);
+        void this.router.navigateByUrl(node.route);
+        this.closeSidebarOnNarrow();
+    }
+    closeSidebarOnNarrow() {
+        if (this.narrow())
+            this.sidebarOpen.set(false);
     }
     isSelected(node) {
         return this.selectedMenuId() === node.id;
     }
-    async openContext() {
-        const companyId = this.session.companyId() ?? this.companyChoices()[0]?.id ?? null;
-        this.companyChoice.set(companyId);
-        this.siteChoice.set(this.session.siteId());
-        this.contextOpen.set(true);
-        if (companyId)
-            await this.loadSites(companyId);
-    }
     async onCompanyChange(companyId) {
+        if (!companyId || companyId === this.session.companyId())
+            return;
         this.companyChoice.set(companyId);
         this.siteChoice.set(null);
-        this.siteOptions.set([]);
-        if (companyId)
-            await this.loadSites(companyId);
+        const sites = await this.loadSites(companyId);
+        const first = sites[0]?.id ?? null;
+        this.siteChoice.set(first);
+        if (first)
+            await this.session.switchContext(companyId, first);
     }
-    async confirmSwitch() {
+    async onSiteChange(siteId) {
         const companyId = this.companyChoice();
-        const siteId = this.siteChoice();
-        if (!companyId || !siteId)
+        if (!siteId || !companyId || siteId === this.session.siteId())
             return;
+        this.siteChoice.set(siteId);
         await this.session.switchContext(companyId, siteId);
-        this.contextOpen.set(false);
+    }
+    appRow(app, current) {
+        const hint = current ? this.copy().appsHere : this.launchHint(app);
+        return {
+            id: app.id,
+            name: app.name,
+            meta: app.description,
+            tile: menuTile(initialsOf(app.name), app.icon, app.color ?? FALLBACK_APP_COLOR),
+            tag: hint || null,
+            current,
+            disabled: !current && !this.canOpen(app),
+        };
+    }
+    onLauncherSelect(row) {
+        const app = this.launcherApps().find((item) => item.id === row.id);
+        if (app)
+            this.launch(app);
+    }
+    onAccountSelect(row) {
+        if (row.id === 'switch') {
+            void this.switchAccount();
+            return;
+        }
+        void this.signOut();
     }
     canOpen(app) {
         return app.status === 1 && !!app.url;
@@ -1956,6 +3679,7 @@ class NucleusShell {
     launch(app) {
         if (!this.canOpen(app))
             return;
+        this.recents.remember(app.id);
         window.location.href = app.url;
     }
     appInitials(app) {
@@ -1980,24 +3704,27 @@ class NucleusShell {
             window.location.href = nucleusLogoutUrl(landing);
     }
     async loadSites(companyId) {
+        if (this.sitesCompanyId === companyId)
+            return this.siteOptions();
+        this.sitesCompanyId = companyId;
         this.sitesLoading.set(true);
         try {
             const sites = await this.session.accessibleSites(companyId);
             this.siteOptions.set(sites);
-            if (!sites.some((site) => site.id === this.siteChoice())) {
-                this.siteChoice.set(sites[0]?.id ?? null);
-            }
+            return sites;
         }
         catch (error) {
+            this.sitesCompanyId = null;
             this.siteOptions.set([]);
             console.error('[shell] no se pudieron cargar las sedes', error);
+            return [];
         }
         finally {
             this.sitesLoading.set(false);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusShell, isStandalone: true, selector: "nucleus-shell", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, lead: { classPropertyName: "lead", publicName: "lead", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, activeNavId: { classPropertyName: "activeNavId", publicName: "activeNavId", isSignal: true, isRequired: false, transformFunction: null }, selectedMenuId: { classPropertyName: "selectedMenuId", publicName: "selectedMenuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navSelect: "navSelect", menuSelect: "menuSelect" }, ngImport: i0, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"side\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher>\n      <div class=\"launcher\">\n        <p class=\"launcher-title\">{{ t.appsLauncher }}</p>\n\n        @if (!hasCompany()) {\n          <div class=\"launcher-notice\">\n            <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n            <div>\n              <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n              <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n            </div>\n          </div>\n        }\n\n        @if (!launcherApps().length) {\n          <p class=\"launcher-empty\">{{ t.appsEmpty }}</p>\n        }\n\n        <div class=\"launcher-grid\">\n          @for (app of launcherApps(); track app.id) {\n            <button\n              type=\"button\"\n              class=\"launcher-item\"\n              [class.is-disabled]=\"!canOpen(app)\"\n              [disabled]=\"!canOpen(app)\"\n              [pTooltip]=\"launchHint(app)\"\n              tooltipPosition=\"bottom\"\n              (click)=\"launch(app); launcher.hide()\"\n            >\n              <span class=\"launcher-icon\" [style.background]=\"app.color ?? '#64748b'\">\n                @if (app.icon) {\n                  <i [class]=\"app.icon\" aria-hidden=\"true\"></i>\n                } @else {\n                  <span class=\"launcher-initials\">{{ appInitials(app) }}</span>\n                }\n              </span>\n              <span class=\"launcher-name\">{{ app.name }}</span>\n              @if (launchHint(app)) {\n                <span class=\"launcher-badge\">{{ launchHint(app) }}</span>\n              }\n            </button>\n          }\n        </div>\n      </div>\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account>\n  @if (me) {\n    <div class=\"account\">\n      <p class=\"account-email\">{{ me.email }}</p>\n\n      <div class=\"account-head\">\n        @if (me.photoUrl) {\n          <img class=\"account-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"72\" height=\"72\" />\n        } @else {\n          <span class=\"account-photo account-initials\">{{ initials() }}</span>\n        }\n        <p class=\"account-hi\">{{ me.name }}</p>\n      </div>\n\n      <div class=\"account-context\">\n        @if (roleName()) {\n          <p-tag [value]=\"roleName()!\" severity=\"secondary\" />\n        }\n        <p class=\"account-place\">{{ contextCaption() }}</p>\n        <p-button\n          [label]=\"t.switchSite\"\n          icon=\"pi pi-building\"\n          severity=\"secondary\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [rounded]=\"true\"\n          [fluid]=\"true\"\n          (onClick)=\"openContext(); account.hide()\"\n        />\n      </div>\n\n      <div class=\"account-actions\">\n        @if (canSwitchAccount()) {\n          <p-button\n            [label]=\"t.accountSwitch\"\n            icon=\"pi pi-users\"\n            severity=\"secondary\"\n            size=\"small\"\n            [text]=\"true\"\n            [fluid]=\"true\"\n            (onClick)=\"switchAccount(); account.hide()\"\n          />\n        }\n        <p-button\n          [label]=\"t.signOut\"\n          icon=\"pi pi-sign-out\"\n          severity=\"secondary\"\n          size=\"small\"\n          [text]=\"true\"\n          [fluid]=\"true\"\n          (onClick)=\"signOut(); account.hide()\"\n        />\n      </div>\n    </div>\n  }\n</p-popover>\n\n<div class=\"body\">\n  <aside class=\"sidebar\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <p class=\"access-state\">{{ t.accessLoading }}</p>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"isSelected(node)\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n          </button>\n\n          @for (child of node.children; track child.id) {\n            <button\n              type=\"button\"\n              class=\"nav-item is-child\"\n              [class.is-active]=\"isSelected(child)\"\n              [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n              tooltipPosition=\"right\"\n              (click)=\"selectMenu(child)\"\n            >\n              <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n              <span class=\"nav-label\">{{ child.label }}</span>\n            </button>\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length) {\n        <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n      }\n\n      @if (title()) {\n        <h1>{{ title() }}</h1>\n      }\n      @if (subtitle()) {\n        <p class=\"lead\">{{ subtitle() }}</p>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"contextOpen()\"\n  (visibleChange)=\"contextOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.contextTitle\"\n  [style]=\"{ width: '380px' }\"\n>\n  <p class=\"settings-hint\">{{ t.contextHint }}</p>\n\n  <label class=\"field-label\" for=\"nucleus-company\">{{ t.companyLabel }}</label>\n  <p-select\n    inputId=\"nucleus-company\"\n    [options]=\"companyChoices()\"\n    optionValue=\"id\"\n    optionLabel=\"name\"\n    [ngModel]=\"companyChoice()\"\n    (ngModelChange)=\"onCompanyChange($event)\"\n    [placeholder]=\"t.companyPlaceholder\"\n    [fluid]=\"true\"\n  >\n    <ng-template #item let-option>\n      <span class=\"company-option\">\n        <span class=\"company-name\">{{ option.name }}</span>\n        <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n      </span>\n    </ng-template>\n  </p-select>\n\n  <label class=\"field-label\" for=\"nucleus-site\">{{ t.siteLabel }}</label>\n\n  @if (sitesLoading()) {\n    <p class=\"access-state\">{{ t.sitesLoading }}</p>\n  } @else if (!siteOptions().length) {\n    <p class=\"access-state\">{{ t.sitesEmpty }}</p>\n  } @else {\n    <p-select\n      inputId=\"nucleus-site\"\n      [options]=\"siteOptions()\"\n      optionValue=\"id\"\n      optionLabel=\"name\"\n      [ngModel]=\"siteChoice()\"\n      (ngModelChange)=\"siteChoice.set($event)\"\n      [placeholder]=\"t.sitePlaceholder\"\n      [fluid]=\"true\"\n    />\n  }\n\n  <div class=\"context-actions\">\n    <p-button\n      [label]=\"t.confirmSwitch\"\n      icon=\"pi pi-arrow-right\"\n      [disabled]=\"!canConfirm()\"\n      [loading]=\"switching()\"\n      [fluid]=\"true\"\n      (onClick)=\"confirmSwitch()\"\n    />\n  </div>\n</p-drawer>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [style]=\"{ width: '340px' }\"\n>\n  <h3 class=\"settings-heading\">{{ t.settingsTheme }}</h3>\n  <p class=\"settings-hint\">{{ t.settingsThemeHint }}</p>\n\n  <p-listbox\n    [options]=\"themeOptions()\"\n    optionValue=\"value\"\n    optionLabel=\"label\"\n    [ngModel]=\"themePreference()\"\n    (ngModelChange)=\"selectTheme($event)\"\n    [ariaLabel]=\"t.settingsTheme\"\n  >\n    <ng-template #item let-option>\n      <span class=\"theme-option\">\n        @if (option.swatch) {\n          <span class=\"theme-swatch\" [style.background]=\"option.swatch\" aria-hidden=\"true\"></span>\n        } @else {\n          <i class=\"pi pi-desktop theme-swatch-icon\" aria-hidden=\"true\"></i>\n        }\n        <span>{{ option.label }}</span>\n      </span>\n    </ng-template>\n  </p-listbox>\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 12px 0 8px;background:var(--ac-surface);border-bottom:1px solid var(--ac-border)}.side{display:flex;align-items:center;gap:4px}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--ac-text-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ac-border);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.lang-pill.is-active{background:var(--ac-accent);color:var(--ac-on-accent)}.launcher{width:320px;padding:4px}.launcher-title{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--ac-text-muted)}.launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.launcher-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border:none;border-radius:8px;background:transparent;color:var(--ac-text);cursor:pointer}.launcher-item:hover:not(:disabled){background:var(--ac-surface-alt)}.launcher-item.is-disabled{opacity:.5;cursor:default}.launcher-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:#fff}.launcher-icon i{font-size:18px}.launcher-name{font-size:11px;font-weight:500;line-height:1.3;text-align:center}.launcher-badge{font-size:9px;font-weight:500;color:var(--ac-text-muted)}.account{width:300px;padding:4px;text-align:center}.account-email{margin:0 0 12px;font-size:12px;color:var(--ac-text-muted)}.account-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--ac-border)}.account-photo{width:72px;height:72px;border-radius:999px;object-fit:cover}.account-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:26px;font-weight:600}.account-hi{margin:0;font-size:16px;font-weight:500}.account-actions{display:flex;flex-direction:column;gap:2px;padding-top:8px}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:224px;padding:12px 10px;background:var(--ac-surface);border-right:1px solid var(--ac-border);transition:width .18s ease}.sidebar.is-collapsed{width:60px}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:none;border-radius:6px;background:transparent;color:var(--ac-text-muted);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ac-surface-alt);color:var(--ac-text)}.nav-item.is-active{background:color-mix(in srgb,var(--ac-accent) 18%,transparent);color:var(--ac-text)}.nav-item.is-active i{color:var(--ac-accent)}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:auto}h1{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.lead{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:var(--ac-text-muted)}.settings-heading{margin:0 0 4px;font-size:14px;font-weight:600}.settings-hint{margin:0 0 14px;font-size:12px;font-weight:300;color:var(--ac-text-muted)}.theme-option{display:flex;align-items:center;gap:10px}.theme-swatch{flex:none;width:16px;height:16px;border-radius:3px;border:1px solid var(--ac-border)}.theme-swatch-icon{flex:none;width:16px;font-size:14px;color:var(--ac-text-muted)}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;font-size:.78rem;opacity:.7}.access-state.is-error{color:var(--p-red-400, #f87171);opacity:1}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}.launcher-initials{font-size:.85rem;font-weight:600;letter-spacing:.02em;line-height:1;color:#fff}.launcher-empty{margin:.25rem 0 .5rem;font-size:.82rem;opacity:.7}@media(max-width:720px){.sidebar{width:60px}.sidebar .nav-label{display:none}.sidebar .nav-item{justify-content:center;padding-inline:0}.brand-secondary{display:none}.content{padding:20px 16px 48px}h1{font-size:22px}.launcher{width:260px}}.account-context{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0;border-top:1px solid var(--ac-border);border-bottom:1px solid var(--ac-border)}.account-place{margin:0;color:var(--ac-text-muted);font-size:12px;text-align:center}.field-label{display:block;margin:18px 0 6px;color:var(--ac-text-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.context-actions{margin-top:24px}.launcher-notice{display:flex;gap:10px;margin-bottom:14px;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:600}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:600}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:600}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i1$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i2$2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i7.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NucleusLordicon, selector: "nucleus-lordicon", inputs: ["src", "trigger", "state", "size", "tone"] }, { kind: "component", type: NucleusMark, selector: "nucleus-mark", inputs: ["accent", "size"] }, { kind: "component", type: NucleusStarfield, selector: "nucleus-starfield" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusShell, isStandalone: true, selector: "nucleus-shell", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, lead: { classPropertyName: "lead", publicName: "lead", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, activeNavId: { classPropertyName: "activeNavId", publicName: "activeNavId", isSignal: true, isRequired: false, transformFunction: null }, selectedMenuId: { classPropertyName: "selectedMenuId", publicName: "selectedMenuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navSelect: "navSelect", menuSelect: "menuSelect" }, host: { properties: { "style.--ns-topbar-h": "topbarHeight()" } }, ngImport: i0, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar ns-frame\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n\n  </div>\n\n  @if (hasSiteContext()) {\n    <div class=\"context ns-context\">\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"companyChoices()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"companyChoice()\"\n        (ngModelChange)=\"onCompanyChange($event)\"\n        [placeholder]=\"t.companyPlaceholder\"\n        [disabled]=\"switching()\"\n        [filter]=\"companyChoices().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.companyLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <ng-template #item let-option>\n          <span class=\"company-option\">\n            <span class=\"company-name\">{{ option.name }}</span>\n            <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n          </span>\n        </ng-template>\n      </p-select>\n\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"siteOptions()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"siteChoice()\"\n        (ngModelChange)=\"onSiteChange($event)\"\n        [placeholder]=\"sitePlaceholder()\"\n        [disabled]=\"switching() || sitesLoading() || !siteOptions().length\"\n        [filter]=\"siteOptions().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.siteLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      />\n    </div>\n  }\n\n  <div class=\"side is-end\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher styleClass=\"ns-flush-popover\">\n      @if (!hasCompany()) {\n        <div class=\"launcher-notice\">\n          <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n          <div>\n            <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n            <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n          </div>\n        </div>\n      }\n\n      <nucleus-menu\n        [heading]=\"t.appsSwitch\"\n        [badge]=\"launcherCount()\"\n        [sections]=\"launcherSections()\"\n        [searchable]=\"launcherRich()\"\n        [searchPlaceholder]=\"t.appsSearch\"\n        [emptyText]=\"launcherRich() ? t.appsNoMatch : t.appsEmpty\"\n        [keyboardHint]=\"t.keyboardHint\"\n        [width]=\"336\"\n        (select)=\"onLauncherSelect($event); launcher.hide()\"\n        (dismiss)=\"launcher.hide()\"\n      />\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account styleClass=\"ns-flush-popover\">\n  @if (me) {\n    <div class=\"who\">\n      @if (me.photoUrl) {\n        <img class=\"who-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"42\" height=\"42\" />\n      } @else {\n        <span class=\"who-photo who-initials\">{{ initials() }}</span>\n      }\n      <span class=\"who-text\">\n        <span class=\"who-name\">{{ me.name }}</span>\n        <span class=\"who-mail\">{{ me.email }}</span>\n      </span>\n    </div>\n\n    <p class=\"who-role\">\n      <span class=\"who-dot\" aria-hidden=\"true\"></span>\n      @if (roleName(); as role) {\n        <b>{{ role }}</b>\n        <span class=\"who-sep\">\u00B7</span>\n      }\n      <span class=\"who-context\">{{ accountContext() }}</span>\n    </p>\n\n    <nucleus-menu\n      [sections]=\"accountSections()\"\n      [width]=\"304\"\n      (select)=\"onAccountSelect($event); account.hide()\"\n      (dismiss)=\"account.hide()\"\n    />\n  }\n</p-popover>\n\n<div class=\"body\">\n  @if (narrow() && sidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"sidebar-scrim\"\n      [attr.aria-label]=\"t.navToggle\"\n      (click)=\"toggleSidebar()\"\n    ></button>\n  }\n\n  <aside class=\"sidebar ns-frame\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (roleName(); as role) {\n      <div class=\"role-badge\" [pTooltip]=\"sidebarOpen() ? '' : role\" tooltipPosition=\"right\">\n        <i class=\"pi pi-key\" aria-hidden=\"true\"></i>\n        <span class=\"nav-label role-text\">\n          <span class=\"role-name\">{{ role }}</span>\n          <span class=\"role-caption\">{{ t.roleCaption }}</span>\n        </span>\n      </div>\n    }\n\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <div class=\"nav-skeleton\" role=\"status\" [attr.aria-label]=\"t.accessLoading\">\n          @for (width of menuPlaceholders; track $index) {\n            <div class=\"nav-skeleton-item\">\n              <p-skeleton shape=\"circle\" size=\"15px\" />\n              <p-skeleton height=\"9px\" [width]=\"width\" />\n            </div>\n          }\n        </div>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          @let group = isGroup(node);\n          @let open = isExpanded(node);\n\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"!group && isSelected(node)\"\n            [class.is-inert]=\"!group && !node.route\"\n            [attr.aria-expanded]=\"group ? open : null\"\n            [disabled]=\"!group && !node.route\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n            @if (group && sidebarOpen()) {\n              <i\n                class=\"pi nav-caret\"\n                [class.pi-chevron-down]=\"open\"\n                [class.pi-chevron-right]=\"!open\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n          </button>\n\n          @if (open) {\n            @for (child of node.children; track child.id) {\n              <button\n                type=\"button\"\n                class=\"nav-item is-child\"\n                [class.is-active]=\"isSelected(child)\"\n                [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n                tooltipPosition=\"right\"\n                (click)=\"selectMenu(child)\"\n              >\n                <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length) {\n        <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n      }\n\n      @if (title()) {\n        <h1>{{ title() }}</h1>\n      }\n      @if (subtitle()) {\n        <p class=\"lead\">{{ subtitle() }}</p>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [modal]=\"false\"\n  [blockScroll]=\"false\"\n  styleClass=\"ns-settings-drawer\"\n  [style]=\"{ width: '380px' }\"\n>\n  <nucleus-appearance />\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:16px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--ns-frame-line)}.side{display:flex;min-width:0;align-items:center;gap:4px}.side.is-end{margin-left:auto}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--ns-frame-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ns-frame-line);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ns-frame-muted);cursor:pointer}.lang-pill:hover{color:var(--ns-frame-ink)}.lang-pill.is-active{background:var(--ns-frame-glow);color:var(--ns-frame-on-glow)}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:max-content;min-width:224px;max-width:340px;padding:12px 10px;border-right:1px solid var(--ns-frame-line);transition:width .18s ease}.sidebar.is-collapsed{width:60px;min-width:0}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:var(--ns-nav-y, 9px) 12px;border:none;border-radius:6px;background:transparent;color:var(--ns-frame-muted);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ns-frame-raised);color:var(--ns-frame-ink)}.nav-item.is-active{background:var(--ns-frame-raised);box-shadow:inset 2px 0 0 var(--ns-frame-glow);color:var(--ns-frame-ink)}.nav-item.is-active i{color:var(--ns-frame-glow)}.nav-caret{margin-left:auto;font-size:11px!important;opacity:.7}.nav-item.is-inert{opacity:.45;cursor:default}.nav-item.is-inert:hover{background:transparent;color:var(--ns-frame-muted)}.nav-label{overflow:hidden;text-overflow:ellipsis}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:0}h1{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.lead{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:var(--ac-text-muted)}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ns-frame-line)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;color:var(--ns-frame-muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;color:var(--ns-frame-muted);font-size:.78rem}.access-state.is-error{color:var(--p-red-400, #f87171)}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}@media(max-width:720px){.sidebar{max-width:none;position:fixed;top:var(--ns-topbar-h, 56px);bottom:0;left:0;z-index:30;width:268px;max-width:82vw;overflow-y:auto;box-shadow:0 18px 44px #00000073;transform:translate(-100%);transition:transform .18s ease}.sidebar.is-collapsed{width:268px;max-width:82vw;transform:translate(-100%)}.sidebar:not(.is-collapsed){transform:translate(0)}.sidebar.is-collapsed .nav-label{display:inline}.sidebar.is-collapsed .role-text{display:flex}.sidebar.is-collapsed .nav-item,.sidebar.is-collapsed .role-badge{justify-content:flex-start;padding-inline:12px}.brand-secondary{display:none}.topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-bottom:8px;row-gap:8px}.context{order:3;width:100%;margin-left:0}.context-select{min-width:0;max-width:none;flex:1 1 0}.content{padding:20px 16px 48px}h1{font-size:22px}}.who{display:flex;align-items:center;gap:12px;padding:15px 15px 13px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.who-photo{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}.who-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:15px;font-weight:600}.who-text{display:flex;min-width:0;flex-direction:column}.who-name{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.who-mail{overflow:hidden;color:var(--ac-text-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.who-role{display:flex;align-items:center;gap:7px;margin:0;overflow:hidden;padding:9px 15px;border-bottom:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:11.5px;white-space:nowrap}.who-role b{flex:none;color:var(--ac-text);font-size:12px;font-weight:600}.who-sep{flex:none}.who-context{overflow:hidden;text-overflow:ellipsis}.who-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--ac-accent)}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launcher-notice{display:flex;gap:10px;margin:12px 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:600}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:600}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:600}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}.context{display:flex;min-width:0;align-items:center;gap:8px;margin-left:14px}.context-select{min-width:150px;max-width:210px}.role-badge{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:9px 12px;border-left:2px solid var(--ns-frame-glow);border-radius:0 7px 7px 0;background:var(--ns-frame-raised);box-shadow:-2px 0 12px -3px color-mix(in srgb,var(--ns-frame-glow) 65%,transparent)}.role-badge>i{flex:none;color:var(--ns-frame-glow);font-size:14px}.role-text{display:flex;min-width:0;flex-direction:column;gap:1px}.role-name{overflow:hidden;color:var(--ns-frame-ink);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.role-caption{color:var(--ns-frame-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.sidebar.is-collapsed .role-badge{justify-content:center;padding-inline:0}.sidebar-scrim{position:fixed;top:var(--ns-topbar-h, 56px);right:0;bottom:0;left:0;z-index:29;padding:0;border:0;background:#00000073;cursor:pointer}.nav-skeleton{display:flex;flex-direction:column;gap:3px}.nav-skeleton-item{display:flex;align-items:center;gap:12px;padding:11px 12px}.sidebar.is-collapsed .nav-skeleton-item .p-skeleton:last-child{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i1$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i2$3.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$1.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i5$2.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i6$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NucleusAppearance, selector: "nucleus-appearance" }, { kind: "component", type: NucleusLordicon, selector: "nucleus-lordicon", inputs: ["src", "trigger", "state", "size", "tone"] }, { kind: "component", type: NucleusMenu, selector: "nucleus-menu", inputs: ["sections", "heading", "badge", "searchable", "searchPlaceholder", "emptyText", "keyboardHint", "width"], outputs: ["select", "dismiss"] }, { kind: "component", type: NucleusMark, selector: "nucleus-mark", inputs: ["accent", "size"] }, { kind: "component", type: NucleusStarfield, selector: "nucleus-starfield" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusShell, decorators: [{
             type: Component,
@@ -2008,17 +3735,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         ConfirmDialogModule,
                         ToastModule,
                         DrawerModule,
-                        ListboxModule,
                         PopoverModule,
                         SelectModule,
+                        SkeletonModule,
                         TagModule,
                         TooltipModule,
                         FormsModule,
+                        NucleusAppearance,
                         NucleusLordicon,
+                        NucleusMenu,
                         NucleusMark,
                         NucleusStarfield,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"side\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher>\n      <div class=\"launcher\">\n        <p class=\"launcher-title\">{{ t.appsLauncher }}</p>\n\n        @if (!hasCompany()) {\n          <div class=\"launcher-notice\">\n            <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n            <div>\n              <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n              <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n            </div>\n          </div>\n        }\n\n        @if (!launcherApps().length) {\n          <p class=\"launcher-empty\">{{ t.appsEmpty }}</p>\n        }\n\n        <div class=\"launcher-grid\">\n          @for (app of launcherApps(); track app.id) {\n            <button\n              type=\"button\"\n              class=\"launcher-item\"\n              [class.is-disabled]=\"!canOpen(app)\"\n              [disabled]=\"!canOpen(app)\"\n              [pTooltip]=\"launchHint(app)\"\n              tooltipPosition=\"bottom\"\n              (click)=\"launch(app); launcher.hide()\"\n            >\n              <span class=\"launcher-icon\" [style.background]=\"app.color ?? '#64748b'\">\n                @if (app.icon) {\n                  <i [class]=\"app.icon\" aria-hidden=\"true\"></i>\n                } @else {\n                  <span class=\"launcher-initials\">{{ appInitials(app) }}</span>\n                }\n              </span>\n              <span class=\"launcher-name\">{{ app.name }}</span>\n              @if (launchHint(app)) {\n                <span class=\"launcher-badge\">{{ launchHint(app) }}</span>\n              }\n            </button>\n          }\n        </div>\n      </div>\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account>\n  @if (me) {\n    <div class=\"account\">\n      <p class=\"account-email\">{{ me.email }}</p>\n\n      <div class=\"account-head\">\n        @if (me.photoUrl) {\n          <img class=\"account-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"72\" height=\"72\" />\n        } @else {\n          <span class=\"account-photo account-initials\">{{ initials() }}</span>\n        }\n        <p class=\"account-hi\">{{ me.name }}</p>\n      </div>\n\n      <div class=\"account-context\">\n        @if (roleName()) {\n          <p-tag [value]=\"roleName()!\" severity=\"secondary\" />\n        }\n        <p class=\"account-place\">{{ contextCaption() }}</p>\n        <p-button\n          [label]=\"t.switchSite\"\n          icon=\"pi pi-building\"\n          severity=\"secondary\"\n          size=\"small\"\n          [outlined]=\"true\"\n          [rounded]=\"true\"\n          [fluid]=\"true\"\n          (onClick)=\"openContext(); account.hide()\"\n        />\n      </div>\n\n      <div class=\"account-actions\">\n        @if (canSwitchAccount()) {\n          <p-button\n            [label]=\"t.accountSwitch\"\n            icon=\"pi pi-users\"\n            severity=\"secondary\"\n            size=\"small\"\n            [text]=\"true\"\n            [fluid]=\"true\"\n            (onClick)=\"switchAccount(); account.hide()\"\n          />\n        }\n        <p-button\n          [label]=\"t.signOut\"\n          icon=\"pi pi-sign-out\"\n          severity=\"secondary\"\n          size=\"small\"\n          [text]=\"true\"\n          [fluid]=\"true\"\n          (onClick)=\"signOut(); account.hide()\"\n        />\n      </div>\n    </div>\n  }\n</p-popover>\n\n<div class=\"body\">\n  <aside class=\"sidebar\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <p class=\"access-state\">{{ t.accessLoading }}</p>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"isSelected(node)\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n          </button>\n\n          @for (child of node.children; track child.id) {\n            <button\n              type=\"button\"\n              class=\"nav-item is-child\"\n              [class.is-active]=\"isSelected(child)\"\n              [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n              tooltipPosition=\"right\"\n              (click)=\"selectMenu(child)\"\n            >\n              <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n              <span class=\"nav-label\">{{ child.label }}</span>\n            </button>\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length) {\n        <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n      }\n\n      @if (title()) {\n        <h1>{{ title() }}</h1>\n      }\n      @if (subtitle()) {\n        <p class=\"lead\">{{ subtitle() }}</p>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"contextOpen()\"\n  (visibleChange)=\"contextOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.contextTitle\"\n  [style]=\"{ width: '380px' }\"\n>\n  <p class=\"settings-hint\">{{ t.contextHint }}</p>\n\n  <label class=\"field-label\" for=\"nucleus-company\">{{ t.companyLabel }}</label>\n  <p-select\n    inputId=\"nucleus-company\"\n    [options]=\"companyChoices()\"\n    optionValue=\"id\"\n    optionLabel=\"name\"\n    [ngModel]=\"companyChoice()\"\n    (ngModelChange)=\"onCompanyChange($event)\"\n    [placeholder]=\"t.companyPlaceholder\"\n    [fluid]=\"true\"\n  >\n    <ng-template #item let-option>\n      <span class=\"company-option\">\n        <span class=\"company-name\">{{ option.name }}</span>\n        <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n      </span>\n    </ng-template>\n  </p-select>\n\n  <label class=\"field-label\" for=\"nucleus-site\">{{ t.siteLabel }}</label>\n\n  @if (sitesLoading()) {\n    <p class=\"access-state\">{{ t.sitesLoading }}</p>\n  } @else if (!siteOptions().length) {\n    <p class=\"access-state\">{{ t.sitesEmpty }}</p>\n  } @else {\n    <p-select\n      inputId=\"nucleus-site\"\n      [options]=\"siteOptions()\"\n      optionValue=\"id\"\n      optionLabel=\"name\"\n      [ngModel]=\"siteChoice()\"\n      (ngModelChange)=\"siteChoice.set($event)\"\n      [placeholder]=\"t.sitePlaceholder\"\n      [fluid]=\"true\"\n    />\n  }\n\n  <div class=\"context-actions\">\n    <p-button\n      [label]=\"t.confirmSwitch\"\n      icon=\"pi pi-arrow-right\"\n      [disabled]=\"!canConfirm()\"\n      [loading]=\"switching()\"\n      [fluid]=\"true\"\n      (onClick)=\"confirmSwitch()\"\n    />\n  </div>\n</p-drawer>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [style]=\"{ width: '340px' }\"\n>\n  <h3 class=\"settings-heading\">{{ t.settingsTheme }}</h3>\n  <p class=\"settings-hint\">{{ t.settingsThemeHint }}</p>\n\n  <p-listbox\n    [options]=\"themeOptions()\"\n    optionValue=\"value\"\n    optionLabel=\"label\"\n    [ngModel]=\"themePreference()\"\n    (ngModelChange)=\"selectTheme($event)\"\n    [ariaLabel]=\"t.settingsTheme\"\n  >\n    <ng-template #item let-option>\n      <span class=\"theme-option\">\n        @if (option.swatch) {\n          <span class=\"theme-swatch\" [style.background]=\"option.swatch\" aria-hidden=\"true\"></span>\n        } @else {\n          <i class=\"pi pi-desktop theme-swatch-icon\" aria-hidden=\"true\"></i>\n        }\n        <span>{{ option.label }}</span>\n      </span>\n    </ng-template>\n  </p-listbox>\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 12px 0 8px;background:var(--ac-surface);border-bottom:1px solid var(--ac-border)}.side{display:flex;align-items:center;gap:4px}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--ac-text-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ac-border);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ac-text-muted);cursor:pointer}.lang-pill.is-active{background:var(--ac-accent);color:var(--ac-on-accent)}.launcher{width:320px;padding:4px}.launcher-title{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--ac-text-muted)}.launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.launcher-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border:none;border-radius:8px;background:transparent;color:var(--ac-text);cursor:pointer}.launcher-item:hover:not(:disabled){background:var(--ac-surface-alt)}.launcher-item.is-disabled{opacity:.5;cursor:default}.launcher-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:#fff}.launcher-icon i{font-size:18px}.launcher-name{font-size:11px;font-weight:500;line-height:1.3;text-align:center}.launcher-badge{font-size:9px;font-weight:500;color:var(--ac-text-muted)}.account{width:300px;padding:4px;text-align:center}.account-email{margin:0 0 12px;font-size:12px;color:var(--ac-text-muted)}.account-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--ac-border)}.account-photo{width:72px;height:72px;border-radius:999px;object-fit:cover}.account-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:26px;font-weight:600}.account-hi{margin:0;font-size:16px;font-weight:500}.account-actions{display:flex;flex-direction:column;gap:2px;padding-top:8px}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:224px;padding:12px 10px;background:var(--ac-surface);border-right:1px solid var(--ac-border);transition:width .18s ease}.sidebar.is-collapsed{width:60px}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:none;border-radius:6px;background:transparent;color:var(--ac-text-muted);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ac-surface-alt);color:var(--ac-text)}.nav-item.is-active{background:color-mix(in srgb,var(--ac-accent) 18%,transparent);color:var(--ac-text)}.nav-item.is-active i{color:var(--ac-accent)}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:auto}h1{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.lead{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:var(--ac-text-muted)}.settings-heading{margin:0 0 4px;font-size:14px;font-weight:600}.settings-hint{margin:0 0 14px;font-size:12px;font-weight:300;color:var(--ac-text-muted)}.theme-option{display:flex;align-items:center;gap:10px}.theme-swatch{flex:none;width:16px;height:16px;border-radius:3px;border:1px solid var(--ac-border)}.theme-swatch-icon{flex:none;width:16px;font-size:14px;color:var(--ac-text-muted)}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;font-size:.78rem;opacity:.7}.access-state.is-error{color:var(--p-red-400, #f87171);opacity:1}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}.launcher-initials{font-size:.85rem;font-weight:600;letter-spacing:.02em;line-height:1;color:#fff}.launcher-empty{margin:.25rem 0 .5rem;font-size:.82rem;opacity:.7}@media(max-width:720px){.sidebar{width:60px}.sidebar .nav-label{display:none}.sidebar .nav-item{justify-content:center;padding-inline:0}.brand-secondary{display:none}.content{padding:20px 16px 48px}h1{font-size:22px}.launcher{width:260px}}.account-context{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0;border-top:1px solid var(--ac-border);border-bottom:1px solid var(--ac-border)}.account-place{margin:0;color:var(--ac-text-muted);font-size:12px;text-align:center}.field-label{display:block;margin:18px 0 6px;color:var(--ac-text-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.context-actions{margin-top:24px}.launcher-notice{display:flex;gap:10px;margin-bottom:14px;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:600}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:600}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:600}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}\n"] }]
-        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], lead: [{ type: i0.Input, args: [{ isSignal: true, alias: "lead", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], activeNavId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeNavId", required: false }] }], selectedMenuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedMenuId", required: false }] }], navSelect: [{ type: i0.Output, args: ["navSelect"] }], menuSelect: [{ type: i0.Output, args: ["menuSelect"] }] } });
+                    ], host: { '[style.--ns-topbar-h]': 'topbarHeight()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let t = copy();\n@let me = identity();\n\n@if (starfield()) {\n  <nucleus-starfield />\n}\n\n<header class=\"topbar ns-frame\">\n  <div class=\"side\">\n    <p-button\n      icon=\"pi pi-bars\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.navToggle\"\n      [pTooltip]=\"t.navToggle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"toggleSidebar()\"\n    />\n\n    <div class=\"brand\">\n      <nucleus-mark [size]=\"20\" />\n      <div class=\"brand-name\">\n        <span class=\"brand-primary\">NUCLEUS</span>\n        <span class=\"brand-secondary\">{{ brand() }}</span>\n      </div>\n    </div>\n\n  </div>\n\n  @if (hasSiteContext()) {\n    <div class=\"context ns-context\">\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"companyChoices()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"companyChoice()\"\n        (ngModelChange)=\"onCompanyChange($event)\"\n        [placeholder]=\"t.companyPlaceholder\"\n        [disabled]=\"switching()\"\n        [filter]=\"companyChoices().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.companyLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      >\n        <ng-template #item let-option>\n          <span class=\"company-option\">\n            <span class=\"company-name\">{{ option.name }}</span>\n            <p-tag [value]=\"option.tag\" severity=\"secondary\" />\n          </span>\n        </ng-template>\n      </p-select>\n\n      <p-select\n        styleClass=\"context-select\"\n        [options]=\"siteOptions()\"\n        optionValue=\"id\"\n        optionLabel=\"name\"\n        [ngModel]=\"siteChoice()\"\n        (ngModelChange)=\"onSiteChange($event)\"\n        [placeholder]=\"sitePlaceholder()\"\n        [disabled]=\"switching() || sitesLoading() || !siteOptions().length\"\n        [filter]=\"siteOptions().length > 8\"\n        filterBy=\"name\"\n        [filterPlaceholder]=\"words().search\"\n        [autofocusFilter]=\"true\"\n        [resetFilterOnHide]=\"true\"\n        [ariaLabel]=\"t.siteLabel\"\n        [ngModelOptions]=\"{ standalone: true }\"\n      />\n    </div>\n  }\n\n  <div class=\"side is-end\">\n    <div class=\"lang-switch\" role=\"group\" aria-label=\"Idioma / Language\">\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'es'\"\n        [attr.aria-pressed]=\"lang() === 'es'\"\n        (click)=\"setLang('es')\"\n      >\n        ES\n      </button>\n      <button\n        type=\"button\"\n        class=\"lang-pill\"\n        [class.is-active]=\"lang() === 'en'\"\n        [attr.aria-pressed]=\"lang() === 'en'\"\n        (click)=\"setLang('en')\"\n      >\n        EN\n      </button>\n    </div>\n\n    <p-button\n      icon=\"pi pi-th-large\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.appsLauncher\"\n      [pTooltip]=\"t.appsLauncher\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"launcher.toggle($event)\"\n    />\n\n    <p-popover #launcher styleClass=\"ns-flush-popover\">\n      @if (!hasCompany()) {\n        <div class=\"launcher-notice\">\n          <i class=\"pi pi-building\" aria-hidden=\"true\"></i>\n          <div>\n            <p class=\"launcher-notice-title\">{{ t.noCompanyTitle }}</p>\n            <p class=\"launcher-notice-body\">{{ t.noCompanyHint }}</p>\n          </div>\n        </div>\n      }\n\n      <nucleus-menu\n        [heading]=\"t.appsSwitch\"\n        [badge]=\"launcherCount()\"\n        [sections]=\"launcherSections()\"\n        [searchable]=\"launcherRich()\"\n        [searchPlaceholder]=\"t.appsSearch\"\n        [emptyText]=\"launcherRich() ? t.appsNoMatch : t.appsEmpty\"\n        [keyboardHint]=\"t.keyboardHint\"\n        [width]=\"336\"\n        (select)=\"onLauncherSelect($event); launcher.hide()\"\n        (dismiss)=\"launcher.hide()\"\n      />\n    </p-popover>\n\n    <p-button\n      icon=\"pi pi-cog\"\n      severity=\"secondary\"\n      size=\"small\"\n      [text]=\"true\"\n      [rounded]=\"true\"\n      [ariaLabel]=\"t.settingsTitle\"\n      [pTooltip]=\"t.settingsTitle\"\n      tooltipPosition=\"bottom\"\n      (onClick)=\"settingsOpen.set(true)\"\n    />\n\n    @if (me) {\n      <p-button\n        severity=\"secondary\"\n        size=\"small\"\n        [text]=\"true\"\n        [rounded]=\"true\"\n        styleClass=\"avatar-trigger\"\n        [ariaLabel]=\"me.name\"\n        [pTooltip]=\"me.name\"\n        tooltipPosition=\"bottom\"\n        (onClick)=\"account.toggle($event)\"\n      >\n        <p-avatar\n          [image]=\"me.photoUrl ?? undefined\"\n          [label]=\"me.photoUrl ? undefined : initials()\"\n          shape=\"circle\"\n          size=\"normal\"\n        />\n      </p-button>\n    }\n  </div>\n</header>\n\n<p-popover #account styleClass=\"ns-flush-popover\">\n  @if (me) {\n    <div class=\"who\">\n      @if (me.photoUrl) {\n        <img class=\"who-photo\" [src]=\"me.photoUrl\" alt=\"\" width=\"42\" height=\"42\" />\n      } @else {\n        <span class=\"who-photo who-initials\">{{ initials() }}</span>\n      }\n      <span class=\"who-text\">\n        <span class=\"who-name\">{{ me.name }}</span>\n        <span class=\"who-mail\">{{ me.email }}</span>\n      </span>\n    </div>\n\n    <p class=\"who-role\">\n      <span class=\"who-dot\" aria-hidden=\"true\"></span>\n      @if (roleName(); as role) {\n        <b>{{ role }}</b>\n        <span class=\"who-sep\">\u00B7</span>\n      }\n      <span class=\"who-context\">{{ accountContext() }}</span>\n    </p>\n\n    <nucleus-menu\n      [sections]=\"accountSections()\"\n      [width]=\"304\"\n      (select)=\"onAccountSelect($event); account.hide()\"\n      (dismiss)=\"account.hide()\"\n    />\n  }\n</p-popover>\n\n<div class=\"body\">\n  @if (narrow() && sidebarOpen()) {\n    <button\n      type=\"button\"\n      class=\"sidebar-scrim\"\n      [attr.aria-label]=\"t.navToggle\"\n      (click)=\"toggleSidebar()\"\n    ></button>\n  }\n\n  <aside class=\"sidebar ns-frame\" [class.is-collapsed]=\"!sidebarOpen()\">\n    @if (roleName(); as role) {\n      <div class=\"role-badge\" [pTooltip]=\"sidebarOpen() ? '' : role\" tooltipPosition=\"right\">\n        <i class=\"pi pi-key\" aria-hidden=\"true\"></i>\n        <span class=\"nav-label role-text\">\n          <span class=\"role-name\">{{ role }}</span>\n          <span class=\"role-caption\">{{ t.roleCaption }}</span>\n        </span>\n      </div>\n    }\n\n    @if (navItems().length) {\n      <nav>\n        @for (item of navItems(); track item.id) {\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"activeNavId() === item.id\"\n            [attr.aria-current]=\"activeNavId() === item.id ? 'page' : null\"\n            [pTooltip]=\"sidebarOpen() ? '' : item.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectNav(item.id)\"\n          >\n            <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n          </button>\n        }\n      </nav>\n    }\n\n    <nav class=\"access-menu\">\n      @if (menuLoading()) {\n        <div class=\"nav-skeleton\" role=\"status\" [attr.aria-label]=\"t.accessLoading\">\n          @for (width of menuPlaceholders; track $index) {\n            <div class=\"nav-skeleton-item\">\n              <p-skeleton shape=\"circle\" size=\"15px\" />\n              <p-skeleton height=\"9px\" [width]=\"width\" />\n            </div>\n          }\n        </div>\n      } @else if (menuError()) {\n        <p class=\"access-state is-error\">{{ menuError() }}</p>\n      } @else if (!menu().length) {\n        <p class=\"access-state\">{{ t.accessEmpty }}</p>\n      } @else {\n        @for (node of menu(); track node.id) {\n          @let group = isGroup(node);\n          @let open = isExpanded(node);\n\n          <button\n            type=\"button\"\n            class=\"nav-item\"\n            [class.is-active]=\"!group && isSelected(node)\"\n            [class.is-inert]=\"!group && !node.route\"\n            [attr.aria-expanded]=\"group ? open : null\"\n            [disabled]=\"!group && !node.route\"\n            [pTooltip]=\"sidebarOpen() ? '' : node.label\"\n            tooltipPosition=\"right\"\n            (click)=\"selectMenu(node)\"\n          >\n            <i [class]=\"node.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n            <span class=\"nav-label\">{{ node.label }}</span>\n            @if (group && sidebarOpen()) {\n              <i\n                class=\"pi nav-caret\"\n                [class.pi-chevron-down]=\"open\"\n                [class.pi-chevron-right]=\"!open\"\n                aria-hidden=\"true\"\n              ></i>\n            }\n          </button>\n\n          @if (open) {\n            @for (child of node.children; track child.id) {\n              <button\n                type=\"button\"\n                class=\"nav-item is-child\"\n                [class.is-active]=\"isSelected(child)\"\n                [pTooltip]=\"sidebarOpen() ? '' : child.label\"\n                tooltipPosition=\"right\"\n                (click)=\"selectMenu(child)\"\n              >\n                <i [class]=\"child.icon ?? 'pi pi-circle'\" aria-hidden=\"true\"></i>\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </button>\n            }\n          }\n        }\n      }\n    </nav>\n  </aside>\n\n  <main class=\"content\">\n    <div class=\"measure\">\n      <ng-content select=\"[nucleusTop]\" />\n\n      @if (crumbs().length) {\n        <p-breadcrumb [model]=\"crumbs()\" [home]=\"home()\" styleClass=\"ns-crumbs\" />\n      }\n\n      @if (title()) {\n        <h1>{{ title() }}</h1>\n      }\n      @if (subtitle()) {\n        <p class=\"lead\">{{ subtitle() }}</p>\n      }\n\n      <ng-content />\n    </div>\n  </main>\n</div>\n\n<p-drawer\n  [visible]=\"settingsOpen()\"\n  (visibleChange)=\"settingsOpen.set($event)\"\n  position=\"right\"\n  [header]=\"t.settingsTitle\"\n  [modal]=\"false\"\n  [blockScroll]=\"false\"\n  styleClass=\"ns-settings-drawer\"\n  [style]=\"{ width: '380px' }\"\n>\n  <nucleus-appearance />\n</p-drawer>\n\n<p-toast position=\"bottom-right\" styleClass=\"ns-toast\">\n  <ng-template #message let-message>\n    <nucleus-lordicon\n      [src]=\"message.severity === 'success' ? icons.check : icons.warning\"\n      [tone]=\"message.severity === 'success' ? 'accent' : 'danger'\"\n      [size]=\"34\"\n      trigger=\"in\"\n    />\n    <div class=\"toast-text\">\n      <p class=\"toast-summary\">{{ message.summary }}</p>\n      @if (message.detail) {\n        <p class=\"toast-detail\">{{ message.detail }}</p>\n      }\n    </div>\n  </ng-template>\n</p-toast>\n\n<p-confirmdialog [style]=\"{ width: '420px' }\">\n  <ng-template #headless let-message let-onAccept=\"onAccept\" let-onReject=\"onReject\">\n    <div class=\"confirm\">\n      <nucleus-lordicon\n        [src]=\"message.icon\"\n        [tone]=\"message.acceptButtonStyleClass ? 'danger' : 'accent'\"\n        [size]=\"64\"\n        trigger=\"loop\"\n      />\n      <h2>{{ message.header }}</h2>\n      <p>{{ message.message }}</p>\n      <div class=\"confirm-actions\">\n        <p-button\n          [label]=\"message.rejectLabel\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          (onClick)=\"onReject()\"\n        />\n        <p-button\n          [label]=\"message.acceptLabel\"\n          [severity]=\"message.acceptButtonStyleClass ? 'danger' : 'primary'\"\n          (onClick)=\"onAccept()\"\n        />\n      </div>\n    </div>\n  </ng-template>\n</p-confirmdialog>\n", styles: [":host{display:flex;flex-direction:column;min-height:100dvh;background:var(--ac-bg);color:var(--ac-text)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:16px;height:56px;padding:0 12px 0 8px;border-bottom:1px solid var(--ns-frame-line)}.side{display:flex;min-width:0;align-items:center;gap:4px}.side.is-end{margin-left:auto}.brand{display:flex;align-items:center;gap:9px;margin-left:4px}.brand-name{display:flex;align-items:baseline;gap:7px}.brand-primary{font-size:13px;font-weight:700;letter-spacing:.15em}.brand-secondary{font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--ns-frame-muted)}.lang-switch{display:flex;align-items:center;gap:2px;margin-right:6px;border:1px solid var(--ns-frame-line);border-radius:999px;padding:2px}.lang-pill{font-size:10px;font-weight:600;letter-spacing:.08em;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--ns-frame-muted);cursor:pointer}.lang-pill:hover{color:var(--ns-frame-ink)}.lang-pill.is-active{background:var(--ns-frame-glow);color:var(--ns-frame-on-glow)}.body{display:flex;flex:1;min-height:0}.sidebar{flex:none;width:max-content;min-width:224px;max-width:340px;padding:12px 10px;border-right:1px solid var(--ns-frame-line);transition:width .18s ease}.sidebar.is-collapsed{width:60px;min-width:0}.sidebar nav{display:flex;flex-direction:column;gap:3px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:var(--ns-nav-y, 9px) 12px;border:none;border-radius:6px;background:transparent;color:var(--ns-frame-muted);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}.nav-item i{flex:none;font-size:15px}.nav-item:hover{background:var(--ns-frame-raised);color:var(--ns-frame-ink)}.nav-item.is-active{background:var(--ns-frame-raised);box-shadow:inset 2px 0 0 var(--ns-frame-glow);color:var(--ns-frame-ink)}.nav-item.is-active i{color:var(--ns-frame-glow)}.nav-caret{margin-left:auto;font-size:11px!important;opacity:.7}.nav-item.is-inert{opacity:.45;cursor:default}.nav-item.is-inert:hover{background:transparent;color:var(--ns-frame-muted)}.nav-label{overflow:hidden;text-overflow:ellipsis}.sidebar.is-collapsed .nav-label{display:none}.sidebar.is-collapsed .nav-item{justify-content:center;padding-inline:0}.content{flex:1;min-width:0;padding:28px 28px 64px;display:flex;flex-direction:column;gap:14px}.measure{display:flex;width:100%;max-width:var(--ac-content-max, 1440px);flex-direction:column;gap:14px;margin-inline:0}h1{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.lead{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:var(--ac-text-muted)}.access-menu{display:flex;flex-direction:column;gap:.15rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ns-frame-line)}.access-caption{margin:0 0 .4rem;padding:0 .75rem;color:var(--ns-frame-muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-state{margin:0;padding:.35rem .75rem;color:var(--ns-frame-muted);font-size:.78rem}.access-state.is-error{color:var(--p-red-400, #f87171)}.nav-item.is-child{padding-left:2.1rem;font-size:.86rem}@media(max-width:720px){.sidebar{max-width:none;position:fixed;top:var(--ns-topbar-h, 56px);bottom:0;left:0;z-index:30;width:268px;max-width:82vw;overflow-y:auto;box-shadow:0 18px 44px #00000073;transform:translate(-100%);transition:transform .18s ease}.sidebar.is-collapsed{width:268px;max-width:82vw;transform:translate(-100%)}.sidebar:not(.is-collapsed){transform:translate(0)}.sidebar.is-collapsed .nav-label{display:inline}.sidebar.is-collapsed .role-text{display:flex}.sidebar.is-collapsed .nav-item,.sidebar.is-collapsed .role-badge{justify-content:flex-start;padding-inline:12px}.brand-secondary{display:none}.topbar{height:auto;min-height:56px;flex-wrap:wrap;padding-bottom:8px;row-gap:8px}.context{order:3;width:100%;margin-left:0}.context-select{min-width:0;max-width:none;flex:1 1 0}.content{padding:20px 16px 48px}h1{font-size:22px}}.who{display:flex;align-items:center;gap:12px;padding:15px 15px 13px;border-bottom:1px solid var(--ac-border);background:var(--ns-header-bg)}.who-photo{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}.who-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--ac-accent);color:var(--ac-on-accent);font-size:15px;font-weight:600}.who-text{display:flex;min-width:0;flex-direction:column}.who-name{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.who-mail{overflow:hidden;color:var(--ac-text-muted);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.who-role{display:flex;align-items:center;gap:7px;margin:0;overflow:hidden;padding:9px 15px;border-bottom:1px solid var(--ac-border);color:var(--ac-text-muted);font-size:11.5px;white-space:nowrap}.who-role b{flex:none;color:var(--ac-text);font-size:12px;font-weight:600}.who-sep{flex:none}.who-context{overflow:hidden;text-overflow:ellipsis}.who-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--ac-accent)}.company-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.company-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.launcher-notice{display:flex;gap:10px;margin:12px 12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ac-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--ac-accent) 10%,transparent)}.launcher-notice i{margin-top:2px;color:var(--ac-accent);font-size:15px}.launcher-notice-title{margin:0 0 4px;font-size:13px;font-weight:600}.launcher-notice-body{margin:0;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.confirm{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 24px 20px;border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-surface);text-align:center}.confirm h2{margin:8px 0 0;font-size:17px;font-weight:600}.confirm p{margin:0;max-width:34ch;color:var(--ac-text-muted);font-size:13px;line-height:1.5}.confirm-actions{display:flex;justify-content:center;gap:8px;margin-top:18px}.toast-text{flex:1;margin-left:12px}.toast-summary{margin:0;font-size:13px;font-weight:600}.toast-detail{margin:2px 0 0;color:var(--ac-text-muted);font-size:12px}.context{display:flex;min-width:0;align-items:center;gap:8px;margin-left:14px}.context-select{min-width:150px;max-width:210px}.role-badge{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:9px 12px;border-left:2px solid var(--ns-frame-glow);border-radius:0 7px 7px 0;background:var(--ns-frame-raised);box-shadow:-2px 0 12px -3px color-mix(in srgb,var(--ns-frame-glow) 65%,transparent)}.role-badge>i{flex:none;color:var(--ns-frame-glow);font-size:14px}.role-text{display:flex;min-width:0;flex-direction:column;gap:1px}.role-name{overflow:hidden;color:var(--ns-frame-ink);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.role-caption{color:var(--ns-frame-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.sidebar.is-collapsed .role-badge{justify-content:center;padding-inline:0}.sidebar-scrim{position:fixed;top:var(--ns-topbar-h, 56px);right:0;bottom:0;left:0;z-index:29;padding:0;border:0;background:#00000073;cursor:pointer}.nav-skeleton{display:flex;flex-direction:column;gap:3px}.nav-skeleton-item{display:flex;align-items:center;gap:12px;padding:11px 12px}.sidebar.is-collapsed .nav-skeleton-item .p-skeleton:last-child{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], lead: [{ type: i0.Input, args: [{ isSignal: true, alias: "lead", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], activeNavId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeNavId", required: false }] }], selectedMenuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedMenuId", required: false }] }], navSelect: [{ type: i0.Output, args: ["navSelect"] }], menuSelect: [{ type: i0.Output, args: ["menuSelect"] }] } });
 function initialsOf(source) {
     const parts = source.trim().split(/\s+/).filter(Boolean);
     if (!parts.length)
@@ -2032,5 +3761,5 @@ function initialsOf(source) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_THEME, EMPTY_GEO_VALUE, GEO_COPY, NO_PERMISSIONS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_ICONS, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_SKIP_AUTH, NucleusAuth, NucleusCard, NucleusCell, NucleusFeedback, NucleusForm, NucleusGeo, NucleusGeoSelect, NucleusLanguage, NucleusList, NucleusLordicon, NucleusMark, NucleusPage, NucleusPreset, NucleusSessionAuth, NucleusShell, NucleusStarfield, NucleusTabs, SHELL_COPY, SessionService, THEMES, THEME_LABELS, ThemeService, UserSyncService, consumeNucleusLogout, findMenuByRoute, flagOf, geoCopyOf, isNucleusConfigured, isThemePreference, levelLabel, loadLordicon, loadNucleusConfig, nucleusAuthInterceptor, nucleusLogoutUrl, ownsUrl, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusTheme, resolveFieldSize, themeById };
+export { ACCENTS, CANVASES, COMMON_COPY, CONTROL_CONTRAST, DEFAULT_APPEARANCE, DENSITIES, EMPTY_GEO_VALUE, FIELD_TARGETS, FRAMES, GEO_COPY, LEGACY_THEMES, NO_PERMISSIONS, NUCLEUS_ACCENTS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_ICONS, NUCLEUS_ICON_CATALOG, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_SKIP_AUTH, NucleusAppearance, NucleusAuth, NucleusCache, NucleusCard, NucleusCell, NucleusColorPicker, NucleusEnterAdvance, NucleusFeedback, NucleusForm, NucleusGeo, NucleusGeoSelect, NucleusIconPicker, NucleusLanguage, NucleusList, NucleusLordicon, NucleusMark, NucleusMenu, NucleusMetric, NucleusMetrics, NucleusPage, NucleusPreset, NucleusRecentApps, NucleusSessionAuth, NucleusShell, NucleusShortcut, NucleusShortcuts, NucleusStarfield, NucleusTabs, SHELL_COPY, SessionService, TEXT_CONTRAST, THEME_COPY, ThemeService, UserSyncService, accentById, accentLabelOf, accentOn, ariaKeysOf, auditAppearance, canvasById, clock, comboOf, commonCopyOf, consumeNucleusLogout, contrastIssue, contrastRatio, day, densityById, endOfDayUtc, fieldsIn, findMenuByRoute, flagOf, foldText, frameById, geoCopyOf, hasChildren, hasModifier, iconClassOf, iconNameOf, integer, isAccentPreference, isApplePlatform, isBeforeToday, isCanvasPreference, isDarkCanvas, isDensityId, isFieldSearchable, isFrameId, isNucleusConfigured, isOnOrBeforeToday, isReachable, isToday, isTypingTarget, isoDay, levelLabel, loadLordicon, loadNucleusConfig, matchesRow, meetsContrast, menuGlyph, menuTile, minutesAsClock, mixHex, money, moveTo, normalizeKeys, nucleusAuthInterceptor, nucleusErrorMessage, nucleusLang, nucleusLogoutUrl, nucleusParseDate, ownsUrl, percent, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusTheme, qty, readableOn, relativeLuminance, resolveAccent, resolveFieldSize, searchIcons, selectableRows, shiftDay, shortcutHint, signedMoney, stamp, startOfDayUtc, themeCopyOf, toNumber, toggleCollapsed, visibleTreeRows };
 //# sourceMappingURL=nucleus-suite-pe-core.mjs.map