@kustomizer/visual-editor 0.0.1 → 0.1.0

package/fesm2022/kustomizer-visual-editor.mjs

@@ -1,16 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, computed, makeEnvironmentProviders, ViewContainerRef, DestroyRef, input, effect, reflectComponentType, ChangeDetectionStrategy, Component, viewChild, output } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, ViewContainerRef, DestroyRef, input, effect, reflectComponentType, ChangeDetectionStrategy, Component, computed, NgZone, signal, viewChild, output } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { of, startWith, map, delay, throwError, firstValueFrom, forkJoin, BehaviorSubject, tap as tap$1, Subject, debounceTime, switchMap as switchMap$1, takeUntil, filter } from 'rxjs';
-import { tap, catchError, shareReplay, take, map as map$1, switchMap } from 'rxjs/operators';
+import { of, startWith, map, delay, throwError, isObservable, Observable, BehaviorSubject, tap, Subject, filter, debounceTime, switchMap as switchMap$1, takeUntil } from 'rxjs';
+import { switchMap, map as map$1, catchError } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { createActionGroup, emptyProps, props, createReducer, on, createFeatureSelector, createSelector, provideState, Store } from '@ngrx/store';
 import { DomSanitizer } from '@angular/platform-browser';
 import { toSignal } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 
 /**
  * Abstract navigation service that consumers can implement
@@ -57,6 +53,9 @@ class DefaultRouterNavigationService extends VisualEditorNavigation {
                     this.router.navigate([previewPath]);
                 }
                 break;
+            case 'setup':
+                this.router.navigate(['/setup']);
+                break;
         }
     }
     confirm(options) {
@@ -82,10 +81,10 @@ class DefaultRouterNavigationService extends VisualEditorNavigation {
         return this.router.events.pipe(startWith(null), // Trigger initial emission
         map(() => extractPageIdFromUrl()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultRouterNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultRouterNavigationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DefaultRouterNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DefaultRouterNavigationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DefaultRouterNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DefaultRouterNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -218,27 +217,27 @@ class PageMemoryRepository {
             publishedAt: page.publishedAt,
         };
     }
-    getPages(environment) {
+    getPages() {
         const summaries = Array.from(this.pages.values())
             .map((p) => this.toSummary(p))
             .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
         return of(summaries).pipe(delay(this.DELAY_MS));
     }
-    getPage(id, environment) {
+    getPage(id) {
         const page = this.pages.get(id);
         if (!page) {
             return throwError(() => new Error(`Page not found: ${id}`)).pipe(delay(this.DELAY_MS));
         }
         return of(structuredClone(page)).pipe(delay(this.DELAY_MS));
     }
-    getPublishedPageBySlug(slug, environment) {
+    getPublishedPageBySlug(slug) {
         const page = Array.from(this.pages.values()).find((p) => p.slug === slug && p.status === 'published');
         if (!page) {
             return throwError(() => new Error(`Published page not found: ${slug}`)).pipe(delay(this.DELAY_MS));
         }
         return of(structuredClone(page)).pipe(delay(this.DELAY_MS));
     }
-    createPage(request, environment) {
+    createPage(request) {
         // Check for duplicate slug
         const existingSlug = Array.from(this.pages.values()).find((p) => p.slug === request.slug);
         if (existingSlug) {
@@ -260,7 +259,7 @@ class PageMemoryRepository {
         console.log('[PageMemoryRepository] Created page:', page.id, page.title);
         return of(structuredClone(page)).pipe(delay(this.DELAY_MS));
     }
-    updatePage(id, request, environment) {
+    updatePage(id, request) {
         const page = this.pages.get(id);
         if (!page) {
             return throwError(() => new Error(`Page not found: ${id}`)).pipe(delay(this.DELAY_MS));
@@ -290,7 +289,7 @@ class PageMemoryRepository {
         console.log('[PageMemoryRepository] Sections JSON:', JSON.stringify(updatedPage.sections, null, 2));
         return of(structuredClone(updatedPage)).pipe(delay(this.DELAY_MS));
     }
-    deletePage(id, environment) {
+    deletePage(id) {
         if (!this.pages.has(id)) {
             return throwError(() => new Error(`Page not found: ${id}`)).pipe(delay(this.DELAY_MS));
         }
@@ -298,7 +297,7 @@ class PageMemoryRepository {
         console.log('[PageMemoryRepository] Deleted page:', id);
         return of(undefined).pipe(delay(this.DELAY_MS));
     }
-    publishPage(id, request, environment) {
+    publishPage(id, request) {
         const page = this.pages.get(id);
         if (!page) {
             return throwError(() => new Error(`Page not found: ${id}`)).pipe(delay(this.DELAY_MS));
@@ -318,7 +317,7 @@ class PageMemoryRepository {
         console.log('[PageMemoryRepository] Published page:', id);
         return of(structuredClone(updatedPage)).pipe(delay(this.DELAY_MS));
     }
-    unpublishPage(id, request, environment) {
+    unpublishPage(id, request) {
         const page = this.pages.get(id);
         if (!page) {
             return throwError(() => new Error(`Page not found: ${id}`)).pipe(delay(this.DELAY_MS));
@@ -336,7 +335,7 @@ class PageMemoryRepository {
         console.log('[PageMemoryRepository] Unpublished page:', id);
         return of(structuredClone(updatedPage)).pipe(delay(this.DELAY_MS));
     }
-    duplicatePage(id, environment) {
+    duplicatePage(id) {
         const page = this.pages.get(id);
         if (!page) {
             return throwError(() => new Error(`Page not found: ${id}`)).pipe(delay(this.DELAY_MS));
@@ -363,573 +362,50 @@ class PageMemoryRepository {
         this.seedData();
         console.log('[PageMemoryRepository] Reset to initial state');
     }
-    deletePagesByEnvironment(environment) {
-        this.pages.clear();
-        console.log('[PageMemoryRepository] Deleted all pages for environment:', environment ?? 'production');
-        return of(undefined).pipe(delay(this.DELAY_MS));
-    }
     // Utility method to get all pages (useful for debugging)
     getAllPages() {
         return Array.from(this.pages.values());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageMemoryRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageMemoryRepository, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageMemoryRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageMemoryRepository, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageMemoryRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageMemoryRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-const SUPABASE_CONFIG = new InjectionToken('SUPABASE_CONFIG');
-class SupabaseAuthService {
-    config = inject(SUPABASE_CONFIG, { optional: true });
-    supabase = null;
-    supabasePromise = null;
-    authSubscription = null;
-    _session = signal(null, ...(ngDevMode ? [{ debugName: "_session" }] : []));
-    _user = signal(null, ...(ngDevMode ? [{ debugName: "_user" }] : []));
-    _loading = signal(true, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
-    session = this._session.asReadonly();
-    user = this._user.asReadonly();
-    loading = this._loading.asReadonly();
-    error = this._error.asReadonly();
-    initialized = this._initialized.asReadonly();
-    isAuthenticated = computed(() => this._initialized() && !!this._session(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
-    accessToken = computed(() => this._session()?.access_token ?? null, ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
-    userEmail = computed(() => this._user()?.email ?? null, ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    async getSupabaseClient() {
-        if (this.supabase)
-            return this.supabase;
-        if (this.supabasePromise)
-            return this.supabasePromise;
-        if (!this.config || typeof window === 'undefined') {
-            this._loading.set(false);
-            this._initialized.set(true);
-            return null;
-        }
-        this.supabasePromise = this.initializeClient();
-        return this.supabasePromise;
-    }
-    async initializeClient() {
-        try {
-            const { createClient } = await import('@supabase/supabase-js');
-            this.supabase = createClient(this.config.supabaseUrl, this.config.supabaseAnonKey, {
-                auth: {
-                    autoRefreshToken: true,
-                    persistSession: true,
-                    detectSessionInUrl: true,
-                },
-            });
-            const { data: { subscription } } = this.supabase.auth.onAuthStateChange((event, session) => {
-                this._session.set(session);
-                this._user.set(session?.user ?? null);
-                this._loading.set(false);
-                this._initialized.set(true);
-                if (event === 'SIGNED_OUT') {
-                    this._error.set(null);
-                }
-            });
-            this.authSubscription = subscription;
-            const { data: { session }, error } = await this.supabase.auth.getSession();
-            if (!error) {
-                this._session.set(session);
-                this._user.set(session?.user ?? null);
-            }
-            this._loading.set(false);
-            this._initialized.set(true);
-            return this.supabase;
-        }
-        catch (err) {
-            this._error.set(err instanceof Error ? err.message : 'Failed to initialize');
-            this._loading.set(false);
-            this._initialized.set(true);
-            return null;
-        }
-    }
-    async ensureInitialized() {
-        await this.getSupabaseClient();
-    }
-    async signInWithPassword(email, password) {
-        const client = await this.getSupabaseClient();
-        if (!client) {
-            return { success: false, error: 'Supabase not initialized' };
-        }
-        this._loading.set(true);
-        this._error.set(null);
-        try {
-            const { data, error } = await client.auth.signInWithPassword({
-                email,
-                password,
-            });
-            if (error)
-                throw error;
-            this._session.set(data.session);
-            this._user.set(data.user);
-            return { success: true };
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : 'Login failed';
-            this._error.set(message);
-            return { success: false, error: message };
-        }
-        finally {
-            this._loading.set(false);
-        }
-    }
-    async signUp(email, password) {
-        const client = await this.getSupabaseClient();
-        if (!client) {
-            return { success: false, error: 'Supabase not initialized' };
-        }
-        this._loading.set(true);
-        this._error.set(null);
-        try {
-            const { data, error } = await client.auth.signUp({
-                email,
-                password,
-            });
-            if (error)
-                throw error;
-            if (data.session) {
-                this._session.set(data.session);
-                this._user.set(data.user);
-            }
-            return { success: true };
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : 'Sign up failed';
-            this._error.set(message);
-            return { success: false, error: message };
-        }
-        finally {
-            this._loading.set(false);
-        }
-    }
-    async signOut() {
-        const client = await this.getSupabaseClient();
-        if (!client)
-            return;
-        this._loading.set(true);
-        try {
-            await client.auth.signOut();
-            this._session.set(null);
-            this._user.set(null);
-        }
-        catch (err) {
-            this._error.set(err instanceof Error ? err.message : 'Sign out failed');
-        }
-        finally {
-            this._loading.set(false);
-        }
-    }
-    async resetPassword(email) {
-        const client = await this.getSupabaseClient();
-        if (!client) {
-            return { success: false, error: 'Supabase not initialized' };
-        }
-        try {
-            const { error } = await client.auth.resetPasswordForEmail(email);
-            if (error)
-                throw error;
-            return { success: true };
-        }
-        catch (err) {
-            return { success: false, error: err instanceof Error ? err.message : 'Reset failed' };
-        }
-    }
-    async getClient() {
-        return this.getSupabaseClient();
-    }
-    ngOnDestroy() {
-        this.authSubscription?.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SupabaseAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SupabaseAuthService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SupabaseAuthService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
- * Token para inyectar el dominio de la tienda.
- * Debe ser configurado por la aplicación que instala el editor.
- *
- * Ejemplo de uso:
- * ```typescript
- * providers: [
- *   { provide: STORE_DOMAIN, useValue: 'nike.com' }
- * ]
- * ```
- *
- * Si no se provee, el servicio intentará detectar el dominio desde window.location.hostname
+ * Injection token for Shopify configuration
+ * Can be provided as a static object or as an Observable for dynamic config
  */
-const STORE_DOMAIN = new InjectionToken('STORE_DOMAIN');
-class ShopAuthService {
-    http = inject(HttpClient);
-    config = inject(SUPABASE_CONFIG, { optional: true });
-    authService = inject(SupabaseAuthService);
-    storeDomainConfig = inject(STORE_DOMAIN, { optional: true });
-    // Estado interno
-    _shop = signal(null, ...(ngDevMode ? [{ debugName: "_shop" }] : []));
-    _user = signal(null, ...(ngDevMode ? [{ debugName: "_user" }] : []));
-    _license = signal(null, ...(ngDevMode ? [{ debugName: "_license" }] : []));
-    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
-    // Exponer estado como readonly
-    shop = this._shop.asReadonly();
-    user = this._user.asReadonly();
-    license = this._license.asReadonly();
-    loading = this._loading.asReadonly();
-    error = this._error.asReadonly();
-    initialized = this._initialized.asReadonly();
-    // Computed helpers
-    shopId = computed(() => this._shop()?.id ?? null, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
-    shopName = computed(() => this._shop()?.name ?? null, ...(ngDevMode ? [{ debugName: "shopName" }] : []));
-    shopifyDomain = computed(() => this._shop()?.shopify_domain ?? null, ...(ngDevMode ? [{ debugName: "shopifyDomain" }] : []));
-    userEmail = computed(() => this._user()?.email ?? null, ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
-    userRole = computed(() => this._user()?.role ?? null, ...(ngDevMode ? [{ debugName: "userRole" }] : []));
-    isOwner = computed(() => this._user()?.role === 'owner', ...(ngDevMode ? [{ debugName: "isOwner" }] : []));
-    isAdmin = computed(() => ['owner', 'admin'].includes(this._user()?.role ?? ''), ...(ngDevMode ? [{ debugName: "isAdmin" }] : []));
-    canEdit = computed(() => ['owner', 'admin'].includes(this._user()?.role ?? ''), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
-    licenseTier = computed(() => this._license()?.tier ?? null, ...(ngDevMode ? [{ debugName: "licenseTier" }] : []));
-    licenseActive = computed(() => this._license()?.active ?? false, ...(ngDevMode ? [{ debugName: "licenseActive" }] : []));
-    licenseExpiresAt = computed(() => this._license()?.expires_at ?? null, ...(ngDevMode ? [{ debugName: "licenseExpiresAt" }] : []));
-    hasAccess = computed(() => {
-        return this._shop() !== null && this._user() !== null && this._license()?.active === true;
-    }, ...(ngDevMode ? [{ debugName: "hasAccess" }] : []));
-    daysRemaining = computed(() => {
-        const expiresAt = this._license()?.expires_at;
-        if (!expiresAt)
-            return null;
-        const days = Math.ceil((new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
-        return Math.max(0, days);
-    }, ...(ngDevMode ? [{ debugName: "daysRemaining" }] : []));
-    isLicenseExpiringSoon = computed(() => {
-        const days = this.daysRemaining();
-        return days !== null && days <= 7;
-    }, ...(ngDevMode ? [{ debugName: "isLicenseExpiringSoon" }] : []));
-    /**
-     * Obtiene el dominio actual.
-     * Prioridad:
-     * 1. STORE_DOMAIN token (inyectado)
-     * 2. Query param ?shop= (solo en localhost)
-     * 3. window.location.hostname
-     */
-    getCurrentDomain() {
-        if (this.storeDomainConfig) {
-            return this.storeDomainConfig;
-        }
-        if (typeof window !== 'undefined') {
-            const hostname = window.location.hostname;
-            if (hostname === 'localhost' || hostname === '127.0.0.1') {
-                const params = new URLSearchParams(window.location.search);
-                const shopParam = params.get('shop');
-                if (shopParam) {
-                    localStorage.setItem('kustomizer_shop_domain', shopParam);
-                    return shopParam;
-                }
-                const stored = localStorage.getItem('kustomizer_shop_domain');
-                if (stored) {
-                    return stored;
-                }
-            }
-            return hostname;
-        }
-        return '';
-    }
-    /**
-     * Autentica al usuario para el dominio actual.
-     * Esta es la función principal que debe llamarse al cargar la app.
-     */
-    async authenticate() {
-        // Si ya está inicializado y tiene datos, retornar cache
-        if (this._initialized() && this._shop()) {
-            return {
-                shop: this._shop(),
-                user: this._user(),
-                license: this._license(),
-            };
-        }
-        // Esperar a que el auth service esté listo
-        await this.authService.ensureInitialized();
-        const token = this.authService.accessToken();
-        const email = this.authService.userEmail();
-        if (!token || !email) {
-            this._error.set({ code: 'NOT_AUTHENTICATED', message: 'User is not authenticated' });
-            this._initialized.set(true);
-            return { shop: null, user: null, license: null };
-        }
-        const domain = this.getCurrentDomain();
-        if (!domain) {
-            this._error.set({ code: 'NO_DOMAIN', message: 'Could not determine current domain' });
-            this._initialized.set(true);
-            return { shop: null, user: null, license: null };
-        }
-        if (domain === 'localhost' || domain === '127.0.0.1') {
-            this._error.set({
-                code: 'LOCALHOST_NO_SHOP',
-                message: 'Running on localhost. Add ?shop=your-store.myshopify.com to the URL'
-            });
-            this._initialized.set(true);
-            return { shop: null, user: null, license: null };
-        }
-        this._loading.set(true);
-        this._error.set(null);
-        try {
-            const url = this.config
-                ? `${this.config.supabaseUrl}/functions/v1/shop_auth`
-                : '/functions/v1/shop_auth';
-            const anonKey = this.config?.supabaseAnonKey ?? '';
-            const response = await firstValueFrom(this.http.post(url, { domain, email }, {
-                headers: {
-                    'Authorization': `Bearer ${anonKey}`,
-                    'apikey': anonKey,
-                    'Content-Type': 'application/json',
-                },
-            }));
-            this._shop.set(response.shop);
-            this._user.set(response.user);
-            this._license.set(response.license);
-            this._initialized.set(true);
-            this._loading.set(false);
-            return {
-                shop: response.shop,
-                user: response.user,
-                license: response.license,
-            };
-        }
-        catch (err) {
-            console.error('[ShopAuthService] Authentication failed:', err);
-            const httpError = err;
-            let errorCode = 'UNKNOWN_ERROR';
-            let errorMessage = 'Authentication failed';
-            if (httpError.error?.code) {
-                errorCode = httpError.error.code;
-                errorMessage = httpError.error.error || httpError.error.message || errorMessage;
-            }
-            else if (httpError.status === 404) {
-                errorCode = 'SHOP_NOT_FOUND';
-                errorMessage = 'This domain is not registered';
-            }
-            else if (httpError.status === 403) {
-                errorCode = 'NO_ACCESS';
-                errorMessage = 'You do not have access to this shop';
-            }
-            this._error.set({ code: errorCode, message: errorMessage });
-            this._shop.set(null);
-            this._user.set(null);
-            this._license.set(null);
-            this._initialized.set(true);
-            this._loading.set(false);
-            return { shop: null, user: null, license: null };
-        }
-    }
-    /**
-     * Limpia el estado (para logout)
-     */
-    clear() {
-        this._shop.set(null);
-        this._user.set(null);
-        this._license.set(null);
-        this._error.set(null);
-        this._initialized.set(false);
-        if (typeof window !== 'undefined') {
-            localStorage.removeItem('kustomizer_shop_domain');
-        }
-    }
-    /**
-     * Refresca la autenticación
-     */
-    async refresh() {
-        this._initialized.set(false);
-        return this.authenticate();
-    }
-    /**
-     * Verifica si el error actual indica que el usuario no tiene acceso
-     */
-    isNoAccessError() {
-        const code = this._error()?.code;
-        return code === 'NO_ACCESS' || code === 'SHOP_NOT_FOUND';
-    }
-    /**
-     * Verifica si el error actual indica que la licencia expiró
-     */
-    isLicenseExpiredError() {
-        return this._error()?.code === 'LICENSE_EXPIRED';
-    }
-    /**
-     * Verifica si el usuario está inactivo
-     */
-    isUserInactiveError() {
-        return this._error()?.code === 'USER_INACTIVE';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopAuthService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopAuthService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-const SHOPIFY_APP_CONFIG = new InjectionToken('SHOPIFY_APP_CONFIG', {
+const SHOPIFY_CONFIG = new InjectionToken('SHOPIFY_CONFIG', {
     providedIn: 'root',
     factory: () => ({
-        appUrl: 'https://kustomizer.xyz'
-    })
+        shopDomain: '',
+        accessToken: '',
+        apiVersion: '2026-01',
+        proxyUrl: '/shopify-api/graphql.json',
+    }),
+});
+/**
+ * Injection token for Storefront API configuration.
+ * Used by the public-storefront to read metafields via the Storefront API.
+ */
+const STOREFRONT_CONFIG = new InjectionToken('STOREFRONT_CONFIG');
+/**
+ * Injection token for the client storefront URL.
+ * The editor uses this to:
+ * 1. Fetch the component manifest (`{url}/kustomizer/manifest.json`)
+ * 2. Embed the live preview iframe (`{url}/kustomizer/editor`)
+ */
+const STOREFRONT_URL = new InjectionToken('STOREFRONT_URL', {
+    providedIn: 'root',
+    factory: () => '',
 });
-class ShopifyTokenService {
-    http = inject(HttpClient);
-    config = inject(SHOPIFY_APP_CONFIG);
-    authService = inject(SupabaseAuthService);
-    shopAuthService = inject(ShopAuthService);
-    CACHE_TTL_MS = 5 * 60 * 1000;
-    tokenCache = new Map();
-    _currentToken = signal(null, ...(ngDevMode ? [{ debugName: "_currentToken" }] : []));
-    _currentDomain = signal(null, ...(ngDevMode ? [{ debugName: "_currentDomain" }] : []));
-    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
-    pendingRequest = null;
-    currentToken = this._currentToken.asReadonly();
-    currentDomain = this._currentDomain.asReadonly();
-    loading = this._loading.asReadonly();
-    error = this._error.asReadonly();
-    hasToken = computed(() => !!this._currentToken(), ...(ngDevMode ? [{ debugName: "hasToken" }] : []));
-    isReady = computed(() => this.authService.isAuthenticated() && !!this.shopAuthService.shop(), ...(ngDevMode ? [{ debugName: "isReady" }] : []));
-    getToken() {
-        if (!this.authService.isAuthenticated()) {
-            return throwError(() => this.createError('NOT_AUTHENTICATED', 'User is not authenticated'));
-        }
-        const shop = this.shopAuthService.shop();
-        if (!shop?.shopify_domain) {
-            return throwError(() => this.createError('NO_ACTIVE_STORE', 'No active store selected'));
-        }
-        return this.getTokenForDomain(shop.shopify_domain);
-    }
-    getTokenForDomain(shopifyDomain) {
-        const cached = this.getCachedToken(shopifyDomain);
-        if (cached) {
-            this._currentToken.set(cached.accessToken);
-            this._currentDomain.set(cached.shopifyDomain);
-            return of({
-                accessToken: cached.accessToken,
-                shopifyDomain: cached.shopifyDomain
-            });
-        }
-        if (this.pendingRequest) {
-            return this.pendingRequest;
-        }
-        return this.fetchToken(shopifyDomain);
-    }
-    refreshToken() {
-        const shop = this.shopAuthService.shop();
-        if (!shop?.shopify_domain) {
-            return throwError(() => this.createError('NO_ACTIVE_STORE', 'No active store selected'));
-        }
-        this.invalidateCache(shop.shopify_domain);
-        return this.fetchToken(shop.shopify_domain);
-    }
-    invalidateCache(shopifyDomain) {
-        if (shopifyDomain) {
-            this.tokenCache.delete(shopifyDomain);
-            if (this._currentDomain() === shopifyDomain) {
-                this._currentToken.set(null);
-                this._currentDomain.set(null);
-            }
-        }
-        else {
-            this.tokenCache.clear();
-            this._currentToken.set(null);
-            this._currentDomain.set(null);
-        }
-    }
-    clear() {
-        this.invalidateCache();
-        this._error.set(null);
-        this._loading.set(false);
-        this.pendingRequest = null;
-    }
-    fetchToken(shopifyDomain) {
-        this._loading.set(true);
-        this._error.set(null);
-        const supabaseToken = this.authService.accessToken();
-        if (!supabaseToken) {
-            this._loading.set(false);
-            return throwError(() => this.createError('NOT_AUTHENTICATED', 'No authentication token available'));
-        }
-        const url = `${this.config.appUrl}/api/get-token`;
-        this.pendingRequest = this.http.post(url, { shopifyDomain }, {
-            headers: {
-                'Authorization': `Bearer ${supabaseToken}`,
-                'Content-Type': 'application/json'
-            }
-        }).pipe(tap(response => {
-            this.setCachedToken(shopifyDomain, response);
-            this._currentToken.set(response.accessToken);
-            this._currentDomain.set(response.shopifyDomain);
-            this._loading.set(false);
-            this.pendingRequest = null;
-        }), catchError((error) => {
-            this._loading.set(false);
-            this.pendingRequest = null;
-            const tokenError = this.handleHttpError(error);
-            this._error.set(tokenError);
-            return throwError(() => tokenError);
-        }), shareReplay(1), take(1));
-        return this.pendingRequest;
-    }
-    getCachedToken(shopifyDomain) {
-        const entry = this.tokenCache.get(shopifyDomain);
-        if (entry && Date.now() < entry.expiresAt) {
-            return entry;
-        }
-        if (entry) {
-            this.tokenCache.delete(shopifyDomain);
-        }
-        return null;
-    }
-    setCachedToken(shopifyDomain, response) {
-        this.tokenCache.set(shopifyDomain, {
-            accessToken: response.accessToken,
-            shopifyDomain: response.shopifyDomain,
-            expiresAt: Date.now() + this.CACHE_TTL_MS
-        });
-    }
-    handleHttpError(error) {
-        if (error.error instanceof ErrorEvent) {
-            return this.createError('NETWORK_ERROR', 'Network error occurred', error.status);
-        }
-        switch (error.status) {
-            case 401:
-                return this.createError('SESSION_EXPIRED', 'Session expired. Please login again.', 401);
-            case 403:
-                return this.createError('NO_STORE_ACCESS', 'You do not have access to this store.', 403);
-            case 404:
-                return this.createError('NO_STORE_ACCESS', 'Store not found or not linked.', 404);
-            default:
-                const message = error.error?.error || error.error?.message || 'Failed to get token';
-                return this.createError('TOKEN_FETCH_FAILED', message, error.status);
-        }
-    }
-    createError(code, message, status) {
-        return { code, message, status };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyTokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyTokenService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyTokenService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
 
 class ShopifyGraphQLClient {
     http = inject(HttpClient);
-    authService = inject(SupabaseAuthService);
-    shopAuthService = inject(ShopAuthService);
-    config = inject(SHOPIFY_APP_CONFIG);
+    config = inject(SHOPIFY_CONFIG);
     query(query, variables) {
         return this.executeOperation(query, variables);
     }
@@ -937,96 +413,100 @@ class ShopifyGraphQLClient {
         return this.executeOperation(mutation, variables);
     }
     executeOperation(operation, variables) {
-        const shop = this.shopAuthService.shop();
-        if (!shop?.shopify_domain) {
-            return throwError(() => this.createError('TOKEN_ERROR', 'No active store selected'));
-        }
-        const supabaseToken = this.authService.accessToken();
-        if (!supabaseToken) {
-            return throwError(() => this.createError('UNAUTHORIZED', 'Not authenticated'));
-        }
-        const shopifyDomain = shop.shopify_domain;
-        const proxyUrl = `${this.config.appUrl}/api/graphql-proxy`;
-        return this.http.post(proxyUrl, {
-            shopifyDomain,
-            query: operation,
-            variables,
-        }, {
-            headers: {
+        const config$ = isObservable(this.config)
+            ? this.config
+            : new Observable(subscriber => {
+                subscriber.next(this.config);
+                subscriber.complete();
+            });
+        return config$.pipe(switchMap((config) => {
+            // Use proxy URL if available (for development), otherwise direct Shopify URL
+            const url = config.proxyUrl
+                ? config.proxyUrl
+                : `https://${config.shopDomain}/admin/api/${config.apiVersion}/graphql.json`;
+            const request = {
+                query: operation,
+                variables,
+            };
+            // When using proxy, headers are set by the proxy config
+            const headers = {
                 'Content-Type': 'application/json',
-                'Authorization': `Bearer ${supabaseToken}`,
-            },
-        }).pipe(map$1(response => this.handleResponse(response)), catchError(error => this.handleHttpError(error)));
+            };
+            // Only add access token header when not using proxy
+            if (!config.proxyUrl) {
+                headers['X-Shopify-Access-Token'] = config.accessToken;
+            }
+            return this.http.post(url, request, { headers }).pipe(map$1(response => this.handleResponse(response)), catchError(error => this.handleError(error)));
+        }));
     }
     handleResponse(response) {
         if (response.errors && response.errors.length > 0) {
-            const error = {
+            throw {
                 code: 'GRAPHQL_ERROR',
                 message: response.errors[0].message,
-                errors: response.errors.map(e => ({ message: e.message }))
+                errors: response.errors,
             };
-            throw error;
         }
         if (!response.data) {
-            const error = {
+            throw {
                 code: 'EMPTY_RESPONSE',
-                message: 'GraphQL response contains no data'
+                message: 'GraphQL response contains no data',
             };
-            throw error;
         }
         return response.data;
     }
-    handleHttpError(error) {
-        if (error.error instanceof ErrorEvent) {
-            return throwError(() => this.createError('NETWORK_ERROR', error.error.message));
+    handleError(error) {
+        let errorCode = 'UNKNOWN_ERROR';
+        let errorMessage = 'An unknown error occurred';
+        if (typeof ErrorEvent !== 'undefined' && error.error instanceof ErrorEvent) {
+            errorCode = 'NETWORK_ERROR';
+            errorMessage = error.error.message;
         }
-        let code;
-        let message;
-        switch (error.status) {
-            case 401:
-                code = 'UNAUTHORIZED';
-                message = 'Session expired. Please login again.';
-                break;
-            case 403:
-                code = 'FORBIDDEN';
-                message = 'Access denied to this store.';
-                break;
-            case 404:
-                code = 'TOKEN_ERROR';
-                message = 'Store not connected. Please install the Shopify app.';
-                break;
-            case 429:
-                code = 'RATE_LIMIT';
-                message = 'Rate limit exceeded. Please try again later.';
-                break;
-            case 500:
-            case 502:
-            case 503:
-            case 504:
-                code = 'SERVER_ERROR';
-                message = 'Server error. Please try again.';
-                break;
-            default:
-                code = 'HTTP_ERROR';
-                message = error.error?.error || `HTTP ${error.status}: ${error.statusText || 'Unknown error'}`;
+        else {
+            switch (error.status) {
+                case 401:
+                    errorCode = 'UNAUTHORIZED';
+                    errorMessage = 'Invalid or expired access token';
+                    break;
+                case 403:
+                    errorCode = 'FORBIDDEN';
+                    errorMessage = 'Insufficient permissions';
+                    break;
+                case 429:
+                    errorCode = 'RATE_LIMIT';
+                    errorMessage = 'Rate limit exceeded';
+                    break;
+                case 500:
+                case 502:
+                case 503:
+                case 504:
+                    errorCode = 'SERVER_ERROR';
+                    errorMessage = 'Shopify server error';
+                    break;
+                default:
+                    errorCode = 'HTTP_ERROR';
+                    errorMessage = `HTTP ${error.status}: ${error.statusText}`;
+            }
         }
-        return throwError(() => this.createError(code, message, error.status, error));
-    }
-    createError(code, message, status, original) {
-        return { code, message, status, original };
+        return throwError(() => ({
+            code: errorCode,
+            message: errorMessage,
+            status: error.status,
+            original: error,
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyGraphQLClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyGraphQLClient, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyGraphQLClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyGraphQLClient, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyGraphQLClient, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyGraphQLClient, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-const NAMESPACE = 'kustomizer';
-const INDEX_KEY = 'pages_index';
+const NAMESPACE$1 = 'kustomizer';
+const INDEX_KEY$1 = 'pages_index';
 const MAX_METAFIELD_SIZE = 64 * 1024;
-const GET_SHOP_METAFIELD_QUERY = `
+const GET_SHOP_METAFIELD_QUERY$1 = `
   query GetShopMetafield($namespace: String!, $key: String!) {
     shop {
       id
@@ -1069,6 +549,39 @@ const DELETE_METAFIELDS_MUTATION = `
     }
   }
 `;
+const CREATE_METAFIELD_DEFINITION_MUTATION = `
+  mutation CreateMetafieldDefinition($definition: MetafieldDefinitionInput!) {
+    metafieldDefinitionCreate(definition: $definition) {
+      createdDefinition {
+        id
+      }
+      userErrors {
+        field
+        message
+        code
+      }
+    }
+  }
+`;
+const DELETE_METAFIELD_DEFINITION_MUTATION = `
+  mutation DeleteMetafieldDefinition($id: ID!) {
+    metafieldDefinitionDelete(id: $id) {
+      deletedDefinitionId
+      userErrors {
+        field
+        message
+        code
+      }
+    }
+  }
+`;
+const GET_METAFIELD_DEFINITION_QUERY = `
+  query GetMetafieldDefinition($ownerType: MetafieldOwnerType!, $namespace: String, $key: String!) {
+    metafieldDefinition(identifier: { ownerType: $ownerType, namespace: $namespace, key: $key }) {
+      id
+    }
+  }
+`;
 const GET_SHOP_ID_QUERY = `
   query GetShopId {
     shop {
@@ -1078,20 +591,8 @@ const GET_SHOP_ID_QUERY = `
 `;
 class ShopifyMetafieldRepository {
     client = inject(ShopifyGraphQLClient);
-    resolveEnvironment(environment) {
-        const trimmed = environment?.trim();
-        return trimmed ? trimmed : 'production';
-    }
-    buildIndexKey(environment) {
-        const env = this.resolveEnvironment(environment);
-        return `${env}.${INDEX_KEY}`;
-    }
-    buildPageKey(pageId, environment) {
-        const env = this.resolveEnvironment(environment);
-        return `${env}.page_${pageId}`;
-    }
     getMetafield(namespace, key) {
-        return this.client.query(GET_SHOP_METAFIELD_QUERY, { namespace, key }).pipe(map$1(response => {
+        return this.client.query(GET_SHOP_METAFIELD_QUERY$1, { namespace, key }).pipe(map$1(response => {
             if (!response.shop.metafield) {
                 return null;
             }
@@ -1164,9 +665,8 @@ class ShopifyMetafieldRepository {
     getShopId() {
         return this.client.query(GET_SHOP_ID_QUERY).pipe(map$1(response => response.shop.id));
     }
-    getPageIndex(environment) {
-        const key = this.buildIndexKey(environment);
-        return this.getMetafield(NAMESPACE, key).pipe(map$1(metafield => {
+    getPageIndex() {
+        return this.getMetafield(NAMESPACE$1, INDEX_KEY$1).pipe(map$1(metafield => {
             if (!metafield) {
                 return this.getDefaultIndex();
             }
@@ -1186,20 +686,19 @@ class ShopifyMetafieldRepository {
             }
         }));
     }
-    updatePageIndex(index, environment) {
+    updatePageIndex(index) {
         return this.getShopId().pipe(switchMap(shopId => {
             const updatedIndex = {
                 ...index,
                 version: index.version + 1,
                 lastUpdated: new Date().toISOString(),
             };
-            const key = this.buildIndexKey(environment);
-            return this.setMetafield(NAMESPACE, key, updatedIndex, shopId).pipe(map$1(() => updatedIndex));
+            return this.setMetafield(NAMESPACE$1, INDEX_KEY$1, updatedIndex, shopId).pipe(map$1(() => updatedIndex));
         }));
     }
-    getPageMetafield(pageId, environment) {
-        const key = this.buildPageKey(pageId, environment);
-        return this.getMetafield(NAMESPACE, key).pipe(map$1(metafield => {
+    getPageMetafield(pageId) {
+        const key = `page_${pageId}`;
+        return this.getMetafield(NAMESPACE$1, key).pipe(map$1(metafield => {
             if (!metafield) {
                 return null;
             }
@@ -1215,21 +714,81 @@ class ShopifyMetafieldRepository {
             }
         }));
     }
-    setPageMetafield(pageId, page, environment) {
-        const key = this.buildPageKey(pageId, environment);
+    setPageMetafield(pageId, page) {
+        const key = `page_${pageId}`;
         return this.getShopId().pipe(switchMap(shopId => {
-            return this.setMetafield(NAMESPACE, key, page, shopId).pipe(map$1(() => page));
+            return this.setMetafield(NAMESPACE$1, key, page, shopId).pipe(map$1(() => page));
         }));
     }
-    deletePageMetafield(pageId, environment) {
-        const key = this.buildPageKey(pageId, environment);
-        return this.deleteMetafield(NAMESPACE, key);
+    deletePageMetafield(pageId) {
+        const key = `page_${pageId}`;
+        return this.deleteMetafield(NAMESPACE$1, key);
     }
-    resetPageIndex(environment) {
-        const key = this.buildIndexKey(environment);
-        const resetIndex = this.getDefaultIndex();
-        return this.getShopId().pipe(switchMap(shopId => {
-            return this.setMetafield(NAMESPACE, key, resetIndex, shopId).pipe(map$1(() => resetIndex));
+    /**
+     * Create a MetafieldDefinition with PUBLIC_READ storefront access.
+     * Idempotent: if definition already exists, returns the existing ID.
+     */
+    createMetafieldDefinition(namespace, key, name) {
+        return this.client.mutate(CREATE_METAFIELD_DEFINITION_MUTATION, {
+            definition: {
+                namespace,
+                key,
+                name,
+                ownerType: 'SHOP',
+                type: 'json',
+                access: {
+                    storefront: 'PUBLIC_READ',
+                },
+            },
+        }).pipe(switchMap(response => {
+            const { createdDefinition, userErrors } = response.metafieldDefinitionCreate;
+            if (createdDefinition) {
+                return of(createdDefinition.id);
+            }
+            // If definition already exists, look it up instead of failing
+            const alreadyExists = userErrors.some(e => e.code === 'TAKEN' || e.code === 'ALREADY_EXISTS');
+            if (alreadyExists) {
+                return this.getMetafieldDefinitionId(namespace, key);
+            }
+            throw {
+                code: 'METAFIELD_DEFINITION_ERROR',
+                message: userErrors[0]?.message || 'Failed to create metafield definition',
+                errors: userErrors,
+            };
+        }));
+    }
+    /**
+     * Delete a MetafieldDefinition by ID. Does not delete associated metafields.
+     */
+    deleteMetafieldDefinition(definitionId) {
+        return this.client.mutate(DELETE_METAFIELD_DEFINITION_MUTATION, {
+            id: definitionId,
+        }).pipe(map$1(response => {
+            if (response.metafieldDefinitionDelete.userErrors.length > 0) {
+                throw {
+                    code: 'METAFIELD_DEFINITION_ERROR',
+                    message: response.metafieldDefinitionDelete.userErrors[0].message,
+                    errors: response.metafieldDefinitionDelete.userErrors,
+                };
+            }
+        }));
+    }
+    /**
+     * Look up a MetafieldDefinition ID by namespace and key.
+     */
+    getMetafieldDefinitionId(namespace, key) {
+        return this.client.query(GET_METAFIELD_DEFINITION_QUERY, {
+            ownerType: 'SHOP',
+            namespace,
+            key,
+        }).pipe(map$1(response => {
+            if (!response.metafieldDefinition) {
+                throw {
+                    code: 'DEFINITION_NOT_FOUND',
+                    message: `MetafieldDefinition not found for ${namespace}.${key}`,
+                };
+            }
+            return response.metafieldDefinition.id;
         }));
     }
     validateSize(data) {
@@ -1249,31 +808,25 @@ class ShopifyMetafieldRepository {
             pages: [],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyMetafieldRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyMetafieldRepository, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyMetafieldRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyMetafieldRepository, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyMetafieldRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyMetafieldRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class PageShopifyRepository {
     metafieldRepo = inject(ShopifyMetafieldRepository);
-    resolveEnvironment(environment) {
-        const trimmed = environment?.trim();
-        return trimmed ? trimmed : 'production';
-    }
-    getPages(environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.metafieldRepo.getPageIndex(env).pipe(map$1(index => {
+    getPages() {
+        return this.metafieldRepo.getPageIndex().pipe(map$1(index => {
             return index.pages
                 .map(entry => this.mapIndexEntryToSummary(entry))
                 .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
         }));
     }
-    getPage(id, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.metafieldRepo.getPageMetafield(id, env).pipe(map$1(page => {
+    getPage(id) {
+        return this.metafieldRepo.getPageMetafield(id).pipe(map$1(page => {
             if (!page) {
                 throw {
                     code: 'PAGE_NOT_FOUND',
@@ -1283,9 +836,8 @@ class PageShopifyRepository {
             return page;
         }));
     }
-    getPublishedPageBySlug(slug, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.metafieldRepo.getPageIndex(env).pipe(switchMap(index => {
+    getPublishedPageBySlug(slug) {
+        return this.metafieldRepo.getPageIndex().pipe(switchMap(index => {
             const entry = index.pages.find(p => p.slug === slug && p.status === 'published');
             if (!entry) {
                 return throwError(() => ({
@@ -1293,12 +845,11 @@ class PageShopifyRepository {
                     message: `Published page with slug '${slug}' not found`,
                 }));
             }
-            return this.getPage(entry.id, env);
+            return this.getPage(entry.id);
         }));
     }
-    createPage(request, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.metafieldRepo.getPageIndex(env).pipe(switchMap(index => {
+    createPage(request) {
+        return this.metafieldRepo.getPageIndex().pipe(switchMap(index => {
             this.validateUniqueSlug(request.slug, index);
             const newPage = {
                 id: crypto.randomUUID(),
@@ -1321,15 +872,17 @@ class PageShopifyRepository {
                     percentUsed: validation.percentUsed,
                 }));
             }
-            return this.metafieldRepo.setPageMetafield(newPage.id, newPage, env).pipe(switchMap(() => {
-                const updatedIndex = this.addPageToIndex(index, newPage, validation.size);
-                return this.metafieldRepo.updatePageIndex(updatedIndex, env);
+            return this.metafieldRepo.setPageMetafield(newPage.id, newPage).pipe(switchMap(() => {
+                // Create MetafieldDefinition with PUBLIC_READ for Storefront API access
+                return this.metafieldRepo.createMetafieldDefinition('kustomizer', `page_${newPage.id}`, `Kustomizer Page: ${newPage.title}`).pipe(catchError(() => of(null)));
+            }), switchMap((definitionId) => {
+                const updatedIndex = this.addPageToIndex(index, newPage, validation.size, definitionId ?? undefined);
+                return this.metafieldRepo.updatePageIndex(updatedIndex);
             }), map$1(() => newPage));
         }));
     }
-    updatePage(id, request, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.getPage(id, env).pipe(switchMap(currentPage => {
+    updatePage(id, request) {
+        return this.getPage(id).pipe(switchMap(currentPage => {
             if (currentPage.version !== request.version) {
                 return throwError(() => ({
                     code: 'VERSION_CONFLICT',
@@ -1337,7 +890,7 @@ class PageShopifyRepository {
                     currentVersion: currentPage.version,
                 }));
             }
-            return this.metafieldRepo.getPageIndex(env).pipe(switchMap(index => {
+            return this.metafieldRepo.getPageIndex().pipe(switchMap(index => {
                 if (request.slug && request.slug !== currentPage.slug) {
                     this.validateUniqueSlug(request.slug, index, id);
                 }
@@ -1360,23 +913,30 @@ class PageShopifyRepository {
                         percentUsed: validation.percentUsed,
                     }));
                 }
-                return this.metafieldRepo.setPageMetafield(id, updatedPage, env).pipe(switchMap(() => {
+                return this.metafieldRepo.setPageMetafield(id, updatedPage).pipe(switchMap(() => {
                     const updatedIndex = this.updatePageInIndex(index, updatedPage, validation.size);
-                    return this.metafieldRepo.updatePageIndex(updatedIndex, env);
+                    return this.metafieldRepo.updatePageIndex(updatedIndex);
                 }), map$1(() => updatedPage));
             }));
         }));
     }
-    deletePage(id, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.metafieldRepo.deletePageMetafield(id, env).pipe(switchMap(() => this.metafieldRepo.getPageIndex(env)), switchMap(index => {
-            const updatedIndex = this.removePageFromIndex(index, id);
-            return this.metafieldRepo.updatePageIndex(updatedIndex, env);
-        }), map$1(() => undefined));
+    deletePage(id) {
+        return this.metafieldRepo.getPageIndex().pipe(switchMap(index => {
+            const entry = index.pages.find(p => p.id === id);
+            return this.metafieldRepo.deletePageMetafield(id).pipe(switchMap(() => {
+                // Delete the MetafieldDefinition if we have its ID
+                if (entry?.definitionId) {
+                    return this.metafieldRepo.deleteMetafieldDefinition(entry.definitionId).pipe(catchError(() => of(undefined)));
+                }
+                return of(undefined);
+            }), switchMap(() => {
+                const updatedIndex = this.removePageFromIndex(index, id);
+                return this.metafieldRepo.updatePageIndex(updatedIndex);
+            }), map$1(() => undefined));
+        }));
     }
-    publishPage(id, request, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.getPage(id, env).pipe(switchMap(currentPage => {
+    publishPage(id, request) {
+        return this.getPage(id).pipe(switchMap(currentPage => {
             if (currentPage.version !== request.version) {
                 return throwError(() => ({
                     code: 'VERSION_CONFLICT',
@@ -1392,15 +952,14 @@ class PageShopifyRepository {
                 updatedAt: new Date().toISOString(),
             };
             const validation = this.metafieldRepo.validateSize(publishedPage);
-            return this.metafieldRepo.setPageMetafield(id, publishedPage, env).pipe(switchMap(() => this.metafieldRepo.getPageIndex(env)), switchMap(index => {
+            return this.metafieldRepo.setPageMetafield(id, publishedPage).pipe(switchMap(() => this.metafieldRepo.getPageIndex()), switchMap(index => {
                 const updatedIndex = this.updatePageInIndex(index, publishedPage, validation.size);
-                return this.metafieldRepo.updatePageIndex(updatedIndex, env);
+                return this.metafieldRepo.updatePageIndex(updatedIndex);
             }), map$1(() => publishedPage));
         }));
     }
-    unpublishPage(id, request, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.getPage(id, env).pipe(switchMap(currentPage => {
+    unpublishPage(id, request) {
+        return this.getPage(id).pipe(switchMap(currentPage => {
             if (currentPage.version !== request.version) {
                 return throwError(() => ({
                     code: 'VERSION_CONFLICT',
@@ -1422,16 +981,15 @@ class PageShopifyRepository {
                 updatedAt: new Date().toISOString(),
             };
             const validation = this.metafieldRepo.validateSize(unpublishedPage);
-            return this.metafieldRepo.setPageMetafield(id, unpublishedPage, env).pipe(switchMap(() => this.metafieldRepo.getPageIndex(env)), switchMap(index => {
+            return this.metafieldRepo.setPageMetafield(id, unpublishedPage).pipe(switchMap(() => this.metafieldRepo.getPageIndex()), switchMap(index => {
                 const updatedIndex = this.updatePageInIndex(index, unpublishedPage, validation.size);
-                return this.metafieldRepo.updatePageIndex(updatedIndex, env);
+                return this.metafieldRepo.updatePageIndex(updatedIndex);
             }), map$1(() => unpublishedPage));
         }));
     }
-    duplicatePage(id, environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.getPage(id, env).pipe(switchMap(sourcePage => {
-            return this.metafieldRepo.getPageIndex(env).pipe(switchMap(index => {
+    duplicatePage(id) {
+        return this.getPage(id).pipe(switchMap(sourcePage => {
+            return this.metafieldRepo.getPageIndex().pipe(switchMap(index => {
                 const newSlug = this.generateUniqueSlug(sourcePage.slug, index);
                 const duplicatedPage = {
                     ...sourcePage,
@@ -1454,21 +1012,43 @@ class PageShopifyRepository {
                         percentUsed: validation.percentUsed,
                     }));
                 }
-                return this.metafieldRepo.setPageMetafield(duplicatedPage.id, duplicatedPage, env).pipe(switchMap(() => {
-                    const updatedIndex = this.addPageToIndex(index, duplicatedPage, validation.size);
-                    return this.metafieldRepo.updatePageIndex(updatedIndex, env);
+                return this.metafieldRepo.setPageMetafield(duplicatedPage.id, duplicatedPage).pipe(switchMap(() => {
+                    return this.metafieldRepo.createMetafieldDefinition('kustomizer', `page_${duplicatedPage.id}`, `Kustomizer Page: ${duplicatedPage.title}`).pipe(catchError(() => of(null)));
+                }), switchMap((definitionId) => {
+                    const updatedIndex = this.addPageToIndex(index, duplicatedPage, validation.size, definitionId ?? undefined);
+                    return this.metafieldRepo.updatePageIndex(updatedIndex);
                 }), map$1(() => duplicatedPage));
             }));
         }));
     }
-    deletePagesByEnvironment(environment) {
-        const env = this.resolveEnvironment(environment);
-        return this.metafieldRepo.getPageIndex(env).pipe(switchMap(index => {
-            const deletions = index.pages.map(entry => this.metafieldRepo.deletePageMetafield(entry.id, env));
-            if (deletions.length === 0) {
-                return this.metafieldRepo.resetPageIndex(env).pipe(map$1(() => undefined));
+    /**
+     * Backfill MetafieldDefinitions for existing pages that don't have one.
+     * Creates definitions with PUBLIC_READ storefront access.
+     */
+    ensureDefinitionsExist() {
+        // Ensure the pages_index definition exists with PUBLIC_READ
+        return this.metafieldRepo.createMetafieldDefinition('kustomizer', 'pages_index', 'Kustomizer Pages Index').pipe(catchError(() => of(null)), switchMap(() => this.metafieldRepo.getPageIndex()), switchMap(index => {
+            const pagesWithoutDefinition = index.pages.filter(p => !p.definitionId);
+            if (pagesWithoutDefinition.length === 0) {
+                return of({ created: 0, skipped: index.pages.length, index: null });
+            }
+            // Create definitions sequentially to avoid rate limits
+            let chain$ = of({ created: 0, skipped: 0, updatedPages: [...index.pages] });
+            for (const page of pagesWithoutDefinition) {
+                chain$ = chain$.pipe(switchMap(acc => {
+                    return this.metafieldRepo.createMetafieldDefinition('kustomizer', `page_${page.id}`, `Kustomizer Page: ${page.title}`).pipe(map$1(definitionId => {
+                        const updatedPages = acc.updatedPages.map(p => p.id === page.id ? { ...p, definitionId } : p);
+                        return { created: acc.created + 1, skipped: acc.skipped, updatedPages };
+                    }), catchError(() => of({ ...acc, skipped: acc.skipped + 1 })));
+                }));
             }
-            return forkJoin(deletions).pipe(switchMap(() => this.metafieldRepo.resetPageIndex(env)), map$1(() => undefined));
+            return chain$.pipe(switchMap(result => {
+                const updatedIndex = { ...index, pages: result.updatedPages };
+                if (result.created > 0) {
+                    return this.metafieldRepo.updatePageIndex(updatedIndex).pipe(map$1(() => ({ created: result.created, skipped: result.skipped })));
+                }
+                return of({ created: result.created, skipped: result.skipped });
+            }));
         }));
     }
     validateUniqueSlug(slug, index, excludeId) {
@@ -1489,7 +1069,7 @@ class PageShopifyRepository {
         }
         return newSlug;
     }
-    addPageToIndex(index, page, size) {
+    addPageToIndex(index, page, size, definitionId) {
         const entry = {
             id: page.id,
             slug: page.slug,
@@ -1498,6 +1078,7 @@ class PageShopifyRepository {
             updatedAt: page.updatedAt,
             publishedAt: page.publishedAt,
             size,
+            ...(definitionId ? { definitionId } : {}),
         };
         return {
             ...index,
@@ -1540,10 +1121,10 @@ class PageShopifyRepository {
             publishedAt: entry.publishedAt,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageShopifyRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageShopifyRepository, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageShopifyRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageShopifyRepository, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageShopifyRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageShopifyRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1556,127 +1137,95 @@ const USE_IN_MEMORY_PAGES = new InjectionToken('USE_IN_MEMORY_PAGES', {
     providedIn: 'root',
     factory: () => false,
 });
-/**
- * Injection token for page environment (metafield key prefix).
- * Default is 'production'.
- */
-const PAGE_ENVIRONMENT = new InjectionToken('PAGE_ENVIRONMENT', {
-    providedIn: 'root',
-    factory: () => 'production',
-});
 class PageService {
     useInMemory = inject(USE_IN_MEMORY_PAGES);
-    pageEnvironment = inject(PAGE_ENVIRONMENT);
     memoryRepo = inject(PageMemoryRepository);
     shopifyRepo = inject(PageShopifyRepository);
-    resolveEnvironment(environment) {
-        const trimmed = environment?.trim();
-        return trimmed ? trimmed : this.pageEnvironment;
-    }
     /**
      * Get all pages (summaries only for listing)
      */
-    getPages(environment) {
-        const env = this.resolveEnvironment(environment);
+    getPages() {
         if (this.useInMemory) {
-            return this.memoryRepo.getPages(env);
+            return this.memoryRepo.getPages();
         }
-        return this.shopifyRepo.getPages(env);
+        return this.shopifyRepo.getPages();
     }
     /**
      * Get a single page by ID (full content)
      */
-    getPage(id, environment) {
-        const env = this.resolveEnvironment(environment);
+    getPage(id) {
         if (this.useInMemory) {
-            return this.memoryRepo.getPage(id, env);
+            return this.memoryRepo.getPage(id);
         }
-        return this.shopifyRepo.getPage(id, env);
+        return this.shopifyRepo.getPage(id);
     }
     /**
      * Get a published page by slug (for public rendering)
      */
-    getPublishedPageBySlug(slug, environment) {
-        const env = this.resolveEnvironment(environment);
+    getPublishedPageBySlug(slug) {
         if (this.useInMemory) {
-            return this.memoryRepo.getPublishedPageBySlug(slug, env);
+            return this.memoryRepo.getPublishedPageBySlug(slug);
         }
-        return this.shopifyRepo.getPublishedPageBySlug(slug, env);
+        return this.shopifyRepo.getPublishedPageBySlug(slug);
     }
     /**
      * Create a new page
      */
-    createPage(request, environment) {
-        const env = this.resolveEnvironment(environment);
+    createPage(request) {
         if (this.useInMemory) {
-            return this.memoryRepo.createPage(request, env);
+            return this.memoryRepo.createPage(request);
         }
-        return this.shopifyRepo.createPage(request, env);
+        return this.shopifyRepo.createPage(request);
     }
     /**
      * Update an existing page
      */
-    updatePage(id, request, environment) {
-        const env = this.resolveEnvironment(environment);
+    updatePage(id, request) {
         if (this.useInMemory) {
-            return this.memoryRepo.updatePage(id, request, env);
+            return this.memoryRepo.updatePage(id, request);
         }
-        return this.shopifyRepo.updatePage(id, request, env);
+        return this.shopifyRepo.updatePage(id, request);
     }
     /**
      * Delete a page
      */
-    deletePage(id, environment) {
-        const env = this.resolveEnvironment(environment);
+    deletePage(id) {
         if (this.useInMemory) {
-            return this.memoryRepo.deletePage(id, env);
+            return this.memoryRepo.deletePage(id);
         }
-        return this.shopifyRepo.deletePage(id, env);
+        return this.shopifyRepo.deletePage(id);
     }
     /**
      * Publish a page (changes status to 'published')
      */
-    publishPage(id, request, environment) {
-        const env = this.resolveEnvironment(environment);
+    publishPage(id, request) {
         if (this.useInMemory) {
-            return this.memoryRepo.publishPage(id, request, env);
+            return this.memoryRepo.publishPage(id, request);
         }
-        return this.shopifyRepo.publishPage(id, request, env);
+        return this.shopifyRepo.publishPage(id, request);
     }
     /**
      * Unpublish a page (changes status to 'draft')
      */
-    unpublishPage(id, request, environment) {
-        const env = this.resolveEnvironment(environment);
+    unpublishPage(id, request) {
         if (this.useInMemory) {
-            return this.memoryRepo.unpublishPage(id, request, env);
+            return this.memoryRepo.unpublishPage(id, request);
         }
-        return this.shopifyRepo.unpublishPage(id, request, env);
+        return this.shopifyRepo.unpublishPage(id, request);
     }
     /**
      * Duplicate an existing page
      */
-    duplicatePage(id, environment) {
-        const env = this.resolveEnvironment(environment);
-        if (this.useInMemory) {
-            return this.memoryRepo.duplicatePage(id, env);
-        }
-        return this.shopifyRepo.duplicatePage(id, env);
-    }
-    /**
-     * Delete all pages for a given environment
-     */
-    deletePagesByEnvironment(environment) {
-        const env = this.resolveEnvironment(environment);
+    duplicatePage(id) {
         if (this.useInMemory) {
-            return this.memoryRepo.deletePagesByEnvironment(env);
+            return this.memoryRepo.duplicatePage(id);
         }
-        return this.shopifyRepo.deletePagesByEnvironment(env);
+        return this.shopifyRepo.duplicatePage(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1699,10 +1248,10 @@ class RoutePageLoadingStrategy extends PageLoadingStrategy {
     getPageIdToLoad() {
         return this.navigation.getCurrentPageId();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RoutePageLoadingStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RoutePageLoadingStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RoutePageLoadingStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RoutePageLoadingStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RoutePageLoadingStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RoutePageLoadingStrategy, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1725,10 +1274,10 @@ class InputPageLoadingStrategy extends PageLoadingStrategy {
     getPageIdToLoad() {
         return this.pageId$.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPageLoadingStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPageLoadingStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPageLoadingStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPageLoadingStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputPageLoadingStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputPageLoadingStrategy, decorators: [{
             type: Injectable
         }] });
 
@@ -2795,10 +2344,10 @@ class ComponentRegistryService {
         }
         return errors;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ComponentRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComponentRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ComponentRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComponentRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2904,8 +2453,8 @@ class DynamicRendererComponent {
         }
         this.viewContainerRef.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DynamicRendererComponent, isStandalone: true, selector: "lib-dynamic-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DynamicRendererComponent, isStandalone: true, selector: "lib-dynamic-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (error()) {
       <div class="dynamic-renderer-error">
         <span>Unknown component type: {{ element().type }}</span>
@@ -2913,7 +2462,7 @@ class DynamicRendererComponent {
     }
   `, isInline: true, styles: [":host{display:contents}.dynamic-renderer-error{padding:1rem;background:#fee2e2;border:1px dashed #ef4444;color:#dc2626;border-radius:4px;font-size:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DynamicRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-dynamic-renderer', template: `
     @if (error()) {
@@ -2961,8 +2510,8 @@ class SlotRendererComponent {
             return true;
         });
     }, ...(ngDevMode ? [{ debugName: "filteredChildren" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlotRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SlotRendererComponent, isStandalone: true, selector: "lib-slot-renderer", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: true, transformFunction: null }, parentElementId: { classPropertyName: "parentElementId", publicName: "parentElementId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SlotRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SlotRendererComponent, isStandalone: true, selector: "lib-slot-renderer", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: true, transformFunction: null }, parentElementId: { classPropertyName: "parentElementId", publicName: "parentElementId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (filteredChildren().length === 0 && slot().emptyPlaceholder) {
       <div class="slot-empty" [attr.data-slot]="slot().name">
         {{ slot().emptyPlaceholder }}
@@ -2977,7 +2526,7 @@ class SlotRendererComponent {
     }
   `, isInline: true, styles: [":host{display:contents}.slot-empty{padding:2rem;border:2px dashed #d1d5db;color:#9ca3af;text-align:center;border-radius:4px;font-size:.875rem}\n"], dependencies: [{ kind: "component", type: DynamicRendererComponent, selector: "lib-dynamic-renderer", inputs: ["element", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlotRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SlotRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-slot-renderer', imports: [DynamicRendererComponent], template: `
     @if (filteredChildren().length === 0 && slot().emptyPlaceholder) {
@@ -3533,7 +3082,7 @@ class VisualEditorFacade {
             version: currentPage.version,
         };
         console.log('Saving page:', request);
-        return this.pageService.updatePage(pageId, request).pipe(tap$1((page) => {
+        return this.pageService.updatePage(pageId, request).pipe(tap((page) => {
             this.store.dispatch(VisualEditorActions.updatePageContext({
                 context: { version: page.version },
             }));
@@ -3552,7 +3101,7 @@ class VisualEditorFacade {
             ...metadata,
             version: currentPage.version,
         };
-        return this.pageService.updatePage(pageId, request).pipe(tap$1((page) => {
+        return this.pageService.updatePage(pageId, request).pipe(tap((page) => {
             this.store.dispatch(VisualEditorActions.updatePageContext({
                 context: {
                     title: page.title,
@@ -3576,7 +3125,7 @@ class VisualEditorFacade {
         if (!currentPage) {
             throw new Error('No page loaded in editor');
         }
-        return this.pageService.publishPage(pageId, { version: currentPage.version }).pipe(tap$1((page) => {
+        return this.pageService.publishPage(pageId, { version: currentPage.version }).pipe(tap((page) => {
             this.store.dispatch(VisualEditorActions.updatePageContext({
                 context: { status: page.status, version: page.version },
             }));
@@ -3590,7 +3139,7 @@ class VisualEditorFacade {
         if (!currentPage) {
             throw new Error('No page loaded in editor');
         }
-        return this.pageService.unpublishPage(pageId, { version: currentPage.version }).pipe(tap$1((page) => {
+        return this.pageService.unpublishPage(pageId, { version: currentPage.version }).pipe(tap((page) => {
             this.store.dispatch(VisualEditorActions.updatePageContext({
                 context: { status: page.status, version: page.version },
             }));
@@ -3620,25 +3169,108 @@ class VisualEditorFacade {
     markClean() {
         this.store.dispatch(VisualEditorActions.markClean());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditorFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditorFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditorFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditorFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditorFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditorFacade, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-const MAX_DEPTH = 12;
-class DragDropService {
-    store = inject(Store);
-    registry = inject(ComponentRegistryService);
-    sections = toSignal(this.store.select(selectSections), { initialValue: [] });
-    dragItem = signal(null, ...(ngDevMode ? [{ debugName: "dragItem" }] : []));
-    dropTarget = signal(null, ...(ngDevMode ? [{ debugName: "dropTarget" }] : []));
-    isDragging = computed(() => this.dragItem() !== null, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-    startDrag(item, event) {
-        this.dragItem.set(item);
-        this.store.dispatch(VisualEditorActions.startDrag({ elementId: item.elementId }));
+/**
+ * Manages postMessage communication between the editor (parent) and the
+ * storefront preview (iframe).
+ */
+class IframeBridgeService {
+    zone = inject(NgZone);
+    iframe = null;
+    origin = '*';
+    messages$ = new Subject();
+    messageHandler = (event) => this.handleMessage(event);
+    constructor() {
+        this.zone.runOutsideAngular(() => {
+            window.addEventListener('message', this.messageHandler);
+        });
+    }
+    ngOnDestroy() {
+        window.removeEventListener('message', this.messageHandler);
+        this.messages$.complete();
+    }
+    /**
+     * Connect to an iframe element. Must be called after the iframe loads.
+     */
+    connect(iframe, origin) {
+        this.iframe = iframe;
+        this.origin = origin || '*';
+    }
+    /**
+     * Disconnect from the current iframe.
+     */
+    disconnect() {
+        this.iframe = null;
+    }
+    // ─── Outbound (Parent → Iframe) ──────────────────────────────────────────
+    sendPageUpdate(sections) {
+        this.send({ type: 'kustomizer:page-update', sections });
+    }
+    sendSelectElement(elementId) {
+        this.send({ type: 'kustomizer:select-element', elementId });
+    }
+    sendDeselect() {
+        this.send({ type: 'kustomizer:deselect' });
+    }
+    // ─── Inbound (Iframe → Parent) ───────────────────────────────────────────
+    onReady() {
+        return this.messages$.pipe(filter((msg) => msg.type === 'kustomizer:ready'), map(() => undefined));
+    }
+    onElementClicked() {
+        return this.messages$.pipe(filter((msg) => msg.type === 'kustomizer:element-clicked'), map(({ elementId, sectionId }) => ({ elementId, sectionId })));
+    }
+    onElementHover() {
+        return this.messages$.pipe(filter((msg) => msg.type === 'kustomizer:element-hover'), map(({ elementId }) => elementId));
+    }
+    onElementMoved() {
+        return this.messages$.pipe(filter((msg) => msg.type === 'kustomizer:element-moved'), map(({ elementId, newIndex, targetSectionId }) => ({
+            elementId,
+            newIndex,
+            targetSectionId,
+        })));
+    }
+    // ─── Private ─────────────────────────────────────────────────────────────
+    send(message) {
+        if (!this.iframe?.contentWindow)
+            return;
+        this.iframe.contentWindow.postMessage(message, this.origin);
+    }
+    handleMessage(event) {
+        const data = event.data;
+        if (!data?.type?.startsWith('kustomizer:'))
+            return;
+        // Only accept messages from the connected iframe's origin
+        if (this.origin !== '*' && event.origin !== this.origin)
+            return;
+        this.zone.run(() => {
+            this.messages$.next(data);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IframeBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IframeBridgeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IframeBridgeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const MAX_DEPTH = 12;
+class DragDropService {
+    store = inject(Store);
+    registry = inject(ComponentRegistryService);
+    sections = toSignal(this.store.select(selectSections), { initialValue: [] });
+    dragItem = signal(null, ...(ngDevMode ? [{ debugName: "dragItem" }] : []));
+    dropTarget = signal(null, ...(ngDevMode ? [{ debugName: "dropTarget" }] : []));
+    isDragging = computed(() => this.dragItem() !== null, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    startDrag(item, event) {
+        this.dragItem.set(item);
+        this.store.dispatch(VisualEditorActions.startDrag({ elementId: item.elementId }));
         if (event.dataTransfer) {
             event.dataTransfer.effectAllowed = 'move';
             event.dataTransfer.setData('text/plain', item.elementId);
@@ -3870,10 +3502,10 @@ class DragDropService {
             return false;
         return a.every((id, i) => id === b[i]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DragDropService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DragDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3885,7 +3517,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class BlockTreeItemComponent {
     facade = inject(VisualEditorFacade);
     dndService = inject(DragDropService);
-    sanitizer = inject(DomSanitizer);
     treeBlock = viewChild('treeBlock', ...(ngDevMode ? [{ debugName: "treeBlock" }] : []));
     block = input.required(...(ngDevMode ? [{ debugName: "block" }] : []));
     context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
@@ -3913,20 +3544,14 @@ class BlockTreeItemComponent {
     }), ...(ngDevMode ? [{ debugName: "childContext" }] : []));
     blockIcon = computed(() => {
         const iconMap = {
-            'text-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3h12a1 1 0 011 1v1a1 1 0 01-1 1h-5v10a1 1 0 01-2 0V6H4a1 1 0 01-1-1V4a1 1 0 011-1z"/></svg>',
-            'button-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 6a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V6zm4 4a1 1 0 100 2h6a1 1 0 100-2H7z"/></svg>',
-            'image-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6zM6 7a1 1 0 110-2 1 1 0 010 2z"/></svg>',
-            'icon-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2l2.39 4.84L18 7.77l-4 3.9.94 5.5L10 14.27l-4.94 2.9.94-5.5-4-3.9 5.61-.93L10 2z"/></svg>',
-            'feature-item': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2l2.39 4.84L18 7.77l-4 3.9.94 5.5L10 14.27l-4.94 2.9.94-5.5-4-3.9 5.61-.93L10 2z"/></svg>',
-            'card-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v4H4V5zm0 6h8v4H4v-4z"/></svg>',
-            'video-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm4 3.5l5 3.5-5 3.5v-7z"/></svg>',
-            'picture-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6zM6 7a1 1 0 110-2 1 1 0 010 2z"/></svg>',
-            'flex-layout-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 3h4v14H3V3zm5 0h4v14H8V3zm5 0h4v14h-4V3z"/></svg>',
+            'text-block': '📝',
+            'button-block': '🔘',
+            'image-block': '🖼️',
+            'icon-block': '⭐',
+            'feature-item': '⭐',
+            'card-block': '🃏',
         };
-        const def = this.facade.getDefinition(this.block().type);
-        const raw = iconMap[this.block().type] ?? def?.icon ?? '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2l1.5 3h3.5l-2.5 2.5 1 3.5-3.5-2-3.5 2 1-3.5L4 5h3.5L10 2zm-6 10h12v2H4v-2zm2 4h8v2H6v-2z"/></svg>';
-        const html = raw.trim().startsWith('<') ? raw : `<span style="font-family:'Material Icons',sans-serif;font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility">${raw}</span>`;
-        return this.sanitizer.bypassSecurityTrustHtml(html);
+        return iconMap[this.block().type] ?? '🧩';
     }, ...(ngDevMode ? [{ debugName: "blockIcon" }] : []));
     blockName = computed(() => {
         const block = this.block();
@@ -4088,8 +3713,8 @@ class BlockTreeItemComponent {
             zone,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BlockTreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BlockTreeItemComponent, isStandalone: true, selector: "lib-block-tree-item", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, totalSiblings: { classPropertyName: "totalSiblings", publicName: "totalSiblings", isSignal: true, isRequired: true, transformFunction: null }, expandAll: { classPropertyName: "expandAll", publicName: "expandAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectBlock: "selectBlock", deleteBlock: "deleteBlock", duplicateBlock: "duplicateBlock", moveBlock: "moveBlock", openBlockPicker: "openBlockPicker" }, viewQueries: [{ propertyName: "treeBlock", first: true, predicate: ["treeBlock"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockTreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BlockTreeItemComponent, isStandalone: true, selector: "lib-block-tree-item", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, totalSiblings: { classPropertyName: "totalSiblings", publicName: "totalSiblings", isSignal: true, isRequired: true, transformFunction: null }, expandAll: { classPropertyName: "expandAll", publicName: "expandAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectBlock: "selectBlock", deleteBlock: "deleteBlock", duplicateBlock: "duplicateBlock", moveBlock: "moveBlock", openBlockPicker: "openBlockPicker" }, viewQueries: [{ propertyName: "treeBlock", first: true, predicate: ["treeBlock"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="tree-block"
       #treeBlock
@@ -4123,7 +3748,7 @@ class BlockTreeItemComponent {
         <span class="block-indent"></span>
       }
       <span class="icon-drag-wrapper">
-        <span class="block-icon" [innerHTML]="blockIcon()"></span>
+        <span class="block-icon">{{ blockIcon() }}</span>
         <span
           class="drag-handle"
           role="button"
@@ -4192,9 +3817,9 @@ class BlockTreeItemComponent {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem .375rem .5rem;cursor:pointer;transition:background .15s;position:relative}.tree-block:hover{background:#f6f6f7;border-radius:8px;margin-right:.375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin-right:.375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name,.tree-block.selected .expand-btn,.tree-block.selected .drag-handle,.tree-block.selected .tree-btn{color:inherit}.tree-block.drag-over-before{box-shadow:inset 0 2px #005bd3}.tree-block.drag-over-inside{background:#005bd314;box-shadow:inset 0 0 0 2px #005bd3}.tree-block.drag-over-after{box-shadow:inset 0 -2px #005bd3}.tree-block.is-dragging{opacity:.4;cursor:grabbing}.drag-handle{cursor:grab;color:#8c9196;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:4px}.drag-handle:hover{color:#303030;background:#e3e3e3}.drag-handle:focus-visible{opacity:1;outline:2px solid #005bd3;outline-offset:1px}.tree-block:hover .drag-handle{opacity:1}@media(prefers-reduced-motion:reduce){.tree-block,.drag-handle,.tree-actions,.expand-icon{transition:none}}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#8c9196;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.5rem;transition:transform .15s}.block-indent{width:18px;height:1px;background:#e3e3e3;flex-shrink:0}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-block:hover .icon-drag-wrapper .block-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .block-icon{visibility:hidden}.block-icon{font-size:.875rem;color:#8c9196;flex-shrink:0;display:flex;align-items:center}.block-name{flex:1;font-size:.8125rem;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .15s}.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.6875rem;color:#8c9196;transition:all .15s}.tree-btn:hover{background:#e3e3e3;color:#303030}.tree-btn.delete:hover{background:#fef2f0;color:#d72c0d}.material-icon{font-family:Material Icons,sans-serif;font-size:inherit;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.nested-content{border-left:1px solid #e3e3e3;margin-left:1.25rem}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1rem);margin:.25rem .5rem;padding:.375rem .5rem;border:none;border-radius:8px;background:transparent;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#005bd3;transition:all .15s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.8125rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: BlockTreeItemComponent, selector: "lib-block-tree-item", inputs: ["block", "context", "index", "totalSiblings", "expandAll"], outputs: ["selectBlock", "deleteBlock", "duplicateBlock", "moveBlock", "openBlockPicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem .5rem .5rem;cursor:pointer;transition:background .2s;position:relative}.tree-block:hover{background:#f5f5f5;border-radius:8px;margin-right:.375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin-right:.375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name,.tree-block.selected .expand-btn,.tree-block.selected .drag-handle,.tree-block.selected .tree-btn{color:inherit}.tree-block.drag-over-before{box-shadow:inset 0 2px #4a90d9}.tree-block.drag-over-inside{background:#4a90d91a;box-shadow:inset 0 0 0 2px #4a90d9}.tree-block.drag-over-after{box-shadow:inset 0 -2px #4a90d9}.tree-block.is-dragging{opacity:.4;cursor:grabbing}.drag-handle{cursor:grab;color:#999;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:2px}.drag-handle:hover{color:#666;background:#e0e0e0}.drag-handle:focus-visible{opacity:1;outline:2px solid #4a90d9;outline-offset:1px}.tree-block:hover .drag-handle{opacity:1}@media(prefers-reduced-motion:reduce){.tree-block,.drag-handle,.tree-actions,.expand-icon{transition:none}}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.5rem;transition:transform .2s}.block-indent{width:18px;height:1px;background:#ddd;flex-shrink:0}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-block:hover .icon-drag-wrapper .block-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .block-icon{visibility:hidden}.block-icon{font-size:.875rem;flex-shrink:0}.block-name{flex:1;font-size:.75rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .2s}.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:3px;background:#e0e0e0;cursor:pointer;font-size:.6875rem;color:#666}.tree-btn:hover{background:#d0d0d0}.tree-btn.delete:hover{background:#e74c3c;color:#fff}.material-icon{font-family:Material Icons,sans-serif;font-size:.75rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.nested-content{border-left:1px solid #e0e0e0;margin-left:1.25rem}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1rem);margin:.375rem .5rem;padding:.375rem .5rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.6875rem;color:#005bd3;transition:all .2s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.75rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: BlockTreeItemComponent, selector: "lib-block-tree-item", inputs: ["block", "context", "index", "totalSiblings", "expandAll"], outputs: ["selectBlock", "deleteBlock", "duplicateBlock", "moveBlock", "openBlockPicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BlockTreeItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockTreeItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-block-tree-item', imports: [BlockTreeItemComponent], template: `
     <div
@@ -4230,7 +3855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         <span class="block-indent"></span>
       }
       <span class="icon-drag-wrapper">
-        <span class="block-icon" [innerHTML]="blockIcon()"></span>
+        <span class="block-icon">{{ blockIcon() }}</span>
         <span
           class="drag-handle"
           role="button"
@@ -4299,7 +3924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }
       </div>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem .375rem .5rem;cursor:pointer;transition:background .15s;position:relative}.tree-block:hover{background:#f6f6f7;border-radius:8px;margin-right:.375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin-right:.375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name,.tree-block.selected .expand-btn,.tree-block.selected .drag-handle,.tree-block.selected .tree-btn{color:inherit}.tree-block.drag-over-before{box-shadow:inset 0 2px #005bd3}.tree-block.drag-over-inside{background:#005bd314;box-shadow:inset 0 0 0 2px #005bd3}.tree-block.drag-over-after{box-shadow:inset 0 -2px #005bd3}.tree-block.is-dragging{opacity:.4;cursor:grabbing}.drag-handle{cursor:grab;color:#8c9196;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:4px}.drag-handle:hover{color:#303030;background:#e3e3e3}.drag-handle:focus-visible{opacity:1;outline:2px solid #005bd3;outline-offset:1px}.tree-block:hover .drag-handle{opacity:1}@media(prefers-reduced-motion:reduce){.tree-block,.drag-handle,.tree-actions,.expand-icon{transition:none}}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#8c9196;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.5rem;transition:transform .15s}.block-indent{width:18px;height:1px;background:#e3e3e3;flex-shrink:0}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-block:hover .icon-drag-wrapper .block-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .block-icon{visibility:hidden}.block-icon{font-size:.875rem;color:#8c9196;flex-shrink:0;display:flex;align-items:center}.block-name{flex:1;font-size:.8125rem;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .15s}.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.6875rem;color:#8c9196;transition:all .15s}.tree-btn:hover{background:#e3e3e3;color:#303030}.tree-btn.delete:hover{background:#fef2f0;color:#d72c0d}.material-icon{font-family:Material Icons,sans-serif;font-size:inherit;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.nested-content{border-left:1px solid #e3e3e3;margin-left:1.25rem}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1rem);margin:.25rem .5rem;padding:.375rem .5rem;border:none;border-radius:8px;background:transparent;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#005bd3;transition:all .15s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.8125rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem .5rem .5rem;cursor:pointer;transition:background .2s;position:relative}.tree-block:hover{background:#f5f5f5;border-radius:8px;margin-right:.375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin-right:.375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name,.tree-block.selected .expand-btn,.tree-block.selected .drag-handle,.tree-block.selected .tree-btn{color:inherit}.tree-block.drag-over-before{box-shadow:inset 0 2px #4a90d9}.tree-block.drag-over-inside{background:#4a90d91a;box-shadow:inset 0 0 0 2px #4a90d9}.tree-block.drag-over-after{box-shadow:inset 0 -2px #4a90d9}.tree-block.is-dragging{opacity:.4;cursor:grabbing}.drag-handle{cursor:grab;color:#999;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:2px}.drag-handle:hover{color:#666;background:#e0e0e0}.drag-handle:focus-visible{opacity:1;outline:2px solid #4a90d9;outline-offset:1px}.tree-block:hover .drag-handle{opacity:1}@media(prefers-reduced-motion:reduce){.tree-block,.drag-handle,.tree-actions,.expand-icon{transition:none}}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.5rem;transition:transform .2s}.block-indent{width:18px;height:1px;background:#ddd;flex-shrink:0}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-block:hover .icon-drag-wrapper .block-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .block-icon{visibility:hidden}.block-icon{font-size:.875rem;flex-shrink:0}.block-name{flex:1;font-size:.75rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .2s}.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:3px;background:#e0e0e0;cursor:pointer;font-size:.6875rem;color:#666}.tree-btn:hover{background:#d0d0d0}.tree-btn.delete:hover{background:#e74c3c;color:#fff}.material-icon{font-family:Material Icons,sans-serif;font-size:.75rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.nested-content{border-left:1px solid #e0e0e0;margin-left:1.25rem}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1rem);margin:.375rem .5rem;padding:.375rem .5rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.6875rem;color:#005bd3;transition:all .2s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.75rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { treeBlock: [{ type: i0.ViewChild, args: ['treeBlock', { isSignal: true }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], totalSiblings: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalSiblings", required: true }] }], expandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAll", required: false }] }], selectBlock: [{ type: i0.Output, args: ["selectBlock"] }], deleteBlock: [{ type: i0.Output, args: ["deleteBlock"] }], duplicateBlock: [{ type: i0.Output, args: ["duplicateBlock"] }], moveBlock: [{ type: i0.Output, args: ["moveBlock"] }], openBlockPicker: [{ type: i0.Output, args: ["openBlockPicker"] }] } });
 
 const FILES_QUERY = `
@@ -4414,10 +4039,10 @@ class ShopifyFilesService {
             return 'unknown';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyFilesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyFilesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyFilesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyFilesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyFilesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyFilesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4440,7 +4065,7 @@ class ShopifyFilePickerComponent {
     endCursor = null;
     hasNextPage = false;
     ngOnInit() {
-        this.searchSubject.pipe(debounceTime(300), tap$1(() => {
+        this.searchSubject.pipe(debounceTime(300), tap(() => {
             this.files.set([]);
             this.endCursor = null;
             this.hasNextPage = false;
@@ -4553,8 +4178,8 @@ class ShopifyFilePickerComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyFilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ShopifyFilePickerComponent, isStandalone: true, selector: "lib-shopify-file-picker", inputs: { mediaType: { classPropertyName: "mediaType", publicName: "mediaType", isSignal: true, isRequired: true, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", closed: "closed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyFilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ShopifyFilePickerComponent, isStandalone: true, selector: "lib-shopify-file-picker", inputs: { mediaType: { classPropertyName: "mediaType", publicName: "mediaType", isSignal: true, isRequired: true, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", closed: "closed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="file-picker-overlay"
       role="dialog"
@@ -4649,9 +4274,9 @@ class ShopifyFilePickerComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".file-picker-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1100;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.file-picker{background:#fff;border-radius:12px;width:720px;max-width:95vw;height:80vh;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e3e3e3}.picker-header h3{margin:0;font-size:.9375rem;font-weight:600;color:#303030}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#8c9196;line-height:1;padding:.25rem;border-radius:8px;transition:all .15s}.close-btn:hover{background:#f6f6f7;color:#303030}.picker-search{padding:.75rem 1.25rem;border-bottom:1px solid #e3e3e3}.picker-search-input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;color:#303030;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}.picker-search-input:focus{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.picker-search-input::placeholder{color:#8c9196}.picker-content{flex:1;overflow-y:auto;padding:1rem 1.25rem;min-height:0}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;align-content:start}.file-card{display:flex;flex-direction:column;align-items:center;padding:.375rem;border:2px solid #e3e3e3;border-radius:8px;background:#fff;cursor:pointer;transition:all .15s;position:relative;text-align:center;font-family:inherit;overflow:hidden}.file-card:hover{border-color:#005bd3;background:#f8fafe}.file-card:focus-visible{outline:2px solid #005bd3;outline-offset:2px}.file-card.selected{border-color:#005bd3;background:#f0f5ff;box-shadow:0 0 0 1px #005bd3}.file-card.current{border-color:#008060}.file-thumbnail{width:100%;height:80px;object-fit:cover;border-radius:6px;background:#f6f6f7}.video-thumbnail{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:#1a1a1a;border-radius:6px;color:#fff}.video-icon{opacity:.8}.file-name{display:block;margin-top:.375rem;font-size:.6875rem;color:#8c9196;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.current-badge{position:absolute;top:.375rem;right:.375rem;padding:.125rem .375rem;background:#008060;color:#fff;font-size:.625rem;font-weight:600;border-radius:6px}.picker-loading{padding:2rem;text-align:center;color:#8c9196;font-size:.8125rem}.picker-error{padding:2rem;text-align:center;color:#d72c0d}.picker-error p{margin:0 0 .75rem;font-size:.8125rem}.retry-btn{padding:.375rem .75rem;border:1px solid #d72c0d;border-radius:8px;background:#fff;color:#d72c0d;cursor:pointer;font-size:.8125rem;font-family:inherit;transition:background .15s}.retry-btn:hover{background:#fef2f0}.picker-empty{padding:2rem;text-align:center;color:#8c9196;font-size:.8125rem}.picker-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid #e3e3e3}.cancel-btn{padding:.5rem 1rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#303030;transition:all .15s}.cancel-btn:hover{background:#f6f6f7}.select-btn{padding:.5rem 1rem;border:none;border-radius:8px;background:#005bd3;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;transition:background .15s}.select-btn:hover:not(:disabled){background:#004299}.select-btn:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".file-picker-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1100}.file-picker{background:#fff;border-radius:12px;width:560px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 12px 40px #00000040}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e0e0e0}.picker-header h3{margin:0;font-size:1rem;font-weight:600;color:#303030}.close-btn{border:none;background:none;font-size:1.5rem;cursor:pointer;color:#666;line-height:1;padding:.25rem;border-radius:4px}.close-btn:hover{background:#f0f2f5;color:#303030}.picker-search{padding:.75rem 1.25rem;border-bottom:1px solid #e0e0e0}.picker-search-input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.875rem;outline:none;transition:border-color .2s;box-sizing:border-box}.picker-search-input:focus{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.picker-content{flex:1;overflow-y:auto;padding:1rem 1.25rem;min-height:200px}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.file-card{display:flex;flex-direction:column;align-items:center;padding:.5rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .15s;position:relative;text-align:center}.file-card:hover{border-color:#005bd3;background:#f8fafe}.file-card:focus-visible{outline:2px solid #005bd3;outline-offset:2px}.file-card.selected{border-color:#005bd3;background:#f0f5ff;box-shadow:0 0 0 1px #005bd3}.file-card.current{border-color:#008060}.file-thumbnail{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#f0f2f5}.video-thumbnail{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#1a1a1a;border-radius:4px;color:#fff}.video-icon{opacity:.8}.file-name{display:block;margin-top:.375rem;font-size:.6875rem;color:#616161;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.current-badge{position:absolute;top:.25rem;right:.25rem;padding:.125rem .375rem;background:#008060;color:#fff;font-size:.625rem;font-weight:600;border-radius:4px}.picker-loading{padding:2rem;text-align:center;color:#616161;font-size:.875rem}.picker-error{padding:2rem;text-align:center;color:#d72c0d}.picker-error p{margin:0 0 .75rem;font-size:.875rem}.retry-btn{padding:.375rem .75rem;border:1px solid #d72c0d;border-radius:6px;background:#fff;color:#d72c0d;cursor:pointer;font-size:.8125rem}.retry-btn:hover{background:#fef2f0}.picker-empty{padding:2rem;text-align:center;color:#616161;font-size:.875rem}.picker-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid #e0e0e0}.cancel-btn{padding:.5rem 1rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;color:#303030}.cancel-btn:hover{background:#f0f2f5}.select-btn{padding:.5rem 1rem;border:none;border-radius:8px;background:#005bd3;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:500}.select-btn:hover:not(:disabled){background:#004299}.select-btn:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopifyFilePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ShopifyFilePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-shopify-file-picker', template: `
     <div
@@ -4748,7 +4373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         </div>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-picker-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1100;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.file-picker{background:#fff;border-radius:12px;width:720px;max-width:95vw;height:80vh;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e3e3e3}.picker-header h3{margin:0;font-size:.9375rem;font-weight:600;color:#303030}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#8c9196;line-height:1;padding:.25rem;border-radius:8px;transition:all .15s}.close-btn:hover{background:#f6f6f7;color:#303030}.picker-search{padding:.75rem 1.25rem;border-bottom:1px solid #e3e3e3}.picker-search-input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;color:#303030;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}.picker-search-input:focus{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.picker-search-input::placeholder{color:#8c9196}.picker-content{flex:1;overflow-y:auto;padding:1rem 1.25rem;min-height:0}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;align-content:start}.file-card{display:flex;flex-direction:column;align-items:center;padding:.375rem;border:2px solid #e3e3e3;border-radius:8px;background:#fff;cursor:pointer;transition:all .15s;position:relative;text-align:center;font-family:inherit;overflow:hidden}.file-card:hover{border-color:#005bd3;background:#f8fafe}.file-card:focus-visible{outline:2px solid #005bd3;outline-offset:2px}.file-card.selected{border-color:#005bd3;background:#f0f5ff;box-shadow:0 0 0 1px #005bd3}.file-card.current{border-color:#008060}.file-thumbnail{width:100%;height:80px;object-fit:cover;border-radius:6px;background:#f6f6f7}.video-thumbnail{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:#1a1a1a;border-radius:6px;color:#fff}.video-icon{opacity:.8}.file-name{display:block;margin-top:.375rem;font-size:.6875rem;color:#8c9196;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.current-badge{position:absolute;top:.375rem;right:.375rem;padding:.125rem .375rem;background:#008060;color:#fff;font-size:.625rem;font-weight:600;border-radius:6px}.picker-loading{padding:2rem;text-align:center;color:#8c9196;font-size:.8125rem}.picker-error{padding:2rem;text-align:center;color:#d72c0d}.picker-error p{margin:0 0 .75rem;font-size:.8125rem}.retry-btn{padding:.375rem .75rem;border:1px solid #d72c0d;border-radius:8px;background:#fff;color:#d72c0d;cursor:pointer;font-size:.8125rem;font-family:inherit;transition:background .15s}.retry-btn:hover{background:#fef2f0}.picker-empty{padding:2rem;text-align:center;color:#8c9196;font-size:.8125rem}.picker-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid #e3e3e3}.cancel-btn{padding:.5rem 1rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#303030;transition:all .15s}.cancel-btn:hover{background:#f6f6f7}.select-btn{padding:.5rem 1rem;border:none;border-radius:8px;background:#005bd3;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;transition:background .15s}.select-btn:hover:not(:disabled){background:#004299}.select-btn:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-picker-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1100}.file-picker{background:#fff;border-radius:12px;width:560px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 12px 40px #00000040}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e0e0e0}.picker-header h3{margin:0;font-size:1rem;font-weight:600;color:#303030}.close-btn{border:none;background:none;font-size:1.5rem;cursor:pointer;color:#666;line-height:1;padding:.25rem;border-radius:4px}.close-btn:hover{background:#f0f2f5;color:#303030}.picker-search{padding:.75rem 1.25rem;border-bottom:1px solid #e0e0e0}.picker-search-input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.875rem;outline:none;transition:border-color .2s;box-sizing:border-box}.picker-search-input:focus{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.picker-content{flex:1;overflow-y:auto;padding:1rem 1.25rem;min-height:200px}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.file-card{display:flex;flex-direction:column;align-items:center;padding:.5rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .15s;position:relative;text-align:center}.file-card:hover{border-color:#005bd3;background:#f8fafe}.file-card:focus-visible{outline:2px solid #005bd3;outline-offset:2px}.file-card.selected{border-color:#005bd3;background:#f0f5ff;box-shadow:0 0 0 1px #005bd3}.file-card.current{border-color:#008060}.file-thumbnail{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#f0f2f5}.video-thumbnail{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#1a1a1a;border-radius:4px;color:#fff}.video-icon{opacity:.8}.file-name{display:block;margin-top:.375rem;font-size:.6875rem;color:#616161;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.current-badge{position:absolute;top:.25rem;right:.25rem;padding:.125rem .375rem;background:#008060;color:#fff;font-size:.625rem;font-weight:600;border-radius:4px}.picker-loading{padding:2rem;text-align:center;color:#616161;font-size:.875rem}.picker-error{padding:2rem;text-align:center;color:#d72c0d}.picker-error p{margin:0 0 .75rem;font-size:.875rem}.retry-btn{padding:.375rem .75rem;border:1px solid #d72c0d;border-radius:6px;background:#fff;color:#d72c0d;cursor:pointer;font-size:.8125rem}.retry-btn:hover{background:#fef2f0}.picker-empty{padding:2rem;text-align:center;color:#616161;font-size:.875rem}.picker-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid #e0e0e0}.cancel-btn{padding:.5rem 1rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;color:#303030}.cancel-btn:hover{background:#f0f2f5}.select-btn{padding:.5rem 1rem;border:none;border-radius:8px;background:#005bd3;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:500}.select-btn:hover:not(:disabled){background:#004299}.select-btn:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], propDecorators: { mediaType: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaType", required: true }] }], currentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentValue", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
 
 /**
@@ -4765,6 +4390,8 @@ class VisualEditorComponent {
     loadingStrategy = inject(PageLoadingStrategy);
     config = inject(VISUAL_EDITOR_CONFIG);
     dndService = inject(DragDropService);
+    iframeBridge = inject(IframeBridgeService);
+    storefrontUrl = inject(STOREFRONT_URL);
     sanitizer = inject(DomSanitizer);
     destroy$ = new Subject();
     // Configuration-driven UI options
@@ -4774,6 +4401,14 @@ class VisualEditorComponent {
     isPreviewMode = signal(false, ...(ngDevMode ? [{ debugName: "isPreviewMode" }] : []));
     editorContext = computed(() => ({ isEditor: !this.isPreviewMode() }), ...(ngDevMode ? [{ debugName: "editorContext" }] : []));
     canvasEl = viewChild('canvasEl', ...(ngDevMode ? [{ debugName: "canvasEl" }] : []));
+    // Iframe preview
+    previewFrame = viewChild('previewFrame', ...(ngDevMode ? [{ debugName: "previewFrame" }] : []));
+    previewUrl = computed(() => {
+        if (!this.storefrontUrl)
+            return null;
+        return this.sanitizer.bypassSecurityTrustResourceUrl(`${this.storefrontUrl}/kustomizer/editor`);
+    }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
+    iframeReady = false;
     propertiesTab = signal('props', ...(ngDevMode ? [{ debugName: "propertiesTab" }] : []));
     expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : []));
     expandedSections = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedSections" }] : []));
@@ -4898,23 +4533,19 @@ class VisualEditorComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "filteredBlockPresetsForNestedSlot" }] : []));
     sectionIconMap = {
-        'hero-section': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M2 4a2 2 0 012-2h12a2 2 0 012 2v4H2V4zm0 6h16v6a2 2 0 01-2 2H4a2 2 0 01-2-2v-6z"/></svg>',
-        'features-grid': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 3h6v6H3V3zm8 0h6v6h-6V3zm-8 8h6v6H3v-6zm8 0h6v6h-6v-6z"/></svg>',
-        'testimonials': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v7a2 2 0 01-2 2H6l-4 4V5z"/></svg>',
-        'cta-section': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"/></svg>',
-        'footer-section': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M2 4a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm2 10v2h12v-2H4z"/></svg>',
-        'layout-section': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 3h14a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1zm1 2v10h5V5H4zm7 0v10h5V5h-5z"/></svg>',
+        'hero-section': '🎯',
+        'features-grid': '⚡',
+        'testimonials': '💬',
+        'cta-section': '📢',
+        'footer-section': '📋',
     };
     blockIconMap = {
-        'text-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3h12a1 1 0 011 1v1a1 1 0 01-1 1h-5v10a1 1 0 01-2 0V6H4a1 1 0 01-1-1V4a1 1 0 011-1z"/></svg>',
-        'button-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 6a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V6zm4 4a1 1 0 100 2h6a1 1 0 100-2H7z"/></svg>',
-        'image-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6zM6 7a1 1 0 110-2 1 1 0 010 2z"/></svg>',
-        'icon-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2l2.39 4.84L18 7.77l-4 3.9.94 5.5L10 14.27l-4.94 2.9.94-5.5-4-3.9 5.61-.93L10 2z"/></svg>',
-        'feature-item': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2l2.39 4.84L18 7.77l-4 3.9.94 5.5L10 14.27l-4.94 2.9.94-5.5-4-3.9 5.61-.93L10 2z"/></svg>',
-        'card-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v4H4V5zm0 6h8v4H4v-4z"/></svg>',
-        'video-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm4 3.5l5 3.5-5 3.5v-7z"/></svg>',
-        'picture-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6zM6 7a1 1 0 110-2 1 1 0 010 2z"/></svg>',
-        'flex-layout-block': '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 3h4v14H3V3zm5 0h4v14H8V3zm5 0h4v14h-4V3z"/></svg>',
+        'text-block': '📝',
+        'button-block': '🔘',
+        'image-block': '🖼️',
+        'icon-block': '⭐',
+        'feature-item': '⭐',
+        'card-block': '🃏',
     };
     selectedBlockDefinition = computed(() => this.facade.selectedBlockDefinition(), ...(ngDevMode ? [{ debugName: "selectedBlockDefinition" }] : []));
     // Inline name editing
@@ -4974,6 +4605,27 @@ class VisualEditorComponent {
     cancelEditingName() {
         this.isEditingName.set(false);
     }
+    constructor() {
+        // Sync sections to iframe whenever they change
+        effect(() => {
+            const sections = this.facade.sections();
+            if (this.iframeReady && this.previewUrl()) {
+                this.iframeBridge.sendPageUpdate(sections);
+            }
+        });
+        // Sync selection to iframe
+        effect(() => {
+            const selected = this.facade.selectedElement()?.id ?? null;
+            if (!this.iframeReady || !this.previewUrl())
+                return;
+            if (selected) {
+                this.iframeBridge.sendSelectElement(selected);
+            }
+            else {
+                this.iframeBridge.sendDeselect();
+            }
+        });
+    }
     ngOnInit() {
         // Load page using the configured loading strategy
         this.loadingStrategy
@@ -4993,13 +4645,38 @@ class VisualEditorComponent {
                 this.navigation.navigate({ type: 'page-list' });
             },
         });
+        // Listen for iframe events
+        if (this.previewUrl()) {
+            this.iframeBridge
+                .onReady()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                this.iframeReady = true;
+                // Send initial page state
+                this.iframeBridge.sendPageUpdate(this.facade.sections());
+            });
+            this.iframeBridge
+                .onElementClicked()
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(({ elementId, sectionId }) => {
+                this.facade.selectElement(sectionId, elementId);
+            });
+        }
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        this.iframeBridge.disconnect();
         // Clear page from store when leaving editor
         this.facade.clearPage();
     }
+    onIframeLoad() {
+        const iframe = this.previewFrame()?.nativeElement;
+        if (iframe) {
+            const origin = this.storefrontUrl ? new URL(this.storefrontUrl).origin : '*';
+            this.iframeBridge.connect(iframe, origin);
+        }
+    }
     goBack() {
         if (this.facade.isDirty()) {
             this.navigation
@@ -5064,25 +4741,17 @@ class VisualEditorComponent {
             },
         });
     }
-    defaultSectionIcon = '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M3 3h14a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1zm1 2v10h12V5H4z"/></svg>';
-    defaultBlockIcon = '<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2l1.5 3h3.5l-2.5 2.5 1 3.5-3.5-2-3.5 2 1-3.5L4 5h3.5L10 2zm-6 10h12v2H4v-2zm2 4h8v2H6v-2z"/></svg>';
-    toSafeIcon(icon) {
-        if (icon.trim().startsWith('<')) {
-            return this.sanitizer.bypassSecurityTrustHtml(icon);
-        }
-        return this.sanitizer.bypassSecurityTrustHtml(`<span style="font-family:'Material Icons',sans-serif;font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility">${icon}</span>`);
-    }
     getIcon(def) {
-        return this.toSafeIcon(this.sectionIconMap[def.type] ?? def.icon ?? this.defaultSectionIcon);
+        return this.sectionIconMap[def.type] ?? '📦';
     }
     getBlockIcon(def) {
-        return this.toSafeIcon(this.blockIconMap[def.type] ?? def.icon ?? this.defaultBlockIcon);
+        return this.blockIconMap[def.type] ?? '🧩';
     }
     getBlockIconByType(type) {
-        return this.toSafeIcon(this.blockIconMap[type] ?? this.defaultBlockIcon);
+        return this.blockIconMap[type] ?? '🧩';
     }
     getSectionIcon(type) {
-        return this.toSafeIcon(this.sectionIconMap[type] ?? this.defaultSectionIcon);
+        return this.sectionIconMap[type] ?? '📦';
     }
     // Tree expansion
     isSectionExpanded(sectionId) {
@@ -5508,10 +5177,10 @@ class VisualEditorComponent {
         this.closeNestedBlockPicker();
     }
     getSectionPresetIcon(rp) {
-        return this.toSafeIcon(rp.displayIcon ?? this.sectionIconMap[rp.definition.type] ?? this.defaultSectionIcon);
+        return rp.displayIcon ?? this.sectionIconMap[rp.definition.type] ?? '📦';
     }
     getBlockPresetIcon(rp) {
-        return this.toSafeIcon(rp.displayIcon ?? this.blockIconMap[rp.definition.type] ?? this.defaultBlockIcon);
+        return rp.displayIcon ?? this.blockIconMap[rp.definition.type] ?? '🧩';
     }
     selectSection(section, event) {
         event.stopPropagation();
@@ -5755,15 +5424,15 @@ class VisualEditorComponent {
             return;
         this.facade.updateSectionProps(section.id, { [key]: '' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VisualEditorComponent, isStandalone: true, selector: "lib-visual-editor", viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VisualEditorComponent, isStandalone: true, selector: "lib-visual-editor", providers: [IframeBridgeService], viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "previewFrame", first: true, predicate: ["previewFrame"], descendants: true, isSignal: true }, { propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="editor-layout">
       <!-- Sidebar: Hierarchical Tree -->
       <aside class="sidebar">
         <div class="sidebar-header">
           <h2>Page Structure</h2>
           <div class="search-box">
-            <span class="search-icon"><svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path d="M8 16a8 8 0 116.32-3.1l5.39 5.38a1 1 0 01-1.42 1.42l-5.38-5.39A8 8 0 018 16zm0-2A6 6 0 108 2a6 6 0 000 12z"/></svg></span>
+            <span class="search-icon">🔍</span>
             <input
               type="text"
               class="search-input"
@@ -5811,7 +5480,7 @@ class VisualEditorComponent {
                   <span class="expand-icon">&#9654;</span>
                 </button>
                 <span class="icon-drag-wrapper">
-                  <span class="section-icon" [innerHTML]="getSectionIcon(section.type)"></span>
+                  <span class="section-icon">{{ getSectionIcon(section.type) }}</span>
                   <span
                     class="drag-handle section-drag-handle"
                     role="button"
@@ -5913,7 +5582,7 @@ class VisualEditorComponent {
                   }
                   @for (rp of group.presets; track rp.displayName + '-' + rp.definition.type) {
                     <button class="picker-item" (click)="addSectionFromPreset(rp)">
-                      <span class="picker-icon" [innerHTML]="getSectionPresetIcon(rp)"></span>
+                      <span class="picker-icon">{{ getSectionPresetIcon(rp) }}</span>
                       <div class="picker-info">
                         <span class="picker-name">{{ rp.displayName }}</span>
                         @if (rp.displayDescription) {
@@ -5951,7 +5620,7 @@ class VisualEditorComponent {
               <div class="picker-content">
                 @for (rp of filteredBlockPresetsForSection(); track rp.displayName + '-' + rp.definition.type) {
                   <button class="picker-item" (click)="addBlockToSectionFromPreset(blockPickerSection()!, rp)">
-                    <span class="picker-icon" [innerHTML]="getBlockPresetIcon(rp)"></span>
+                    <span class="picker-icon">{{ getBlockPresetIcon(rp) }}</span>
                     <div class="picker-info">
                       <span class="picker-name">{{ rp.displayName }}</span>
                       @if (rp.displayDescription) {
@@ -5994,7 +5663,7 @@ class VisualEditorComponent {
               <div class="picker-content">
                 @for (rp of filteredBlockPresetsForNestedSlot(); track rp.displayName + '-' + rp.definition.type) {
                   <button class="picker-item" (click)="addNestedBlockFromPreset(rp)">
-                    <span class="picker-icon" [innerHTML]="getBlockPresetIcon(rp)"></span>
+                    <span class="picker-icon">{{ getBlockPresetIcon(rp) }}</span>
                     <div class="picker-info">
                       <span class="picker-name">{{ rp.displayName }}</span>
                       @if (rp.displayDescription) {
@@ -6024,7 +5693,7 @@ class VisualEditorComponent {
         <div class="toolbar">
           <div class="toolbar-left">
             <button class="toolbar-btn back-btn" (click)="goBack()" title="Back to pages">
-              <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="vertical-align: middle"><path d="M17 9H5.414l3.293-3.293a1 1 0 00-1.414-1.414l-5 5a1 1 0 000 1.414l5 5a1 1 0 001.414-1.414L5.414 11H17a1 1 0 100-2z"/></svg> Back
+              ← Back
             </button>
             <button
               class="toolbar-btn"
@@ -6032,7 +5701,7 @@ class VisualEditorComponent {
               (click)="facade.undo()"
               title="Undo"
             >
-              <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="vertical-align: middle"><path d="M7.5 4.5a1 1 0 00-1.7-.7l-4 4a1 1 0 000 1.4l4 4a1 1 0 001.7-.7V11h5a4 4 0 010 8H9a1 1 0 110-2h3.5a2 2 0 000-4h-5v1.5a1 1 0 01-1.7.7l-4-4a1 1 0 010-1.4l4-4a1 1 0 011.7.7V6h5a6 6 0 010 12H9a3 3 0 010-6h-1.5V4.5z"/></svg> Undo
+              ↩ Undo
             </button>
             <button
               class="toolbar-btn"
@@ -6040,7 +5709,7 @@ class VisualEditorComponent {
               (click)="facade.redo()"
               title="Redo"
             >
-              <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="vertical-align: middle; transform: scaleX(-1)"><path d="M7.5 4.5a1 1 0 00-1.7-.7l-4 4a1 1 0 000 1.4l4 4a1 1 0 001.7-.7V11h5a4 4 0 010 8H9a1 1 0 110-2h3.5a2 2 0 000-4h-5v1.5a1 1 0 01-1.7.7l-4-4a1 1 0 010-1.4l4-4a1 1 0 011.7.7V6h5a6 6 0 010 12H9a3 3 0 010-6h-1.5V4.5z"/></svg> Redo
+              ↪ Redo
             </button>
           </div>
           <div class="toolbar-center">
@@ -6073,7 +5742,7 @@ class VisualEditorComponent {
                 (click)="savePage()"
                 title="Save changes"
               >
-                {{ isSaving() ? 'Saving...' : 'Save' }}
+                {{ isSaving() ? 'Saving...' : '💾 Save' }}
               </button>
             }
             @if (facade.currentPage() && showPublishButtons()) {
@@ -6084,7 +5753,7 @@ class VisualEditorComponent {
                   (click)="publishPage()"
                   title="Publish page"
                 >
-                  {{ isPublishing() ? 'Publishing...' : 'Publish' }}
+                  {{ isPublishing() ? 'Publishing...' : '🚀 Publish' }}
                 </button>
               } @else {
                 <button
@@ -6093,57 +5762,68 @@ class VisualEditorComponent {
                   (click)="unpublishPage()"
                   title="Unpublish page"
                 >
-                  {{ isPublishing() ? 'Unpublishing...' : 'Unpublish' }}
+                  {{ isPublishing() ? 'Unpublishing...' : '📥 Unpublish' }}
                 </button>
               }
             }
             <button class="toolbar-btn preview-btn" (click)="togglePreview()">
-              {{ isPreviewMode() ? 'Edit' : 'Preview' }}
+              {{ isPreviewMode() ? '✏️ Edit' : '👁 Preview' }}
             </button>
           </div>
         </div>
 
         <!-- Canvas Content -->
         <div class="canvas" #canvasEl [class.preview-mode]="isPreviewMode()">
-          @if (facade.sections().length === 0) {
-            <div class="empty-state">
-              <div class="empty-icon"><svg width="48" height="48" viewBox="0 0 20 20" fill="currentColor"><path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414a2 2 0 00-.586-1.414l-3.414-3.414A2 2 0 0010.586 2H6zm0 2h4v3a1 1 0 001 1h3v8H6V4z"/></svg></div>
-              <h3>Start Building</h3>
-              <p>Click on a component from the sidebar to add it to your page</p>
-            </div>
+          @if (previewUrl()) {
+            <iframe
+              #previewFrame
+              class="preview-iframe"
+              [src]="previewUrl()!"
+              (load)="onIframeLoad()"
+              allow="clipboard-read; clipboard-write"
+            ></iframe>
           } @else {
-            @for (section of facade.sections(); track section.id; let idx = $index) {
-              <div
-                class="section-outer"
-                [class.selected]="facade.selectedSection()?.id === section.id"
-              >
-                @if (!isPreviewMode()) {
-                  <div class="section-controls">
-                    <span class="section-label">{{ getSectionName(section) }}</span>
-                    <div class="section-actions">
-                      @if (idx > 0) {
-                        <button class="action-btn" (click)="moveUp(section.id, idx, $event)" title="Move up">↑</button>
-                      }
-                      @if (idx < facade.sections().length - 1) {
-                        <button class="action-btn" (click)="moveDown(section.id, idx, $event)" title="Move down">↓</button>
-                      }
-                      @if (facade.isSectionDuplicable(section.type)) {
-                        <button class="action-btn" (click)="duplicateSection(section.id, $event)" title="Duplicate">
-                          <span class="material-icon">content_copy</span>
-                        </button>
-                      }
-                      <button class="action-btn delete" (click)="deleteSection(section.id, $event)" title="Delete">×</button>
-                    </div>
-                  </div>
-                }
+            <!-- Fallback: direct rendering when no storefront URL configured -->
+            @if (facade.sections().length === 0) {
+              <div class="empty-state">
+                <div class="empty-icon">📄</div>
+                <h3>Start Building</h3>
+                <p>Click on a component from the sidebar to add it to your page</p>
+              </div>
+            } @else {
+              @for (section of facade.sections(); track section.id; let idx = $index) {
                 <div
-                  class="section-wrapper"
-                  [attr.data-section-id]="section.id"
-                  (click)="selectSection(section, $event)"
+                  class="section-outer"
+                  [class.selected]="facade.selectedSection()?.id === section.id"
                 >
-                  <lib-dynamic-renderer [element]="section" [context]="editorContext()" />
+                  @if (!isPreviewMode()) {
+                    <div class="section-controls">
+                      <span class="section-label">{{ getSectionName(section) }}</span>
+                      <div class="section-actions">
+                        @if (idx > 0) {
+                          <button class="action-btn" (click)="moveUp(section.id, idx, $event)" title="Move up">↑</button>
+                        }
+                        @if (idx < facade.sections().length - 1) {
+                          <button class="action-btn" (click)="moveDown(section.id, idx, $event)" title="Move down">↓</button>
+                        }
+                        @if (facade.isSectionDuplicable(section.type)) {
+                          <button class="action-btn" (click)="duplicateSection(section.id, $event)" title="Duplicate">
+                            <span class="material-icon">content_copy</span>
+                          </button>
+                        }
+                        <button class="action-btn delete" (click)="deleteSection(section.id, $event)" title="Delete">×</button>
+                      </div>
+                    </div>
+                  }
+                  <div
+                    class="section-wrapper"
+                    [attr.data-section-id]="section.id"
+                    (click)="selectSection(section, $event)"
+                  >
+                    <lib-dynamic-renderer [element]="section" [context]="editorContext()" />
+                  </div>
                 </div>
-              </div>
+              }
             }
           }
         </div>
@@ -6533,7 +6213,7 @@ class VisualEditorComponent {
                         [class.selected]="facade.selectedBlock()?.id === block.id"
                         (click)="selectBlock(block)"
                       >
-                        <span class="block-icon" [innerHTML]="getBlockIconByType(block.type)"></span>
+                        <span class="block-icon">{{ getBlockIconByType(block.type) }}</span>
                         <span class="block-name">{{ getBlockName(block) }}</span>
                         <div class="block-actions">
                           @if (idx > 0) {
@@ -6580,18 +6260,18 @@ class VisualEditorComponent {
         />
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;height:calc(100vh - 56px);overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.editor-layout{display:grid;grid-template-columns:280px 1fr 300px;height:100%;background:#f6f6f7}.sidebar{background:#fff;border-right:1px solid #e3e3e3;display:flex;flex-direction:column}.sidebar-header{padding:1rem;border-bottom:1px solid #e3e3e3}.sidebar-header h2{margin:0;font-size:.8125rem;font-weight:600;color:#303030}.search-box{display:none}.search-box:focus-within{border-color:#005bd3;background:#fff}.search-icon{font-size:.8125rem;opacity:.6}.search-input{flex:1;border:none;background:transparent;font-size:.8125rem;color:#303030;font-family:inherit;outline:none}.search-input::placeholder{color:#8c9196}.search-clear{padding:.125rem .375rem;border:none;background:#e3e3e3;border-radius:4px;cursor:pointer;font-size:.75rem;color:#616161;line-height:1}.search-clear:hover{background:#c9cccf}.search-no-results{padding:2rem 1rem;text-align:center;color:#8c9196}.search-no-results p{margin:0;font-size:.8125rem}.picker-search{padding:.5rem .75rem;border-bottom:1px solid #e3e3e3}.picker-search-input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.picker-search-input:focus{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.picker-search-input::placeholder{color:#8c9196}.section-tree{flex:1;overflow-y:auto;padding:.25rem 0}.tree-section{border-bottom:none}.tree-section.selected>.tree-section-header{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-section.selected>.tree-section-header .section-name,.tree-section.selected>.tree-section-header .expand-btn,.tree-section.selected>.tree-section-header .section-icon,.tree-section.selected>.tree-section-header .drag-handle,.tree-section.selected>.tree-section-header .tree-btn{color:inherit}.tree-section-header{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;cursor:pointer;transition:background .15s}.tree-section-header:hover{background:#f6f6f7;border-radius:8px;margin:0 .375rem}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#8c9196;transition:transform .15s;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.5rem;transition:transform .15s}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-section-header:hover .icon-drag-wrapper .section-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .section-icon{visibility:hidden}.section-icon{font-size:.875rem;color:#8c9196;display:flex;align-items:center}.section-name{flex:1;font-size:.8125rem;font-weight:500;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .15s}.tree-section-header:hover .tree-actions,.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.6875rem;color:#8c9196;transition:all .15s}.tree-btn:hover{background:#e3e3e3;color:#303030}.tree-btn.delete:hover{background:#fef2f0;color:#d72c0d}.tree-section.drag-over-before>.tree-section-header{box-shadow:inset 0 2px #005bd3}.tree-section.drag-over-after>.tree-section-header{box-shadow:inset 0 -2px #005bd3}.tree-section.is-section-dragging{opacity:.4}.tree-section.is-section-dragging>.tree-section-header{cursor:grabbing}.drag-handle{cursor:grab;color:#8c9196;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:4px}.drag-handle:hover{color:#303030;background:#e3e3e3}.drag-handle:focus-visible{opacity:1;outline:2px solid #005bd3;outline-offset:1px}.tree-section-header:hover .drag-handle{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.tree-section,.drag-handle,.tree-actions{transition:none}}.tree-section-content{padding-left:.5rem}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;cursor:pointer;transition:background .15s}.tree-block:hover{background:#f6f6f7;border-radius:8px;margin:0 .375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name{color:inherit}.block-indent{width:18px;height:1px;background:#e3e3e3;margin-left:10px}.block-name{flex:1;font-size:.8125rem;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1.5rem);margin:.25rem .75rem .375rem 2rem;padding:.375rem .5rem;border:none;border-radius:8px;background:transparent;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#005bd3;transition:all .15s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.8125rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}.add-section-area{padding:.75rem;border-top:1px solid #e3e3e3;position:relative}.add-section-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;padding:.625rem;border:none;border-radius:8px;background:transparent;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;color:#005bd3;transition:all .15s}.add-section-btn:hover{background:#f0f5ff}.section-picker{position:absolute;bottom:100%;left:.75rem;right:.75rem;background:#fff;border:1px solid #e3e3e3;border-radius:12px;box-shadow:0 -4px 12px #0000001a;max-height:300px;overflow-y:auto;z-index:100}.picker-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .75rem;border:none;border-bottom:1px solid #f6f6f7;background:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s}.picker-item:last-child{border-bottom:none}.picker-item:hover{background:#f6f6f7}.picker-icon{font-size:1.25rem;color:#8c9196;display:flex;align-items:center;flex-shrink:0}.picker-info{display:flex;flex-direction:column;gap:.125rem}.picker-name{font-size:.8125rem;font-weight:500;color:#303030}.picker-desc{font-size:.75rem;color:#8c9196}.block-picker-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.block-picker{background:#fff;border-radius:12px;width:340px;max-height:420px;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e3e3e3}.picker-header h3{margin:0;font-size:.9375rem;font-weight:600;color:#303030}.picker-content{flex:1;overflow-y:auto;padding:.5rem}.picker-content .picker-item{border:1px solid #e3e3e3;border-radius:8px;margin-bottom:.5rem}.picker-content .picker-item:hover{border-color:#005bd3;background:#f8fafe}.picker-category{border-bottom:1px solid #f6f6f7}.picker-category:last-child{border-bottom:none}.picker-category-label{padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:600;color:#8c9196;text-transform:uppercase;letter-spacing:.3px}.picker-empty{padding:2rem;text-align:center;color:#8c9196;font-size:.8125rem}.canvas-area{display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:56px;background:#fff;border-bottom:1px solid #e3e3e3}.toolbar-left,.toolbar-right{display:flex;gap:.5rem;align-items:center}.toolbar-center{display:flex;align-items:center}.toolbar-btn{padding:.375rem .75rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;font-family:inherit;font-weight:500;color:#303030;transition:all .15s}.toolbar-btn:hover:not(:disabled){background:#f6f6f7}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.preview-btn,.publish-btn{background:#303030;color:#fff;border-color:#303030;border-radius:8px}.preview-btn:hover,.publish-btn:hover:not(:disabled){background:#1a1a1a!important}.back-btn{border-color:transparent;background:transparent;color:#303030}.back-btn:hover:not(:disabled){background:#f6f6f7}.section-count{font-size:.8125rem;color:#616161}.page-title{font-size:.875rem;font-weight:600;color:#303030;margin-right:.75rem}.page-title-link{text-decoration:none;color:inherit}.page-title-link:hover{text-decoration:underline}.status-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.6875rem;font-weight:500;text-transform:capitalize;background:#ffd6a4;color:#b98900}.status-badge.published{background:#aee9d1;color:#0d542b}.dirty-indicator{margin-left:.75rem;font-size:.75rem;color:#b98900;font-weight:500}.canvas{flex:1;overflow-y:auto;padding:2rem;background:#e8e8e8}.canvas.preview-mode{padding:0;background:#fff}.canvas.preview-mode .section-outer{margin:0}.canvas.preview-mode .section-wrapper{border:none;border-radius:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#616161;text-align:center}.empty-icon{font-size:3rem;margin-bottom:1rem;color:#8c9196}.empty-state h3{margin:0 0 .5rem;color:#303030;font-size:1rem}.empty-state p{margin:0;font-size:.8125rem;color:#8c9196}.section-outer{position:relative;margin-bottom:0}.section-wrapper{border:1px solid transparent;border-radius:0;overflow:hidden;transition:border-color .15s;background:#fff}.section-outer:hover .section-wrapper{border-color:#005bd34d}.section-outer.selected .section-wrapper{border-color:#005bd366}.section-controls{position:absolute;top:-22px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.1875rem .75rem;background:#005bd3;color:#fff;font-size:.75rem;border-radius:8px 8px 0 0;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}.section-outer:hover .section-controls,.section-outer.selected .section-controls{opacity:1;pointer-events:auto}.section-outer:hover .section-wrapper,.section-outer.selected .section-wrapper{border-top-left-radius:0;border-top-right-radius:0}.section-label{font-weight:500}.section-actions{display:flex;gap:.25rem}.action-btn{padding:.1875rem .5rem;border:none;border-radius:4px;background:#ffffff26;color:#fff;cursor:pointer;font-size:.625rem;font-family:inherit;transition:background .15s}.action-btn:hover{background:#ffffff4d}.action-btn.delete:hover{background:#d72c0d}.material-icon{font-family:Material Icons,sans-serif;font-size:inherit;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.properties-panel{background:#fff;border-left:1px solid #e3e3e3;display:flex;flex-direction:column;overflow:hidden}.properties-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e3e3e3}.properties-header h3{margin:0;font-size:.9375rem;font-weight:600;color:#303030}.editable-name{cursor:pointer;display:flex;align-items:center;gap:.375rem;border-radius:8px;padding:.25rem .375rem;margin:-.25rem -.375rem;transition:background .15s}.editable-name:hover{background:#f6f6f7}.edit-icon{opacity:0;color:#8c9196;transition:opacity .15s;display:flex;flex-shrink:0}.editable-name:hover .edit-icon{opacity:1}.name-edit-input{flex:1;padding:.375rem .5rem;border:1px solid #005bd3;border-radius:8px;font-size:.9375rem;font-weight:600;font-family:inherit;color:#303030;outline:none;box-shadow:0 0 0 1px #005bd3}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#8c9196;transition:color .15s}.close-btn:hover{color:#303030}.more-menu-btn{border:none;background:none;cursor:pointer;color:#8c9196;padding:.25rem;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}.more-menu-btn:hover{background:#f6f6f7;color:#303030}.properties-content{flex:1;overflow-y:auto;padding:1rem}.property-group{margin-bottom:0;padding:1rem 0;border-top:1px solid #e3e3e3}.property-group:first-child{border-top:none}.group-title{display:flex;align-items:center;gap:.375rem;width:100%;padding:0;margin:0 0 .75rem;border:none;background:none;font-size:.8125rem;font-weight:600;font-family:inherit;color:#303030;cursor:pointer}.group-title:hover{color:#1a1a1a}.group-title:focus-visible{outline:2px solid #005bd3;outline-offset:2px;border-radius:4px}.group-title-text{flex:1;text-align:left}.group-toggle-icon{font-size:.5rem;color:#8c9196;transition:transform .15s;display:inline-block}.group-toggle-icon.collapsed{transform:rotate(-90deg)}.property-field{margin-bottom:1rem}.property-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.375rem;color:#303030}.property-input,.property-select,.property-textarea{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;color:#303030;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.property-input:focus,.property-select:focus,.property-textarea:focus{outline:none;border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.property-input::placeholder,.property-textarea::placeholder{color:#8c9196}.property-textarea{resize:vertical;font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.75rem}.color-field{display:flex;gap:.5rem;align-items:center}.color-picker{width:36px;height:36px;padding:2px;border:1px solid #e3e3e3;border-radius:6px;cursor:pointer}.color-text{flex:1}.no-selection{display:flex;align-items:center;justify-content:center;height:100%;color:#8c9196;text-align:center;padding:2rem}.no-selection p{margin:0;font-size:.8125rem}.panel-tabs{display:flex;border-bottom:1px solid #e3e3e3}.panel-tab{flex:1;padding:.75rem;border:none;border-bottom:2px solid transparent;background:#fff;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;color:#616161;transition:all .15s}.panel-tab:hover{background:#f6f6f7;color:#303030}.panel-tab.active{background:#fff;color:#303030;font-weight:600;border-bottom:2px solid #005bd3}.blocks-list{flex:1;overflow-y:auto;padding:1rem}.slot-group{margin-bottom:1.5rem}.slot-title{font-size:.75rem;font-weight:600;color:#8c9196;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.3px}.block-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border:1px solid #e3e3e3;border-radius:8px;margin-bottom:.375rem;cursor:pointer;transition:all .15s}.block-item:hover{border-color:#005bd3;background:#f8fafe}.block-item.selected{border-color:#005bd3;background:#005bd3;color:#fff}.block-item.selected .block-icon,.block-item.selected .block-name{color:inherit}.block-icon{font-size:.875rem;color:#8c9196;display:flex;align-items:center}.block-name{flex:1;font-size:.8125rem;font-weight:500;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .15s}.block-item:hover .block-actions{opacity:1}.mini-btn{padding:.125rem .375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.75rem;color:#8c9196;transition:all .15s}.mini-btn:hover{background:#e3e3e3;color:#303030}.mini-btn.delete:hover{background:#fef2f0;color:#d72c0d}.empty-slot{padding:.75rem;text-align:center;color:#8c9196;font-size:.8125rem;background:#f6f6f7;border:1px dashed #e3e3e3;border-radius:8px}.no-slots{padding:2rem;text-align:center;color:#8c9196}.no-slots p{margin:0;font-size:.8125rem}.delete-block-btn{width:auto;padding:0;margin-top:1rem;border:none;border-radius:0;background:transparent;color:#d72c0d;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;transition:color .15s}.delete-block-btn:hover{background:transparent;color:#bc2200;text-decoration:underline}.toggle-field{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:.8125rem;color:#303030}.toggle-switch{position:relative;display:inline-flex;cursor:pointer}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:36px;height:20px;background:#8c9196;border-radius:10px;position:relative;transition:background .2s}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.toggle-input:checked+.toggle-track{background:#008060}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(16px)}.toggle-input:focus-visible+.toggle-track{outline:2px solid #005bd3;outline-offset:2px}.toggle-description{display:block;font-size:.75rem;color:#8c9196;margin-top:.25rem}.media-field{display:flex;flex-direction:column;gap:.5rem}.media-preview{position:relative;border:1px solid #e3e3e3;border-radius:8px;overflow:hidden}.media-thumbnail{display:block;width:100%;max-height:160px;object-fit:cover;background:#f6f6f7}.media-remove-btn{position:absolute;top:.375rem;right:.375rem;width:22px;height:22px;border:none;border-radius:50%;background:#0009;color:#fff;cursor:pointer;font-size:.875rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}.media-remove-btn:hover{background:#d72c0d}.media-browse-btn{padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#303030;transition:all .15s}.media-browse-btn:hover{background:#f6f6f7;border-color:#8c9196}.media-url-input{font-size:.75rem;color:#616161}.video-preview{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#1a1a1a}.video-indicator{color:#fff;display:flex;align-items:center;flex-shrink:0}.video-url-text{flex:1;color:#8c9196;font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-preview .media-remove-btn{position:static;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DynamicRendererComponent, selector: "lib-dynamic-renderer", inputs: ["element", "context"] }, { kind: "component", type: BlockTreeItemComponent, selector: "lib-block-tree-item", inputs: ["block", "context", "index", "totalSiblings", "expandAll"], outputs: ["selectBlock", "deleteBlock", "duplicateBlock", "moveBlock", "openBlockPicker"] }, { kind: "component", type: ShopifyFilePickerComponent, selector: "lib-shopify-file-picker", inputs: ["mediaType", "currentValue"], outputs: ["fileSelected", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100vh;overflow:hidden}.editor-layout{display:grid;grid-template-columns:280px 1fr 300px;height:100%;background:#f0f2f5}.sidebar{background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar-header{padding:1rem;border-bottom:1px solid #e0e0e0}.sidebar-header h2{margin:0;font-size:.875rem;font-weight:600;color:#333}.search-box{display:none}.search-box:focus-within{border-color:#005bd3;background:#fff}.search-icon{font-size:.875rem;opacity:.6}.search-input{flex:1;border:none;background:transparent;font-size:.8125rem;color:#333;outline:none}.search-input::placeholder{color:#999}.search-clear{padding:.125rem .375rem;border:none;background:#ddd;border-radius:3px;cursor:pointer;font-size:.75rem;color:#666;line-height:1}.search-clear:hover{background:#ccc}.search-no-results{padding:2rem 1rem;text-align:center;color:#888}.search-no-results p{margin:0;font-size:.875rem}.picker-search{padding:.5rem;border-bottom:1px solid #e0e0e0}.picker-search-input{width:87%;padding:.5rem .75rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.8125rem;outline:none;transition:border-color .2s}.picker-search-input:focus{border-color:#005bd3}.picker-search-input::placeholder{color:#999}.section-tree{flex:1;overflow-y:auto;padding:.25rem 0}.tree-section{border-bottom:none}.tree-section.selected>.tree-section-header{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-section.selected>.tree-section-header .section-name,.tree-section.selected>.tree-section-header .expand-btn,.tree-section.selected>.tree-section-header .section-icon,.tree-section.selected>.tree-section-header .drag-handle,.tree-section.selected>.tree-section-header .tree-btn{color:inherit}.tree-section-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer;transition:background .2s}.tree-section-header:hover{background:#f5f5f5;border-radius:8px;margin:0 .375rem}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:transform .2s;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.625rem;transition:transform .2s}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-section-header:hover .icon-drag-wrapper .section-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .section-icon{visibility:hidden}.section-icon{font-size:1rem}.section-name{flex:1;font-size:.8125rem;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .2s}.tree-section-header:hover .tree-actions,.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:3px;background:#e0e0e0;cursor:pointer;font-size:.6875rem;color:#666}.tree-btn:hover{background:#d0d0d0}.tree-btn.delete:hover{background:#e74c3c;color:#fff}.tree-section.drag-over-before>.tree-section-header{box-shadow:inset 0 2px #4a90d9}.tree-section.drag-over-after>.tree-section-header{box-shadow:inset 0 -2px #4a90d9}.tree-section.is-section-dragging{opacity:.4}.tree-section.is-section-dragging>.tree-section-header{cursor:grabbing}.drag-handle{cursor:grab;color:#999;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:2px}.drag-handle:hover{color:#666;background:#e0e0e0}.drag-handle:focus-visible{opacity:1;outline:2px solid #4a90d9;outline-offset:1px}.tree-section-header:hover .drag-handle{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.tree-section,.drag-handle,.tree-actions{transition:none}}.tree-section-content{padding-left:.5rem}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;cursor:pointer;transition:background .2s}.tree-block:hover{background:#f5f5f5;border-radius:8px;margin:0 .375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name{color:inherit}.block-indent{width:20px;height:1px;background:#ddd;margin-left:10px}.block-icon{font-size:.875rem}.block-name{flex:1;font-size:.75rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1.5rem);margin:.375rem .75rem .5rem 2rem;padding:.375rem .5rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.75rem;color:#005bd3;transition:all .2s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.875rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}.add-section-area{padding:.75rem;border-top:1px solid #e0e0e0;position:relative}.add-section-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;padding:.625rem;border:none;border-radius:6px;background:transparent;cursor:pointer;font-size:.8125rem;font-weight:500;color:#005bd3;transition:all .2s}.add-section-btn:hover{background:#f0f5ff}.section-picker{position:absolute;bottom:100%;left:.75rem;right:.75rem;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 -4px 12px #0000001a;max-height:300px;overflow-y:auto;z-index:100}.picker-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem;border:none;border-bottom:1px solid #f0f0f0;background:#fff;cursor:pointer;text-align:left;transition:background .2s}.picker-item:last-child{border-bottom:none}.picker-item:hover{background:#f5f5f5}.picker-icon{font-family:Material Icons,sans-serif;font-size:1.5rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.picker-info{display:flex;flex-direction:column;gap:.125rem}.picker-name{font-size:.8125rem;font-weight:500;color:#333}.picker-desc{font-size:.6875rem;color:#888}.block-picker-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.block-picker{background:#fff;border-radius:8px;width:320px;max-height:400px;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0}.picker-header h3{margin:0;font-size:.9375rem;font-weight:600}.picker-content{flex:1;overflow-y:auto;padding:.5rem}.picker-content .picker-item{border:1px solid #e0e0e0;border-radius:6px;margin-bottom:.5rem}.picker-content .picker-item:hover{border-color:#005bd3}.picker-category{border-bottom:1px solid #f0f0f0}.picker-category:last-child{border-bottom:none}.picker-category-label{padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:600;color:#888}.picker-empty{padding:2rem;text-align:center;color:#888;font-size:.875rem}.canvas-area{display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#fff;border-bottom:1px solid #e0e0e0}.toolbar-left,.toolbar-right{display:flex;gap:.5rem}.toolbar-btn{padding:.375rem .75rem;border:1px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;transition:all .2s}.toolbar-btn:hover:not(:disabled){background:#f0f2f5}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.preview-btn,.publish-btn{background:#303030;color:#fff;border-color:#303030;border-radius:8px}.preview-btn:hover,.publish-btn:hover:not(:disabled){background:#1a1a1a!important}.back-btn{border-color:transparent;background:transparent}.section-count{font-size:.875rem;color:#666}.page-title{font-size:.9375rem;font-weight:600;color:#333;margin-right:.75rem}.page-title-link{text-decoration:none;color:inherit}.page-title-link:hover{text-decoration:underline}.status-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.6875rem;font-weight:500;text-transform:capitalize;background:#ffeaa7;color:#856404}.status-badge.published{background:#b4fed3;color:#0d542b}.dirty-indicator{margin-left:.75rem;font-size:.8125rem;color:#e67e22;font-weight:500}.canvas{flex:1;overflow-y:auto;padding:2rem;position:relative}.canvas.preview-mode{padding:0;background:#fff}.preview-iframe{width:100%;height:100%;border:none;position:absolute;inset:0}.canvas.preview-mode .section-outer{margin:0}.canvas.preview-mode .section-wrapper{border:none;border-radius:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#666;text-align:center}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h3{margin:0 0 .5rem;color:#333}.empty-state p{margin:0;font-size:.875rem}.section-outer{position:relative;margin-bottom:0}.section-wrapper{border:1px solid transparent;border-radius:0;overflow:hidden;transition:border-color .2s;background:#fff}.section-outer:hover .section-wrapper,.section-outer.selected .section-wrapper{border-color:#005bd366}.section-controls{position:absolute;top:-20px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.14rem .75rem;background:#005bd3;color:#fff;font-size:.75rem;border-radius:8px 8px 0 0;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}.section-outer:hover .section-controls,.section-outer.selected .section-controls{opacity:1;pointer-events:auto}.section-outer:hover .section-wrapper,.section-outer.selected .section-wrapper{border-top-left-radius:0;border-top-right-radius:0}.section-label{font-weight:500}.section-actions{display:flex;gap:.25rem}.action-btn{padding:.15rem .5rem;border:none;border-radius:4px;background:#ffffff26;color:#fff;cursor:pointer;font-size:.6rem}.action-btn:hover{background:#ffffff4d}.action-btn.delete:hover{background:#e74c3c}.material-icon{font-family:Material Icons,sans-serif;font-size:.75rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.properties-panel{background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;overflow:hidden}.properties-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0}.properties-header h3{margin:0;font-size:1rem;font-weight:600}.editable-name{cursor:pointer;display:flex;align-items:center;gap:.375rem;border-radius:4px;padding:.125rem .25rem;margin:-.125rem -.25rem;transition:background .2s}.editable-name:hover{background:#f0f2f5}.edit-icon{opacity:0;color:#999;transition:opacity .2s;display:flex;flex-shrink:0}.editable-name:hover .edit-icon{opacity:1}.name-edit-input{flex:1;padding:.375rem .5rem;border:1px solid #005bd3;border-radius:8px;font-size:1rem;font-weight:600;outline:none}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#666}.more-menu-btn{border:none;background:none;cursor:pointer;color:#616161;padding:.25rem;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s}.more-menu-btn:hover{background:#f0f2f5;color:#303030}.properties-content{flex:1;overflow-y:auto;padding:1rem}.property-group{margin-bottom:0;padding:1rem 0;border-top:1px solid #e0e0e0}.property-group:first-child{border-top:none}.group-title{display:flex;align-items:center;gap:.375rem;width:100%;padding:0;margin:0 0 .75rem;border:none;background:none;font-size:.8125rem;font-weight:600;color:#303030;cursor:pointer}.group-title:hover{color:#333}.group-title:focus-visible{outline:2px solid #4a90d9;outline-offset:2px;border-radius:2px}.group-title-text{flex:1;text-align:left}.group-toggle-icon{font-size:.5rem;transition:transform .2s;display:inline-block}.group-toggle-icon.collapsed{transform:rotate(-90deg)}.property-field{margin-bottom:1rem}.property-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem;color:#616161}.property-input,.property-select,.property-textarea{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.property-input:focus,.property-select:focus,.property-textarea:focus{outline:none;border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.property-textarea{resize:vertical;font-family:monospace;font-size:.75rem}.color-field{display:flex;gap:.5rem}.color-picker{width:40px;height:36px;padding:2px;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer}.color-text{flex:1}.no-selection{display:flex;align-items:center;justify-content:center;height:100%;color:#666;text-align:center;padding:2rem}.no-selection p{margin:0;font-size:.875rem}.panel-tabs{display:flex;border-bottom:1px solid #e0e0e0}.panel-tab{flex:1;padding:.75rem;border:none;border-bottom:2px solid transparent;background:#fff;cursor:pointer;font-size:.75rem;font-weight:500;color:#666;transition:all .2s}.panel-tab:hover{background:#f8f9fa;color:#303030}.panel-tab.active{background:#fff;color:#303030;border-bottom:2px solid #005bd3}.blocks-list{flex:1;overflow-y:auto;padding:1rem}.slot-group{margin-bottom:1.5rem}.slot-title{font-size:.75rem;font-weight:600;color:#616161;margin:0 0 .5rem}.block-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.375rem;cursor:pointer;transition:all .2s}.block-item:hover{border-color:#005bd3;background:#f8f9fa}.block-item.selected{border-color:#005bd3;background:#005bd3;color:#fff}.block-item.selected .block-icon,.block-item.selected .block-name{color:inherit}.block-icon{font-size:1rem}.block-name{flex:1;font-size:.8rem;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .2s}.block-item:hover .block-actions{opacity:1}.mini-btn{padding:.125rem .375rem;border:none;border-radius:3px;background:#e0e0e0;cursor:pointer;font-size:.75rem;color:#666}.mini-btn:hover{background:#d0d0d0}.mini-btn.delete:hover{background:#e74c3c;color:#fff}.empty-slot{padding:.75rem;text-align:center;color:#999;font-size:.75rem;background:#f8f9fa;border:1px dashed #ddd;border-radius:4px}.no-slots{padding:2rem;text-align:center;color:#666}.no-slots p{margin:0;font-size:.875rem}.delete-block-btn{width:auto;padding:0;margin-top:1rem;border:none;border-radius:0;background:transparent;color:#d72c0d;cursor:pointer;font-size:.875rem;font-weight:500;transition:color .2s}.delete-block-btn:hover{background:transparent;color:#bc2200;text-decoration:underline}.toggle-field{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:.875rem;color:#303030}.toggle-switch{position:relative;display:inline-flex;cursor:pointer}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:36px;height:20px;background:#b5b5b5;border-radius:10px;position:relative;transition:background .2s}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.toggle-input:checked+.toggle-track{background:#008060}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(16px)}.toggle-input:focus-visible+.toggle-track{outline:2px solid #005bd3;outline-offset:2px}.toggle-description{display:block;font-size:.75rem;color:#616161;margin-top:.25rem}.media-field{display:flex;flex-direction:column;gap:.5rem}.media-preview{position:relative;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.media-thumbnail{display:block;width:100%;max-height:160px;object-fit:cover;background:#f0f2f5}.media-remove-btn{position:absolute;top:.25rem;right:.25rem;width:22px;height:22px;border:none;border-radius:50%;background:#0009;color:#fff;cursor:pointer;font-size:.875rem;line-height:1;display:flex;align-items:center;justify-content:center}.media-remove-btn:hover{background:#d72c0d}.media-browse-btn{padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;color:#303030;transition:all .15s}.media-browse-btn:hover{background:#f0f2f5;border-color:#999}.media-url-input{font-size:.75rem;color:#616161}.video-preview{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#1a1a1a}.video-indicator{color:#fff;display:flex;align-items:center;flex-shrink:0}.video-url-text{flex:1;color:#ccc;font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-preview .media-remove-btn{position:static;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DynamicRendererComponent, selector: "lib-dynamic-renderer", inputs: ["element", "context"] }, { kind: "component", type: BlockTreeItemComponent, selector: "lib-block-tree-item", inputs: ["block", "context", "index", "totalSiblings", "expandAll"], outputs: ["selectBlock", "deleteBlock", "duplicateBlock", "moveBlock", "openBlockPicker"] }, { kind: "component", type: ShopifyFilePickerComponent, selector: "lib-shopify-file-picker", inputs: ["mediaType", "currentValue"], outputs: ["fileSelected", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-visual-editor', imports: [DynamicRendererComponent, BlockTreeItemComponent, ShopifyFilePickerComponent], template: `
+            args: [{ selector: 'lib-visual-editor', imports: [DynamicRendererComponent, BlockTreeItemComponent, ShopifyFilePickerComponent], providers: [IframeBridgeService], template: `
     <div class="editor-layout">
       <!-- Sidebar: Hierarchical Tree -->
       <aside class="sidebar">
         <div class="sidebar-header">
           <h2>Page Structure</h2>
           <div class="search-box">
-            <span class="search-icon"><svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path d="M8 16a8 8 0 116.32-3.1l5.39 5.38a1 1 0 01-1.42 1.42l-5.38-5.39A8 8 0 018 16zm0-2A6 6 0 108 2a6 6 0 000 12z"/></svg></span>
+            <span class="search-icon">🔍</span>
             <input
               type="text"
               class="search-input"
@@ -6639,7 +6319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                   <span class="expand-icon">&#9654;</span>
                 </button>
                 <span class="icon-drag-wrapper">
-                  <span class="section-icon" [innerHTML]="getSectionIcon(section.type)"></span>
+                  <span class="section-icon">{{ getSectionIcon(section.type) }}</span>
                   <span
                     class="drag-handle section-drag-handle"
                     role="button"
@@ -6741,7 +6421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                   }
                   @for (rp of group.presets; track rp.displayName + '-' + rp.definition.type) {
                     <button class="picker-item" (click)="addSectionFromPreset(rp)">
-                      <span class="picker-icon" [innerHTML]="getSectionPresetIcon(rp)"></span>
+                      <span class="picker-icon">{{ getSectionPresetIcon(rp) }}</span>
                       <div class="picker-info">
                         <span class="picker-name">{{ rp.displayName }}</span>
                         @if (rp.displayDescription) {
@@ -6779,7 +6459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               <div class="picker-content">
                 @for (rp of filteredBlockPresetsForSection(); track rp.displayName + '-' + rp.definition.type) {
                   <button class="picker-item" (click)="addBlockToSectionFromPreset(blockPickerSection()!, rp)">
-                    <span class="picker-icon" [innerHTML]="getBlockPresetIcon(rp)"></span>
+                    <span class="picker-icon">{{ getBlockPresetIcon(rp) }}</span>
                     <div class="picker-info">
                       <span class="picker-name">{{ rp.displayName }}</span>
                       @if (rp.displayDescription) {
@@ -6822,7 +6502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               <div class="picker-content">
                 @for (rp of filteredBlockPresetsForNestedSlot(); track rp.displayName + '-' + rp.definition.type) {
                   <button class="picker-item" (click)="addNestedBlockFromPreset(rp)">
-                    <span class="picker-icon" [innerHTML]="getBlockPresetIcon(rp)"></span>
+                    <span class="picker-icon">{{ getBlockPresetIcon(rp) }}</span>
                     <div class="picker-info">
                       <span class="picker-name">{{ rp.displayName }}</span>
                       @if (rp.displayDescription) {
@@ -6852,7 +6532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         <div class="toolbar">
           <div class="toolbar-left">
             <button class="toolbar-btn back-btn" (click)="goBack()" title="Back to pages">
-              <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="vertical-align: middle"><path d="M17 9H5.414l3.293-3.293a1 1 0 00-1.414-1.414l-5 5a1 1 0 000 1.414l5 5a1 1 0 001.414-1.414L5.414 11H17a1 1 0 100-2z"/></svg> Back
+              ← Back
             </button>
             <button
               class="toolbar-btn"
@@ -6860,7 +6540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               (click)="facade.undo()"
               title="Undo"
             >
-              <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="vertical-align: middle"><path d="M7.5 4.5a1 1 0 00-1.7-.7l-4 4a1 1 0 000 1.4l4 4a1 1 0 001.7-.7V11h5a4 4 0 010 8H9a1 1 0 110-2h3.5a2 2 0 000-4h-5v1.5a1 1 0 01-1.7.7l-4-4a1 1 0 010-1.4l4-4a1 1 0 011.7.7V6h5a6 6 0 010 12H9a3 3 0 010-6h-1.5V4.5z"/></svg> Undo
+              ↩ Undo
             </button>
             <button
               class="toolbar-btn"
@@ -6868,7 +6548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
               (click)="facade.redo()"
               title="Redo"
             >
-              <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" style="vertical-align: middle; transform: scaleX(-1)"><path d="M7.5 4.5a1 1 0 00-1.7-.7l-4 4a1 1 0 000 1.4l4 4a1 1 0 001.7-.7V11h5a4 4 0 010 8H9a1 1 0 110-2h3.5a2 2 0 000-4h-5v1.5a1 1 0 01-1.7.7l-4-4a1 1 0 010-1.4l4-4a1 1 0 011.7.7V6h5a6 6 0 010 12H9a3 3 0 010-6h-1.5V4.5z"/></svg> Redo
+              ↪ Redo
             </button>
           </div>
           <div class="toolbar-center">
@@ -6901,7 +6581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 (click)="savePage()"
                 title="Save changes"
               >
-                {{ isSaving() ? 'Saving...' : 'Save' }}
+                {{ isSaving() ? 'Saving...' : '💾 Save' }}
               </button>
             }
             @if (facade.currentPage() && showPublishButtons()) {
@@ -6912,7 +6592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                   (click)="publishPage()"
                   title="Publish page"
                 >
-                  {{ isPublishing() ? 'Publishing...' : 'Publish' }}
+                  {{ isPublishing() ? 'Publishing...' : '🚀 Publish' }}
                 </button>
               } @else {
                 <button
@@ -6921,57 +6601,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                   (click)="unpublishPage()"
                   title="Unpublish page"
                 >
-                  {{ isPublishing() ? 'Unpublishing...' : 'Unpublish' }}
+                  {{ isPublishing() ? 'Unpublishing...' : '📥 Unpublish' }}
                 </button>
               }
             }
             <button class="toolbar-btn preview-btn" (click)="togglePreview()">
-              {{ isPreviewMode() ? 'Edit' : 'Preview' }}
+              {{ isPreviewMode() ? '✏️ Edit' : '👁 Preview' }}
             </button>
           </div>
         </div>
 
         <!-- Canvas Content -->
         <div class="canvas" #canvasEl [class.preview-mode]="isPreviewMode()">
-          @if (facade.sections().length === 0) {
-            <div class="empty-state">
-              <div class="empty-icon"><svg width="48" height="48" viewBox="0 0 20 20" fill="currentColor"><path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414a2 2 0 00-.586-1.414l-3.414-3.414A2 2 0 0010.586 2H6zm0 2h4v3a1 1 0 001 1h3v8H6V4z"/></svg></div>
-              <h3>Start Building</h3>
-              <p>Click on a component from the sidebar to add it to your page</p>
-            </div>
+          @if (previewUrl()) {
+            <iframe
+              #previewFrame
+              class="preview-iframe"
+              [src]="previewUrl()!"
+              (load)="onIframeLoad()"
+              allow="clipboard-read; clipboard-write"
+            ></iframe>
           } @else {
-            @for (section of facade.sections(); track section.id; let idx = $index) {
-              <div
-                class="section-outer"
-                [class.selected]="facade.selectedSection()?.id === section.id"
-              >
-                @if (!isPreviewMode()) {
-                  <div class="section-controls">
-                    <span class="section-label">{{ getSectionName(section) }}</span>
-                    <div class="section-actions">
-                      @if (idx > 0) {
-                        <button class="action-btn" (click)="moveUp(section.id, idx, $event)" title="Move up">↑</button>
-                      }
-                      @if (idx < facade.sections().length - 1) {
-                        <button class="action-btn" (click)="moveDown(section.id, idx, $event)" title="Move down">↓</button>
-                      }
-                      @if (facade.isSectionDuplicable(section.type)) {
-                        <button class="action-btn" (click)="duplicateSection(section.id, $event)" title="Duplicate">
-                          <span class="material-icon">content_copy</span>
-                        </button>
-                      }
-                      <button class="action-btn delete" (click)="deleteSection(section.id, $event)" title="Delete">×</button>
-                    </div>
-                  </div>
-                }
+            <!-- Fallback: direct rendering when no storefront URL configured -->
+            @if (facade.sections().length === 0) {
+              <div class="empty-state">
+                <div class="empty-icon">📄</div>
+                <h3>Start Building</h3>
+                <p>Click on a component from the sidebar to add it to your page</p>
+              </div>
+            } @else {
+              @for (section of facade.sections(); track section.id; let idx = $index) {
                 <div
-                  class="section-wrapper"
-                  [attr.data-section-id]="section.id"
-                  (click)="selectSection(section, $event)"
+                  class="section-outer"
+                  [class.selected]="facade.selectedSection()?.id === section.id"
                 >
-                  <lib-dynamic-renderer [element]="section" [context]="editorContext()" />
+                  @if (!isPreviewMode()) {
+                    <div class="section-controls">
+                      <span class="section-label">{{ getSectionName(section) }}</span>
+                      <div class="section-actions">
+                        @if (idx > 0) {
+                          <button class="action-btn" (click)="moveUp(section.id, idx, $event)" title="Move up">↑</button>
+                        }
+                        @if (idx < facade.sections().length - 1) {
+                          <button class="action-btn" (click)="moveDown(section.id, idx, $event)" title="Move down">↓</button>
+                        }
+                        @if (facade.isSectionDuplicable(section.type)) {
+                          <button class="action-btn" (click)="duplicateSection(section.id, $event)" title="Duplicate">
+                            <span class="material-icon">content_copy</span>
+                          </button>
+                        }
+                        <button class="action-btn delete" (click)="deleteSection(section.id, $event)" title="Delete">×</button>
+                      </div>
+                    </div>
+                  }
+                  <div
+                    class="section-wrapper"
+                    [attr.data-section-id]="section.id"
+                    (click)="selectSection(section, $event)"
+                  >
+                    <lib-dynamic-renderer [element]="section" [context]="editorContext()" />
+                  </div>
                 </div>
-              </div>
+              }
             }
           }
         </div>
@@ -7361,7 +7052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         [class.selected]="facade.selectedBlock()?.id === block.id"
                         (click)="selectBlock(block)"
                       >
-                        <span class="block-icon" [innerHTML]="getBlockIconByType(block.type)"></span>
+                        <span class="block-icon">{{ getBlockIconByType(block.type) }}</span>
                         <span class="block-name">{{ getBlockName(block) }}</span>
                         <div class="block-actions">
                           @if (idx > 0) {
@@ -7408,8 +7099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         />
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:calc(100vh - 56px);overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.editor-layout{display:grid;grid-template-columns:280px 1fr 300px;height:100%;background:#f6f6f7}.sidebar{background:#fff;border-right:1px solid #e3e3e3;display:flex;flex-direction:column}.sidebar-header{padding:1rem;border-bottom:1px solid #e3e3e3}.sidebar-header h2{margin:0;font-size:.8125rem;font-weight:600;color:#303030}.search-box{display:none}.search-box:focus-within{border-color:#005bd3;background:#fff}.search-icon{font-size:.8125rem;opacity:.6}.search-input{flex:1;border:none;background:transparent;font-size:.8125rem;color:#303030;font-family:inherit;outline:none}.search-input::placeholder{color:#8c9196}.search-clear{padding:.125rem .375rem;border:none;background:#e3e3e3;border-radius:4px;cursor:pointer;font-size:.75rem;color:#616161;line-height:1}.search-clear:hover{background:#c9cccf}.search-no-results{padding:2rem 1rem;text-align:center;color:#8c9196}.search-no-results p{margin:0;font-size:.8125rem}.picker-search{padding:.5rem .75rem;border-bottom:1px solid #e3e3e3}.picker-search-input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.picker-search-input:focus{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.picker-search-input::placeholder{color:#8c9196}.section-tree{flex:1;overflow-y:auto;padding:.25rem 0}.tree-section{border-bottom:none}.tree-section.selected>.tree-section-header{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-section.selected>.tree-section-header .section-name,.tree-section.selected>.tree-section-header .expand-btn,.tree-section.selected>.tree-section-header .section-icon,.tree-section.selected>.tree-section-header .drag-handle,.tree-section.selected>.tree-section-header .tree-btn{color:inherit}.tree-section-header{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;cursor:pointer;transition:background .15s}.tree-section-header:hover{background:#f6f6f7;border-radius:8px;margin:0 .375rem}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#8c9196;transition:transform .15s;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.5rem;transition:transform .15s}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-section-header:hover .icon-drag-wrapper .section-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .section-icon{visibility:hidden}.section-icon{font-size:.875rem;color:#8c9196;display:flex;align-items:center}.section-name{flex:1;font-size:.8125rem;font-weight:500;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .15s}.tree-section-header:hover .tree-actions,.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.6875rem;color:#8c9196;transition:all .15s}.tree-btn:hover{background:#e3e3e3;color:#303030}.tree-btn.delete:hover{background:#fef2f0;color:#d72c0d}.tree-section.drag-over-before>.tree-section-header{box-shadow:inset 0 2px #005bd3}.tree-section.drag-over-after>.tree-section-header{box-shadow:inset 0 -2px #005bd3}.tree-section.is-section-dragging{opacity:.4}.tree-section.is-section-dragging>.tree-section-header{cursor:grabbing}.drag-handle{cursor:grab;color:#8c9196;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:4px}.drag-handle:hover{color:#303030;background:#e3e3e3}.drag-handle:focus-visible{opacity:1;outline:2px solid #005bd3;outline-offset:1px}.tree-section-header:hover .drag-handle{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.tree-section,.drag-handle,.tree-actions{transition:none}}.tree-section-content{padding-left:.5rem}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;cursor:pointer;transition:background .15s}.tree-block:hover{background:#f6f6f7;border-radius:8px;margin:0 .375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name{color:inherit}.block-indent{width:18px;height:1px;background:#e3e3e3;margin-left:10px}.block-name{flex:1;font-size:.8125rem;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1.5rem);margin:.25rem .75rem .375rem 2rem;padding:.375rem .5rem;border:none;border-radius:8px;background:transparent;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#005bd3;transition:all .15s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.8125rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}.add-section-area{padding:.75rem;border-top:1px solid #e3e3e3;position:relative}.add-section-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;padding:.625rem;border:none;border-radius:8px;background:transparent;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;color:#005bd3;transition:all .15s}.add-section-btn:hover{background:#f0f5ff}.section-picker{position:absolute;bottom:100%;left:.75rem;right:.75rem;background:#fff;border:1px solid #e3e3e3;border-radius:12px;box-shadow:0 -4px 12px #0000001a;max-height:300px;overflow-y:auto;z-index:100}.picker-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .75rem;border:none;border-bottom:1px solid #f6f6f7;background:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s}.picker-item:last-child{border-bottom:none}.picker-item:hover{background:#f6f6f7}.picker-icon{font-size:1.25rem;color:#8c9196;display:flex;align-items:center;flex-shrink:0}.picker-info{display:flex;flex-direction:column;gap:.125rem}.picker-name{font-size:.8125rem;font-weight:500;color:#303030}.picker-desc{font-size:.75rem;color:#8c9196}.block-picker-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.block-picker{background:#fff;border-radius:12px;width:340px;max-height:420px;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e3e3e3}.picker-header h3{margin:0;font-size:.9375rem;font-weight:600;color:#303030}.picker-content{flex:1;overflow-y:auto;padding:.5rem}.picker-content .picker-item{border:1px solid #e3e3e3;border-radius:8px;margin-bottom:.5rem}.picker-content .picker-item:hover{border-color:#005bd3;background:#f8fafe}.picker-category{border-bottom:1px solid #f6f6f7}.picker-category:last-child{border-bottom:none}.picker-category-label{padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:600;color:#8c9196;text-transform:uppercase;letter-spacing:.3px}.picker-empty{padding:2rem;text-align:center;color:#8c9196;font-size:.8125rem}.canvas-area{display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:56px;background:#fff;border-bottom:1px solid #e3e3e3}.toolbar-left,.toolbar-right{display:flex;gap:.5rem;align-items:center}.toolbar-center{display:flex;align-items:center}.toolbar-btn{padding:.375rem .75rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;font-family:inherit;font-weight:500;color:#303030;transition:all .15s}.toolbar-btn:hover:not(:disabled){background:#f6f6f7}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.preview-btn,.publish-btn{background:#303030;color:#fff;border-color:#303030;border-radius:8px}.preview-btn:hover,.publish-btn:hover:not(:disabled){background:#1a1a1a!important}.back-btn{border-color:transparent;background:transparent;color:#303030}.back-btn:hover:not(:disabled){background:#f6f6f7}.section-count{font-size:.8125rem;color:#616161}.page-title{font-size:.875rem;font-weight:600;color:#303030;margin-right:.75rem}.page-title-link{text-decoration:none;color:inherit}.page-title-link:hover{text-decoration:underline}.status-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.6875rem;font-weight:500;text-transform:capitalize;background:#ffd6a4;color:#b98900}.status-badge.published{background:#aee9d1;color:#0d542b}.dirty-indicator{margin-left:.75rem;font-size:.75rem;color:#b98900;font-weight:500}.canvas{flex:1;overflow-y:auto;padding:2rem;background:#e8e8e8}.canvas.preview-mode{padding:0;background:#fff}.canvas.preview-mode .section-outer{margin:0}.canvas.preview-mode .section-wrapper{border:none;border-radius:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#616161;text-align:center}.empty-icon{font-size:3rem;margin-bottom:1rem;color:#8c9196}.empty-state h3{margin:0 0 .5rem;color:#303030;font-size:1rem}.empty-state p{margin:0;font-size:.8125rem;color:#8c9196}.section-outer{position:relative;margin-bottom:0}.section-wrapper{border:1px solid transparent;border-radius:0;overflow:hidden;transition:border-color .15s;background:#fff}.section-outer:hover .section-wrapper{border-color:#005bd34d}.section-outer.selected .section-wrapper{border-color:#005bd366}.section-controls{position:absolute;top:-22px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.1875rem .75rem;background:#005bd3;color:#fff;font-size:.75rem;border-radius:8px 8px 0 0;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}.section-outer:hover .section-controls,.section-outer.selected .section-controls{opacity:1;pointer-events:auto}.section-outer:hover .section-wrapper,.section-outer.selected .section-wrapper{border-top-left-radius:0;border-top-right-radius:0}.section-label{font-weight:500}.section-actions{display:flex;gap:.25rem}.action-btn{padding:.1875rem .5rem;border:none;border-radius:4px;background:#ffffff26;color:#fff;cursor:pointer;font-size:.625rem;font-family:inherit;transition:background .15s}.action-btn:hover{background:#ffffff4d}.action-btn.delete:hover{background:#d72c0d}.material-icon{font-family:Material Icons,sans-serif;font-size:inherit;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.properties-panel{background:#fff;border-left:1px solid #e3e3e3;display:flex;flex-direction:column;overflow:hidden}.properties-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e3e3e3}.properties-header h3{margin:0;font-size:.9375rem;font-weight:600;color:#303030}.editable-name{cursor:pointer;display:flex;align-items:center;gap:.375rem;border-radius:8px;padding:.25rem .375rem;margin:-.25rem -.375rem;transition:background .15s}.editable-name:hover{background:#f6f6f7}.edit-icon{opacity:0;color:#8c9196;transition:opacity .15s;display:flex;flex-shrink:0}.editable-name:hover .edit-icon{opacity:1}.name-edit-input{flex:1;padding:.375rem .5rem;border:1px solid #005bd3;border-radius:8px;font-size:.9375rem;font-weight:600;font-family:inherit;color:#303030;outline:none;box-shadow:0 0 0 1px #005bd3}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#8c9196;transition:color .15s}.close-btn:hover{color:#303030}.more-menu-btn{border:none;background:none;cursor:pointer;color:#8c9196;padding:.25rem;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}.more-menu-btn:hover{background:#f6f6f7;color:#303030}.properties-content{flex:1;overflow-y:auto;padding:1rem}.property-group{margin-bottom:0;padding:1rem 0;border-top:1px solid #e3e3e3}.property-group:first-child{border-top:none}.group-title{display:flex;align-items:center;gap:.375rem;width:100%;padding:0;margin:0 0 .75rem;border:none;background:none;font-size:.8125rem;font-weight:600;font-family:inherit;color:#303030;cursor:pointer}.group-title:hover{color:#1a1a1a}.group-title:focus-visible{outline:2px solid #005bd3;outline-offset:2px;border-radius:4px}.group-title-text{flex:1;text-align:left}.group-toggle-icon{font-size:.5rem;color:#8c9196;transition:transform .15s;display:inline-block}.group-toggle-icon.collapsed{transform:rotate(-90deg)}.property-field{margin-bottom:1rem}.property-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.375rem;color:#303030}.property-input,.property-select,.property-textarea{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;color:#303030;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.property-input:focus,.property-select:focus,.property-textarea:focus{outline:none;border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.property-input::placeholder,.property-textarea::placeholder{color:#8c9196}.property-textarea{resize:vertical;font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.75rem}.color-field{display:flex;gap:.5rem;align-items:center}.color-picker{width:36px;height:36px;padding:2px;border:1px solid #e3e3e3;border-radius:6px;cursor:pointer}.color-text{flex:1}.no-selection{display:flex;align-items:center;justify-content:center;height:100%;color:#8c9196;text-align:center;padding:2rem}.no-selection p{margin:0;font-size:.8125rem}.panel-tabs{display:flex;border-bottom:1px solid #e3e3e3}.panel-tab{flex:1;padding:.75rem;border:none;border-bottom:2px solid transparent;background:#fff;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;color:#616161;transition:all .15s}.panel-tab:hover{background:#f6f6f7;color:#303030}.panel-tab.active{background:#fff;color:#303030;font-weight:600;border-bottom:2px solid #005bd3}.blocks-list{flex:1;overflow-y:auto;padding:1rem}.slot-group{margin-bottom:1.5rem}.slot-title{font-size:.75rem;font-weight:600;color:#8c9196;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.3px}.block-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border:1px solid #e3e3e3;border-radius:8px;margin-bottom:.375rem;cursor:pointer;transition:all .15s}.block-item:hover{border-color:#005bd3;background:#f8fafe}.block-item.selected{border-color:#005bd3;background:#005bd3;color:#fff}.block-item.selected .block-icon,.block-item.selected .block-name{color:inherit}.block-icon{font-size:.875rem;color:#8c9196;display:flex;align-items:center}.block-name{flex:1;font-size:.8125rem;font-weight:500;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .15s}.block-item:hover .block-actions{opacity:1}.mini-btn{padding:.125rem .375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.75rem;color:#8c9196;transition:all .15s}.mini-btn:hover{background:#e3e3e3;color:#303030}.mini-btn.delete:hover{background:#fef2f0;color:#d72c0d}.empty-slot{padding:.75rem;text-align:center;color:#8c9196;font-size:.8125rem;background:#f6f6f7;border:1px dashed #e3e3e3;border-radius:8px}.no-slots{padding:2rem;text-align:center;color:#8c9196}.no-slots p{margin:0;font-size:.8125rem}.delete-block-btn{width:auto;padding:0;margin-top:1rem;border:none;border-radius:0;background:transparent;color:#d72c0d;cursor:pointer;font-size:.8125rem;font-weight:500;font-family:inherit;transition:color .15s}.delete-block-btn:hover{background:transparent;color:#bc2200;text-decoration:underline}.toggle-field{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:.8125rem;color:#303030}.toggle-switch{position:relative;display:inline-flex;cursor:pointer}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:36px;height:20px;background:#8c9196;border-radius:10px;position:relative;transition:background .2s}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.toggle-input:checked+.toggle-track{background:#008060}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(16px)}.toggle-input:focus-visible+.toggle-track{outline:2px solid #005bd3;outline-offset:2px}.toggle-description{display:block;font-size:.75rem;color:#8c9196;margin-top:.25rem}.media-field{display:flex;flex-direction:column;gap:.5rem}.media-preview{position:relative;border:1px solid #e3e3e3;border-radius:8px;overflow:hidden}.media-thumbnail{display:block;width:100%;max-height:160px;object-fit:cover;background:#f6f6f7}.media-remove-btn{position:absolute;top:.375rem;right:.375rem;width:22px;height:22px;border:none;border-radius:50%;background:#0009;color:#fff;cursor:pointer;font-size:.875rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}.media-remove-btn:hover{background:#d72c0d}.media-browse-btn{padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;font-family:inherit;color:#303030;transition:all .15s}.media-browse-btn:hover{background:#f6f6f7;border-color:#8c9196}.media-url-input{font-size:.75rem;color:#616161}.video-preview{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#1a1a1a}.video-indicator{color:#fff;display:flex;align-items:center;flex-shrink:0}.video-url-text{flex:1;color:#8c9196;font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-preview .media-remove-btn{position:static;flex-shrink:0}\n"] }]
-        }], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], nameInput: [{ type: i0.ViewChild, args: ['nameInput', { isSignal: true }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100vh;overflow:hidden}.editor-layout{display:grid;grid-template-columns:280px 1fr 300px;height:100%;background:#f0f2f5}.sidebar{background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar-header{padding:1rem;border-bottom:1px solid #e0e0e0}.sidebar-header h2{margin:0;font-size:.875rem;font-weight:600;color:#333}.search-box{display:none}.search-box:focus-within{border-color:#005bd3;background:#fff}.search-icon{font-size:.875rem;opacity:.6}.search-input{flex:1;border:none;background:transparent;font-size:.8125rem;color:#333;outline:none}.search-input::placeholder{color:#999}.search-clear{padding:.125rem .375rem;border:none;background:#ddd;border-radius:3px;cursor:pointer;font-size:.75rem;color:#666;line-height:1}.search-clear:hover{background:#ccc}.search-no-results{padding:2rem 1rem;text-align:center;color:#888}.search-no-results p{margin:0;font-size:.875rem}.picker-search{padding:.5rem;border-bottom:1px solid #e0e0e0}.picker-search-input{width:87%;padding:.5rem .75rem;border:1px solid #e0e0e0;border-radius:4px;font-size:.8125rem;outline:none;transition:border-color .2s}.picker-search-input:focus{border-color:#005bd3}.picker-search-input::placeholder{color:#999}.section-tree{flex:1;overflow-y:auto;padding:.25rem 0}.tree-section{border-bottom:none}.tree-section.selected>.tree-section-header{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-section.selected>.tree-section-header .section-name,.tree-section.selected>.tree-section-header .expand-btn,.tree-section.selected>.tree-section-header .section-icon,.tree-section.selected>.tree-section-header .drag-handle,.tree-section.selected>.tree-section-header .tree-btn{color:inherit}.tree-section-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer;transition:background .2s}.tree-section-header:hover{background:#f5f5f5;border-radius:8px;margin:0 .375rem}.expand-btn{width:16px;height:16px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:transform .2s;flex-shrink:0}.expand-btn.expanded .expand-icon{transform:rotate(90deg)}.expand-icon{font-size:.625rem;transition:transform .2s}.icon-drag-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-drag-wrapper .drag-handle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.tree-section-header:hover .icon-drag-wrapper .section-icon,.icon-drag-wrapper:has(.drag-handle:focus-visible) .section-icon{visibility:hidden}.section-icon{font-size:1rem}.section-name{flex:1;font-size:.8125rem;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .2s}.tree-section-header:hover .tree-actions,.tree-block:hover .tree-actions{opacity:1}.tree-btn{padding:.125rem .375rem;border:none;border-radius:3px;background:#e0e0e0;cursor:pointer;font-size:.6875rem;color:#666}.tree-btn:hover{background:#d0d0d0}.tree-btn.delete:hover{background:#e74c3c;color:#fff}.tree-section.drag-over-before>.tree-section-header{box-shadow:inset 0 2px #4a90d9}.tree-section.drag-over-after>.tree-section-header{box-shadow:inset 0 -2px #4a90d9}.tree-section.is-section-dragging{opacity:.4}.tree-section.is-section-dragging>.tree-section-header{cursor:grabbing}.drag-handle{cursor:grab;color:#999;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.125rem;border:none;background:none;border-radius:2px}.drag-handle:hover{color:#666;background:#e0e0e0}.drag-handle:focus-visible{opacity:1;outline:2px solid #4a90d9;outline-offset:1px}.tree-section-header:hover .drag-handle{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.tree-section,.drag-handle,.tree-actions{transition:none}}.tree-section-content{padding-left:.5rem}.tree-block{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;cursor:pointer;transition:background .2s}.tree-block:hover{background:#f5f5f5;border-radius:8px;margin:0 .375rem}.tree-block.selected{background:#005bd3;color:#fff;border-radius:8px;margin:0 .375rem}.tree-block.selected .block-icon,.tree-block.selected .block-name{color:inherit}.block-indent{width:20px;height:1px;background:#ddd;margin-left:10px}.block-icon{font-size:.875rem}.block-name{flex:1;font-size:.75rem;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-block-btn{display:flex;align-items:center;gap:.375rem;width:calc(100% - 1.5rem);margin:.375rem .75rem .5rem 2rem;padding:.375rem .5rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:.75rem;color:#005bd3;transition:all .2s}.add-block-btn:hover{background:#f0f5ff;color:#004299}.add-icon{font-size:.875rem;font-weight:600}.add-icon-circle{display:flex;align-items:center;justify-content:center}.add-section-area{padding:.75rem;border-top:1px solid #e0e0e0;position:relative}.add-section-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;padding:.625rem;border:none;border-radius:6px;background:transparent;cursor:pointer;font-size:.8125rem;font-weight:500;color:#005bd3;transition:all .2s}.add-section-btn:hover{background:#f0f5ff}.section-picker{position:absolute;bottom:100%;left:.75rem;right:.75rem;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 -4px 12px #0000001a;max-height:300px;overflow-y:auto;z-index:100}.picker-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem;border:none;border-bottom:1px solid #f0f0f0;background:#fff;cursor:pointer;text-align:left;transition:background .2s}.picker-item:last-child{border-bottom:none}.picker-item:hover{background:#f5f5f5}.picker-icon{font-family:Material Icons,sans-serif;font-size:1.5rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.picker-info{display:flex;flex-direction:column;gap:.125rem}.picker-name{font-size:.8125rem;font-weight:500;color:#333}.picker-desc{font-size:.6875rem;color:#888}.block-picker-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.block-picker{background:#fff;border-radius:8px;width:320px;max-height:400px;display:flex;flex-direction:column;box-shadow:0 8px 32px #0003}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0}.picker-header h3{margin:0;font-size:.9375rem;font-weight:600}.picker-content{flex:1;overflow-y:auto;padding:.5rem}.picker-content .picker-item{border:1px solid #e0e0e0;border-radius:6px;margin-bottom:.5rem}.picker-content .picker-item:hover{border-color:#005bd3}.picker-category{border-bottom:1px solid #f0f0f0}.picker-category:last-child{border-bottom:none}.picker-category-label{padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:600;color:#888}.picker-empty{padding:2rem;text-align:center;color:#888;font-size:.875rem}.canvas-area{display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#fff;border-bottom:1px solid #e0e0e0}.toolbar-left,.toolbar-right{display:flex;gap:.5rem}.toolbar-btn{padding:.375rem .75rem;border:1px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;transition:all .2s}.toolbar-btn:hover:not(:disabled){background:#f0f2f5}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.preview-btn,.publish-btn{background:#303030;color:#fff;border-color:#303030;border-radius:8px}.preview-btn:hover,.publish-btn:hover:not(:disabled){background:#1a1a1a!important}.back-btn{border-color:transparent;background:transparent}.section-count{font-size:.875rem;color:#666}.page-title{font-size:.9375rem;font-weight:600;color:#333;margin-right:.75rem}.page-title-link{text-decoration:none;color:inherit}.page-title-link:hover{text-decoration:underline}.status-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.6875rem;font-weight:500;text-transform:capitalize;background:#ffeaa7;color:#856404}.status-badge.published{background:#b4fed3;color:#0d542b}.dirty-indicator{margin-left:.75rem;font-size:.8125rem;color:#e67e22;font-weight:500}.canvas{flex:1;overflow-y:auto;padding:2rem;position:relative}.canvas.preview-mode{padding:0;background:#fff}.preview-iframe{width:100%;height:100%;border:none;position:absolute;inset:0}.canvas.preview-mode .section-outer{margin:0}.canvas.preview-mode .section-wrapper{border:none;border-radius:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#666;text-align:center}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h3{margin:0 0 .5rem;color:#333}.empty-state p{margin:0;font-size:.875rem}.section-outer{position:relative;margin-bottom:0}.section-wrapper{border:1px solid transparent;border-radius:0;overflow:hidden;transition:border-color .2s;background:#fff}.section-outer:hover .section-wrapper,.section-outer.selected .section-wrapper{border-color:#005bd366}.section-controls{position:absolute;top:-20px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.14rem .75rem;background:#005bd3;color:#fff;font-size:.75rem;border-radius:8px 8px 0 0;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}.section-outer:hover .section-controls,.section-outer.selected .section-controls{opacity:1;pointer-events:auto}.section-outer:hover .section-wrapper,.section-outer.selected .section-wrapper{border-top-left-radius:0;border-top-right-radius:0}.section-label{font-weight:500}.section-actions{display:flex;gap:.25rem}.action-btn{padding:.15rem .5rem;border:none;border-radius:4px;background:#ffffff26;color:#fff;cursor:pointer;font-size:.6rem}.action-btn:hover{background:#ffffff4d}.action-btn.delete:hover{background:#e74c3c}.material-icon{font-family:Material Icons,sans-serif;font-size:.75rem;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.properties-panel{background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column;overflow:hidden}.properties-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0}.properties-header h3{margin:0;font-size:1rem;font-weight:600}.editable-name{cursor:pointer;display:flex;align-items:center;gap:.375rem;border-radius:4px;padding:.125rem .25rem;margin:-.125rem -.25rem;transition:background .2s}.editable-name:hover{background:#f0f2f5}.edit-icon{opacity:0;color:#999;transition:opacity .2s;display:flex;flex-shrink:0}.editable-name:hover .edit-icon{opacity:1}.name-edit-input{flex:1;padding:.375rem .5rem;border:1px solid #005bd3;border-radius:8px;font-size:1rem;font-weight:600;outline:none}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#666}.more-menu-btn{border:none;background:none;cursor:pointer;color:#616161;padding:.25rem;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s}.more-menu-btn:hover{background:#f0f2f5;color:#303030}.properties-content{flex:1;overflow-y:auto;padding:1rem}.property-group{margin-bottom:0;padding:1rem 0;border-top:1px solid #e0e0e0}.property-group:first-child{border-top:none}.group-title{display:flex;align-items:center;gap:.375rem;width:100%;padding:0;margin:0 0 .75rem;border:none;background:none;font-size:.8125rem;font-weight:600;color:#303030;cursor:pointer}.group-title:hover{color:#333}.group-title:focus-visible{outline:2px solid #4a90d9;outline-offset:2px;border-radius:2px}.group-title-text{flex:1;text-align:left}.group-toggle-icon{font-size:.5rem;transition:transform .2s;display:inline-block}.group-toggle-icon.collapsed{transform:rotate(-90deg)}.property-field{margin-bottom:1rem}.property-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.375rem;color:#616161}.property-input,.property-select,.property-textarea{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.property-input:focus,.property-select:focus,.property-textarea:focus{outline:none;border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.property-textarea{resize:vertical;font-family:monospace;font-size:.75rem}.color-field{display:flex;gap:.5rem}.color-picker{width:40px;height:36px;padding:2px;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer}.color-text{flex:1}.no-selection{display:flex;align-items:center;justify-content:center;height:100%;color:#666;text-align:center;padding:2rem}.no-selection p{margin:0;font-size:.875rem}.panel-tabs{display:flex;border-bottom:1px solid #e0e0e0}.panel-tab{flex:1;padding:.75rem;border:none;border-bottom:2px solid transparent;background:#fff;cursor:pointer;font-size:.75rem;font-weight:500;color:#666;transition:all .2s}.panel-tab:hover{background:#f8f9fa;color:#303030}.panel-tab.active{background:#fff;color:#303030;border-bottom:2px solid #005bd3}.blocks-list{flex:1;overflow-y:auto;padding:1rem}.slot-group{margin-bottom:1.5rem}.slot-title{font-size:.75rem;font-weight:600;color:#616161;margin:0 0 .5rem}.block-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.375rem;cursor:pointer;transition:all .2s}.block-item:hover{border-color:#005bd3;background:#f8f9fa}.block-item.selected{border-color:#005bd3;background:#005bd3;color:#fff}.block-item.selected .block-icon,.block-item.selected .block-name{color:inherit}.block-icon{font-size:1rem}.block-name{flex:1;font-size:.8rem;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-actions{display:flex;gap:.125rem;opacity:0;transition:opacity .2s}.block-item:hover .block-actions{opacity:1}.mini-btn{padding:.125rem .375rem;border:none;border-radius:3px;background:#e0e0e0;cursor:pointer;font-size:.75rem;color:#666}.mini-btn:hover{background:#d0d0d0}.mini-btn.delete:hover{background:#e74c3c;color:#fff}.empty-slot{padding:.75rem;text-align:center;color:#999;font-size:.75rem;background:#f8f9fa;border:1px dashed #ddd;border-radius:4px}.no-slots{padding:2rem;text-align:center;color:#666}.no-slots p{margin:0;font-size:.875rem}.delete-block-btn{width:auto;padding:0;margin-top:1rem;border:none;border-radius:0;background:transparent;color:#d72c0d;cursor:pointer;font-size:.875rem;font-weight:500;transition:color .2s}.delete-block-btn:hover{background:transparent;color:#bc2200;text-decoration:underline}.toggle-field{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:.875rem;color:#303030}.toggle-switch{position:relative;display:inline-flex;cursor:pointer}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:36px;height:20px;background:#b5b5b5;border-radius:10px;position:relative;transition:background .2s}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.toggle-input:checked+.toggle-track{background:#008060}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(16px)}.toggle-input:focus-visible+.toggle-track{outline:2px solid #005bd3;outline-offset:2px}.toggle-description{display:block;font-size:.75rem;color:#616161;margin-top:.25rem}.media-field{display:flex;flex-direction:column;gap:.5rem}.media-preview{position:relative;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.media-thumbnail{display:block;width:100%;max-height:160px;object-fit:cover;background:#f0f2f5}.media-remove-btn{position:absolute;top:.25rem;right:.25rem;width:22px;height:22px;border:none;border-radius:50%;background:#0009;color:#fff;cursor:pointer;font-size:.875rem;line-height:1;display:flex;align-items:center;justify-content:center}.media-remove-btn:hover{background:#d72c0d}.media-browse-btn{padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;cursor:pointer;font-size:.8125rem;color:#303030;transition:all .15s}.media-browse-btn:hover{background:#f0f2f5;border-color:#999}.media-url-input{font-size:.75rem;color:#616161}.video-preview{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#1a1a1a}.video-indicator{color:#fff;display:flex;align-items:center;flex-shrink:0}.video-url-text{flex:1;color:#ccc;font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-preview .media-remove-btn{position:static;flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], previewFrame: [{ type: i0.ViewChild, args: ['previewFrame', { isSignal: true }] }], nameInput: [{ type: i0.ViewChild, args: ['nameInput', { isSignal: true }] }] } });
 
 /**
  * Page manager component for listing, creating, and managing pages
@@ -7447,6 +7138,9 @@ class PageManagerComponent {
             },
         });
     }
+    openSetup() {
+        this.navigation.navigate({ type: 'setup' });
+    }
     openCreateDialog() {
         this.showCreateDialog.set(true);
         this.newPageTitle.set('');
@@ -7538,14 +7232,19 @@ class PageManagerComponent {
             year: 'numeric',
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: PageManagerComponent, isStandalone: true, selector: "lib-page-manager", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PageManagerComponent, isStandalone: true, selector: "lib-page-manager", ngImport: i0, template: `
     <div class="page-manager">
       <header class="manager-header">
         <h1>Pages</h1>
-        <button class="btn-primary" (click)="openCreateDialog()">
-          + New Page
-        </button>
+        <div class="header-actions">
+          <button class="btn-secondary" (click)="openSetup()">
+            Setup
+          </button>
+          <button class="btn-primary" (click)="openCreateDialog()">
+            + New Page
+          </button>
+        </div>
       </header>
 
       @if (isLoading()) {
@@ -7559,7 +7258,7 @@ class PageManagerComponent {
         </div>
       } @else if (pages().length === 0) {
         <div class="empty-state">
-          <div class="empty-icon"><svg width="40" height="40" viewBox="0 0 20 20" fill="currentColor"><path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm0 2h4v3a1 1 0 001 1h3v8H6V4zm6 .414L14.586 7H12V4.414z"/></svg></div>
+          <div class="empty-icon">📄</div>
           <h2>No pages yet</h2>
           <p>Create your first page to get started</p>
           <button class="btn-primary" (click)="openCreateDialog()">
@@ -7591,21 +7290,21 @@ class PageManagerComponent {
                   (click)="editPage(page.id); $event.stopPropagation()"
                   title="Edit"
                 >
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M14.846 1.403a2.45 2.45 0 013.464 3.464l-1.241 1.24-3.464-3.463 1.241-1.241zm-2.654 2.654L2 14.25V17.5h3.464L15.656 7.308l-3.464-3.25z"/></svg>
+                  ✏️
                 </button>
                 <button
                   class="action-btn"
                   (click)="duplicatePage(page.id, $event)"
                   title="Duplicate"
                 >
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M8 2a2 2 0 00-2 2v10a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H8zm0 2h6v10H8V4zM4 6a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2h-2a4 4 0 01-4-4V6H4z"/></svg>
+                  📋
                 </button>
                 <button
                   class="action-btn delete"
                   (click)="confirmDelete(page, $event)"
                   title="Delete"
                 >
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M8 3a1 1 0 00-1 1H5a1 1 0 000 2h10a1 1 0 100-2h-2a1 1 0 00-1-1H8zm-2 4h8l-.5 8.5a1 1 0 01-1 .5h-5a1 1 0 01-1-.5L6 7z"/></svg>
+                  🗑️
                 </button>
               </span>
             </div>
@@ -7686,17 +7385,22 @@ class PageManagerComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;min-height:100vh;background:#f6f6f7;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.page-manager{max-width:1200px;margin:0 auto;padding:2rem}.manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.manager-header h1{margin:0;font-size:1.5rem;font-weight:600;color:#303030}.btn-primary{padding:.625rem 1.25rem;border:none;border-radius:8px;background:#303030;color:#fff;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#1a1a1a}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:.625rem 1.25rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;color:#303030;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s}.btn-secondary:hover{background:#f6f6f7}.btn-danger{padding:.625rem 1.25rem;border:none;border-radius:8px;background:#d72c0d;color:#fff;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s}.btn-danger:hover{background:#bc2200}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;background:#fff;border-radius:12px;text-align:center;box-shadow:0 1px #0000000d;border:1px solid #e3e3e3}.empty-icon{margin-bottom:1rem;color:#8c9196;display:flex;align-items:center;justify-content:center}.empty-state h2{margin:0 0 .5rem;color:#303030;font-size:1.125rem}.empty-state p{margin:0 0 1.5rem;color:#8c9196;font-size:.8125rem}.error-state{color:#d72c0d}.pages-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px #0000000d;border:1px solid #e3e3e3}.table-header,.table-row{display:grid;grid-template-columns:1fr 150px 100px 150px 120px;gap:1rem;padding:.875rem 1.5rem;align-items:center}.table-header{background:#f6f6f7;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#8c9196;letter-spacing:.3px;border-bottom:1px solid #e3e3e3}.table-row{border-top:1px solid #f6f6f7;cursor:pointer;transition:background .15s}.table-row:first-of-type{border-top:none}.table-row:hover{background:#f6f6f7}.col-title{font-weight:500;color:#303030;font-size:.8125rem}.col-slug{font-size:.75rem;color:#8c9196;font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.status-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.75rem;font-weight:500;text-transform:capitalize;background:#ffd6a4;color:#b98900}.status-badge.published{background:#aee9d1;color:#0d542b}.col-updated{font-size:.8125rem;color:#8c9196}.col-actions{display:flex;gap:.375rem}.action-btn{padding:.375rem;border:none;border-radius:8px;background:transparent;cursor:pointer;color:#8c9196;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}.action-btn:hover{background:#f6f6f7;color:#303030}.action-btn.delete:hover{background:#fef2f0;color:#d72c0d}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;width:100%;max-width:480px;box-shadow:0 8px 32px #0003}.dialog-small{max-width:400px}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #e3e3e3}.dialog-header h2{margin:0;font-size:1.125rem;font-weight:600;color:#303030}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#8c9196;padding:.25rem;line-height:1;border-radius:8px;transition:all .15s}.close-btn:hover{color:#303030;background:#f6f6f7}.dialog-content{padding:1.5rem}.dialog-content p{margin:0 0 .5rem;color:#303030;font-size:.8125rem}.dialog-content .warning{color:#d72c0d;font-size:.8125rem}.form-field{margin-bottom:1.25rem}.form-field label{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:500;color:#303030}.form-field input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;color:#303030;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.form-field input:focus{outline:none;border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.form-field input::placeholder{color:#8c9196}.slug-field{display:flex;align-items:center;border:1px solid #c9cccf;border-radius:8px;overflow:hidden;transition:border-color .15s,box-shadow .15s}.slug-field:focus-within{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.slug-prefix{padding:.5rem .75rem;background:#f6f6f7;color:#8c9196;font-size:.8125rem;font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;border-right:1px solid #e3e3e3}.slug-field input{border:none;border-radius:0}.slug-field input:focus{border-color:transparent;box-shadow:none}.form-error{margin-bottom:1rem;padding:.75rem;background:#fef2f0;border-radius:8px;color:#d72c0d;font-size:.8125rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid #e3e3e3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:100vh;background:#f0f2f5}.page-manager{max-width:1200px;margin:0 auto;padding:2rem}.manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header-actions{display:flex;gap:.75rem;align-items:center}.manager-header h1{margin:0;font-size:1.75rem;font-weight:600;color:#1a1a2e}.btn-primary{padding:.75rem 1.5rem;border:none;border-radius:6px;background:#1a1a2e;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2a2a3e}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{padding:.75rem 1.5rem;border:1px solid #e0e0e0;border-radius:6px;background:#fff;color:#333;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#f5f5f5}.btn-danger{padding:.75rem 1.5rem;border:none;border-radius:6px;background:#e74c3c;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.btn-danger:hover{background:#c0392b}.btn-danger:disabled{opacity:.6;cursor:not-allowed}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;background:#fff;border-radius:8px;text-align:center}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h2{margin:0 0 .5rem;color:#333}.empty-state p{margin:0 0 1.5rem;color:#666}.error-state{color:#e74c3c}.pages-table{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.table-header,.table-row{display:grid;grid-template-columns:1fr 150px 100px 150px 120px;gap:1rem;padding:1rem 1.5rem;align-items:center}.table-header{background:#f8f9fa;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:.5px}.table-row{border-top:1px solid #e0e0e0;cursor:pointer;transition:background .2s}.table-row:hover{background:#f8f9fa}.col-title{font-weight:500;color:#333}.col-slug{font-size:.8125rem;color:#666;font-family:monospace}.status-badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500;text-transform:capitalize;background:#ffeaa7;color:#856404}.status-badge.published{background:#d4edda;color:#155724}.col-updated{font-size:.8125rem;color:#666}.col-actions{display:flex;gap:.5rem}.action-btn{padding:.375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:1rem;transition:background .2s}.action-btn:hover{background:#e0e0e0}.action-btn.delete:hover{background:#fde2e2}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:8px;width:100%;max-width:480px;box-shadow:0 8px 32px #0003}.dialog-small{max-width:400px}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0}.dialog-header h2{margin:0;font-size:1.25rem;font-weight:600}.close-btn{border:none;background:none;font-size:1.5rem;cursor:pointer;color:#666;padding:0;line-height:1}.close-btn:hover{color:#333}.dialog-content{padding:1.5rem}.dialog-content p{margin:0 0 .5rem;color:#333}.dialog-content .warning{color:#e74c3c;font-size:.875rem}.form-field{margin-bottom:1.25rem}.form-field label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-field input{width:100%;padding:.75rem;border:1px solid #e0e0e0;border-radius:6px;font-size:.875rem;transition:border-color .2s}.form-field input:focus{outline:none;border-color:#1a1a2e}.slug-field{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}.slug-field:focus-within{border-color:#1a1a2e}.slug-prefix{padding:.75rem;background:#f5f5f5;color:#666;font-size:.875rem;font-family:monospace}.slug-field input{border:none;border-radius:0}.slug-field input:focus{border-color:transparent}.form-error{margin-bottom:1rem;padding:.75rem;background:#fde2e2;border-radius:6px;color:#e74c3c;font-size:.875rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1.5rem;border-top:1px solid #e0e0e0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PageManagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageManagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-page-manager', template: `
     <div class="page-manager">
       <header class="manager-header">
         <h1>Pages</h1>
-        <button class="btn-primary" (click)="openCreateDialog()">
-          + New Page
-        </button>
+        <div class="header-actions">
+          <button class="btn-secondary" (click)="openSetup()">
+            Setup
+          </button>
+          <button class="btn-primary" (click)="openCreateDialog()">
+            + New Page
+          </button>
+        </div>
       </header>
 
       @if (isLoading()) {
@@ -7710,7 +7414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         </div>
       } @else if (pages().length === 0) {
         <div class="empty-state">
-          <div class="empty-icon"><svg width="40" height="40" viewBox="0 0 20 20" fill="currentColor"><path d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm0 2h4v3a1 1 0 001 1h3v8H6V4zm6 .414L14.586 7H12V4.414z"/></svg></div>
+          <div class="empty-icon">📄</div>
           <h2>No pages yet</h2>
           <p>Create your first page to get started</p>
           <button class="btn-primary" (click)="openCreateDialog()">
@@ -7742,21 +7446,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                   (click)="editPage(page.id); $event.stopPropagation()"
                   title="Edit"
                 >
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M14.846 1.403a2.45 2.45 0 013.464 3.464l-1.241 1.24-3.464-3.463 1.241-1.241zm-2.654 2.654L2 14.25V17.5h3.464L15.656 7.308l-3.464-3.25z"/></svg>
+                  ✏️
                 </button>
                 <button
                   class="action-btn"
                   (click)="duplicatePage(page.id, $event)"
                   title="Duplicate"
                 >
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M8 2a2 2 0 00-2 2v10a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H8zm0 2h6v10H8V4zM4 6a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2h-2a4 4 0 01-4-4V6H4z"/></svg>
+                  📋
                 </button>
                 <button
                   class="action-btn delete"
                   (click)="confirmDelete(page, $event)"
                   title="Delete"
                 >
-                  <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M8 3a1 1 0 00-1 1H5a1 1 0 000 2h10a1 1 0 100-2h-2a1 1 0 00-1-1H8zm-2 4h8l-.5 8.5a1 1 0 01-1 .5h-5a1 1 0 01-1-.5L6 7z"/></svg>
+                  🗑️
                 </button>
               </span>
             </div>
@@ -7837,1111 +7541,287 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         </div>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-height:100vh;background:#f6f6f7;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.page-manager{max-width:1200px;margin:0 auto;padding:2rem}.manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.manager-header h1{margin:0;font-size:1.5rem;font-weight:600;color:#303030}.btn-primary{padding:.625rem 1.25rem;border:none;border-radius:8px;background:#303030;color:#fff;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s}.btn-primary:hover{background:#1a1a1a}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:.625rem 1.25rem;border:1px solid #c9cccf;border-radius:8px;background:#fff;color:#303030;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s}.btn-secondary:hover{background:#f6f6f7}.btn-danger{padding:.625rem 1.25rem;border:none;border-radius:8px;background:#d72c0d;color:#fff;font-size:.8125rem;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s}.btn-danger:hover{background:#bc2200}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;background:#fff;border-radius:12px;text-align:center;box-shadow:0 1px #0000000d;border:1px solid #e3e3e3}.empty-icon{margin-bottom:1rem;color:#8c9196;display:flex;align-items:center;justify-content:center}.empty-state h2{margin:0 0 .5rem;color:#303030;font-size:1.125rem}.empty-state p{margin:0 0 1.5rem;color:#8c9196;font-size:.8125rem}.error-state{color:#d72c0d}.pages-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px #0000000d;border:1px solid #e3e3e3}.table-header,.table-row{display:grid;grid-template-columns:1fr 150px 100px 150px 120px;gap:1rem;padding:.875rem 1.5rem;align-items:center}.table-header{background:#f6f6f7;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#8c9196;letter-spacing:.3px;border-bottom:1px solid #e3e3e3}.table-row{border-top:1px solid #f6f6f7;cursor:pointer;transition:background .15s}.table-row:first-of-type{border-top:none}.table-row:hover{background:#f6f6f7}.col-title{font-weight:500;color:#303030;font-size:.8125rem}.col-slug{font-size:.75rem;color:#8c9196;font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.status-badge{display:inline-block;padding:.125rem .5rem;border-radius:10px;font-size:.75rem;font-weight:500;text-transform:capitalize;background:#ffd6a4;color:#b98900}.status-badge.published{background:#aee9d1;color:#0d542b}.col-updated{font-size:.8125rem;color:#8c9196}.col-actions{display:flex;gap:.375rem}.action-btn{padding:.375rem;border:none;border-radius:8px;background:transparent;cursor:pointer;color:#8c9196;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}.action-btn:hover{background:#f6f6f7;color:#303030}.action-btn.delete:hover{background:#fef2f0;color:#d72c0d}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;width:100%;max-width:480px;box-shadow:0 8px 32px #0003}.dialog-small{max-width:400px}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #e3e3e3}.dialog-header h2{margin:0;font-size:1.125rem;font-weight:600;color:#303030}.close-btn{border:none;background:none;font-size:1.25rem;cursor:pointer;color:#8c9196;padding:.25rem;line-height:1;border-radius:8px;transition:all .15s}.close-btn:hover{color:#303030;background:#f6f6f7}.dialog-content{padding:1.5rem}.dialog-content p{margin:0 0 .5rem;color:#303030;font-size:.8125rem}.dialog-content .warning{color:#d72c0d;font-size:.8125rem}.form-field{margin-bottom:1.25rem}.form-field label{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:500;color:#303030}.form-field input{width:100%;padding:.5rem .75rem;border:1px solid #c9cccf;border-radius:8px;font-size:.8125rem;font-family:inherit;color:#303030;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.form-field input:focus{outline:none;border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.form-field input::placeholder{color:#8c9196}.slug-field{display:flex;align-items:center;border:1px solid #c9cccf;border-radius:8px;overflow:hidden;transition:border-color .15s,box-shadow .15s}.slug-field:focus-within{border-color:#005bd3;box-shadow:0 0 0 1px #005bd3}.slug-prefix{padding:.5rem .75rem;background:#f6f6f7;color:#8c9196;font-size:.8125rem;font-family:SF Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;border-right:1px solid #e3e3e3}.slug-field input{border:none;border-radius:0}.slug-field input:focus{border-color:transparent;box-shadow:none}.form-error{margin-bottom:1rem;padding:.75rem;background:#fef2f0;border-radius:8px;color:#d72c0d;font-size:.8125rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;border-top:1px solid #e3e3e3}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-height:100vh;background:#f0f2f5}.page-manager{max-width:1200px;margin:0 auto;padding:2rem}.manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header-actions{display:flex;gap:.75rem;align-items:center}.manager-header h1{margin:0;font-size:1.75rem;font-weight:600;color:#1a1a2e}.btn-primary{padding:.75rem 1.5rem;border:none;border-radius:6px;background:#1a1a2e;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2a2a3e}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{padding:.75rem 1.5rem;border:1px solid #e0e0e0;border-radius:6px;background:#fff;color:#333;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#f5f5f5}.btn-danger{padding:.75rem 1.5rem;border:none;border-radius:6px;background:#e74c3c;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s}.btn-danger:hover{background:#c0392b}.btn-danger:disabled{opacity:.6;cursor:not-allowed}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;background:#fff;border-radius:8px;text-align:center}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h2{margin:0 0 .5rem;color:#333}.empty-state p{margin:0 0 1.5rem;color:#666}.error-state{color:#e74c3c}.pages-table{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.table-header,.table-row{display:grid;grid-template-columns:1fr 150px 100px 150px 120px;gap:1rem;padding:1rem 1.5rem;align-items:center}.table-header{background:#f8f9fa;font-size:.75rem;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:.5px}.table-row{border-top:1px solid #e0e0e0;cursor:pointer;transition:background .2s}.table-row:hover{background:#f8f9fa}.col-title{font-weight:500;color:#333}.col-slug{font-size:.8125rem;color:#666;font-family:monospace}.status-badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500;text-transform:capitalize;background:#ffeaa7;color:#856404}.status-badge.published{background:#d4edda;color:#155724}.col-updated{font-size:.8125rem;color:#666}.col-actions{display:flex;gap:.5rem}.action-btn{padding:.375rem;border:none;border-radius:4px;background:transparent;cursor:pointer;font-size:1rem;transition:background .2s}.action-btn:hover{background:#e0e0e0}.action-btn.delete:hover{background:#fde2e2}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:8px;width:100%;max-width:480px;box-shadow:0 8px 32px #0003}.dialog-small{max-width:400px}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0}.dialog-header h2{margin:0;font-size:1.25rem;font-weight:600}.close-btn{border:none;background:none;font-size:1.5rem;cursor:pointer;color:#666;padding:0;line-height:1}.close-btn:hover{color:#333}.dialog-content{padding:1.5rem}.dialog-content p{margin:0 0 .5rem;color:#333}.dialog-content .warning{color:#e74c3c;font-size:.875rem}.form-field{margin-bottom:1.25rem}.form-field label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-field input{width:100%;padding:.75rem;border:1px solid #e0e0e0;border-radius:6px;font-size:.875rem;transition:border-color .2s}.form-field input:focus{outline:none;border-color:#1a1a2e}.slug-field{display:flex;align-items:center;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}.slug-field:focus-within{border-color:#1a1a2e}.slug-prefix{padding:.75rem;background:#f5f5f5;color:#666;font-size:.875rem;font-family:monospace}.slug-field input{border:none;border-radius:0}.slug-field input:focus{border-color:transparent}.form-error{margin-bottom:1rem;padding:.75rem;background:#fde2e2;border-radius:6px;color:#e74c3c;font-size:.875rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1.5rem;border-top:1px solid #e0e0e0}\n"] }]
         }] });
 
-class LicenseGuardComponent {
-    shopAuthService = inject(ShopAuthService);
-    showExpirationWarning = input(true, ...(ngDevMode ? [{ debugName: "showExpirationWarning" }] : []));
-    subscribe = output();
-    renew = output();
-    reauth = output();
-    retry = output();
-    onSubscribe() {
-        this.subscribe.emit();
-    }
-    onRenew() {
-        this.renew.emit();
-    }
-    onReauth() {
-        this.reauth.emit();
-    }
-    onRetry() {
-        this.retry.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LicenseGuardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LicenseGuardComponent, isStandalone: true, selector: "lib-license-guard", inputs: { showExpirationWarning: { classPropertyName: "showExpirationWarning", publicName: "showExpirationWarning", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subscribe: "subscribe", renew: "renew", reauth: "reauth", retry: "retry" }, ngImport: i0, template: `
-    @if (shopAuthService.loading()) {
-      <div class="license-loading">
-        <div class="spinner"></div>
-        <span>Verificando acceso...</span>
-      </div>
-    } @else if (!shopAuthService.hasAccess()) {
-      <div class="license-paywall">
-        <div class="paywall-content">
-          <h2>Acceso restringido</h2>
-
-          @switch (shopAuthService.error()?.code) {
-            @case ('LICENSE_EXPIRED') {
-              <p>Tu licencia ha expirado.</p>
-              <button class="btn-primary" (click)="onRenew()">Renovar licencia</button>
-            }
-            @case ('NO_ACCESS') {
-              <p>No tienes una licencia activa.</p>
-              <button class="btn-primary" (click)="onSubscribe()">Obtener licencia</button>
-            }
-            @case ('SHOP_NOT_FOUND') {
-              <p>Tienda no encontrada.</p>
-              <button class="btn-secondary" (click)="onRetry()">Reintentar</button>
-            }
-            @case ('USER_INACTIVE') {
-              <p>No tienes permisos para acceder.</p>
-            }
-            @case ('NOT_AUTHENTICATED') {
-              <p>Sesion no valida.</p>
-              <button class="btn-primary" (click)="onReauth()">Iniciar sesion</button>
-            }
-            @case ('UNKNOWN_ERROR') {
-              <p>Error de conexion.</p>
-              <button class="btn-secondary" (click)="onRetry()">Reintentar</button>
-            }
-            @default {
-              <p>No tienes acceso a esta funcionalidad.</p>
-              <button class="btn-primary" (click)="onSubscribe()">Ver planes</button>
+/**
+ * Read-only GraphQL client for the Shopify Storefront API.
+ * Uses a Storefront Access Token (public, non-secret) instead of Admin API credentials.
+ */
+class StorefrontGraphQLClient {
+    http = inject(HttpClient);
+    config = inject(STOREFRONT_CONFIG);
+    query(query, variables) {
+        const url = this.config.proxyUrl
+            ? this.config.proxyUrl
+            : `https://${this.config.shopDomain}/api/${this.config.apiVersion}/graphql.json`;
+        const request = { query, variables };
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        if (!this.config.proxyUrl) {
+            headers['X-Shopify-Storefront-Access-Token'] = this.config.storefrontAccessToken;
+        }
+        return this.http.post(url, request, { headers }).pipe(map$1(response => this.handleResponse(response)), catchError(error => this.handleError(error)));
+    }
+    handleResponse(response) {
+        if (response.errors && response.errors.length > 0) {
+            throw {
+                code: 'GRAPHQL_ERROR',
+                message: response.errors[0].message,
+                errors: response.errors,
+            };
+        }
+        if (!response.data) {
+            throw {
+                code: 'EMPTY_RESPONSE',
+                message: 'GraphQL response contains no data',
+            };
+        }
+        return response.data;
+    }
+    handleError(error) {
+        let errorCode = 'UNKNOWN_ERROR';
+        let errorMessage = 'An unknown error occurred';
+        if (typeof ErrorEvent !== 'undefined' && error.error instanceof ErrorEvent) {
+            errorCode = 'NETWORK_ERROR';
+            errorMessage = error.error.message;
+        }
+        else {
+            switch (error.status) {
+                case 401:
+                    errorCode = 'UNAUTHORIZED';
+                    errorMessage = 'Invalid or expired storefront access token';
+                    break;
+                case 402:
+                    errorCode = 'PAYMENT_REQUIRED';
+                    errorMessage = 'Storefront API access requires a Shopify plan';
+                    break;
+                case 429:
+                    errorCode = 'RATE_LIMIT';
+                    errorMessage = 'Rate limit exceeded';
+                    break;
+                case 500:
+                case 502:
+                case 503:
+                case 504:
+                    errorCode = 'SERVER_ERROR';
+                    errorMessage = 'Shopify server error';
+                    break;
+                default:
+                    errorCode = 'HTTP_ERROR';
+                    errorMessage = `HTTP ${error.status}: ${error.statusText}`;
             }
-          }
-        </div>
-      </div>
-    } @else {
-      <ng-content></ng-content>
-
-      @if (shopAuthService.isLicenseExpiringSoon() && showExpirationWarning()) {
-        <div class="expiration-warning">
-          <span class="warning-icon">!</span>
-          <span>Tu licencia expira en {{ shopAuthService.daysRemaining() }} dias.</span>
-          <button class="btn-small" (click)="onRenew()">Renovar</button>
-        </div>
-      }
+        }
+        return throwError(() => ({
+            code: errorCode,
+            message: errorMessage,
+            status: error.status,
+            original: error,
+        }));
     }
-  `, isInline: true, styles: [".license-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px}.spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.license-paywall{display:flex;align-items:center;justify-content:center;min-height:300px;padding:24px;background:#f9fafb;border-radius:8px}.paywall-content{text-align:center;max-width:400px}.paywall-content h2{margin:0 0 12px;font-size:24px;font-weight:600;color:#111827}.paywall-content p{margin:0 0 24px;color:#6b7280}.btn-primary{padding:12px 24px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2563eb}.btn-secondary{padding:12px 24px;background:#6b7280;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#4b5563}.btn-small{padding:6px 12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.btn-small:hover{background:#0000000d}.expiration-warning{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 24px;background:#fef3c7;color:#92400e;font-size:14px;z-index:1000}.warning-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:#f59e0b;color:#fff;border-radius:50%;font-size:12px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontGraphQLClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontGraphQLClient, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LicenseGuardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-license-guard', standalone: true, imports: [CommonModule], template: `
-    @if (shopAuthService.loading()) {
-      <div class="license-loading">
-        <div class="spinner"></div>
-        <span>Verificando acceso...</span>
-      </div>
-    } @else if (!shopAuthService.hasAccess()) {
-      <div class="license-paywall">
-        <div class="paywall-content">
-          <h2>Acceso restringido</h2>
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontGraphQLClient, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-          @switch (shopAuthService.error()?.code) {
-            @case ('LICENSE_EXPIRED') {
-              <p>Tu licencia ha expirado.</p>
-              <button class="btn-primary" (click)="onRenew()">Renovar licencia</button>
-            }
-            @case ('NO_ACCESS') {
-              <p>No tienes una licencia activa.</p>
-              <button class="btn-primary" (click)="onSubscribe()">Obtener licencia</button>
+const NAMESPACE = 'kustomizer';
+const INDEX_KEY = 'pages_index';
+/**
+ * Storefront API query for reading shop metafields.
+ * Uses `shop.metafield(namespace, key)` — the Storefront API equivalent
+ * of the Admin API's shop metafield query.
+ */
+const GET_SHOP_METAFIELD_QUERY = `
+  query GetShopMetafield($namespace: String!, $key: String!) {
+    shop {
+      metafield(namespace: $namespace, key: $key) {
+        value
+        type
+      }
+    }
+  }
+`;
+/**
+ * Read-only metafield repository using the Shopify Storefront API.
+ * Only works for metafields with MetafieldDefinitions that have `access.storefront: PUBLIC_READ`.
+ */
+class StorefrontMetafieldRepository {
+    client = inject(StorefrontGraphQLClient);
+    getMetafield(namespace, key) {
+        return this.client.query(GET_SHOP_METAFIELD_QUERY, { namespace, key }).pipe(map$1(response => response.shop.metafield));
+    }
+    getPageIndex() {
+        return this.getMetafield(NAMESPACE, INDEX_KEY).pipe(map$1(metafield => {
+            if (!metafield) {
+                return this.getDefaultIndex();
             }
-            @case ('SHOP_NOT_FOUND') {
-              <p>Tienda no encontrada.</p>
-              <button class="btn-secondary" (click)="onRetry()">Reintentar</button>
+            try {
+                const parsed = JSON.parse(metafield.value);
+                if (!parsed.pages || !Array.isArray(parsed.pages)) {
+                    throw new Error('Invalid index structure');
+                }
+                return parsed;
             }
-            @case ('USER_INACTIVE') {
-              <p>No tienes permisos para acceder.</p>
+            catch (error) {
+                throw {
+                    code: 'INDEX_PARSE_ERROR',
+                    message: 'Stored index data is corrupted',
+                    original: error,
+                };
             }
-            @case ('NOT_AUTHENTICATED') {
-              <p>Sesion no valida.</p>
-              <button class="btn-primary" (click)="onReauth()">Iniciar sesion</button>
+        }));
+    }
+    getPageMetafield(pageId) {
+        const key = `page_${pageId}`;
+        return this.getMetafield(NAMESPACE, key).pipe(map$1(metafield => {
+            if (!metafield) {
+                return null;
             }
-            @case ('UNKNOWN_ERROR') {
-              <p>Error de conexion.</p>
-              <button class="btn-secondary" (click)="onRetry()">Reintentar</button>
+            try {
+                return JSON.parse(metafield.value);
             }
-            @default {
-              <p>No tienes acceso a esta funcionalidad.</p>
-              <button class="btn-primary" (click)="onSubscribe()">Ver planes</button>
+            catch (error) {
+                throw {
+                    code: 'PAGE_PARSE_ERROR',
+                    message: 'Stored page data is corrupted',
+                    original: error,
+                };
             }
-          }
-        </div>
-      </div>
-    } @else {
-      <ng-content></ng-content>
-
-      @if (shopAuthService.isLicenseExpiringSoon() && showExpirationWarning()) {
-        <div class="expiration-warning">
-          <span class="warning-icon">!</span>
-          <span>Tu licencia expira en {{ shopAuthService.daysRemaining() }} dias.</span>
-          <button class="btn-small" (click)="onRenew()">Renovar</button>
-        </div>
-      }
+        }));
+    }
+    getDefaultIndex() {
+        return {
+            version: 0,
+            lastUpdated: new Date().toISOString(),
+            pages: [],
+        };
     }
-  `, styles: [".license-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px}.spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.license-paywall{display:flex;align-items:center;justify-content:center;min-height:300px;padding:24px;background:#f9fafb;border-radius:8px}.paywall-content{text-align:center;max-width:400px}.paywall-content h2{margin:0 0 12px;font-size:24px;font-weight:600;color:#111827}.paywall-content p{margin:0 0 24px;color:#6b7280}.btn-primary{padding:12px 24px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#2563eb}.btn-secondary{padding:12px 24px;background:#6b7280;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#4b5563}.btn-small{padding:6px 12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.btn-small:hover{background:#0000000d}.expiration-warning{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 24px;background:#fef3c7;color:#92400e;font-size:14px;z-index:1000}.warning-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:#f59e0b;color:#fff;border-radius:50%;font-size:12px;font-weight:700}\n"] }]
-        }], propDecorators: { showExpirationWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpirationWarning", required: false }] }], subscribe: [{ type: i0.Output, args: ["subscribe"] }], renew: [{ type: i0.Output, args: ["renew"] }], reauth: [{ type: i0.Output, args: ["reauth"] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontMetafieldRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontMetafieldRepository, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StorefrontMetafieldRepository, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class LoginComponent {
-    authService = inject(SupabaseAuthService);
-    router = inject(Router);
-    loginSuccess = output();
-    email = signal('', ...(ngDevMode ? [{ debugName: "email" }] : []));
-    password = signal('', ...(ngDevMode ? [{ debugName: "password" }] : []));
-    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    isSignUp = signal(false, ...(ngDevMode ? [{ debugName: "isSignUp" }] : []));
-    showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : []));
-    toggleMode() {
-        this.isSignUp.update(v => !v);
-        this.error.set(null);
+/**
+ * Read-only page repository using the Shopify Storefront API.
+ * Used by the public-storefront to read published pages without Admin API access.
+ */
+class PageStorefrontRepository {
+    metafieldRepo = inject(StorefrontMetafieldRepository);
+    getPages() {
+        return this.metafieldRepo.getPageIndex().pipe(map$1(index => index.pages
+            .map(entry => ({
+            id: entry.id,
+            slug: entry.slug,
+            title: entry.title,
+            status: entry.status,
+            updatedAt: entry.updatedAt,
+            publishedAt: entry.publishedAt,
+        }))
+            .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))));
     }
-    togglePassword() {
-        this.showPassword.update(v => !v);
+    getPublishedPages() {
+        return this.getPages().pipe(map$1(pages => pages.filter(p => p.status === 'published')));
     }
-    async onSubmit() {
-        if (!this.email() || !this.password()) {
-            this.error.set('Please fill in all fields');
-            return;
-        }
-        this.loading.set(true);
-        this.error.set(null);
-        try {
-            let result;
-            if (this.isSignUp()) {
-                result = await this.authService.signUp(this.email(), this.password());
-                if (result.success) {
-                    this.loginSuccess.emit();
-                    return;
-                }
-            }
-            else {
-                result = await this.authService.signInWithPassword(this.email(), this.password());
-                if (result.success) {
-                    this.loginSuccess.emit();
-                    return;
-                }
+    getPage(id) {
+        return this.metafieldRepo.getPageMetafield(id).pipe(map$1(page => {
+            if (!page) {
+                throw {
+                    code: 'PAGE_NOT_FOUND',
+                    message: `Page with id ${id} not found`,
+                };
             }
-            this.error.set(result.error ?? 'Authentication error');
-        }
-        finally {
-            this.loading.set(false);
-        }
+            return page;
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LoginComponent, isStandalone: true, selector: "lib-login", outputs: { loginSuccess: "loginSuccess" }, ngImport: i0, template: `
-    <div class="login-page">
-      <div class="login-bg">
-        <div class="login-gradient"></div>
-        <div class="login-pattern"></div>
-        <div class="login-glow login-glow--1"></div>
-        <div class="login-glow login-glow--2"></div>
-      </div>
-
-      <div class="login-container">
-        <div class="login-card">
-          <header class="login-header">
-            <div class="login-logo-wrap">
-              <img src="/img/kustomizerlogo.png" alt="Kustomizer" class="login-logo" />
-            </div>
-            <h1 class="login-title">{{ isSignUp() ? 'Create account' : 'Sign in' }}</h1>
-            <p class="login-subtitle">{{ isSignUp() ? 'Create your account to get started' : 'Sign in to your Kustomizer account' }}</p>
-          </header>
-
-          @if (error()) {
-            <div class="login-alert">
-              <svg viewBox="0 0 20 20" fill="currentColor" class="login-alert-icon">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
-              </svg>
-              <span>{{ error() }}</span>
-            </div>
-          }
-
-          <form (ngSubmit)="onSubmit()" class="login-form">
-            <div class="login-field">
-              <label for="email" class="login-label">Email</label>
-              <input
-                id="email"
-                type="email"
-                [(ngModel)]="email"
-                name="email"
-                placeholder=""
-                class="login-input"
-                required
-                [disabled]="loading()"
-              />
-            </div>
-
-            <div class="login-field">
-              <label for="password" class="login-label">Password</label>
-              <div class="login-input-wrap">
-                <input
-                  id="password"
-                  [type]="showPassword() ? 'text' : 'password'"
-                  [(ngModel)]="password"
-                  name="password"
-                  placeholder="••••••••"
-                  class="login-input"
-                  required
-                  [disabled]="loading()"
-                />
-                <button type="button" class="login-password-toggle" (click)="togglePassword()" tabindex="-1">
-                  @if (showPassword()) {
-                    <svg viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.745-1.745a10.029 10.029 0 003.3-4.38 1.651 1.651 0 000-1.185A10.004 10.004 0 009.999 3a9.956 9.956 0 00-4.744 1.194L3.28 2.22zM7.752 6.69l1.092 1.092a2.5 2.5 0 013.374 3.373l1.091 1.092a4 4 0 00-5.557-5.557z" clip-rule="evenodd" />
-                      <path d="M10.748 13.93l2.523 2.523a9.987 9.987 0 01-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186A10.007 10.007 0 012.839 6.02L6.07 9.252a4 4 0 004.678 4.678z" />
-                    </svg>
-                  } @else {
-                    <svg viewBox="0 0 20 20" fill="currentColor">
-                      <path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
-                      <path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
-                    </svg>
-                  }
-                </button>
-              </div>
-            </div>
-
-            <button type="submit" class="login-submit" [disabled]="loading()">
-              @if (loading()) {
-                <span class="login-spinner"></span>
-                {{ isSignUp() ? 'Creating...' : 'Signing in...' }}
-              } @else {
-                {{ isSignUp() ? 'Create account' : 'Sign in' }}
-              }
-            </button>
-          </form>
-
-          <div class="login-divider"><span>or</span></div>
-
-          <button type="button" class="login-switch" (click)="toggleMode()">
-            {{ isSignUp() ? 'Already have an account? Sign in' : "Don't have an account? Sign up" }}
-          </button>
-        </div>
-
-        <footer class="login-footer">
-          <span class="login-footer-text">Kustomizer</span>
-          <span class="login-footer-dot">·</span>
-          <a href="https://kustomizer.net" target="_blank" rel="noopener noreferrer" class="login-footer-link">kustomizer.net</a>
-        </footer>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.login-page{--k-primary: #bdf366;--k-primary-hover: #a8e050;--k-primary-text: #1a1f0e;--k-bg: #0c0f08;--k-card: #ffffff;--k-border: #e5e7eb;--k-border-focus: #bdf366;--k-text: #1f2937;--k-text-secondary: #6b7280;--k-text-muted: #9ca3af;--k-error: #dc2626;--k-error-bg: #fef2f2;--k-error-border: #fecaca;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--k-bg);color:var(--k-text);padding:20px;position:relative;overflow:hidden}.login-bg{position:fixed;inset:0;pointer-events:none;z-index:0}.login-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(189,243,102,.15),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(189,243,102,.08),transparent),linear-gradient(180deg,#0c0f08,#111a0a)}.login-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(189,243,102,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent)}.login-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.login-glow--1{width:400px;height:400px;background:#bdf3661f;top:-150px;left:50%;transform:translate(-50%);animation:glowPulse 8s ease-in-out infinite}.login-glow--2{width:300px;height:300px;background:#bdf3660f;bottom:-100px;right:-50px;animation:glowPulse2 10s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}@keyframes glowPulse2{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.login-container{position:relative;z-index:1;width:100%;max-width:400px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-card{background:var(--k-card);border-radius:20px;padding:40px 32px;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #bdf36633}.login-header{text-align:center;margin-bottom:32px}.login-logo-wrap{margin-bottom:20px}.login-logo{width:56px;height:56px;border-radius:12px}.login-title{font-size:24px;font-weight:600;color:var(--k-text);margin:0 0 8px;letter-spacing:-.3px}.login-subtitle{font-size:14px;color:var(--k-text-secondary);margin:0;font-weight:400}.login-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:20px;background:var(--k-error-bg);border:1px solid var(--k-error-border);color:var(--k-error)}.login-alert-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}.login-form{display:flex;flex-direction:column;gap:20px}.login-field{display:flex;flex-direction:column;gap:6px}.login-label{font-size:14px;font-weight:500;color:var(--k-text)}.login-input-wrap{position:relative;display:flex;align-items:center}.login-input{width:100%;background:var(--k-card);border:1px solid var(--k-border);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--k-text);outline:none;transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box}.login-input-wrap .login-input{padding-right:44px}.login-input::placeholder{color:var(--k-text-muted)}.login-input:hover{border-color:#d1d5db}.login-input:focus{border-color:var(--k-border-focus);box-shadow:0 0 0 3px #bdf36626}.login-input:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.7}.login-password-toggle{position:absolute;right:10px;background:none;border:none;padding:6px;cursor:pointer;color:var(--k-text-muted);transition:color .2s ease;display:flex;align-items:center;justify-content:center;border-radius:6px}.login-password-toggle:hover{color:var(--k-primary-text);background:#bdf36626}.login-password-toggle svg{width:18px;height:18px}.login-submit{width:100%;background:var(--k-primary);color:var(--k-primary-text);border:none;border-radius:10px;padding:14px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px}.login-submit:hover:not(:disabled){background:var(--k-primary-hover)}.login-submit:active:not(:disabled){transform:scale(.98)}.login-submit:disabled{opacity:.6;cursor:not-allowed}.login-spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:var(--k-primary-text);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-divider{display:flex;align-items:center;gap:14px;margin:24px 0}.login-divider:before,.login-divider:after{content:\"\";flex:1;height:1px;background:var(--k-border)}.login-divider span{font-size:13px;color:var(--k-text-muted);text-transform:lowercase}.login-switch{width:100%;background:transparent;border:1px solid var(--k-border);border-radius:10px;padding:12px 16px;font-size:14px;font-weight:500;font-family:inherit;color:var(--k-text-secondary);cursor:pointer;transition:all .2s ease}.login-switch:hover{background:#bdf36614;border-color:#bdf3664d;color:var(--k-primary-text)}.login-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}.login-footer-text{font-size:13px;color:#fff6;font-weight:500}.login-footer-link{font-size:13px;color:#ffffff80;text-decoration:none;transition:color .2s ease}.login-footer-link:hover{color:var(--k-primary)}.login-footer-dot{color:#ffffff4d;font-size:12px}@media(max-width:440px){.login-page{padding:16px}.login-card{padding:32px 24px}.login-title{font-size:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoginComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-login', standalone: true, imports: [CommonModule, FormsModule], template: `
-    <div class="login-page">
-      <div class="login-bg">
-        <div class="login-gradient"></div>
-        <div class="login-pattern"></div>
-        <div class="login-glow login-glow--1"></div>
-        <div class="login-glow login-glow--2"></div>
-      </div>
-
-      <div class="login-container">
-        <div class="login-card">
-          <header class="login-header">
-            <div class="login-logo-wrap">
-              <img src="/img/kustomizerlogo.png" alt="Kustomizer" class="login-logo" />
-            </div>
-            <h1 class="login-title">{{ isSignUp() ? 'Create account' : 'Sign in' }}</h1>
-            <p class="login-subtitle">{{ isSignUp() ? 'Create your account to get started' : 'Sign in to your Kustomizer account' }}</p>
-          </header>
-
-          @if (error()) {
-            <div class="login-alert">
-              <svg viewBox="0 0 20 20" fill="currentColor" class="login-alert-icon">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
-              </svg>
-              <span>{{ error() }}</span>
-            </div>
-          }
-
-          <form (ngSubmit)="onSubmit()" class="login-form">
-            <div class="login-field">
-              <label for="email" class="login-label">Email</label>
-              <input
-                id="email"
-                type="email"
-                [(ngModel)]="email"
-                name="email"
-                placeholder=""
-                class="login-input"
-                required
-                [disabled]="loading()"
-              />
-            </div>
-
-            <div class="login-field">
-              <label for="password" class="login-label">Password</label>
-              <div class="login-input-wrap">
-                <input
-                  id="password"
-                  [type]="showPassword() ? 'text' : 'password'"
-                  [(ngModel)]="password"
-                  name="password"
-                  placeholder="••••••••"
-                  class="login-input"
-                  required
-                  [disabled]="loading()"
-                />
-                <button type="button" class="login-password-toggle" (click)="togglePassword()" tabindex="-1">
-                  @if (showPassword()) {
-                    <svg viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.745-1.745a10.029 10.029 0 003.3-4.38 1.651 1.651 0 000-1.185A10.004 10.004 0 009.999 3a9.956 9.956 0 00-4.744 1.194L3.28 2.22zM7.752 6.69l1.092 1.092a2.5 2.5 0 013.374 3.373l1.091 1.092a4 4 0 00-5.557-5.557z" clip-rule="evenodd" />
-                      <path d="M10.748 13.93l2.523 2.523a9.987 9.987 0 01-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186A10.007 10.007 0 012.839 6.02L6.07 9.252a4 4 0 004.678 4.678z" />
-                    </svg>
-                  } @else {
-                    <svg viewBox="0 0 20 20" fill="currentColor">
-                      <path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
-                      <path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
-                    </svg>
-                  }
-                </button>
-              </div>
-            </div>
-
-            <button type="submit" class="login-submit" [disabled]="loading()">
-              @if (loading()) {
-                <span class="login-spinner"></span>
-                {{ isSignUp() ? 'Creating...' : 'Signing in...' }}
-              } @else {
-                {{ isSignUp() ? 'Create account' : 'Sign in' }}
-              }
-            </button>
-          </form>
-
-          <div class="login-divider"><span>or</span></div>
-
-          <button type="button" class="login-switch" (click)="toggleMode()">
-            {{ isSignUp() ? 'Already have an account? Sign in' : "Don't have an account? Sign up" }}
-          </button>
-        </div>
-
-        <footer class="login-footer">
-          <span class="login-footer-text">Kustomizer</span>
-          <span class="login-footer-dot">·</span>
-          <a href="https://kustomizer.net" target="_blank" rel="noopener noreferrer" class="login-footer-link">kustomizer.net</a>
-        </footer>
-      </div>
-    </div>
-  `, styles: [":host{display:block}.login-page{--k-primary: #bdf366;--k-primary-hover: #a8e050;--k-primary-text: #1a1f0e;--k-bg: #0c0f08;--k-card: #ffffff;--k-border: #e5e7eb;--k-border-focus: #bdf366;--k-text: #1f2937;--k-text-secondary: #6b7280;--k-text-muted: #9ca3af;--k-error: #dc2626;--k-error-bg: #fef2f2;--k-error-border: #fecaca;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--k-bg);color:var(--k-text);padding:20px;position:relative;overflow:hidden}.login-bg{position:fixed;inset:0;pointer-events:none;z-index:0}.login-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(189,243,102,.15),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(189,243,102,.08),transparent),linear-gradient(180deg,#0c0f08,#111a0a)}.login-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(189,243,102,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent)}.login-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.login-glow--1{width:400px;height:400px;background:#bdf3661f;top:-150px;left:50%;transform:translate(-50%);animation:glowPulse 8s ease-in-out infinite}.login-glow--2{width:300px;height:300px;background:#bdf3660f;bottom:-100px;right:-50px;animation:glowPulse2 10s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}@keyframes glowPulse2{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.login-container{position:relative;z-index:1;width:100%;max-width:400px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-card{background:var(--k-card);border-radius:20px;padding:40px 32px;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #bdf36633}.login-header{text-align:center;margin-bottom:32px}.login-logo-wrap{margin-bottom:20px}.login-logo{width:56px;height:56px;border-radius:12px}.login-title{font-size:24px;font-weight:600;color:var(--k-text);margin:0 0 8px;letter-spacing:-.3px}.login-subtitle{font-size:14px;color:var(--k-text-secondary);margin:0;font-weight:400}.login-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:20px;background:var(--k-error-bg);border:1px solid var(--k-error-border);color:var(--k-error)}.login-alert-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}.login-form{display:flex;flex-direction:column;gap:20px}.login-field{display:flex;flex-direction:column;gap:6px}.login-label{font-size:14px;font-weight:500;color:var(--k-text)}.login-input-wrap{position:relative;display:flex;align-items:center}.login-input{width:100%;background:var(--k-card);border:1px solid var(--k-border);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--k-text);outline:none;transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box}.login-input-wrap .login-input{padding-right:44px}.login-input::placeholder{color:var(--k-text-muted)}.login-input:hover{border-color:#d1d5db}.login-input:focus{border-color:var(--k-border-focus);box-shadow:0 0 0 3px #bdf36626}.login-input:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.7}.login-password-toggle{position:absolute;right:10px;background:none;border:none;padding:6px;cursor:pointer;color:var(--k-text-muted);transition:color .2s ease;display:flex;align-items:center;justify-content:center;border-radius:6px}.login-password-toggle:hover{color:var(--k-primary-text);background:#bdf36626}.login-password-toggle svg{width:18px;height:18px}.login-submit{width:100%;background:var(--k-primary);color:var(--k-primary-text);border:none;border-radius:10px;padding:14px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px}.login-submit:hover:not(:disabled){background:var(--k-primary-hover)}.login-submit:active:not(:disabled){transform:scale(.98)}.login-submit:disabled{opacity:.6;cursor:not-allowed}.login-spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:var(--k-primary-text);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-divider{display:flex;align-items:center;gap:14px;margin:24px 0}.login-divider:before,.login-divider:after{content:\"\";flex:1;height:1px;background:var(--k-border)}.login-divider span{font-size:13px;color:var(--k-text-muted);text-transform:lowercase}.login-switch{width:100%;background:transparent;border:1px solid var(--k-border);border-radius:10px;padding:12px 16px;font-size:14px;font-weight:500;font-family:inherit;color:var(--k-text-secondary);cursor:pointer;transition:all .2s ease}.login-switch:hover{background:#bdf36614;border-color:#bdf3664d;color:var(--k-primary-text)}.login-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}.login-footer-text{font-size:13px;color:#fff6;font-weight:500}.login-footer-link{font-size:13px;color:#ffffff80;text-decoration:none;transition:color .2s ease}.login-footer-link:hover{color:var(--k-primary)}.login-footer-dot{color:#ffffff4d;font-size:12px}@media(max-width:440px){.login-page{padding:16px}.login-card{padding:32px 24px}.login-title{font-size:22px}}\n"] }]
-        }], propDecorators: { loginSuccess: [{ type: i0.Output, args: ["loginSuccess"] }] } });
-
-class ActivateLicenseComponent {
-    shopAuthService = inject(ShopAuthService);
-    viewState = computed(() => {
-        if (this.shopAuthService.loading()) {
-            return 'loading';
-        }
-        if (!this.shopAuthService.shop()) {
-            return 'no-store';
-        }
-        return 'license-expired';
-    }, ...(ngDevMode ? [{ debugName: "viewState" }] : []));
-    ngOnInit() {
-        this.shopAuthService.authenticate();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ActivateLicenseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ActivateLicenseComponent, isStandalone: true, selector: "lib-activate-license", ngImport: i0, template: `
-    <div class="activate-page">
-      <div class="activate-bg">
-        <div class="activate-glow"></div>
-        <div class="activate-grid"></div>
-      </div>
-
-      <div class="activate-card">
-        @switch (viewState()) {
-          @case ('loading') {
-            <div class="activate-loading">
-              <span class="pulse-dot"></span>
-              <p>Verificando cuenta...</p>
-            </div>
-          }
-
-          @case ('no-store') {
-            <div class="activate-content">
-              <p class="store-name">Tienda no encontrada</p>
-              <p class="license-status">Licencia expirada</p>
-              <a class="renew-button" href="https://kustomizer.net" target="_blank" rel="noopener noreferrer">
-                Renovar en kustomizer.net
-              </a>
-            </div>
-          }
-
-          @case ('license-expired') {
-            <div class="activate-content">
-              <p class="store-name">{{ shopAuthService.shopName() }}</p>
-              <p class="license-status">Licencia expirada</p>
-              <a class="renew-button" href="https://kustomizer.net" target="_blank" rel="noopener noreferrer">
-                Renovar en kustomizer.net
-              </a>
-            </div>
-          }
-        }
-      </div>
-    </div>
-  `, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600&family=Spline+Sans:wght@400;500;600&display=swap\";:host{display:block}.activate-page{--k-accent: #bdf366;--k-accent-strong: #a8e050;--k-ink: #11140c;--k-ink-muted: rgba(17, 20, 12, .6);--k-ink-faint: rgba(17, 20, 12, .45);--k-ink-ghost: rgba(17, 20, 12, .3);--k-surface: #f7f8f1;--k-surface-strong: #ffffff;--k-outline: rgba(17, 20, 12, .12);--k-shadow: 0 40px 100px -60px rgba(12, 15, 8, .6);min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0c0f08;padding:24px;position:relative;overflow:hidden;font-family:Spline Sans,Segoe UI,sans-serif;color:var(--k-ink)}.activate-bg{position:absolute;inset:0;pointer-events:none}.activate-glow{position:absolute;width:520px;height:520px;left:50%;top:-200px;transform:translate(-50%);background:radial-gradient(circle,rgba(189,243,102,.22),transparent 70%);filter:blur(10px);opacity:.8}.activate-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(189,243,102,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(189,243,102,.08) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at 50% 10%,black,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 10%,black,transparent 70%);opacity:.4}.activate-card{position:relative;z-index:1;width:min(480px,92vw);background:var(--k-surface-strong);border-radius:24px;padding:48px 40px;box-shadow:var(--k-shadow);border:1px solid rgba(255,255,255,.2);animation:rise .5s ease both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.activate-loading{text-align:center;color:#ffffffb3;font-size:.9rem}.activate-loading p{margin:12px 0 0}.pulse-dot{width:10px;height:10px;border-radius:999px;background:var(--k-accent);display:inline-block;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.5);opacity:1}}.activate-content{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}.store-name{margin:0;font-family:Newsreader,Times New Roman,serif;font-size:1.6rem;letter-spacing:-.4px;color:var(--k-ink)}.license-status{margin:0;font-size:.95rem;text-transform:uppercase;letter-spacing:.2em;color:var(--k-ink-ghost)}.renew-button{margin-top:16px;padding:12px 22px;border-radius:999px;border:1px solid var(--k-outline);color:var(--k-ink);text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.02em;background:var(--k-surface);transition:all .2s ease}.renew-button:hover{border-color:#11140c47;background:#fff;transform:translateY(-1px)}@media(max-width:480px){.activate-card{padding:36px 26px}.store-name{font-size:1.4rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    getPublishedPageBySlug(slug) {
+        return this.metafieldRepo.getPageIndex().pipe(switchMap(index => {
+            const entry = index.pages.find(p => p.slug === slug && p.status === 'published');
+            if (!entry) {
+                return throwError(() => ({
+                    code: 'PAGE_NOT_FOUND',
+                    message: `Published page with slug '${slug}' not found`,
+                }));
+            }
+            return this.getPage(entry.id);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageStorefrontRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageStorefrontRepository, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ActivateLicenseComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-activate-license', standalone: true, imports: [CommonModule], template: `
-    <div class="activate-page">
-      <div class="activate-bg">
-        <div class="activate-glow"></div>
-        <div class="activate-grid"></div>
-      </div>
-
-      <div class="activate-card">
-        @switch (viewState()) {
-          @case ('loading') {
-            <div class="activate-loading">
-              <span class="pulse-dot"></span>
-              <p>Verificando cuenta...</p>
-            </div>
-          }
-
-          @case ('no-store') {
-            <div class="activate-content">
-              <p class="store-name">Tienda no encontrada</p>
-              <p class="license-status">Licencia expirada</p>
-              <a class="renew-button" href="https://kustomizer.net" target="_blank" rel="noopener noreferrer">
-                Renovar en kustomizer.net
-              </a>
-            </div>
-          }
-
-          @case ('license-expired') {
-            <div class="activate-content">
-              <p class="store-name">{{ shopAuthService.shopName() }}</p>
-              <p class="license-status">Licencia expirada</p>
-              <a class="renew-button" href="https://kustomizer.net" target="_blank" rel="noopener noreferrer">
-                Renovar en kustomizer.net
-              </a>
-            </div>
-          }
-        }
-      </div>
-    </div>
-  `, styles: ["@import\"https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600&family=Spline+Sans:wght@400;500;600&display=swap\";:host{display:block}.activate-page{--k-accent: #bdf366;--k-accent-strong: #a8e050;--k-ink: #11140c;--k-ink-muted: rgba(17, 20, 12, .6);--k-ink-faint: rgba(17, 20, 12, .45);--k-ink-ghost: rgba(17, 20, 12, .3);--k-surface: #f7f8f1;--k-surface-strong: #ffffff;--k-outline: rgba(17, 20, 12, .12);--k-shadow: 0 40px 100px -60px rgba(12, 15, 8, .6);min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0c0f08;padding:24px;position:relative;overflow:hidden;font-family:Spline Sans,Segoe UI,sans-serif;color:var(--k-ink)}.activate-bg{position:absolute;inset:0;pointer-events:none}.activate-glow{position:absolute;width:520px;height:520px;left:50%;top:-200px;transform:translate(-50%);background:radial-gradient(circle,rgba(189,243,102,.22),transparent 70%);filter:blur(10px);opacity:.8}.activate-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(189,243,102,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(189,243,102,.08) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at 50% 10%,black,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 10%,black,transparent 70%);opacity:.4}.activate-card{position:relative;z-index:1;width:min(480px,92vw);background:var(--k-surface-strong);border-radius:24px;padding:48px 40px;box-shadow:var(--k-shadow);border:1px solid rgba(255,255,255,.2);animation:rise .5s ease both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.activate-loading{text-align:center;color:#ffffffb3;font-size:.9rem}.activate-loading p{margin:12px 0 0}.pulse-dot{width:10px;height:10px;border-radius:999px;background:var(--k-accent);display:inline-block;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.5);opacity:1}}.activate-content{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}.store-name{margin:0;font-family:Newsreader,Times New Roman,serif;font-size:1.6rem;letter-spacing:-.4px;color:var(--k-ink)}.license-status{margin:0;font-size:.95rem;text-transform:uppercase;letter-spacing:.2em;color:var(--k-ink-ghost)}.renew-button{margin-top:16px;padding:12px 22px;border-radius:999px;border:1px solid var(--k-outline);color:var(--k-ink);text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.02em;background:var(--k-surface);transition:all .2s ease}.renew-button:hover{border-color:#11140c47;background:#fff;transform:translateY(-1px)}@media(max-width:480px){.activate-card{padding:36px 26px}.store-name{font-size:1.4rem}}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PageStorefrontRepository, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class AppShellComponent {
-    authService = inject(SupabaseAuthService);
-    shopAuthService = inject(ShopAuthService);
-    loggedOut = output();
-    async logout() {
-        await this.authService.signOut();
-        this.shopAuthService.clear();
-        this.loggedOut.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AppShellComponent, isStandalone: true, selector: "lib-app-shell", outputs: { loggedOut: "loggedOut" }, ngImport: i0, template: `
-    <div class="app-shell">
-      <header class="app-header">
-        <div class="header-left">
-          <span class="logo">Kustomizer</span>
-          @if (shopAuthService.shopName()) {
-            <span class="store-name">{{ shopAuthService.shopName() }}</span>
-          }
-        </div>
-        <div class="header-right">
-          @if (shopAuthService.licenseTier()) {
-            <span class="license-badge" [class.expiring]="shopAuthService.daysRemaining() !== null && shopAuthService.daysRemaining()! <= 7">
-              {{ shopAuthService.licenseTier() | uppercase }}
-              @if (shopAuthService.daysRemaining() !== null && shopAuthService.daysRemaining()! <= 7) {
-                <span class="days-left">({{ shopAuthService.daysRemaining() }}d)</span>
-              }
-            </span>
-          }
-          <div class="user-menu">
-            <span class="user-email">{{ authService.userEmail() }}</span>
-            <button class="btn-logout" (click)="logout()">Salir</button>
-          </div>
-        </div>
-      </header>
-      <main class="app-content">
-        <ng-content></ng-content>
-      </main>
-    </div>
-  `, isInline: true, styles: [".app-shell{min-height:100vh;display:flex;flex-direction:column;background:#f6f6f7;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 1rem;height:56px;background:#1a1a1a;color:#e3e3e3;box-shadow:0 1px #00000014}.header-left{display:flex;align-items:center;gap:.75rem}.logo{font-size:.9375rem;font-weight:600;letter-spacing:-.3px;color:#fff}.store-name{font-size:.8125rem;color:#8c9196;padding-left:.75rem;border-left:1px solid rgba(255,255,255,.15)}.header-right{display:flex;align-items:center;gap:.75rem}.license-badge{padding:.1875rem .5rem;background:#ffffff1f;border-radius:10px;font-size:.6875rem;font-weight:500;letter-spacing:.3px;color:#b5b5b5}.license-badge.expiring{background:#ffd6a4;color:#b98900}.days-left{font-weight:400;opacity:.8}.user-menu{display:flex;align-items:center;gap:.5rem}.user-email{font-size:.8125rem;color:#8c9196}.btn-logout{padding:.375rem .75rem;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#e3e3e3;font-size:.8125rem;font-family:inherit;cursor:pointer;transition:all .2s}.btn-logout:hover{background:#ffffff1a;border-color:#ffffff40}.app-content{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppShellComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-app-shell', standalone: true, imports: [CommonModule], template: `
-    <div class="app-shell">
-      <header class="app-header">
-        <div class="header-left">
-          <span class="logo">Kustomizer</span>
-          @if (shopAuthService.shopName()) {
-            <span class="store-name">{{ shopAuthService.shopName() }}</span>
-          }
-        </div>
-        <div class="header-right">
-          @if (shopAuthService.licenseTier()) {
-            <span class="license-badge" [class.expiring]="shopAuthService.daysRemaining() !== null && shopAuthService.daysRemaining()! <= 7">
-              {{ shopAuthService.licenseTier() | uppercase }}
-              @if (shopAuthService.daysRemaining() !== null && shopAuthService.daysRemaining()! <= 7) {
-                <span class="days-left">({{ shopAuthService.daysRemaining() }}d)</span>
-              }
-            </span>
-          }
-          <div class="user-menu">
-            <span class="user-email">{{ authService.userEmail() }}</span>
-            <button class="btn-logout" (click)="logout()">Salir</button>
-          </div>
-        </div>
-      </header>
-      <main class="app-content">
-        <ng-content></ng-content>
-      </main>
-    </div>
-  `, styles: [".app-shell{min-height:100vh;display:flex;flex-direction:column;background:#f6f6f7;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 1rem;height:56px;background:#1a1a1a;color:#e3e3e3;box-shadow:0 1px #00000014}.header-left{display:flex;align-items:center;gap:.75rem}.logo{font-size:.9375rem;font-weight:600;letter-spacing:-.3px;color:#fff}.store-name{font-size:.8125rem;color:#8c9196;padding-left:.75rem;border-left:1px solid rgba(255,255,255,.15)}.header-right{display:flex;align-items:center;gap:.75rem}.license-badge{padding:.1875rem .5rem;background:#ffffff1f;border-radius:10px;font-size:.6875rem;font-weight:500;letter-spacing:.3px;color:#b5b5b5}.license-badge.expiring{background:#ffd6a4;color:#b98900}.days-left{font-weight:400;opacity:.8}.user-menu{display:flex;align-items:center;gap:.5rem}.user-email{font-size:.8125rem;color:#8c9196}.btn-logout{padding:.375rem .75rem;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#e3e3e3;font-size:.8125rem;font-family:inherit;cursor:pointer;transition:all .2s}.btn-logout:hover{background:#ffffff1a;border-color:#ffffff40}.app-content{flex:1}\n"] }]
-        }], propDecorators: { loggedOut: [{ type: i0.Output, args: ["loggedOut"] }] } });
-
-class NoAccessComponent {
-    backToLogin = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NoAccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NoAccessComponent, isStandalone: true, selector: "ke-no-access", outputs: { backToLogin: "backToLogin" }, ngImport: i0, template: `
-    <div class="noaccess-page">
-      <div class="noaccess-bg">
-        <div class="noaccess-gradient"></div>
-        <div class="noaccess-pattern"></div>
-        <div class="noaccess-glow noaccess-glow--1"></div>
-        <div class="noaccess-glow noaccess-glow--2"></div>
-      </div>
-
-      <div class="noaccess-container">
-        <div class="noaccess-card">
-          <header class="noaccess-header">
-            <div class="noaccess-logo-wrap">
-              <img src="/img/kustomizerlogo.png" alt="Kustomizer" class="noaccess-logo" />
-            </div>
-
-            <div class="noaccess-icon-wrap">
-              <div class="noaccess-icon-ring"></div>
-              <svg class="noaccess-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-              </svg>
-            </div>
-
-            <h1 class="noaccess-title">No access</h1>
-            <p class="noaccess-subtitle">You don't have permissions to access this store. Contact the store owner to request an invitation.</p>
-          </header>
-
-          <div class="noaccess-info">
-            <div class="noaccess-info-row">
-              <svg viewBox="0 0 20 20" fill="currentColor" class="noaccess-info-icon">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-              </svg>
-              <span>If you believe this is an error, try signing in with a different account.</span>
-            </div>
-          </div>
-
-          <button type="button" class="noaccess-btn" (click)="backToLogin.emit()">
-            <svg viewBox="0 0 20 20" fill="currentColor" class="noaccess-btn-icon">
-              <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
-            </svg>
-            Back to sign in
-          </button>
-        </div>
-
-        <footer class="noaccess-footer">
-          <span class="noaccess-footer-text">Kustomizer</span>
-          <span class="noaccess-footer-dot">&middot;</span>
-          <a href="https://kustomizer.net" target="_blank" rel="noopener noreferrer" class="noaccess-footer-link">kustomizer.net</a>
-        </footer>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.noaccess-page{--k-primary: #bdf366;--k-primary-hover: #a8e050;--k-primary-text: #1a1f0e;--k-bg: #0c0f08;--k-card: #ffffff;--k-border: #e5e7eb;--k-text: #1f2937;--k-text-secondary: #6b7280;--k-text-muted: #9ca3af;--k-red: #dc2626;--k-red-light: #fef2f2;--k-red-border: #fecaca;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--k-bg);color:var(--k-text);padding:20px;position:relative;overflow:hidden}.noaccess-bg{position:fixed;inset:0;pointer-events:none;z-index:0}.noaccess-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(220,38,38,.1),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(189,243,102,.06),transparent),linear-gradient(180deg,#0c0f08,#111a0a)}.noaccess-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(189,243,102,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent)}.noaccess-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.noaccess-glow--1{width:400px;height:400px;background:#dc262614;top:-150px;left:50%;transform:translate(-50%);animation:glowPulse 8s ease-in-out infinite}.noaccess-glow--2{width:300px;height:300px;background:#bdf3660f;bottom:-100px;right:-50px;animation:glowPulse2 10s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}@keyframes glowPulse2{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.noaccess-container{position:relative;z-index:1;width:100%;max-width:400px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.noaccess-card{background:var(--k-card);border-radius:20px;padding:40px 32px;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #dc26261f}.noaccess-header{text-align:center;margin-bottom:24px}.noaccess-logo-wrap{margin-bottom:24px}.noaccess-logo{width:56px;height:56px;border-radius:12px}.noaccess-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:20px}.noaccess-icon-ring{position:absolute;inset:0;border-radius:50%;background:var(--k-red-light);border:1px solid var(--k-red-border)}.noaccess-icon{position:relative;width:28px;height:28px;color:var(--k-red)}.noaccess-title{font-size:24px;font-weight:600;color:var(--k-text);margin:0 0 8px;letter-spacing:-.3px}.noaccess-subtitle{font-size:14px;color:var(--k-text-secondary);margin:0;font-weight:400;line-height:1.5}.noaccess-info{background:var(--k-red-light);border:1px solid var(--k-red-border);border-radius:10px;padding:12px 14px;margin-bottom:24px}.noaccess-info-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#991b1b;line-height:1.4}.noaccess-info-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--k-red)}.noaccess-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--k-primary);color:var(--k-primary-text);border:none;border-radius:10px;padding:14px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease;text-decoration:none;box-sizing:border-box}.noaccess-btn:hover{background:var(--k-primary-hover)}.noaccess-btn:active{transform:scale(.98)}.noaccess-btn-icon{width:16px;height:16px}.noaccess-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}.noaccess-footer-text{font-size:13px;color:#fff6;font-weight:500}.noaccess-footer-link{font-size:13px;color:#ffffff80;text-decoration:none;transition:color .2s ease}.noaccess-footer-link:hover{color:var(--k-primary)}.noaccess-footer-dot{color:#ffffff4d;font-size:12px}@media(max-width:440px){.noaccess-page{padding:16px}.noaccess-card{padding:32px 24px}.noaccess-title{font-size:22px}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NoAccessComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ke-no-access', standalone: true, template: `
-    <div class="noaccess-page">
-      <div class="noaccess-bg">
-        <div class="noaccess-gradient"></div>
-        <div class="noaccess-pattern"></div>
-        <div class="noaccess-glow noaccess-glow--1"></div>
-        <div class="noaccess-glow noaccess-glow--2"></div>
-      </div>
-
-      <div class="noaccess-container">
-        <div class="noaccess-card">
-          <header class="noaccess-header">
-            <div class="noaccess-logo-wrap">
-              <img src="/img/kustomizerlogo.png" alt="Kustomizer" class="noaccess-logo" />
-            </div>
-
-            <div class="noaccess-icon-wrap">
-              <div class="noaccess-icon-ring"></div>
-              <svg class="noaccess-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-              </svg>
-            </div>
-
-            <h1 class="noaccess-title">No access</h1>
-            <p class="noaccess-subtitle">You don't have permissions to access this store. Contact the store owner to request an invitation.</p>
-          </header>
-
-          <div class="noaccess-info">
-            <div class="noaccess-info-row">
-              <svg viewBox="0 0 20 20" fill="currentColor" class="noaccess-info-icon">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-              </svg>
-              <span>If you believe this is an error, try signing in with a different account.</span>
-            </div>
-          </div>
-
-          <button type="button" class="noaccess-btn" (click)="backToLogin.emit()">
-            <svg viewBox="0 0 20 20" fill="currentColor" class="noaccess-btn-icon">
-              <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
-            </svg>
-            Back to sign in
-          </button>
-        </div>
-
-        <footer class="noaccess-footer">
-          <span class="noaccess-footer-text">Kustomizer</span>
-          <span class="noaccess-footer-dot">&middot;</span>
-          <a href="https://kustomizer.net" target="_blank" rel="noopener noreferrer" class="noaccess-footer-link">kustomizer.net</a>
-        </footer>
-      </div>
-    </div>
-  `, styles: [":host{display:block}.noaccess-page{--k-primary: #bdf366;--k-primary-hover: #a8e050;--k-primary-text: #1a1f0e;--k-bg: #0c0f08;--k-card: #ffffff;--k-border: #e5e7eb;--k-text: #1f2937;--k-text-secondary: #6b7280;--k-text-muted: #9ca3af;--k-red: #dc2626;--k-red-light: #fef2f2;--k-red-border: #fecaca;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--k-bg);color:var(--k-text);padding:20px;position:relative;overflow:hidden}.noaccess-bg{position:fixed;inset:0;pointer-events:none;z-index:0}.noaccess-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(220,38,38,.1),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(189,243,102,.06),transparent),linear-gradient(180deg,#0c0f08,#111a0a)}.noaccess-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(189,243,102,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent)}.noaccess-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.noaccess-glow--1{width:400px;height:400px;background:#dc262614;top:-150px;left:50%;transform:translate(-50%);animation:glowPulse 8s ease-in-out infinite}.noaccess-glow--2{width:300px;height:300px;background:#bdf3660f;bottom:-100px;right:-50px;animation:glowPulse2 10s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}@keyframes glowPulse2{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.noaccess-container{position:relative;z-index:1;width:100%;max-width:400px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.noaccess-card{background:var(--k-card);border-radius:20px;padding:40px 32px;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #dc26261f}.noaccess-header{text-align:center;margin-bottom:24px}.noaccess-logo-wrap{margin-bottom:24px}.noaccess-logo{width:56px;height:56px;border-radius:12px}.noaccess-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:20px}.noaccess-icon-ring{position:absolute;inset:0;border-radius:50%;background:var(--k-red-light);border:1px solid var(--k-red-border)}.noaccess-icon{position:relative;width:28px;height:28px;color:var(--k-red)}.noaccess-title{font-size:24px;font-weight:600;color:var(--k-text);margin:0 0 8px;letter-spacing:-.3px}.noaccess-subtitle{font-size:14px;color:var(--k-text-secondary);margin:0;font-weight:400;line-height:1.5}.noaccess-info{background:var(--k-red-light);border:1px solid var(--k-red-border);border-radius:10px;padding:12px 14px;margin-bottom:24px}.noaccess-info-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#991b1b;line-height:1.4}.noaccess-info-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--k-red)}.noaccess-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--k-primary);color:var(--k-primary-text);border:none;border-radius:10px;padding:14px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease;text-decoration:none;box-sizing:border-box}.noaccess-btn:hover{background:var(--k-primary-hover)}.noaccess-btn:active{transform:scale(.98)}.noaccess-btn-icon{width:16px;height:16px}.noaccess-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}.noaccess-footer-text{font-size:13px;color:#fff6;font-weight:500}.noaccess-footer-link{font-size:13px;color:#ffffff80;text-decoration:none;transition:color .2s ease}.noaccess-footer-link:hover{color:var(--k-primary)}.noaccess-footer-dot{color:#ffffff4d;font-size:12px}@media(max-width:440px){.noaccess-page{padding:16px}.noaccess-card{padding:32px 24px}.noaccess-title{font-size:22px}}\n"] }]
-        }], propDecorators: { backToLogin: [{ type: i0.Output, args: ["backToLogin"] }] } });
-
-class LicenseExpiredComponent {
-    backToLogin = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LicenseExpiredComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LicenseExpiredComponent, isStandalone: true, selector: "ke-license-expired", outputs: { backToLogin: "backToLogin" }, ngImport: i0, template: `
-    <div class="expired-page">
-      <div class="expired-bg">
-        <div class="expired-gradient"></div>
-        <div class="expired-pattern"></div>
-        <div class="expired-glow expired-glow--1"></div>
-        <div class="expired-glow expired-glow--2"></div>
-      </div>
-
-      <div class="expired-container">
-        <div class="expired-card">
-          <header class="expired-header">
-            <div class="expired-logo-wrap">
-              <img src="/img/kustomizerlogo.png" alt="Kustomizer" class="expired-logo" />
-            </div>
-
-            <div class="expired-icon-wrap">
-              <div class="expired-icon-ring"></div>
-              <svg class="expired-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10" />
-                <polyline points="12 6 12 12 16 14" />
-              </svg>
-            </div>
-
-            <h1 class="expired-title">License expired</h1>
-            <p class="expired-subtitle">The license for this store's owner has expired. Contact the owner to renew the subscription.</p>
-          </header>
-
-          <div class="expired-info">
-            <div class="expired-info-row">
-              <svg viewBox="0 0 20 20" fill="currentColor" class="expired-info-icon">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-              </svg>
-              <span>All editing features are disabled until the license is renewed.</span>
-            </div>
-          </div>
-
-          <button type="button" class="expired-btn" (click)="backToLogin.emit()">
-            <svg viewBox="0 0 20 20" fill="currentColor" class="expired-btn-icon">
-              <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
-            </svg>
-            Back to sign in
-          </button>
-        </div>
-
-        <footer class="expired-footer">
-          <span class="expired-footer-text">Kustomizer</span>
-          <span class="expired-footer-dot">&middot;</span>
-          <a href="https://kustomizer.net" target="_blank" rel="noopener noreferrer" class="expired-footer-link">kustomizer.net</a>
-        </footer>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.expired-page{--k-primary: #bdf366;--k-primary-hover: #a8e050;--k-primary-text: #1a1f0e;--k-bg: #0c0f08;--k-card: #ffffff;--k-border: #e5e7eb;--k-text: #1f2937;--k-text-secondary: #6b7280;--k-text-muted: #9ca3af;--k-amber: #f59e0b;--k-amber-light: #fef3c7;--k-amber-border: #fde68a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--k-bg);color:var(--k-text);padding:20px;position:relative;overflow:hidden}.expired-bg{position:fixed;inset:0;pointer-events:none;z-index:0}.expired-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(245,158,11,.12),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(189,243,102,.06),transparent),linear-gradient(180deg,#0c0f08,#111a0a)}.expired-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(189,243,102,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent)}.expired-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.expired-glow--1{width:400px;height:400px;background:#f59e0b1a;top:-150px;left:50%;transform:translate(-50%);animation:glowPulse 8s ease-in-out infinite}.expired-glow--2{width:300px;height:300px;background:#bdf3660f;bottom:-100px;right:-50px;animation:glowPulse2 10s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}@keyframes glowPulse2{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.expired-container{position:relative;z-index:1;width:100%;max-width:400px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.expired-card{background:var(--k-card);border-radius:20px;padding:40px 32px;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #f59e0b26}.expired-header{text-align:center;margin-bottom:24px}.expired-logo-wrap{margin-bottom:24px}.expired-logo{width:56px;height:56px;border-radius:12px}.expired-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:20px}.expired-icon-ring{position:absolute;inset:0;border-radius:50%;background:var(--k-amber-light);border:1px solid var(--k-amber-border);animation:ringPulse 3s ease-in-out infinite}@keyframes ringPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}.expired-icon{position:relative;width:28px;height:28px;color:var(--k-amber)}.expired-title{font-size:24px;font-weight:600;color:var(--k-text);margin:0 0 8px;letter-spacing:-.3px}.expired-subtitle{font-size:14px;color:var(--k-text-secondary);margin:0;font-weight:400;line-height:1.5}.expired-info{background:var(--k-amber-light);border:1px solid var(--k-amber-border);border-radius:10px;padding:12px 14px;margin-bottom:24px}.expired-info-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#92400e;line-height:1.4}.expired-info-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--k-amber)}.expired-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--k-primary);color:var(--k-primary-text);border:none;border-radius:10px;padding:14px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease;text-decoration:none;box-sizing:border-box}.expired-btn:hover{background:var(--k-primary-hover)}.expired-btn:active{transform:scale(.98)}.expired-btn-icon{width:16px;height:16px}.expired-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}.expired-footer-text{font-size:13px;color:#fff6;font-weight:500}.expired-footer-link{font-size:13px;color:#ffffff80;text-decoration:none;transition:color .2s ease}.expired-footer-link:hover{color:var(--k-primary)}.expired-footer-dot{color:#ffffff4d;font-size:12px}@media(max-width:440px){.expired-page{padding:16px}.expired-card{padding:32px 24px}.expired-title{font-size:22px}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LicenseExpiredComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ke-license-expired', standalone: true, template: `
-    <div class="expired-page">
-      <div class="expired-bg">
-        <div class="expired-gradient"></div>
-        <div class="expired-pattern"></div>
-        <div class="expired-glow expired-glow--1"></div>
-        <div class="expired-glow expired-glow--2"></div>
-      </div>
-
-      <div class="expired-container">
-        <div class="expired-card">
-          <header class="expired-header">
-            <div class="expired-logo-wrap">
-              <img src="/img/kustomizerlogo.png" alt="Kustomizer" class="expired-logo" />
-            </div>
-
-            <div class="expired-icon-wrap">
-              <div class="expired-icon-ring"></div>
-              <svg class="expired-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10" />
-                <polyline points="12 6 12 12 16 14" />
-              </svg>
-            </div>
-
-            <h1 class="expired-title">License expired</h1>
-            <p class="expired-subtitle">The license for this store's owner has expired. Contact the owner to renew the subscription.</p>
-          </header>
-
-          <div class="expired-info">
-            <div class="expired-info-row">
-              <svg viewBox="0 0 20 20" fill="currentColor" class="expired-info-icon">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
-              </svg>
-              <span>All editing features are disabled until the license is renewed.</span>
-            </div>
-          </div>
-
-          <button type="button" class="expired-btn" (click)="backToLogin.emit()">
-            <svg viewBox="0 0 20 20" fill="currentColor" class="expired-btn-icon">
-              <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
-            </svg>
-            Back to sign in
-          </button>
-        </div>
-
-        <footer class="expired-footer">
-          <span class="expired-footer-text">Kustomizer</span>
-          <span class="expired-footer-dot">&middot;</span>
-          <a href="https://kustomizer.net" target="_blank" rel="noopener noreferrer" class="expired-footer-link">kustomizer.net</a>
-        </footer>
-      </div>
-    </div>
-  `, styles: [":host{display:block}.expired-page{--k-primary: #bdf366;--k-primary-hover: #a8e050;--k-primary-text: #1a1f0e;--k-bg: #0c0f08;--k-card: #ffffff;--k-border: #e5e7eb;--k-text: #1f2937;--k-text-secondary: #6b7280;--k-text-muted: #9ca3af;--k-amber: #f59e0b;--k-amber-light: #fef3c7;--k-amber-border: #fde68a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--k-bg);color:var(--k-text);padding:20px;position:relative;overflow:hidden}.expired-bg{position:fixed;inset:0;pointer-events:none;z-index:0}.expired-gradient{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(245,158,11,.12),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(189,243,102,.06),transparent),linear-gradient(180deg,#0c0f08,#111a0a)}.expired-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(189,243,102,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 20%,black,transparent)}.expired-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6}.expired-glow--1{width:400px;height:400px;background:#f59e0b1a;top:-150px;left:50%;transform:translate(-50%);animation:glowPulse 8s ease-in-out infinite}.expired-glow--2{width:300px;height:300px;background:#bdf3660f;bottom:-100px;right:-50px;animation:glowPulse2 10s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.4;transform:translate(-50%) scale(1)}50%{opacity:.7;transform:translate(-50%) scale(1.1)}}@keyframes glowPulse2{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}.expired-container{position:relative;z-index:1;width:100%;max-width:400px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.expired-card{background:var(--k-card);border-radius:20px;padding:40px 32px;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 100px -20px #f59e0b26}.expired-header{text-align:center;margin-bottom:24px}.expired-logo-wrap{margin-bottom:24px}.expired-logo{width:56px;height:56px;border-radius:12px}.expired-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:20px}.expired-icon-ring{position:absolute;inset:0;border-radius:50%;background:var(--k-amber-light);border:1px solid var(--k-amber-border);animation:ringPulse 3s ease-in-out infinite}@keyframes ringPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}.expired-icon{position:relative;width:28px;height:28px;color:var(--k-amber)}.expired-title{font-size:24px;font-weight:600;color:var(--k-text);margin:0 0 8px;letter-spacing:-.3px}.expired-subtitle{font-size:14px;color:var(--k-text-secondary);margin:0;font-weight:400;line-height:1.5}.expired-info{background:var(--k-amber-light);border:1px solid var(--k-amber-border);border-radius:10px;padding:12px 14px;margin-bottom:24px}.expired-info-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#92400e;line-height:1.4}.expired-info-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--k-amber)}.expired-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--k-primary);color:var(--k-primary-text);border:none;border-radius:10px;padding:14px 20px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease;text-decoration:none;box-sizing:border-box}.expired-btn:hover{background:var(--k-primary-hover)}.expired-btn:active{transform:scale(.98)}.expired-btn-icon{width:16px;height:16px}.expired-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px}.expired-footer-text{font-size:13px;color:#fff6;font-weight:500}.expired-footer-link{font-size:13px;color:#ffffff80;text-decoration:none;transition:color .2s ease}.expired-footer-link:hover{color:var(--k-primary)}.expired-footer-dot{color:#ffffff4d;font-size:12px}@media(max-width:440px){.expired-page{padding:16px}.expired-card{padding:32px 24px}.expired-title{font-size:22px}}\n"] }]
-        }], propDecorators: { backToLogin: [{ type: i0.Output, args: ["backToLogin"] }] } });
-
-class ShopTeamService {
+/**
+ * Loads a component manifest from a remote storefront URL and registers
+ * the entries in the ComponentRegistryService as "virtual" definitions
+ * (no Angular component class — only metadata for palette and property panel).
+ */
+class ManifestLoaderService {
     http = inject(HttpClient);
-    config = inject(SUPABASE_CONFIG, { optional: true });
-    authService = inject(SupabaseAuthService);
-    shopAuthService = inject(ShopAuthService);
-    // Estado
-    _team = signal(null, ...(ngDevMode ? [{ debugName: "_team" }] : []));
-    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
-    team = this._team.asReadonly();
-    loading = this._loading.asReadonly();
-    error = this._error.asReadonly();
-    // Computed
-    members = computed(() => this._team()?.members ?? [], ...(ngDevMode ? [{ debugName: "members" }] : []));
-    invitations = computed(() => this._team()?.invitations ?? [], ...(ngDevMode ? [{ debugName: "invitations" }] : []));
-    currentUser = computed(() => this._team()?.current_user ?? null, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
-    activeMembers = computed(() => this.members().filter((m) => m.status === 'active'), ...(ngDevMode ? [{ debugName: "activeMembers" }] : []));
-    pendingInvitations = computed(() => this.invitations().filter((i) => !i.is_expired), ...(ngDevMode ? [{ debugName: "pendingInvitations" }] : []));
-    canInvite = computed(() => this._team()?.current_user?.can_invite ?? false, ...(ngDevMode ? [{ debugName: "canInvite" }] : []));
+    registry = inject(ComponentRegistryService);
     /**
-     * Carga el equipo de la shop actual
+     * Fetch the manifest from the given URL and register all components.
      */
-    async loadTeam() {
-        const shopId = this.shopAuthService.shopId();
-        if (!shopId) {
-            this._error.set('No shop selected');
-            return null;
-        }
-        const token = this.authService.accessToken();
-        if (!token) {
-            this._error.set('Not authenticated');
-            return null;
-        }
-        this._loading.set(true);
-        this._error.set(null);
-        try {
-            const url = this.config
-                ? `${this.config.supabaseUrl}/functions/v1/shop_team`
-                : '/functions/v1/shop_team';
-            const response = await firstValueFrom(this.http.post(url, { shop_id: shopId }, {
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json',
-                },
-            }));
-            this._team.set(response);
-            this._loading.set(false);
-            return response;
-        }
-        catch (err) {
-            console.error('[ShopTeamService] Load team failed:', err);
-            const httpError = err;
-            this._error.set(httpError.error?.error || 'Failed to load team');
-            this._loading.set(false);
-            return null;
-        }
+    loadManifest(url) {
+        return this.http.get(url).pipe(tap((manifest) => this.registerManifestComponents(manifest)));
     }
     /**
-     * Invita a un usuario a la shop
+     * Register manifest entries in the ComponentRegistryService.
+     * Each entry becomes a ComponentDefinition without a `component` field.
      */
-    async inviteUser(email, role, message) {
-        const shopId = this.shopAuthService.shopId();
-        if (!shopId) {
-            this._error.set('No shop selected');
-            return null;
-        }
-        const token = this.authService.accessToken();
-        if (!token) {
-            this._error.set('Not authenticated');
-            return null;
-        }
-        this._loading.set(true);
-        this._error.set(null);
-        try {
-            const url = this.config
-                ? `${this.config.supabaseUrl}/functions/v1/invite_user`
-                : '/functions/v1/invite_user';
-            const response = await firstValueFrom(this.http.post(url, {
-                shop_id: shopId,
-                email: email.toLowerCase().trim(),
-                role,
-                message: message?.trim() || undefined,
-            }, {
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json',
-                },
-            }));
-            // Recargar equipo para mostrar la invitación
-            await this.loadTeam();
-            this._loading.set(false);
-            return response;
-        }
-        catch (err) {
-            console.error('[ShopTeamService] Invite user failed:', err);
-            const httpError = err;
-            this._error.set(httpError.error?.error || 'Failed to invite user');
-            this._loading.set(false);
-            return null;
-        }
-    }
-    /**
-     * Acepta una invitación (usado cuando un usuario hace click en el link de invitación)
-     */
-    async acceptInvitation(invitationToken) {
-        const authToken = this.authService.accessToken();
-        if (!authToken) {
-            this._error.set('Not authenticated');
-            return null;
-        }
-        this._loading.set(true);
-        this._error.set(null);
-        try {
-            const url = this.config
-                ? `${this.config.supabaseUrl}/functions/v1/accept_invitation`
-                : '/functions/v1/accept_invitation';
-            const response = await firstValueFrom(this.http.post(url, {
-                token: invitationToken,
-            }, {
-                headers: {
-                    'Authorization': `Bearer ${authToken}`,
-                    'Content-Type': 'application/json',
-                },
-            }));
-            this._loading.set(false);
-            return response;
-        }
-        catch (err) {
-            console.error('[ShopTeamService] Accept invitation failed:', err);
-            const httpError = err;
-            this._error.set(httpError.error?.error || 'Failed to accept invitation');
-            this._loading.set(false);
-            return null;
+    registerManifestComponents(manifest) {
+        for (const entry of manifest.components) {
+            const definition = this.manifestEntryToDefinition(entry);
+            this.registry.register(definition);
         }
     }
-    /**
-     * Genera el URL de invitación (para copiar/compartir)
-     */
-    getInvitationUrl(token, baseUrl) {
-        const base = baseUrl || (typeof window !== 'undefined' ? window.location.origin : '');
-        return `${base}/accept-invitation?token=${token}`;
-    }
-    /**
-     * Limpia el estado
-     */
-    clear() {
-        this._team.set(null);
-        this._error.set(null);
+    manifestEntryToDefinition(entry) {
+        return {
+            type: entry.type,
+            name: entry.name,
+            description: entry.description,
+            category: entry.category,
+            icon: entry.icon,
+            props: entry.props,
+            slots: entry.slots,
+            isSection: entry.isSection,
+            isBlock: entry.isBlock,
+            blockScope: entry.blockScope,
+            sectionTypes: entry.sectionTypes,
+            draggable: entry.draggable,
+            deletable: entry.deletable,
+            duplicable: entry.duplicable,
+            tags: entry.tags,
+            order: entry.order,
+            // No `component` — rendering happens in the iframe
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopTeamService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopTeamService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ManifestLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ManifestLoaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ShopTeamService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ManifestLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-const SHOPIFY_API_VERSION = '2026-01';
-const SHOPIFY_CONFIG = new InjectionToken('SHOPIFY_CONFIG');
-
-const authGuard = async () => {
-    const authService = inject(SupabaseAuthService);
-    const router = inject(Router);
-    await authService.ensureInitialized();
-    if (authService.isAuthenticated()) {
-        return true;
-    }
-    router.navigate(['/login']);
-    return false;
-};
-const noAuthGuard = async () => {
-    const authService = inject(SupabaseAuthService);
-    const router = inject(Router);
-    await authService.ensureInitialized();
-    if (!authService.isAuthenticated()) {
-        return true;
-    }
-    router.navigate(['/admin']);
-    return false;
-};
-
-const licenseGuard = async () => {
-    const shopAuthService = inject(ShopAuthService);
-    const router = inject(Router);
-    await shopAuthService.authenticate();
-    if (shopAuthService.hasAccess()) {
-        return true;
-    }
-    router.navigate(['/activate']);
-    return false;
-};
-const noLicenseGuard = async () => {
-    const shopAuthService = inject(ShopAuthService);
-    const router = inject(Router);
-    await shopAuthService.authenticate();
-    if (!shopAuthService.hasAccess()) {
-        return true;
-    }
-    router.navigate(['/admin']);
-    return false;
-};
-
-/**
- * Guard que verifica:
- * 1. Usuario autenticado
- * 2. Usuario tiene acceso a la shop del dominio actual
- * 3. Licencia activa
- *
- * Redirige a:
- * - /login si no está autenticado
- * - /no-access si no tiene acceso a la shop
- * - /license-expired si la licencia expiró
- */
-const shopAuthGuard = async () => {
-    const authService = inject(SupabaseAuthService);
-    const shopAuthService = inject(ShopAuthService);
-    const router = inject(Router);
-    // Esperar inicialización del auth
-    await authService.ensureInitialized();
-    // Verificar autenticación básica
-    if (!authService.isAuthenticated()) {
-        router.navigate(['/login']);
-        return false;
-    }
-    // Autenticar contra la shop
-    await shopAuthService.authenticate();
-    // Verificar acceso
-    if (shopAuthService.hasAccess()) {
-        return true;
-    }
-    // Manejar diferentes tipos de error
-    const error = shopAuthService.error();
-    if (error?.code === 'NOT_AUTHENTICATED') {
-        router.navigate(['/login']);
-        return false;
-    }
-    if (error?.code === 'LICENSE_EXPIRED') {
-        router.navigate(['/license-expired']);
-        return false;
-    }
-    if (error?.code === 'NO_ACCESS' || error?.code === 'SHOP_NOT_FOUND') {
-        router.navigate(['/no-access']);
-        return false;
-    }
-    if (error?.code === 'LOCALHOST_NO_SHOP') {
-        alert('Add ?shop=your-store.myshopify.com to the URL');
-        return false;
-    }
-    if (error?.code === 'USER_INACTIVE') {
-        router.navigate(['/account-inactive']);
-        return false;
-    }
-    // Error desconocido, redirigir a no-access
-    router.navigate(['/no-access']);
-    return false;
-};
-/**
- * Guard que solo permite acceso si el usuario NO tiene acceso a una shop.
- * Útil para páginas como /login que no deberían ser accesibles si ya tienes acceso.
- */
-const noShopAuthGuard = async () => {
-    const authService = inject(SupabaseAuthService);
-    const shopAuthService = inject(ShopAuthService);
-    const router = inject(Router);
-    await authService.ensureInitialized();
-    // Si no está autenticado, permitir (puede ver login)
-    if (!authService.isAuthenticated()) {
-        return true;
-    }
-    // Verificar acceso a shop
-    await shopAuthService.authenticate();
-    // Si tiene acceso completo, redirigir al admin
-    if (shopAuthService.hasAccess()) {
-        router.navigate(['/admin']);
-        return false;
-    }
-    // No tiene acceso completo, permitir ver la página
-    return true;
-};
-/**
- * Guard que verifica que el usuario tenga rol de admin o owner.
- * Requiere que shopAuthGuard se haya ejecutado primero.
- */
-const shopAdminGuard = async () => {
-    const shopAuthService = inject(ShopAuthService);
-    const router = inject(Router);
-    // Asegurar que ya se autenticó
-    if (!shopAuthService.initialized()) {
-        await shopAuthService.authenticate();
-    }
-    if (shopAuthService.isAdmin()) {
-        return true;
-    }
-    // No es admin, redirigir a admin (sin permisos de gestión)
-    router.navigate(['/admin']);
-    return false;
-};
-/**
- * Guard que verifica que el usuario pueda editar (owner o admin).
- * Los readers solo pueden ver, no editar.
- */
-const shopEditorGuard = async () => {
-    const shopAuthService = inject(ShopAuthService);
-    const router = inject(Router);
-    if (!shopAuthService.initialized()) {
-        await shopAuthService.authenticate();
-    }
-    if (shopAuthService.canEdit()) {
-        return true;
-    }
-    // Es reader, mostrar página de solo lectura o redirigir
-    router.navigate(['/admin']);
-    return false;
-};
-
 class VisualEditor {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: VisualEditor, isStandalone: true, selector: "lib-visual-editor", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: VisualEditor, isStandalone: true, selector: "lib-visual-editor", ngImport: i0, template: `
     <p>
       visual-editor works!
     </p>
   `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VisualEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualEditor, decorators: [{
             type: Component,
             args: [{ selector: 'lib-visual-editor', imports: [], template: `
     <p>
@@ -8959,5 +7839,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivateLicenseComponent, AppShellComponent, BlockTreeItemComponent, ComponentRegistryService, DEFAULT_ROUTER_NAVIGATION_CONFIG, DEFAULT_VISUAL_EDITOR_CONFIG, DELETE_METAFIELDS_MUTATION, DefaultRouterNavigationService, DragDropService, DynamicRendererComponent, EDITOR_COMPONENT_DEFINITIONS, FILES_QUERY, GET_SHOP_ID_QUERY, GET_SHOP_METAFIELD_QUERY, INDEX_KEY, InputPageLoadingStrategy, LicenseExpiredComponent, LicenseGuardComponent, LoginComponent, MAX_METAFIELD_SIZE, NAMESPACE, NoAccessComponent, PAGE_ENVIRONMENT, PageLoadingStrategy, PageManagerComponent, PageService, PageShopifyRepository, ROUTER_NAVIGATION_CONFIG, RoutePageLoadingStrategy, SET_METAFIELD_MUTATION, SHOPIFY_API_VERSION, SHOPIFY_APP_CONFIG, SHOPIFY_CONFIG, STORE_DOMAIN, SUPABASE_CONFIG, ShopAuthService, ShopTeamService, ShopifyFilePickerComponent, ShopifyFilesService, ShopifyGraphQLClient, ShopifyMetafieldRepository, ShopifyTokenService, SlotRendererComponent, SupabaseAuthService, USE_IN_MEMORY_PAGES, VISUAL_EDITOR_CONFIG, VISUAL_EDITOR_FEATURE_KEY, VisualEditor, VisualEditorActions, VisualEditorComponent, VisualEditorFacade, VisualEditorNavigation, authGuard, initialVisualEditorState, licenseGuard, noAuthGuard, noLicenseGuard, noShopAuthGuard, provideEditorComponents, provideVisualEditor, provideVisualEditorStore, selectBlocksForSection, selectBlocksForSlot, selectCanRedo, selectCanUndo, selectCurrentPage, selectCurrentPageId, selectCurrentPageSlug, selectCurrentPageStatus, selectCurrentPageTitle, selectCurrentPageVersion, selectDraggedElementId, selectElementById, selectHistory, selectHistoryIndex, selectHistoryLength, selectIsDirty, selectIsDragging, selectIsPageLoaded, selectLastAction, selectSectionById, selectSections, selectSelectedBlock, selectSelectedBlockSlotName, selectSelectedElement, selectSelectedElementId, selectSelectedElementType, selectSelectedSection, selectSelectedSectionId, selectSelectedSectionType, selectVisualEditorState, shopAdminGuard, shopAuthGuard, shopEditorGuard, visualEditorReducer };
+export { BlockTreeItemComponent, CREATE_METAFIELD_DEFINITION_MUTATION, ComponentRegistryService, DEFAULT_ROUTER_NAVIGATION_CONFIG, DEFAULT_VISUAL_EDITOR_CONFIG, DELETE_METAFIELDS_MUTATION, DELETE_METAFIELD_DEFINITION_MUTATION, DefaultRouterNavigationService, DragDropService, DynamicRendererComponent, EDITOR_COMPONENT_DEFINITIONS, FILES_QUERY, GET_METAFIELD_DEFINITION_QUERY, GET_SHOP_ID_QUERY, GET_SHOP_METAFIELD_QUERY$1 as GET_SHOP_METAFIELD_QUERY, INDEX_KEY$1 as INDEX_KEY, IframeBridgeService, InputPageLoadingStrategy, MAX_METAFIELD_SIZE, ManifestLoaderService, NAMESPACE$1 as NAMESPACE, PageLoadingStrategy, PageManagerComponent, PageService, PageShopifyRepository, PageStorefrontRepository, ROUTER_NAVIGATION_CONFIG, RoutePageLoadingStrategy, SET_METAFIELD_MUTATION, SHOPIFY_CONFIG, STOREFRONT_CONFIG, STOREFRONT_URL, ShopifyFilePickerComponent, ShopifyFilesService, ShopifyGraphQLClient, ShopifyMetafieldRepository, SlotRendererComponent, StorefrontGraphQLClient, StorefrontMetafieldRepository, USE_IN_MEMORY_PAGES, VISUAL_EDITOR_CONFIG, VISUAL_EDITOR_FEATURE_KEY, VisualEditor, VisualEditorActions, VisualEditorComponent, VisualEditorFacade, VisualEditorNavigation, initialVisualEditorState, provideEditorComponents, provideVisualEditor, provideVisualEditorStore, selectBlocksForSection, selectBlocksForSlot, selectCanRedo, selectCanUndo, selectCurrentPage, selectCurrentPageId, selectCurrentPageSlug, selectCurrentPageStatus, selectCurrentPageTitle, selectCurrentPageVersion, selectDraggedElementId, selectElementById, selectHistory, selectHistoryIndex, selectHistoryLength, selectIsDirty, selectIsDragging, selectIsPageLoaded, selectLastAction, selectSectionById, selectSections, selectSelectedBlock, selectSelectedBlockSlotName, selectSelectedElement, selectSelectedElementId, selectSelectedElementType, selectSelectedSection, selectSelectedSectionId, selectSelectedSectionType, selectVisualEditorState, visualEditorReducer };
 //# sourceMappingURL=kustomizer-visual-editor.mjs.map