@noatgnu/cupcake-core 1.3.10 → 1.3.11

package/fesm2022/noatgnu-cupcake-core.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, InjectionToken, Injectable, signal, computed, Component, effect, ChangeDetectorRef, NgModule } from '@angular/core';
+import { inject, Injectable, InjectionToken, signal, computed, Component, effect, ChangeDetectorRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpClient, HttpParams, provideHttpClient, withInterceptors, HttpClientModule } from '@angular/common/http';
-import { BehaviorSubject, catchError, throwError, switchMap, filter, take, map, tap, Subject, timer, EMPTY, interval, debounceTime, distinctUntilChanged } from 'rxjs';
+import { HttpClient, HttpResponse, HttpParams, provideHttpClient, withInterceptors, HttpClientModule } from '@angular/common/http';
+import { BehaviorSubject, catchError, throwError, switchMap, filter, take, map, tap as tap$1, Subject, timer, EMPTY, interval, debounceTime, distinctUntilChanged } from 'rxjs';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { map as map$1, takeUntil, tap as tap$1, switchMap as switchMap$1 } from 'rxjs/operators';
+import { tap, map as map$1, takeUntil, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule, FormsModule, NonNullableFormBuilder } from '@angular/forms';
 import * as i2 from '@angular/common';
@@ -254,6 +254,79 @@ function handle401Error(request, next, http, router, config) {
     }
 }
 
+class DemoModeService {
+    demoModeSubject = new BehaviorSubject({
+        isActive: false,
+        cleanupIntervalMinutes: 15
+    });
+    demoMode$ = this.demoModeSubject.asObservable();
+    setDemoMode(isActive, cleanupInterval = 15) {
+        const currentInfo = this.demoModeSubject.value;
+        if (isActive !== currentInfo.isActive) {
+            this.demoModeSubject.next({
+                isActive,
+                cleanupIntervalMinutes: cleanupInterval,
+                lastDetected: new Date()
+            });
+            if (isActive) {
+                localStorage.setItem('demo_mode_active', 'true');
+                localStorage.setItem('demo_mode_cleanup_interval', cleanupInterval.toString());
+            }
+            else {
+                localStorage.removeItem('demo_mode_active');
+                localStorage.removeItem('demo_mode_cleanup_interval');
+            }
+        }
+    }
+    isDemoMode() {
+        return this.demoModeSubject.value.isActive;
+    }
+    getDemoModeInfo() {
+        return this.demoModeSubject.value;
+    }
+    checkLocalStorage() {
+        const isDemoActive = localStorage.getItem('demo_mode_active') === 'true';
+        const cleanupInterval = parseInt(localStorage.getItem('demo_mode_cleanup_interval') || '15', 10);
+        if (isDemoActive) {
+            this.setDemoMode(true, cleanupInterval);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DemoModeInterceptor {
+    demoModeService;
+    constructor(demoModeService) {
+        this.demoModeService = demoModeService;
+    }
+    intercept(req, next) {
+        return next.handle(req).pipe(tap(event => {
+            if (event instanceof HttpResponse) {
+                const demoModeHeader = event.headers.get('X-Demo-Mode');
+                if (demoModeHeader === 'true') {
+                    const cleanupInterval = parseInt(event.headers.get('X-Demo-Cleanup-Interval') || '15', 10);
+                    this.demoModeService.setDemoMode(true, cleanupInterval);
+                }
+                else if (demoModeHeader === 'false') {
+                    this.demoModeService.setDemoMode(false);
+                }
+            }
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeInterceptor, deps: [{ token: DemoModeService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: DemoModeService }] });
+
 const CUPCAKE_CORE_CONFIG = new InjectionToken('CUPCAKE_CORE_CONFIG');
 class AuthService {
     http = inject(HttpClient);
@@ -378,31 +451,31 @@ class AuthService {
     handleORCIDCallback(code, state, rememberMe = false) {
         const params = new URLSearchParams({ code, state, remember_me: rememberMe.toString() });
         return this.http.get(`${this.apiUrl}/auth/orcid/callback/?${params}`)
-            .pipe(tap(response => this.setAuthData(response)));
+            .pipe(tap$1(response => this.setAuthData(response)));
     }
     exchangeORCIDToken(accessToken, orcidId, rememberMe = false) {
         return this.http.post(`${this.apiUrl}/auth/orcid/token/`, {
             access_token: accessToken,
             orcid_id: orcidId,
             remember_me: rememberMe
-        }).pipe(tap(response => this.setAuthData(response)));
+        }).pipe(tap$1(response => this.setAuthData(response)));
     }
     login(username, password, rememberMe = false) {
         return this.http.post(`${this.apiUrl}/auth/login/`, {
             username,
             password,
             remember_me: rememberMe
-        }).pipe(tap(response => this.setAuthData(response)));
+        }).pipe(tap$1(response => this.setAuthData(response)));
     }
     logout() {
         const refreshToken = this.getRefreshToken();
         const payload = refreshToken ? { refresh: refreshToken } : {};
         return this.http.post(`${this.apiUrl}/auth/logout/`, payload)
-            .pipe(tap(() => this.clearAuthData()));
+            .pipe(tap$1(() => this.clearAuthData()));
     }
     checkAuthStatus() {
         return this.http.get(`${this.apiUrl}/auth/status/`)
-            .pipe(tap(status => {
+            .pipe(tap$1(status => {
             if (status.authenticated && status.user) {
                 this.currentUserSubject.next(status.user);
                 this.isAuthenticatedSubject.next(true);
@@ -414,7 +487,7 @@ class AuthService {
     }
     fetchUserProfile() {
         return this.http.get(`${this.apiUrl}/auth/profile/`)
-            .pipe(map(response => this.convertUserFromSnakeToCamel(response.user)), tap(user => {
+            .pipe(map(response => this.convertUserFromSnakeToCamel(response.user)), tap$1(user => {
             this.currentUserSubject.next(user);
             this.isAuthenticatedSubject.next(true);
         }));
@@ -449,7 +522,7 @@ class AuthService {
         }
         return this.http.post(`${this.apiUrl}/auth/token/refresh/`, {
             refresh: refreshToken
-        }).pipe(tap((response) => {
+        }).pipe(tap$1((response) => {
             localStorage.setItem('ccvAccessToken', response.access);
             this.isAuthenticatedSubject.next(true);
             const user = this.getUserFromToken();
@@ -474,7 +547,7 @@ class AuthService {
         }
         return this.http.post(`${this.apiUrl}/auth/token/refresh/`, {
             refresh: refreshToken
-        }).pipe(tap(response => {
+        }).pipe(tap$1(response => {
             localStorage.setItem('ccvAccessToken', response.access);
             this.isAuthenticatedSubject.next(true);
             this.fetchUserProfile().subscribe({
@@ -1353,7 +1426,7 @@ class WebSocketService {
         this.reconnectAttempts++;
         const delay = this.config.reconnectInterval || 5000;
         console.log(`WebSocket reconnection attempt ${this.reconnectAttempts} in ${delay}ms`);
-        timer(delay).pipe(takeUntil(this.destroy$), tap$1(() => {
+        timer(delay).pipe(takeUntil(this.destroy$), tap(() => {
             if (this.reconnectAttempts <= (this.config.maxReconnectAttempts || 5)) {
                 this.connect();
             }
@@ -1364,7 +1437,7 @@ class WebSocketService {
         })).subscribe();
     }
     filterMessages(type) {
-        return this.messages$.pipe(tap$1(msg => console.log('Filtering message:', msg.type, 'looking for:', type)), switchMap$1(message => message.type === type ? [message] : EMPTY));
+        return this.messages$.pipe(tap(msg => console.log('Filtering message:', msg.type, 'looking for:', type)), switchMap$1(message => message.type === type ? [message] : EMPTY));
     }
     getNotifications() {
         return this.filterMessages('notification');
@@ -1723,6 +1796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
         }], ctorParameters: () => [{ type: ToastService }] });
 
 class SiteConfigService extends BaseApiService {
+    demoModeService;
     defaultConfig = {
         siteName: 'CUPCAKE Vanilla',
         showPoweredBy: true,
@@ -1732,14 +1806,26 @@ class SiteConfigService extends BaseApiService {
         bookingDeletionWindowMinutes: 30,
         whisperCppModel: '/app/whisper.cpp/models/ggml-medium.bin',
         uiFeatures: {},
+        uiFeaturesWithDefaults: {
+            show_metadata_tables: true,
+            show_instruments: true,
+            show_sessions: true,
+            show_protocols: true,
+            show_messages: true,
+            show_notifications: true,
+            show_storage: true,
+            show_webrtc: true,
+            show_billing: true
+        },
         installedApps: {},
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString()
     };
     configSubject = new BehaviorSubject(this.defaultConfig);
     config$ = this.configSubject.asObservable();
-    constructor() {
+    constructor(demoModeService) {
         super();
+        this.demoModeService = demoModeService;
         this.loadConfig();
         this.startPeriodicRefresh();
     }
@@ -1749,6 +1835,7 @@ class SiteConfigService extends BaseApiService {
                 next: (config) => {
                     this.configSubject.next({ ...this.defaultConfig, ...config });
                     localStorage.setItem('site_config', JSON.stringify(config));
+                    this.handleDemoMode(config);
                 },
                 error: () => { }
             });
@@ -1760,6 +1847,7 @@ class SiteConfigService extends BaseApiService {
             try {
                 const config = JSON.parse(savedConfig);
                 this.configSubject.next({ ...this.defaultConfig, ...config });
+                this.handleDemoMode(config);
             }
             catch (error) {
                 // Invalid config, use defaults
@@ -1769,6 +1857,7 @@ class SiteConfigService extends BaseApiService {
             next: (config) => {
                 this.configSubject.next({ ...this.defaultConfig, ...config });
                 localStorage.setItem('site_config', JSON.stringify(config));
+                this.handleDemoMode(config);
             },
             error: () => {
                 // Continue with current config
@@ -1782,13 +1871,14 @@ class SiteConfigService extends BaseApiService {
         return this.get(`${this.apiUrl}/site-config/public/`);
     }
     getCurrentConfig() {
-        return this.get(`${this.apiUrl}/site-config/current/`).pipe(tap$1(config => {
+        return this.get(`${this.apiUrl}/site-config/current/`).pipe(tap(config => {
             this.configSubject.next({ ...this.defaultConfig, ...config });
             localStorage.setItem('site_config', JSON.stringify(config));
+            this.handleDemoMode(config);
         }));
     }
     updateConfig(config) {
-        return this.put(`${this.apiUrl}/site-config/update_config/`, config).pipe(tap$1(updatedConfig => {
+        return this.put(`${this.apiUrl}/site-config/update_config/`, config).pipe(tap(updatedConfig => {
             this.configSubject.next({ ...this.defaultConfig, ...updatedConfig });
             localStorage.setItem('site_config', JSON.stringify(updatedConfig));
         }));
@@ -1821,7 +1911,15 @@ class SiteConfigService extends BaseApiService {
     getWorkerStatus() {
         return this.get(`${this.apiUrl}/site-config/worker_status/`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SiteConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    handleDemoMode(config) {
+        if (config.demoMode) {
+            this.demoModeService.setDemoMode(true, config.demoCleanupIntervalMinutes || 15);
+        }
+        else {
+            this.demoModeService.setDemoMode(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SiteConfigService, deps: [{ token: DemoModeService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SiteConfigService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SiteConfigService, decorators: [{
@@ -1829,7 +1927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: DemoModeService }] });
 
 class ThemeService {
     THEME_KEY = 'cupcake-theme';
@@ -3604,6 +3702,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{ selector: 'ccc-site-config', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbAlert], template: "<div class=\"site-config-container\">\r\n  <!-- Header Section -->\r\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <h4 class=\"navbar-brand m-0 fw-bold\">\r\n            <i class=\"bi bi-gear me-2\"></i>Site Configuration\r\n          </h4>\r\n        </div>\r\n        <div class=\"d-flex gap-2\">\r\n          <button \r\n            type=\"submit\" \r\n            form=\"configForm\"\r\n            class=\"btn btn-primary btn-sm\"\r\n            [disabled]=\"configForm.invalid || loading()\">\r\n            @if (loading()) {\r\n              <span class=\"spinner-border spinner-border-sm me-1\" aria-hidden=\"true\"></span>\r\n            } @else {\r\n              <i class=\"bi bi-check-lg me-1\"></i>\r\n            }\r\n            Save Configuration\r\n          </button>\r\n          \r\n          <button \r\n            type=\"button\" \r\n            class=\"btn btn-outline-secondary btn-sm\"\r\n            (click)=\"resetForm()\"\r\n            [disabled]=\"loading()\">\r\n            <i class=\"bi bi-arrow-clockwise me-1\"></i>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <div class=\"config-content p-4\">\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-8\">\r\n        <!-- Site Branding Card -->\r\n        <div class=\"card mb-4\">\r\n          <div class=\"card-header\">\r\n            <h5 class=\"mb-0\">\r\n              <i class=\"bi bi-brush me-2\"></i>Site Branding\r\n            </h5>\r\n          </div>\r\n        <div class=\"card-body\">\r\n          <!-- Success Alert -->\r\n          @if (success()) {\r\n            <ngb-alert type=\"success\" (closed)=\"clearSuccess()\" [dismissible]=\"true\">\r\n              <i class=\"bi bi-check-circle me-2\"></i>{{ success() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <!-- Error Alert -->\r\n          @if (error()) {\r\n            <ngb-alert type=\"danger\" (closed)=\"clearError()\" [dismissible]=\"true\">\r\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ error() }}\r\n            </ngb-alert>\r\n          }\r\n\r\n          <form id=\"configForm\" [formGroup]=\"configForm\" (ngSubmit)=\"onSubmit()\">\r\n            <!-- Site Name -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"site_name\" class=\"form-label\">\r\n                <i class=\"bi bi-building me-1\"></i>\r\n                Site Name <span class=\"text-danger\">*</span>\r\n              </label>\r\n              <input \r\n                type=\"text\" \r\n                class=\"form-control\" \r\n                id=\"site_name\"\r\n                formControlName=\"siteName\"\r\n                [class.is-invalid]=\"configForm.get('siteName')?.invalid && configForm.get('siteName')?.touched\"\r\n                placeholder=\"Enter your site name\">\r\n              @if (configForm.get('siteName')?.invalid && configForm.get('siteName')?.touched) {\r\n                <div class=\"invalid-feedback\">\r\n                  @if (configForm.get('siteName')?.errors?.['required']) {\r\n                    <span>Site name is required</span>\r\n                  }\r\n                  @if (configForm.get('siteName')?.errors?.['minlength']) {\r\n                    <span>Site name must be at least 1 character</span>\r\n                  }\r\n                  @if (configForm.get('siteName')?.errors?.['maxlength']) {\r\n                    <span>Site name must be less than 255 characters</span>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"form-text\">\r\n                This will appear in the navigation bar and login page\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo URL -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"logo_url\" class=\"form-label\">\r\n                <i class=\"bi bi-image me-1\"></i>\r\n                Logo URL\r\n              </label>\r\n              <input \r\n                type=\"url\" \r\n                class=\"form-control\" \r\n                id=\"logo_url\"\r\n                formControlName=\"logoUrl\"\r\n                placeholder=\"https://example.com/logo.png\">\r\n              <div class=\"form-text\">\r\n                Optional: URL to your organization's logo\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Logo File Upload -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"logo_file\" class=\"form-label\">\r\n                <i class=\"bi bi-upload me-1\"></i>\r\n                Upload Logo File\r\n              </label>\r\n              <input \r\n                type=\"file\" \r\n                class=\"form-control\" \r\n                id=\"logo_file\"\r\n                accept=\"image/*\"\r\n                (change)=\"onLogoFileSelected($event)\">\r\n              <div class=\"form-text\">\r\n                Upload a logo file (overrides logo URL). Supported: JPEG, PNG, GIF, SVG. Max 5MB.\r\n              </div>\r\n              @if (selectedLogoFile()) {\r\n                <div class=\"mt-2\">\r\n                  <div class=\"alert alert-info py-2\">\r\n                    <i class=\"bi bi-file-image me-1\"></i>\r\n                    Selected: {{ selectedLogoFile()?.name }}\r\n                    <button type=\"button\" class=\"btn btn-sm btn-outline-danger ms-2\" (click)=\"clearLogoFile()\">\r\n                      <i class=\"bi bi-x\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Primary Color -->\r\n            <div class=\"mb-3\">\r\n              <label for=\"primary_color\" class=\"form-label\">\r\n                <i class=\"bi bi-palette me-1\"></i>\r\n                Primary Color\r\n              </label>\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <input\r\n                  type=\"color\"\r\n                  id=\"primary_color\"\r\n                  class=\"form-control form-control-color\"\r\n                  formControlName=\"primaryColor\"\r\n                  style=\"width: 60px; height: 40px;\">\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  formControlName=\"primaryColor\"\r\n                  placeholder=\"#1976d2\"\r\n                  [class.is-invalid]=\"configForm.get('primaryColor')?.invalid && configForm.get('primaryColor')?.touched\">\r\n              </div>\r\n              @if (configForm.get('primaryColor')?.invalid && configForm.get('primaryColor')?.touched) {\r\n                <div class=\"invalid-feedback\">\r\n                  @if (configForm.get('primaryColor')?.errors?.['pattern']) {\r\n                    <span>Please enter a valid hex color (e.g., #1976d2)</span>\r\n                  }\r\n                </div>\r\n              }\r\n              <div class=\"form-text\">\r\n                Main theme color for navigation and buttons\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Show Powered By -->\r\n            <div class=\"mb-4\">\r\n              <div class=\"form-check\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  id=\"show_powered_by\"\r\n                  formControlName=\"showPoweredBy\">\r\n                <label class=\"form-check-label\" for=\"show_powered_by\">\r\n                  <i class=\"bi bi-lightning-charge me-1\"></i>\r\n                  Show \"Powered by CUPCAKE Vanilla\"\r\n                </label>\r\n              </div>\r\n              <div class=\"form-text\">\r\n                Display a small footer credit (appears on hover in bottom-right corner)\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Authentication Settings Section -->\r\n            <div class=\"mb-4\">\r\n              <h6 class=\"text-muted border-bottom pb-2\">\r\n                <i class=\"bi bi-shield-lock me-2\"></i>Authentication Settings\r\n              </h6>\r\n              \r\n              <!-- Allow User Registration -->\r\n              <div class=\"mb-3\">\r\n                <div class=\"form-check\">\r\n                  <input \r\n                    class=\"form-check-input\" \r\n                    type=\"checkbox\" \r\n                    id=\"allow_user_registration\"\r\n                    formControlName=\"allowUserRegistration\">\r\n                  <label class=\"form-check-label\" for=\"allow_user_registration\">\r\n                    <i class=\"bi bi-person-plus me-1\"></i>\r\n                    Allow Public User Registration\r\n                  </label>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  When enabled, users can register new accounts without admin approval. \r\n                  The registration API endpoint will be accessible to the public.\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Enable ORCID Login -->\r\n              <div class=\"mb-3\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    id=\"enable_orcid_login\"\r\n                    formControlName=\"enableOrcidLogin\">\r\n                  <label class=\"form-check-label\" for=\"enable_orcid_login\">\r\n                    <i class=\"bi bi-person-badge me-1\"></i>\r\n                    Enable ORCID OAuth Login\r\n                  </label>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  Allow users to log in using their ORCID account.\r\n                  Requires ORCID OAuth configuration in server settings.\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Transcription Configuration Section -->\r\n            <div class=\"mb-4\">\r\n              <h6 class=\"text-muted border-bottom pb-2\">\r\n                <i class=\"bi bi-mic me-2\"></i>Audio/Video Transcription\r\n              </h6>\r\n\r\n              <!-- Whisper Model Selection -->\r\n              <div class=\"mb-3\">\r\n                <label for=\"whisper_model\" class=\"form-label\">\r\n                  <i class=\"bi bi-cpu me-1\"></i>\r\n                  Default Whisper.cpp Model\r\n                </label>\r\n                <div class=\"input-group\">\r\n                  <select\r\n                    class=\"form-select\"\r\n                    id=\"whisper_model\"\r\n                    formControlName=\"whisperCppModel\">\r\n                    @if (loadingModels()) {\r\n                      <option disabled selected>Loading available models...</option>\r\n                    } @else {\r\n                      @for (model of availableModels(); track model.path) {\r\n                        <option [value]=\"model.path\">\r\n                          {{ model.name }} ({{ model.size }}) - {{ model.description }}\r\n                        </option>\r\n                      }\r\n                      @if (availableModels().length === 0) {\r\n                        <option disabled selected>No models found. Click refresh to scan.</option>\r\n                      }\r\n                    }\r\n                  </select>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"btn btn-outline-secondary\"\r\n                    (click)=\"refreshAvailableModels()\"\r\n                    [disabled]=\"refreshingModels() || loadingModels()\">\r\n                    @if (refreshingModels()) {\r\n                      <span class=\"spinner-border spinner-border-sm me-1\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                      <i class=\"bi bi-arrow-clockwise me-1\"></i>\r\n                    }\r\n                    Scan Models\r\n                  </button>\r\n                </div>\r\n                <div class=\"form-text\">\r\n                  Model used for audio/video transcription. Larger models are more accurate but slower.\r\n                  The transcribe worker scans its filesystem to detect available models.\r\n                </div>\r\n                @if (availableModels().length > 0) {\r\n                  <div class=\"mt-2\">\r\n                    <small class=\"text-muted\">\r\n                      <i class=\"bi bi-info-circle me-1\"></i>\r\n                      Found {{ availableModels().length }} model(s). Last scanned by transcribe worker on startup.\r\n                    </small>\r\n                  </div>\r\n                }\r\n              </div>\r\n            </div>\r\n\r\n          </form>\r\n\r\n          <!-- Worker Status Section (Superuser Only) -->\r\n          @if (isSuperuser()) {\r\n          <div class=\"card mb-4\">\r\n            <div class=\"card-header d-flex justify-content-between align-items-center\">\r\n              <h6 class=\"mb-0\">\r\n                <i class=\"bi bi-hdd-network me-2\"></i>Worker Status\r\n              </h6>\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                      (click)=\"loadWorkerStatus()\"\r\n                      [disabled]=\"loadingWorkerStatus()\">\r\n                @if (loadingWorkerStatus()) {\r\n                  <span class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                } @else {\r\n                  <i class=\"bi bi-arrow-clockwise me-1\"></i>\r\n                }\r\n                Refresh\r\n              </button>\r\n            </div>\r\n            <div class=\"card-body\">\r\n              @if (loadingWorkerStatus()) {\r\n                <div class=\"text-center py-3\">\r\n                  <div class=\"spinner-border text-primary\" role=\"status\">\r\n                    <span class=\"visually-hidden\">Loading...</span>\r\n                  </div>\r\n                </div>\r\n              } @else if (workerStatus()) {\r\n                <!-- Workers -->\r\n                <div class=\"mb-3\">\r\n                  <h6 class=\"text-muted mb-2\">\r\n                    <i class=\"bi bi-server me-1\"></i>\r\n                    Workers ({{ workerStatus().workerCount }})\r\n                  </h6>\r\n                  @if (workerStatus().workers.length === 0) {\r\n                    <div class=\"alert alert-warning mb-0\">\r\n                      <i class=\"bi bi-exclamation-triangle me-2\"></i>\r\n                      No workers found!\r\n                    </div>\r\n                  } @else {\r\n                    @for (worker of workerStatus().workers; track worker.name) {\r\n                      <div class=\"card mb-2\">\r\n                        <div class=\"card-body p-2\">\r\n                          <div class=\"d-flex justify-content-between align-items-start\">\r\n                            <div class=\"flex-grow-1\">\r\n                              <div class=\"d-flex align-items-center mb-1\">\r\n                                @if (worker.state === 'idle') {\r\n                                  <span class=\"badge bg-success me-2\">Idle</span>\r\n                                } @else if (worker.state === 'busy') {\r\n                                  <span class=\"badge bg-warning me-2\">Busy</span>\r\n                                } @else {\r\n                                  <span class=\"badge bg-danger me-2\">{{ worker.state }}</span>\r\n                                }\r\n                                <small class=\"text-muted\">{{ worker.hostname }} (PID: {{ worker.pid }})</small>\r\n                              </div>\r\n                              <div class=\"small text-muted\">\r\n                                <i class=\"bi bi-list-ul me-1\"></i>\r\n                                Queues: {{ worker.queues.join(', ') }}\r\n                              </div>\r\n                              <div class=\"small text-muted\">\r\n                                <i class=\"bi bi-check-circle me-1\"></i>\r\n                                {{ worker.successfulJobCount }} successful, {{ worker.failedJobCount }} failed\r\n                              </div>\r\n                              @if (worker.currentJob) {\r\n                                <div class=\"small mt-1\">\r\n                                  <i class=\"bi bi-hourglass-split me-1\"></i>\r\n                                  <strong>Current:</strong> {{ worker.currentJob.funcName }}\r\n                                </div>\r\n                              }\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n\r\n                <!-- Queues -->\r\n                <div>\r\n                  <h6 class=\"text-muted mb-2\">\r\n                    <i class=\"bi bi-list-task me-1\"></i>\r\n                    Queue Statistics\r\n                  </h6>\r\n                  <div class=\"table-responsive\">\r\n                    <table class=\"table table-sm mb-0\">\r\n                      <thead>\r\n                        <tr>\r\n                          <th>Queue</th>\r\n                          <th>Queued</th>\r\n                          <th>Started</th>\r\n                          <th>Failed</th>\r\n                        </tr>\r\n                      </thead>\r\n                      <tbody>\r\n                        @for (queue of Object.keys(workerStatus().queues); track queue) {\r\n                          <tr>\r\n                            <td>\r\n                              <span class=\"badge bg-secondary\">{{ queue }}</span>\r\n                            </td>\r\n                            <td>{{ workerStatus().queues[queue].count }}</td>\r\n                            <td>{{ workerStatus().queues[queue].startedCount }}</td>\r\n                            <td>\r\n                              @if (workerStatus().queues[queue].failedCount > 0) {\r\n                                <span class=\"text-danger\">{{ workerStatus().queues[queue].failedCount }}</span>\r\n                              } @else {\r\n                                {{ workerStatus().queues[queue].failedCount }}\r\n                              }\r\n                            </td>\r\n                          </tr>\r\n                        }\r\n                      </tbody>\r\n                    </table>\r\n                  </div>\r\n                </div>\r\n              } @else {\r\n                <div class=\"text-center py-3\">\r\n                  <p class=\"text-muted mb-2\">\r\n                    <i class=\"bi bi-info-circle me-1\"></i>\r\n                    Click refresh to load worker status\r\n                  </p>\r\n                  <small class=\"text-muted\">Only available to superusers</small>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"col-lg-4\">\r\n        <!-- Preview Panel -->\r\n        <div class=\"card mb-4\">\r\n          <div class=\"card-header\">\r\n            <h5 class=\"mb-0\">\r\n              <i class=\"bi bi-eye me-2\"></i>Preview\r\n            </h5>\r\n          </div>\r\n        <div class=\"card-body\">\r\n          <div class=\"preview-navbar mb-3\" \r\n               [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n            <div class=\"preview-nav\">\r\n              <span class=\"preview-brand\">\r\n                @if (configForm.get('logoUrl')?.value) {\r\n                  <img [src]=\"configForm.get('logoUrl')?.value\" alt=\"Logo\" style=\"height: 20px; width: auto;\" class=\"me-2\">\r\n                } @else {\r\n                  <i class=\"bi bi-flask me-2\"></i>\r\n                }\r\n                {{ configForm.get('siteName')?.value || 'Your Site Name' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"preview-login-card\">\r\n            <h6 class=\"text-center mb-3\">\r\n              @if (configForm.get('logoUrl')?.value) {\r\n                <img [src]=\"configForm.get('logoUrl')?.value\" alt=\"Logo\" style=\"height: 24px; width: auto;\" class=\"me-2\">\r\n              } @else {\r\n                <i class=\"bi bi-flask me-2\"></i>\r\n              }\r\n              {{ configForm.get('siteName')?.value || 'Your Site Name' }}\r\n            </h6>\r\n            @if (configForm.get('enableOrcidLogin')?.value) {\r\n              <div class=\"preview-button mb-2\"\r\n                   [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n                <i class=\"bi bi-person-badge me-2\"></i>\r\n                Login with ORCID\r\n              </div>\r\n            }\r\n            <div class=\"preview-button mb-2\"\r\n                 [style.background]=\"'linear-gradient(135deg, ' + (configForm.get('primaryColor')?.value || '#1976d2') + ' 0%, ' + getDarkerColor(configForm.get('primaryColor')?.value || '#1976d2') + ' 100%)'\">\r\n              <i class=\"bi bi-box-arrow-in-right me-2\"></i>\r\n              Regular Login\r\n            </div>\r\n            @if (configForm.get('allowUserRegistration')?.value) {\r\n              <div class=\"text-center mb-2\">\r\n                <small class=\"text-muted\">\r\n                  <i class=\"bi bi-person-plus me-1\"></i>\r\n                  Don't have an account? <a href=\"#\" class=\"text-decoration-none\">Register here</a>\r\n                </small>\r\n              </div>\r\n            }\r\n            <div class=\"text-center\">\r\n              <small class=\"text-muted\">\r\n                {{ configForm.get('siteName')?.value || 'Your Site Name' }} - Scientific Metadata Management\r\n              </small>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-3\">\r\n            <h6 class=\"text-muted\">Authentication Status:</h6>\r\n            <ul class=\"list-unstyled small text-muted mb-0\">\r\n              <li>\r\n                <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                Regular login: Always enabled\r\n              </li>\r\n              <li>\r\n                @if (configForm.get('enableOrcidLogin')?.value) {\r\n                  <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                  ORCID login: Enabled\r\n                } @else {\r\n                  <i class=\"bi bi-x-circle-fill text-danger me-1\"></i>\r\n                  ORCID login: Disabled\r\n                }\r\n              </li>\r\n              <li>\r\n                @if (configForm.get('allowUserRegistration')?.value) {\r\n                  <i class=\"bi bi-check-circle-fill text-success me-1\"></i>\r\n                  Public registration: Enabled\r\n                } @else {\r\n                  <i class=\"bi bi-x-circle-fill text-danger me-1\"></i>\r\n                  Public registration: Disabled\r\n                }\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          @if (configForm.get('showPoweredBy')?.value) {\r\n            <div class=\"mt-3\">\r\n              <small class=\"text-muted\">\r\n                <i class=\"bi bi-lightning-charge me-1\"></i>\r\n                Footer: \"Powered by CUPCAKE Vanilla\" will appear on hover\r\n              </small>\r\n            </div>\r\n          }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
+class DemoModeBannerComponent {
+    demoModeService;
+    destroy$ = new Subject();
+    isDemoMode = false;
+    demoModeInfo = null;
+    isCollapsed = false;
+    constructor(demoModeService) {
+        this.demoModeService = demoModeService;
+    }
+    ngOnInit() {
+        this.demoModeService.demoMode$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(info => {
+            this.isDemoMode = info.isActive;
+            this.demoModeInfo = info;
+        });
+        const collapsed = localStorage.getItem('demo_banner_collapsed');
+        if (collapsed === 'true') {
+            this.isCollapsed = true;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    toggleCollapse() {
+        this.isCollapsed = !this.isCollapsed;
+        localStorage.setItem('demo_banner_collapsed', this.isCollapsed.toString());
+    }
+    getMinutesRemaining() {
+        if (!this.demoModeInfo?.lastDetected) {
+            return this.demoModeInfo?.cleanupIntervalMinutes || 15;
+        }
+        const elapsed = (Date.now() - this.demoModeInfo.lastDetected.getTime()) / 1000 / 60;
+        const remaining = this.demoModeInfo.cleanupIntervalMinutes - elapsed;
+        return Math.max(0, Math.floor(remaining));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeBannerComponent, deps: [{ token: DemoModeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: DemoModeBannerComponent, isStandalone: true, selector: "cupcake-demo-mode-banner", ngImport: i0, template: "<div class=\"demo-mode-banner\" *ngIf=\"isDemoMode\" [class.collapsed]=\"isCollapsed\">\r\n  <div class=\"banner-content\">\r\n    <div class=\"banner-header\">\r\n      <div class=\"banner-icon\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\r\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\r\n        </svg>\r\n      </div>\r\n      <div class=\"banner-title\">\r\n        <strong>Demo Mode Active</strong>\r\n      </div>\r\n      <button class=\"collapse-btn\" (click)=\"toggleCollapse()\" type=\"button\">\r\n        <svg *ngIf=\"!isCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n        </svg>\r\n        <svg *ngIf=\"isCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"banner-details\" *ngIf=\"!isCollapsed\">\r\n      <p class=\"banner-message\">\r\n        This is a demonstration environment. All data will be automatically reset every\r\n        <strong>{{ demoModeInfo?.cleanupIntervalMinutes }} minutes</strong>.\r\n      </p>\r\n      <div class=\"banner-info\">\r\n        <div class=\"info-item\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n            <polyline points=\"12 6 12 12 16 14\"></polyline>\r\n          </svg>\r\n          Next reset: ~{{ getMinutesRemaining() }} minutes\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"></path>\r\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"></path>\r\n          </svg>\r\n          Transcription features are disabled\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n          Read-only for non-demo users\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".demo-mode-banner{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#ff6b35,#f7931e);color:#fff;box-shadow:0 2px 8px #0003;z-index:9999;transition:all .3s ease}.demo-mode-banner.collapsed .banner-details{display:none}.demo-mode-banner .banner-content{max-width:1200px;margin:0 auto;padding:12px 24px}.demo-mode-banner .banner-header{display:flex;align-items:center;gap:12px}.demo-mode-banner .banner-header .banner-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#fff3;border-radius:50%}.demo-mode-banner .banner-header .banner-icon svg{width:20px;height:20px}.demo-mode-banner .banner-header .banner-title{flex:1;font-size:16px;line-height:1.5}.demo-mode-banner .banner-header .banner-title strong{font-weight:600}.demo-mode-banner .banner-header .collapse-btn{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.demo-mode-banner .banner-header .collapse-btn:hover{background:#ffffff1a}.demo-mode-banner .banner-header .collapse-btn:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.demo-mode-banner .banner-details{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}.demo-mode-banner .banner-details .banner-message{margin:0 0 12px;font-size:14px;line-height:1.6}.demo-mode-banner .banner-details .banner-message strong{font-weight:600;text-decoration:underline}.demo-mode-banner .banner-details .banner-info{display:flex;flex-wrap:wrap;gap:16px;font-size:13px}.demo-mode-banner .banner-details .banner-info .info-item{display:flex;align-items:center;gap:6px;background:#ffffff1a;padding:6px 12px;border-radius:4px}.demo-mode-banner .banner-details .banner-info .info-item svg{flex-shrink:0}@media (max-width: 768px){.demo-mode-banner .banner-content{padding:10px 16px}.demo-mode-banner .banner-header .banner-title{font-size:14px}.demo-mode-banner .banner-details .banner-info{flex-direction:column;gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DemoModeBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cupcake-demo-mode-banner', standalone: true, imports: [CommonModule], template: "<div class=\"demo-mode-banner\" *ngIf=\"isDemoMode\" [class.collapsed]=\"isCollapsed\">\r\n  <div class=\"banner-content\">\r\n    <div class=\"banner-header\">\r\n      <div class=\"banner-icon\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\r\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\r\n        </svg>\r\n      </div>\r\n      <div class=\"banner-title\">\r\n        <strong>Demo Mode Active</strong>\r\n      </div>\r\n      <button class=\"collapse-btn\" (click)=\"toggleCollapse()\" type=\"button\">\r\n        <svg *ngIf=\"!isCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n        </svg>\r\n        <svg *ngIf=\"isCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"banner-details\" *ngIf=\"!isCollapsed\">\r\n      <p class=\"banner-message\">\r\n        This is a demonstration environment. All data will be automatically reset every\r\n        <strong>{{ demoModeInfo?.cleanupIntervalMinutes }} minutes</strong>.\r\n      </p>\r\n      <div class=\"banner-info\">\r\n        <div class=\"info-item\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n            <polyline points=\"12 6 12 12 16 14\"></polyline>\r\n          </svg>\r\n          Next reset: ~{{ getMinutesRemaining() }} minutes\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"></path>\r\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"></path>\r\n          </svg>\r\n          Transcription features are disabled\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n          Read-only for non-demo users\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".demo-mode-banner{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#ff6b35,#f7931e);color:#fff;box-shadow:0 2px 8px #0003;z-index:9999;transition:all .3s ease}.demo-mode-banner.collapsed .banner-details{display:none}.demo-mode-banner .banner-content{max-width:1200px;margin:0 auto;padding:12px 24px}.demo-mode-banner .banner-header{display:flex;align-items:center;gap:12px}.demo-mode-banner .banner-header .banner-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#fff3;border-radius:50%}.demo-mode-banner .banner-header .banner-icon svg{width:20px;height:20px}.demo-mode-banner .banner-header .banner-title{flex:1;font-size:16px;line-height:1.5}.demo-mode-banner .banner-header .banner-title strong{font-weight:600}.demo-mode-banner .banner-header .collapse-btn{background:transparent;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.demo-mode-banner .banner-header .collapse-btn:hover{background:#ffffff1a}.demo-mode-banner .banner-header .collapse-btn:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.demo-mode-banner .banner-details{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}.demo-mode-banner .banner-details .banner-message{margin:0 0 12px;font-size:14px;line-height:1.6}.demo-mode-banner .banner-details .banner-message strong{font-weight:600;text-decoration:underline}.demo-mode-banner .banner-details .banner-info{display:flex;flex-wrap:wrap;gap:16px;font-size:13px}.demo-mode-banner .banner-details .banner-info .info-item{display:flex;align-items:center;gap:6px;background:#ffffff1a;padding:6px 12px;border-radius:4px}.demo-mode-banner .banner-details .banner-info .info-item svg{flex-shrink:0}@media (max-width: 768px){.demo-mode-banner .banner-content{padding:10px 16px}.demo-mode-banner .banner-header .banner-title{font-size:14px}.demo-mode-banner .banner-details .banner-info{flex-direction:column;gap:8px}}\n"] }]
+        }], ctorParameters: () => [{ type: DemoModeService }] });
+
 class ToastContainerComponent {
     toastService = inject(ToastService);
     cdr = inject(ChangeDetectorRef);
@@ -3732,5 +3875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminWebSocketService, AnnotationType, ApiService, AsyncTaskMonitorService, AuthService, BaseApiService, CUPCAKE_CORE_CONFIG, CupcakeCoreModule, InvitationStatus, InvitationStatusLabels, LabGroupService, LabGroupsComponent, LoginComponent, NotificationService, PoweredByFooterComponent, RegisterComponent, ResourceRole, ResourceRoleLabels, ResourceService, ResourceType, ResourceTypeLabels, ResourceVisibility, ResourceVisibilityLabels, SiteConfigComponent, SiteConfigService, TASK_STATUS_COLORS, TASK_STATUS_LABELS, TASK_TYPE_LABELS, TaskStatus, TaskType, ThemeService, ToastContainerComponent, ToastService, UserManagementComponent, UserManagementService, UserProfileComponent, WEBSOCKET_ENDPOINT, WEBSOCKET_ENDPOINTS, WebSocketConfigService, WebSocketEndpoints, WebSocketService, adminGuard, authGuard, authInterceptor, resetRefreshState };
+export { AdminWebSocketService, AnnotationType, ApiService, AsyncTaskMonitorService, AuthService, BaseApiService, CUPCAKE_CORE_CONFIG, CupcakeCoreModule, DemoModeBannerComponent, DemoModeInterceptor, DemoModeService, InvitationStatus, InvitationStatusLabels, LabGroupService, LabGroupsComponent, LoginComponent, NotificationService, PoweredByFooterComponent, RegisterComponent, ResourceRole, ResourceRoleLabels, ResourceService, ResourceType, ResourceTypeLabels, ResourceVisibility, ResourceVisibilityLabels, SiteConfigComponent, SiteConfigService, TASK_STATUS_COLORS, TASK_STATUS_LABELS, TASK_TYPE_LABELS, TaskStatus, TaskType, ThemeService, ToastContainerComponent, ToastService, UserManagementComponent, UserManagementService, UserProfileComponent, WEBSOCKET_ENDPOINT, WEBSOCKET_ENDPOINTS, WebSocketConfigService, WebSocketEndpoints, WebSocketService, adminGuard, authGuard, authInterceptor, resetRefreshState };
 //# sourceMappingURL=noatgnu-cupcake-core.mjs.map