@kustomizer/visual-editor 0.0.1 → 0.2.0

package/types/kustomizer-visual-editor.d.ts

@@ -3,9 +3,7 @@ import { InjectionToken, Type, EnvironmentProviders, OnInit, OnDestroy } from '@
 import { Observable } from 'rxjs';
 import * as _ngrx_store from '@ngrx/store';
 import * as _kustomizer_visual_editor from '@kustomizer/visual-editor';
-import { SafeHtml } from '@angular/platform-browser';
-import { Session, User, SupabaseClient } from '@supabase/supabase-js';
-import { CanActivateFn } from '@angular/router';
+import { SafeResourceUrl } from '@angular/platform-browser';
 
 /**
  * Navigation target for the visual editor
@@ -18,6 +16,8 @@ type VisualEditorNavigationTarget = {
 } | {
     type: 'page-preview';
     pageId: string;
+} | {
+    type: 'setup';
 };
 /**
  * Confirmation dialog options
@@ -84,12 +84,20 @@ interface VisualEditorState {
 declare const initialVisualEditorState: VisualEditorState;
 declare const VISUAL_EDITOR_FEATURE_KEY = "visualEditor";
 
-declare const SHOPIFY_API_VERSION = "2026-01";
+/**
+ * Shopify configuration for GraphQL API access
+ */
 interface ShopifyConfig {
     shopDomain: string;
     accessToken: string;
     apiVersion: string;
+    /** Optional proxy URL for development (bypasses CORS) */
+    proxyUrl?: string;
 }
+/**
+ * Injection token for Shopify configuration
+ * Can be provided as a static object or as an Observable for dynamic config
+ */
 declare const SHOPIFY_CONFIG: InjectionToken<ShopifyConfig | Observable<ShopifyConfig>>;
 /**
  * Metafield representation from Shopify
@@ -118,6 +126,8 @@ interface PageIndexEntry {
     updatedAt: string;
     publishedAt?: string;
     size: number;
+    /** MetafieldDefinition ID for this page's metafield (enables Storefront API access) */
+    definitionId?: string;
 }
 /**
  * Index of all pages stored in a single metafield
@@ -187,6 +197,28 @@ interface UpdatePageRequest {
 interface PublishPageRequest {
     version: number;
 }
+/**
+ * Shopify Storefront API configuration (read-only, public access)
+ */
+interface StorefrontConfig {
+    shopDomain: string;
+    storefrontAccessToken: string;
+    apiVersion: string;
+    /** Optional proxy URL for SSR (avoids CORS) */
+    proxyUrl?: string;
+}
+/**
+ * Injection token for Storefront API configuration.
+ * Used by the public-storefront to read metafields via the Storefront API.
+ */
+declare const STOREFRONT_CONFIG: InjectionToken<StorefrontConfig>;
+/**
+ * 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`)
+ */
+declare const STOREFRONT_URL: InjectionToken<string>;
 
 /**
  * Abstract strategy for loading pages into the editor
@@ -784,9 +816,11 @@ interface ComponentDefinition<TProps extends Record<string, unknown> = Record<st
      */
     icon?: string;
     /**
-     * Angular component class to render
+     * Angular component class to render.
+     * Optional for manifest-loaded definitions where the component is rendered
+     * in a remote iframe and the editor only needs metadata.
      */
-    component: Type<unknown>;
+    component?: Type<unknown>;
     /**
      * Schema of editable properties
      */
@@ -1343,7 +1377,6 @@ interface BlockPickerTarget {
 declare class BlockTreeItemComponent {
     readonly facade: VisualEditorFacade;
     private readonly dndService;
-    private readonly sanitizer;
     private readonly treeBlock;
     readonly block: _angular_core.InputSignal<EditorElement>;
     readonly context: _angular_core.InputSignal<BlockTreeContext>;
@@ -1375,7 +1408,7 @@ declare class BlockTreeItemComponent {
     readonly blockSlots: _angular_core.Signal<SlotDefinition[]>;
     readonly children: _angular_core.Signal<EditorElement[]>;
     readonly childContext: _angular_core.Signal<BlockTreeContext>;
-    readonly blockIcon: _angular_core.Signal<SafeHtml>;
+    readonly blockIcon: _angular_core.Signal<string>;
     readonly blockName: _angular_core.Signal<string>;
     readonly duplicable: _angular_core.Signal<boolean>;
     readonly canAddMore: _angular_core.Signal<boolean>;
@@ -1414,6 +1447,8 @@ declare class VisualEditorComponent implements OnInit, OnDestroy {
     private readonly loadingStrategy;
     private readonly config;
     private readonly dndService;
+    private readonly iframeBridge;
+    private readonly storefrontUrlService;
     private readonly sanitizer;
     private readonly destroy$;
     readonly showBackButton: _angular_core.Signal<boolean>;
@@ -1424,6 +1459,9 @@ declare class VisualEditorComponent implements OnInit, OnDestroy {
         isEditor: boolean;
     }>;
     private readonly canvasEl;
+    private readonly previewFrame;
+    readonly previewUrl: _angular_core.Signal<SafeResourceUrl | null>;
+    private iframeReady;
     readonly propertiesTab: _angular_core.WritableSignal<"props" | "blocks">;
     readonly expandedGroups: _angular_core.WritableSignal<Set<string>>;
     readonly expandedSections: _angular_core.WritableSignal<Set<string>>;
@@ -1465,19 +1503,18 @@ declare class VisualEditorComponent implements OnInit, OnDestroy {
     startEditingName(): void;
     saveEditingName(event: Event): void;
     cancelEditingName(): void;
+    constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
+    onIframeLoad(): void;
     goBack(): void;
     savePage(): void;
     publishPage(): void;
     unpublishPage(): void;
-    private readonly defaultSectionIcon;
-    private readonly defaultBlockIcon;
-    private toSafeIcon;
-    getIcon(def: ComponentDefinition): SafeHtml;
-    getBlockIcon(def: ComponentDefinition): SafeHtml;
-    getBlockIconByType(type: string): SafeHtml;
-    getSectionIcon(type: string): SafeHtml;
+    getIcon(def: ComponentDefinition): string;
+    getBlockIcon(def: ComponentDefinition): string;
+    getBlockIconByType(type: string): string;
+    getSectionIcon(type: string): string;
     isSectionExpanded(sectionId: string): boolean;
     isAllBlocksExpanded(sectionId: string): boolean;
     toggleSectionExpand(sectionId: string, event: Event): void;
@@ -1540,8 +1577,8 @@ declare class VisualEditorComponent implements OnInit, OnDestroy {
     addSectionFromPreset(rp: ResolvedPreset): void;
     addBlockToSectionFromPreset(section: EditorSection, rp: ResolvedPreset): void;
     addNestedBlockFromPreset(rp: ResolvedPreset): void;
-    getSectionPresetIcon(rp: ResolvedPreset): SafeHtml;
-    getBlockPresetIcon(rp: ResolvedPreset): SafeHtml;
+    getSectionPresetIcon(rp: ResolvedPreset): string;
+    getBlockPresetIcon(rp: ResolvedPreset): string;
     selectSection(section: EditorSection, event: Event): void;
     selectBlock(block: EditorElement): void;
     deleteSection(sectionId: string, event: Event): void;
@@ -1658,6 +1695,7 @@ declare class PageManagerComponent implements OnInit {
     readonly isDeleting: _angular_core.WritableSignal<boolean>;
     ngOnInit(): void;
     loadPages(): void;
+    openSetup(): void;
     openCreateDialog(): void;
     closeCreateDialog(): void;
     onTitleInput(event: Event): void;
@@ -1673,345 +1711,63 @@ declare class PageManagerComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageManagerComponent, "lib-page-manager", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * 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
- */
-declare const STORE_DOMAIN: InjectionToken<string>;
-interface Shop {
-    id: string;
-    name: string;
-    shopify_domain: string;
-}
-interface ShopUser {
-    email: string;
-    role: 'owner' | 'admin' | 'reader';
-}
-interface ShopLicense {
-    tier: 'starter' | 'growth' | 'enterprise';
-    expires_at: string | null;
-    active: boolean;
-}
-interface ShopAuthData {
-    shop: Shop | null;
-    user: ShopUser | null;
-    license: ShopLicense | null;
-}
-interface ShopAuthError {
-    code: string;
-    message: string;
-}
-declare class ShopAuthService {
-    private http;
-    private config;
-    private authService;
-    private storeDomainConfig;
-    private _shop;
-    private _user;
-    private _license;
-    private _loading;
-    private _error;
-    private _initialized;
-    readonly shop: _angular_core.Signal<Shop | null>;
-    readonly user: _angular_core.Signal<ShopUser | null>;
-    readonly license: _angular_core.Signal<ShopLicense | null>;
-    readonly loading: _angular_core.Signal<boolean>;
-    readonly error: _angular_core.Signal<ShopAuthError | null>;
-    readonly initialized: _angular_core.Signal<boolean>;
-    readonly shopId: _angular_core.Signal<string | null>;
-    readonly shopName: _angular_core.Signal<string | null>;
-    readonly shopifyDomain: _angular_core.Signal<string | null>;
-    readonly userEmail: _angular_core.Signal<string | null>;
-    readonly userRole: _angular_core.Signal<"owner" | "admin" | "reader" | null>;
-    readonly isOwner: _angular_core.Signal<boolean>;
-    readonly isAdmin: _angular_core.Signal<boolean>;
-    readonly canEdit: _angular_core.Signal<boolean>;
-    readonly licenseTier: _angular_core.Signal<"starter" | "growth" | "enterprise" | null>;
-    readonly licenseActive: _angular_core.Signal<boolean>;
-    readonly licenseExpiresAt: _angular_core.Signal<string | null>;
-    readonly hasAccess: _angular_core.Signal<boolean>;
-    readonly daysRemaining: _angular_core.Signal<number | null>;
-    readonly isLicenseExpiringSoon: _angular_core.Signal<boolean>;
-    /**
-     * Obtiene el dominio actual.
-     * Prioridad:
-     * 1. STORE_DOMAIN token (inyectado)
-     * 2. Query param ?shop= (solo en localhost)
-     * 3. window.location.hostname
-     */
-    getCurrentDomain(): string;
-    /**
-     * Autentica al usuario para el dominio actual.
-     * Esta es la función principal que debe llamarse al cargar la app.
-     */
-    authenticate(): Promise<ShopAuthData>;
-    /**
-     * Limpia el estado (para logout)
-     */
-    clear(): void;
-    /**
-     * Refresca la autenticación
-     */
-    refresh(): Promise<ShopAuthData>;
-    /**
-     * Verifica si el error actual indica que el usuario no tiene acceso
-     */
-    isNoAccessError(): boolean;
-    /**
-     * Verifica si el error actual indica que la licencia expiró
-     */
-    isLicenseExpiredError(): boolean;
-    /**
-     * Verifica si el usuario está inactivo
-     */
-    isUserInactiveError(): boolean;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShopAuthService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShopAuthService>;
-}
-
-declare class LicenseGuardComponent {
-    shopAuthService: ShopAuthService;
-    showExpirationWarning: _angular_core.InputSignal<boolean>;
-    subscribe: _angular_core.OutputEmitterRef<void>;
-    renew: _angular_core.OutputEmitterRef<void>;
-    reauth: _angular_core.OutputEmitterRef<void>;
-    retry: _angular_core.OutputEmitterRef<void>;
-    onSubscribe(): void;
-    onRenew(): void;
-    onReauth(): void;
-    onRetry(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LicenseGuardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LicenseGuardComponent, "lib-license-guard", never, { "showExpirationWarning": { "alias": "showExpirationWarning"; "required": false; "isSignal": true; }; }, { "subscribe": "subscribe"; "renew": "renew"; "reauth": "reauth"; "retry": "retry"; }, never, ["*"], true, never>;
-}
-
-declare class LoginComponent {
-    private authService;
-    private router;
-    loginSuccess: _angular_core.OutputEmitterRef<void>;
-    email: _angular_core.WritableSignal<string>;
-    password: _angular_core.WritableSignal<string>;
-    error: _angular_core.WritableSignal<string | null>;
-    loading: _angular_core.WritableSignal<boolean>;
-    isSignUp: _angular_core.WritableSignal<boolean>;
-    showPassword: _angular_core.WritableSignal<boolean>;
-    toggleMode(): void;
-    togglePassword(): void;
-    onSubmit(): Promise<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoginComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoginComponent, "lib-login", never, {}, { "loginSuccess": "loginSuccess"; }, never, never, true, never>;
-}
-
-type ViewState = 'loading' | 'no-store' | 'license-expired';
-declare class ActivateLicenseComponent implements OnInit {
-    shopAuthService: ShopAuthService;
-    viewState: _angular_core.Signal<ViewState>;
-    ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActivateLicenseComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActivateLicenseComponent, "lib-activate-license", never, {}, {}, never, never, true, never>;
-}
-
-interface SupabaseConfig {
-    supabaseUrl: string;
-    supabaseAnonKey: string;
-}
-declare const SUPABASE_CONFIG: InjectionToken<SupabaseConfig>;
-declare class SupabaseAuthService implements OnDestroy {
-    private config;
-    private supabase;
-    private supabasePromise;
-    private authSubscription;
-    private _session;
-    private _user;
-    private _loading;
-    private _error;
-    private _initialized;
-    readonly session: _angular_core.Signal<Session | null>;
-    readonly user: _angular_core.Signal<User | null>;
-    readonly loading: _angular_core.Signal<boolean>;
-    readonly error: _angular_core.Signal<string | null>;
-    readonly initialized: _angular_core.Signal<boolean>;
-    readonly isAuthenticated: _angular_core.Signal<boolean>;
-    readonly accessToken: _angular_core.Signal<string | null>;
-    readonly userEmail: _angular_core.Signal<string | null>;
-    private getSupabaseClient;
-    private initializeClient;
-    ensureInitialized(): Promise<void>;
-    signInWithPassword(email: string, password: string): Promise<{
-        success: boolean;
-        error?: string;
-    }>;
-    signUp(email: string, password: string): Promise<{
-        success: boolean;
-        error?: string;
-    }>;
-    signOut(): Promise<void>;
-    resetPassword(email: string): Promise<{
-        success: boolean;
-        error?: string;
-    }>;
-    getClient(): Promise<SupabaseClient | null>;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SupabaseAuthService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SupabaseAuthService>;
-}
-
-declare class AppShellComponent {
-    authService: SupabaseAuthService;
-    shopAuthService: ShopAuthService;
-    loggedOut: _angular_core.OutputEmitterRef<void>;
-    logout(): Promise<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppShellComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppShellComponent, "lib-app-shell", never, {}, { "loggedOut": "loggedOut"; }, never, ["*"], true, never>;
-}
-
-declare class NoAccessComponent {
-    backToLogin: _angular_core.OutputEmitterRef<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NoAccessComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NoAccessComponent, "ke-no-access", never, {}, { "backToLogin": "backToLogin"; }, never, never, true, never>;
-}
-
-declare class LicenseExpiredComponent {
-    backToLogin: _angular_core.OutputEmitterRef<void>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LicenseExpiredComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LicenseExpiredComponent, "ke-license-expired", never, {}, { "backToLogin": "backToLogin"; }, never, never, true, never>;
-}
-
 /**
  * Injection token to enable in-memory page storage (for development)
  * When false (default), uses Shopify metafields via GraphQL API
  */
 declare const USE_IN_MEMORY_PAGES: InjectionToken<boolean>;
-/**
- * Injection token for page environment (metafield key prefix).
- * Default is 'production'.
- */
-declare const PAGE_ENVIRONMENT: InjectionToken<string>;
 declare class PageService {
     private readonly useInMemory;
-    private readonly pageEnvironment;
     private readonly memoryRepo;
     private readonly shopifyRepo;
-    private resolveEnvironment;
     /**
      * Get all pages (summaries only for listing)
      */
-    getPages(environment?: string): Observable<PageSummary[]>;
+    getPages(): Observable<PageSummary[]>;
     /**
      * Get a single page by ID (full content)
      */
-    getPage(id: string, environment?: string): Observable<Page>;
+    getPage(id: string): Observable<Page>;
     /**
      * Get a published page by slug (for public rendering)
      */
-    getPublishedPageBySlug(slug: string, environment?: string): Observable<Page>;
+    getPublishedPageBySlug(slug: string): Observable<Page>;
     /**
      * Create a new page
      */
-    createPage(request: CreatePageRequest, environment?: string): Observable<Page>;
+    createPage(request: CreatePageRequest): Observable<Page>;
     /**
      * Update an existing page
      */
-    updatePage(id: string, request: UpdatePageRequest, environment?: string): Observable<Page>;
+    updatePage(id: string, request: UpdatePageRequest): Observable<Page>;
     /**
      * Delete a page
      */
-    deletePage(id: string, environment?: string): Observable<void>;
+    deletePage(id: string): Observable<void>;
     /**
      * Publish a page (changes status to 'published')
      */
-    publishPage(id: string, request: PublishPageRequest, environment?: string): Observable<Page>;
+    publishPage(id: string, request: PublishPageRequest): Observable<Page>;
     /**
      * Unpublish a page (changes status to 'draft')
      */
-    unpublishPage(id: string, request: PublishPageRequest, environment?: string): Observable<Page>;
+    unpublishPage(id: string, request: PublishPageRequest): Observable<Page>;
     /**
      * Duplicate an existing page
      */
-    duplicatePage(id: string, environment?: string): Observable<Page>;
-    /**
-     * Delete all pages for a given environment
-     */
-    deletePagesByEnvironment(environment?: string): Observable<void>;
+    duplicatePage(id: string): Observable<Page>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<PageService>;
 }
 
-interface ShopifyAppConfig {
-    appUrl: string;
-}
-interface ShopifyTokenResponse {
-    accessToken: string;
-    shopifyDomain: string;
-}
-type TokenErrorCode = 'NOT_AUTHENTICATED' | 'NO_ACTIVE_STORE' | 'TOKEN_FETCH_FAILED' | 'SESSION_EXPIRED' | 'NO_STORE_ACCESS' | 'NETWORK_ERROR' | 'UNKNOWN_ERROR';
-interface TokenError {
-    code: TokenErrorCode;
-    message: string;
-    status?: number;
-}
-declare const SHOPIFY_APP_CONFIG: InjectionToken<ShopifyAppConfig>;
-declare class ShopifyTokenService {
-    private readonly http;
-    private readonly config;
-    private readonly authService;
-    private readonly shopAuthService;
-    private readonly CACHE_TTL_MS;
-    private readonly tokenCache;
-    private readonly _currentToken;
-    private readonly _currentDomain;
-    private readonly _loading;
-    private readonly _error;
-    private pendingRequest;
-    readonly currentToken: _angular_core.Signal<string | null>;
-    readonly currentDomain: _angular_core.Signal<string | null>;
-    readonly loading: _angular_core.Signal<boolean>;
-    readonly error: _angular_core.Signal<TokenError | null>;
-    readonly hasToken: _angular_core.Signal<boolean>;
-    readonly isReady: _angular_core.Signal<boolean>;
-    getToken(): Observable<ShopifyTokenResponse>;
-    getTokenForDomain(shopifyDomain: string): Observable<ShopifyTokenResponse>;
-    refreshToken(): Observable<ShopifyTokenResponse>;
-    invalidateCache(shopifyDomain?: string): void;
-    clear(): void;
-    private fetchToken;
-    private getCachedToken;
-    private setCachedToken;
-    private handleHttpError;
-    private createError;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShopifyTokenService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShopifyTokenService>;
-}
-
-type GraphQLErrorCode = 'GRAPHQL_ERROR' | 'EMPTY_RESPONSE' | 'UNAUTHORIZED' | 'FORBIDDEN' | 'RATE_LIMIT' | 'SERVER_ERROR' | 'NETWORK_ERROR' | 'HTTP_ERROR' | 'TOKEN_ERROR' | 'UNKNOWN_ERROR';
-interface GraphQLError {
-    code: GraphQLErrorCode;
-    message: string;
-    status?: number;
-    errors?: Array<{
-        message: string;
-    }>;
-    original?: unknown;
-}
 declare class ShopifyGraphQLClient {
     private readonly http;
-    private readonly authService;
-    private readonly shopAuthService;
     private readonly config;
-    query<T>(query: string, variables?: Record<string, unknown>): Observable<T>;
-    mutate<T>(mutation: string, variables?: Record<string, unknown>): Observable<T>;
+    query<T>(query: string, variables?: Record<string, any>): Observable<T>;
+    mutate<T>(mutation: string, variables?: Record<string, any>): Observable<T>;
     private executeOperation;
     private handleResponse;
-    private handleHttpError;
-    private createError;
+    private handleError;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShopifyGraphQLClient, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShopifyGraphQLClient>;
 }
@@ -2022,22 +1778,34 @@ declare const MAX_METAFIELD_SIZE: number;
 declare const GET_SHOP_METAFIELD_QUERY = "\n  query GetShopMetafield($namespace: String!, $key: String!) {\n    shop {\n      id\n      metafield(namespace: $namespace, key: $key) {\n        id\n        value\n        createdAt\n        updatedAt\n      }\n    }\n  }\n";
 declare const SET_METAFIELD_MUTATION = "\n  mutation SetMetafield($metafields: [MetafieldsSetInput!]!) {\n    metafieldsSet(metafields: $metafields) {\n      metafields {\n        id\n        namespace\n        key\n        value\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }\n";
 declare const DELETE_METAFIELDS_MUTATION = "\n  mutation DeleteMetafields($metafields: [MetafieldIdentifierInput!]!) {\n    metafieldsDelete(metafields: $metafields) {\n      deletedMetafields {\n        key\n        namespace\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }\n";
+declare const CREATE_METAFIELD_DEFINITION_MUTATION = "\n  mutation CreateMetafieldDefinition($definition: MetafieldDefinitionInput!) {\n    metafieldDefinitionCreate(definition: $definition) {\n      createdDefinition {\n        id\n      }\n      userErrors {\n        field\n        message\n        code\n      }\n    }\n  }\n";
+declare const DELETE_METAFIELD_DEFINITION_MUTATION = "\n  mutation DeleteMetafieldDefinition($id: ID!) {\n    metafieldDefinitionDelete(id: $id) {\n      deletedDefinitionId\n      userErrors {\n        field\n        message\n        code\n      }\n    }\n  }\n";
+declare const GET_METAFIELD_DEFINITION_QUERY = "\n  query GetMetafieldDefinition($ownerType: MetafieldOwnerType!, $namespace: String, $key: String!) {\n    metafieldDefinition(identifier: { ownerType: $ownerType, namespace: $namespace, key: $key }) {\n      id\n    }\n  }\n";
 declare const GET_SHOP_ID_QUERY = "\n  query GetShopId {\n    shop {\n      id\n    }\n  }\n";
 declare class ShopifyMetafieldRepository {
     private readonly client;
-    private resolveEnvironment;
-    private buildIndexKey;
-    private buildPageKey;
     getMetafield(namespace: string, key: string): Observable<Metafield | null>;
     setMetafield(namespace: string, key: string, value: any, ownerId: string): Observable<Metafield>;
     deleteMetafield(namespace: string, key: string): Observable<void>;
     getShopId(): Observable<string>;
-    getPageIndex(environment?: string): Observable<PagesIndex>;
-    updatePageIndex(index: PagesIndex, environment?: string): Observable<PagesIndex>;
-    getPageMetafield(pageId: string, environment?: string): Observable<Page | null>;
-    setPageMetafield(pageId: string, page: Page, environment?: string): Observable<Page>;
-    deletePageMetafield(pageId: string, environment?: string): Observable<void>;
-    resetPageIndex(environment?: string): Observable<PagesIndex>;
+    getPageIndex(): Observable<PagesIndex>;
+    updatePageIndex(index: PagesIndex): Observable<PagesIndex>;
+    getPageMetafield(pageId: string): Observable<Page | null>;
+    setPageMetafield(pageId: string, page: Page): Observable<Page>;
+    deletePageMetafield(pageId: string): Observable<void>;
+    /**
+     * Create a MetafieldDefinition with PUBLIC_READ storefront access.
+     * Idempotent: if definition already exists, returns the existing ID.
+     */
+    createMetafieldDefinition(namespace: string, key: string, name: string): Observable<string>;
+    /**
+     * Delete a MetafieldDefinition by ID. Does not delete associated metafields.
+     */
+    deleteMetafieldDefinition(definitionId: string): Observable<void>;
+    /**
+     * Look up a MetafieldDefinition ID by namespace and key.
+     */
+    getMetafieldDefinitionId(namespace: string, key: string): Observable<string>;
     validateSize(data: any): {
         valid: boolean;
         size: number;
@@ -2050,17 +1818,23 @@ declare class ShopifyMetafieldRepository {
 
 declare class PageShopifyRepository {
     private readonly metafieldRepo;
-    private resolveEnvironment;
-    getPages(environment?: string): Observable<PageSummary[]>;
-    getPage(id: string, environment?: string): Observable<Page>;
-    getPublishedPageBySlug(slug: string, environment?: string): Observable<Page>;
-    createPage(request: CreatePageRequest, environment?: string): Observable<Page>;
-    updatePage(id: string, request: UpdatePageRequest, environment?: string): Observable<Page>;
-    deletePage(id: string, environment?: string): Observable<void>;
-    publishPage(id: string, request: PublishPageRequest, environment?: string): Observable<Page>;
-    unpublishPage(id: string, request: PublishPageRequest, environment?: string): Observable<Page>;
-    duplicatePage(id: string, environment?: string): Observable<Page>;
-    deletePagesByEnvironment(environment?: string): Observable<void>;
+    getPages(): Observable<PageSummary[]>;
+    getPage(id: string): Observable<Page>;
+    getPublishedPageBySlug(slug: string): Observable<Page>;
+    createPage(request: CreatePageRequest): Observable<Page>;
+    updatePage(id: string, request: UpdatePageRequest): Observable<Page>;
+    deletePage(id: string): Observable<void>;
+    publishPage(id: string, request: PublishPageRequest): Observable<Page>;
+    unpublishPage(id: string, request: PublishPageRequest): Observable<Page>;
+    duplicatePage(id: string): Observable<Page>;
+    /**
+     * Backfill MetafieldDefinitions for existing pages that don't have one.
+     * Creates definitions with PUBLIC_READ storefront access.
+     */
+    ensureDefinitionsExist(): Observable<{
+        created: number;
+        skipped: number;
+    }>;
     private validateUniqueSlug;
     private generateUniqueSlug;
     private addPageToIndex;
@@ -2071,135 +1845,199 @@ declare class PageShopifyRepository {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<PageShopifyRepository>;
 }
 
-interface TeamMember {
-    email: string;
-    role: 'owner' | 'admin' | 'reader';
-    status: 'active' | 'inactive' | 'suspended';
-    invited_by: string | null;
-    joined_at: string;
-    is_current_user: boolean;
-}
-interface PendingInvitation {
-    id: string;
-    email: string;
-    role: 'admin' | 'reader';
-    invited_by: string;
-    created_at: string;
-    expires_at: string;
-    is_expired: boolean;
-}
-interface CurrentUser {
-    email: string;
-    role: string;
-    can_invite: boolean;
-    can_remove_members: boolean;
-}
-interface TeamData {
-    shop: {
-        id: string;
-        name: string;
-        shopify_domain: string;
-        allowed_domains: string[];
-    };
-    members: TeamMember[];
-    invitations: PendingInvitation[];
-    current_user: CurrentUser;
-    summary: {
-        total_members: number;
-        pending_invitations: number;
-    };
+/**
+ * Read-only GraphQL client for the Shopify Storefront API.
+ * Uses a Storefront Access Token (public, non-secret) instead of Admin API credentials.
+ */
+declare class StorefrontGraphQLClient {
+    private readonly http;
+    private readonly config;
+    query<T>(query: string, variables?: Record<string, any>): Observable<T>;
+    private handleResponse;
+    private handleError;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StorefrontGraphQLClient, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<StorefrontGraphQLClient>;
 }
-interface InviteResult {
-    invitation_id: string;
-    token: string;
-    expires_at: string;
-    email: string;
-    role: string;
-}
-interface AcceptInvitationResult {
-    success: boolean;
-    shop: {
-        id: string;
-        name: string;
-        shopify_domain: string;
-    };
-    role: string;
-    message: string;
+
+/**
+ * Read-only metafield repository using the Shopify Storefront API.
+ * Only works for metafields with MetafieldDefinitions that have `access.storefront: PUBLIC_READ`.
+ */
+declare class StorefrontMetafieldRepository {
+    private readonly client;
+    getMetafield(namespace: string, key: string): Observable<{
+        value: string;
+        type: string;
+    } | null>;
+    getPageIndex(): Observable<PagesIndex>;
+    getPageMetafield(pageId: string): Observable<Page | null>;
+    private getDefaultIndex;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StorefrontMetafieldRepository, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<StorefrontMetafieldRepository>;
 }
-declare class ShopTeamService {
-    private http;
-    private config;
-    private authService;
-    private shopAuthService;
-    private _team;
-    private _loading;
-    private _error;
-    readonly team: _angular_core.Signal<TeamData | null>;
-    readonly loading: _angular_core.Signal<boolean>;
-    readonly error: _angular_core.Signal<string | null>;
-    readonly members: _angular_core.Signal<TeamMember[]>;
-    readonly invitations: _angular_core.Signal<PendingInvitation[]>;
-    readonly currentUser: _angular_core.Signal<CurrentUser | null>;
-    readonly activeMembers: _angular_core.Signal<TeamMember[]>;
-    readonly pendingInvitations: _angular_core.Signal<PendingInvitation[]>;
-    readonly canInvite: _angular_core.Signal<boolean>;
-    /**
-     * Carga el equipo de la shop actual
-     */
-    loadTeam(): Promise<TeamData | null>;
+
+/**
+ * Read-only page repository using the Shopify Storefront API.
+ * Used by the public-storefront to read published pages without Admin API access.
+ */
+declare class PageStorefrontRepository {
+    private readonly metafieldRepo;
+    getPages(): Observable<PageSummary[]>;
+    getPublishedPages(): Observable<PageSummary[]>;
+    getPage(id: string): Observable<Page>;
+    getPublishedPageBySlug(slug: string): Observable<Page>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageStorefrontRepository, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<PageStorefrontRepository>;
+}
+
+/**
+ * A manifest describing all available components from a client's storefront.
+ * Fetched at runtime by the editor via HTTP.
+ */
+interface ComponentManifest {
+    version: string;
+    components: ComponentManifestEntry[];
+}
+/**
+ * A single component entry in the manifest — same shape as ComponentDefinition
+ * but without the Angular `component` class reference.
+ */
+interface ComponentManifestEntry {
+    type: string;
+    name: string;
+    description?: string;
+    category: ComponentCategory;
+    icon?: string;
+    isSection?: boolean;
+    isBlock?: boolean;
+    blockScope?: 'section' | 'theme';
+    sectionTypes?: string[];
+    draggable?: boolean;
+    deletable?: boolean;
+    duplicable?: boolean;
+    tags?: string[];
+    order?: number;
+    slots?: SlotDefinition[];
+    props: PropSchemaMap;
+}
+
+/**
+ * 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).
+ */
+declare class ManifestLoaderService {
+    private readonly http;
+    private readonly registry;
     /**
-     * Invita a un usuario a la shop
+     * Fetch the manifest from the given URL and register all components.
      */
-    inviteUser(email: string, role: 'admin' | 'reader', message?: string): Promise<InviteResult | null>;
+    loadManifest(url: string): Observable<ComponentManifest>;
     /**
-     * Acepta una invitación (usado cuando un usuario hace click en el link de invitación)
+     * Register manifest entries in the ComponentRegistryService.
+     * Each entry becomes a ComponentDefinition without a `component` field.
      */
-    acceptInvitation(invitationToken: string): Promise<AcceptInvitationResult | null>;
+    registerManifestComponents(manifest: ComponentManifest): void;
+    private manifestEntryToDefinition;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ManifestLoaderService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ManifestLoaderService>;
+}
+
+/** Parent → Iframe */
+interface PageUpdateMessage {
+    type: 'kustomizer:page-update';
+    sections: EditorSection[];
+}
+interface SelectElementMessage {
+    type: 'kustomizer:select-element';
+    elementId: string;
+}
+interface DeselectMessage {
+    type: 'kustomizer:deselect';
+}
+/** Iframe → Parent */
+interface ReadyMessage {
+    type: 'kustomizer:ready';
+}
+interface ElementClickedMessage {
+    type: 'kustomizer:element-clicked';
+    elementId: string;
+    sectionId: string;
+}
+interface ElementHoverMessage {
+    type: 'kustomizer:element-hover';
+    elementId: string | null;
+}
+interface ElementMovedMessage {
+    type: 'kustomizer:element-moved';
+    elementId: string;
+    newIndex: number;
+    targetSectionId?: string;
+}
+/**
+ * Manages postMessage communication between the editor (parent) and the
+ * storefront preview (iframe).
+ */
+declare class IframeBridgeService implements OnDestroy {
+    private readonly zone;
+    private iframe;
+    private origin;
+    private readonly messages$;
+    private readonly messageHandler;
+    constructor();
+    ngOnDestroy(): void;
     /**
-     * Genera el URL de invitación (para copiar/compartir)
+     * Connect to an iframe element. Must be called after the iframe loads.
      */
-    getInvitationUrl(token: string, baseUrl?: string): string;
+    connect(iframe: HTMLIFrameElement, origin: string): void;
     /**
-     * Limpia el estado
+     * Disconnect from the current iframe.
      */
-    clear(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShopTeamService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShopTeamService>;
+    disconnect(): void;
+    sendPageUpdate(sections: EditorSection[]): void;
+    sendSelectElement(elementId: string): void;
+    sendDeselect(): void;
+    onReady(): Observable<void>;
+    onElementClicked(): Observable<{
+        elementId: string;
+        sectionId: string;
+    }>;
+    onElementHover(): Observable<string | null>;
+    onElementMoved(): Observable<{
+        elementId: string;
+        newIndex: number;
+        targetSectionId?: string;
+    }>;
+    private send;
+    private handleMessage;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IframeBridgeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<IframeBridgeService>;
 }
 
-declare const authGuard: CanActivateFn;
-declare const noAuthGuard: CanActivateFn;
-
-declare const licenseGuard: CanActivateFn;
-declare const noLicenseGuard: CanActivateFn;
-
 /**
- * Guard que verifica:
- * 1. Usuario autenticado
- * 2. Usuario tiene acceso a la shop del dominio actual
- * 3. Licencia activa
+ * Service that holds and dynamically loads the per-merchant storefront URL.
  *
- * Redirige a:
- * - /login si no está autenticado
- * - /no-access si no tiene acceso a la shop
- * - /license-expired si la licencia expiró
- */
-declare const shopAuthGuard: CanActivateFn;
-/**
- * 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.
- */
-declare const noShopAuthGuard: CanActivateFn;
-/**
- * Guard que verifica que el usuario tenga rol de admin o owner.
- * Requiere que shopAuthGuard se haya ejecutado primero.
+ * Resolution order:
+ * 1. Metafield value loaded from GET /api/storefront-url (per-shop)
+ * 2. Static STOREFRONT_URL injection token (env var / window global fallback)
+ * 3. Empty string (editor works with local components only)
  */
-declare const shopAdminGuard: CanActivateFn;
-/**
- * Guard que verifica que el usuario pueda editar (owner o admin).
- * Los readers solo pueden ver, no editar.
- */
-declare const shopEditorGuard: CanActivateFn;
+declare class StorefrontUrlService {
+    private readonly http;
+    private readonly staticUrl;
+    /** Current storefront URL — reactive signal used by the editor and iframe. */
+    readonly url: _angular_core.WritableSignal<string>;
+    /**
+     * Load the storefront URL from the backend metafield.
+     * Falls back to the static STOREFRONT_URL token if the endpoint
+     * returns no value or fails.
+     *
+     * Called during APP_INITIALIZER.
+     */
+    load(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StorefrontUrlService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<StorefrontUrlService>;
+}
 
 declare class DragDropService {
     private readonly store;
@@ -2231,5 +2069,5 @@ declare class VisualEditor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<VisualEditor, "lib-visual-editor", never, {}, {}, never, never, true, never>;
 }
 
-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 type { AcceptInvitationResult, BlockPickerTarget, BlockTreeContext, ComponentCategory, ComponentDefinition, ComponentPreset, ConfirmDialogOptions, CreatePageRequest, CurrentUser, DragItem, DragItemKind, DropTarget, DropZone, EditorElement, EditorSection, GraphQLError, GraphQLErrorCode, HistoryEntry, InviteResult, Metafield, Page, PageContext, PageIndexEntry, PageStatus, PageSummary, PagesIndex, PendingInvitation, PresetBlockConfig, PropCondition, PropSchema, PropSchemaMap, PropType, PropValidation, PublishPageRequest, ResolvedPreset, RouterNavigationConfig, SelectOption, Shop, ShopAuthData, ShopAuthError, ShopLicense, ShopUser, ShopifyAppConfig, ShopifyConfig, ShopifyFile, ShopifyFilesPage, ShopifyTokenResponse, SlotConstraints, SlotDefinition, SupabaseConfig, TeamData, TeamMember, TokenError, TokenErrorCode, UpdatePageRequest, VisualEditorConfig, VisualEditorNavigationTarget, VisualEditorState };
+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, INDEX_KEY, IframeBridgeService, InputPageLoadingStrategy, MAX_METAFIELD_SIZE, ManifestLoaderService, 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, StorefrontUrlService, 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 };
+export type { BlockPickerTarget, BlockTreeContext, ComponentCategory, ComponentDefinition, ComponentManifest, ComponentManifestEntry, ComponentPreset, ConfirmDialogOptions, CreatePageRequest, DeselectMessage, DragItem, DragItemKind, DropTarget, DropZone, EditorElement, EditorSection, ElementClickedMessage, ElementHoverMessage, ElementMovedMessage, HistoryEntry, Metafield, Page, PageContext, PageIndexEntry, PageStatus, PageSummary, PageUpdateMessage, PagesIndex, PresetBlockConfig, PropCondition, PropSchema, PropSchemaMap, PropType, PropValidation, PublishPageRequest, ReadyMessage, ResolvedPreset, RouterNavigationConfig, SelectElementMessage, SelectOption, ShopifyConfig, ShopifyFile, ShopifyFilesPage, SlotConstraints, SlotDefinition, StorefrontConfig, UpdatePageRequest, VisualEditorConfig, VisualEditorNavigationTarget, VisualEditorState };