@praxisui/list 1.0.0-beta.4 → 1.0.0-beta.41

package/index.d.ts

@@ -1,11 +1,12 @@
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, Observable } from 'rxjs';
-import * as i0 from '@angular/core';
-import { OnInit, OnChanges, EventEmitter, SimpleChanges, DoCheck, Provider } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, DoCheck, Provider } from '@angular/core';
 import { MatSelectionListChange } from '@angular/material/list';
 import { FormGroup, FormControl } from '@angular/forms';
+import { BaseAiAdapter, Capability as Capability$1, PatchResult } from '@praxisui/ai';
 import { SettingsValueProvider } from '@praxisui/settings-panel';
-import { ComponentDocMeta } from '@praxisui/core';
+import { GlobalActionCatalogEntry, ComponentDocMeta, AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog } from '@praxisui/core';
 
 type TemplateType = 'text' | 'icon' | 'image' | 'chip' | 'rating' | 'currency' | 'date' | 'html' | 'slot';
 interface TemplateDef {
@@ -15,6 +16,13 @@ interface TemplateDef {
     style?: string;
     color?: string;
     variant?: 'filled' | 'outlined';
+    props?: {
+        rating?: {
+            max?: number;
+            size?: number;
+            color?: string;
+        };
+    };
     imageAlt?: string;
     badge?: {
         expr: string;
@@ -37,7 +45,7 @@ interface PraxisListConfig {
         sort?: string[];
     };
     layout?: {
-        variant?: 'list' | 'cards';
+        variant?: 'list' | 'cards' | 'tiles';
         density?: 'default' | 'comfortable' | 'compact';
         lines?: 1 | 2 | 3;
         dividers?: 'none' | 'between' | 'all';
@@ -48,7 +56,7 @@ interface PraxisListConfig {
         pageSize?: number;
     };
     skin?: {
-        type?: 'pill-soft' | 'gradient-tile' | 'glass' | 'elevated' | 'custom';
+        type?: 'pill-soft' | 'gradient-tile' | 'glass' | 'elevated' | 'outline' | 'flat' | 'neumorphism' | 'custom';
         gradient?: {
             from: string;
             to: string;
@@ -76,6 +84,10 @@ interface PraxisListConfig {
         trailing?: TemplateDef;
         metaPlacement?: 'side' | 'line';
         metaPrefixIcon?: string;
+        statusPosition?: 'inline' | 'top-right';
+        chipColorMap?: Record<string, string>;
+        chipLabelMap?: Record<string, string>;
+        iconColorMap?: Record<string, string>;
         features?: ListFeatureDef[];
         featuresVisible?: boolean;
         featuresMode?: 'icons+labels' | 'icons-only' | 'labels-only';
@@ -94,8 +106,28 @@ interface PraxisListConfig {
         buttonVariant?: 'stroked' | 'raised' | 'flat';
         showIf?: string;
         emitPayload?: 'item' | 'id' | 'value';
+        command?: string;
+        globalPayload?: any;
+        emitLocal?: boolean;
+        showLoading?: boolean;
+        confirmation?: {
+            title?: string;
+            message?: string;
+            type?: 'danger' | 'warning' | 'info';
+        };
     }>;
     i18n?: Record<string, string>;
+    ui?: {
+        showSearch?: boolean;
+        searchField?: string;
+        searchPlaceholder?: string;
+        showSort?: boolean;
+        sortOptions?: Array<string | {
+            label: string;
+            value: string;
+        }>;
+        showRange?: boolean;
+    };
     a11y?: {
         ariaLabel?: string;
         ariaLabelledBy?: string;
@@ -131,13 +163,23 @@ interface ListSection<T = any> {
     items: T[];
 }
 declare class ListDataService<T = any> {
+    private readonly DEBUG;
     private config$;
     private refresh$;
     private pageable$;
     private query$;
     readonly loading$: BehaviorSubject<boolean>;
     readonly total$: BehaviorSubject<number>;
+    readonly pageState$: Observable<{
+        pageNumber: number;
+        pageSize: number;
+        sort?: string[];
+    }>;
     private lastSig;
+    private nextObjectId;
+    private readonly objectIds;
+    private readonly logger;
+    private readonly logContext;
     private readonly crud;
     setConfig(config: PraxisListConfig): void;
     refresh(): void;
@@ -149,13 +191,39 @@ declare class ListDataService<T = any> {
     setSort(sort: string[]): void;
     setQuery(q: Record<string, any>): void;
     groupedStream(): Observable<ListSection<T>[]>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ListDataService<any>, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ListDataService<any>>;
+    private buildConfigSignature;
+    private buildLocalDataSignature;
+    private ensureObjectId;
+    private safeSerialize;
+    private warnFilterFallbackOnce;
+    private buildLogOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListDataService<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ListDataService<any>>;
+}
+
+declare class ListAiAdapter extends BaseAiAdapter<PraxisListConfig> {
+    private list;
+    componentName: string;
+    constructor(list: PraxisList);
+    getCurrentConfig(): PraxisListConfig;
+    getCapabilities(): Capability$1[];
+    getRuntimeState(): Record<string, any>;
+    createSnapshot(): PraxisListConfig;
+    restoreSnapshot(snapshot: PraxisListConfig): Promise<void>;
+    applyPatch(patch: Partial<PraxisListConfig>, _intent?: string): Promise<PatchResult>;
+    private applyConfig;
+    private smartMergeListConfig;
+    private sanitizePatch;
+    private cloneConfig;
 }
 
-declare class PraxisList implements OnInit, OnChanges {
+declare class PraxisList implements OnInit, OnChanges, OnDestroy {
+    private static nextSkinScopeId;
     config: PraxisListConfig;
+    listId: string;
+    componentInstanceId?: string;
     form?: FormGroup | null;
+    enableCustomization: boolean;
     itemClick: EventEmitter<ListItemEvent>;
     actionClick: EventEmitter<ListActionEvent>;
     selectionChange: EventEmitter<ListSelectionEvent>;
@@ -163,21 +231,52 @@ declare class PraxisList implements OnInit, OnChanges {
     sections$: rxjs.Observable<ListSection<any>[]>;
     loading$: rxjs.Observable<boolean>;
     total$: rxjs.Observable<number>;
+    page$: rxjs.Observable<{
+        pageNumber: number;
+        pageSize: number;
+        sort?: string[];
+    }>;
+    private lastQuery;
+    private search$;
     get layoutLines(): number;
     boundControl: FormControl<unknown | unknown[] | null>;
+    readonly skinScopeId: string;
     skinClasses: string;
     inlineCss: string;
+    readonly cspNonce: string | null;
+    aiAdapter: ListAiAdapter;
     private readonly storage;
     private readonly skin;
     private inferredForPath;
     private readonly data;
     private readonly settings;
     private readonly cdr;
+    private readonly componentKeys;
+    private readonly logger;
+    private readonly logContext;
+    private readonly route;
+    private readonly globalActions;
+    private readonly dialog;
+    private warnedMissingId;
+    private hasHydratedPersistence;
+    private hydratedPersistenceKey;
+    private hydratingPersistenceKey;
+    private externalConfigRevision;
+    private nextActionItemObjectId;
+    private readonly actionItemObjectIds;
+    private readonly destroy$;
+    actionLoadingState: Record<string, boolean>;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     private applyPersistence;
+    private applyConfigChange;
+    private setupSearch;
+    private persistConfig;
     private applySkins;
     isListVariant(): boolean;
+    isCardsVariant(): boolean;
+    isTilesVariant(): boolean;
     isSelectionEnabled(): boolean;
     private setupSelectionBinding;
     leading: (item: any) => any;
@@ -185,7 +284,8 @@ declare class PraxisList implements OnInit, OnChanges {
     secondary: (item: any) => any;
     meta: (item: any) => any;
     trailing: (item: any) => any;
-    sectionHeader: (key: string) => string;
+    sectionHeaderTemplate: (key: string) => any;
+    emptyStateTemplate: () => any;
     featureLabel(item: any, expr: string): string;
     featuresVisible(): boolean;
     featuresMode(): 'icons+labels' | 'icons-only' | 'labels-only';
@@ -201,14 +301,46 @@ declare class PraxisList implements OnInit, OnChanges {
         buttonVariant?: "stroked" | "raised" | "flat";
         showIf?: string;
         emitPayload?: "item" | "id" | "value";
+        command?: string;
+        globalPayload?: any;
+        emitLocal?: boolean;
+        showLoading?: boolean;
+        confirmation?: {
+            title?: string;
+            message?: string;
+            type?: "danger" | "warning" | "info";
+        };
     }[];
     onItemClick(item: any, index: number, section?: string): void;
-    onActionClick(ev: MouseEvent, actionId: string, item: any, index: number): void;
+    onActionKeydown(ev: Event): void;
+    onActionClick(ev: MouseEvent, actionId: string, item: any, index: number): Promise<void>;
+    private isGlobalCommand;
+    private resolveActionPayload;
+    private resolveTemplate;
+    private resolveStringTemplate;
+    private lookup;
     onSelectionChange(_change: MatSelectionListChange): void;
     openConfigEditor(): void;
     nextPage(): void;
     prevPage(): void;
+    setPageSize(ps: number): void;
+    onSortChange(val: string): void;
+    onSearchInput(val: string): void;
+    sortOptionValue(op: any): string;
+    sortOptionLabel(op: any): string;
+    rangeStart(ps: {
+        pageNumber: number;
+        pageSize: number;
+    }): number;
+    rangeEnd(currLen: number, ps: {
+        pageNumber: number;
+        pageSize: number;
+    }, total: number): number;
+    applyConfigFromAdapter(newCfg: PraxisListConfig): void;
     private onEditorApplied;
+    private storageKey;
+    private componentKeyId;
+    private warnMissingId;
     private readonly crud;
     private tryInferTemplatingFromSchema;
     private evalSlot;
@@ -217,12 +349,30 @@ declare class PraxisList implements OnInit, OnChanges {
     private evalString;
     private parseTwoParams;
     private toBoolean;
+    private prettyLabel;
     private mapDateStyle;
     starIcon(index: number, ratingValue: string | number): string;
+    isThemeColor(color?: string): boolean;
+    chipStyle(color?: string, variant?: 'filled' | 'outlined'): string;
+    iconStyle(color?: string): string;
+    buttonStyle(color?: string, variant?: 'stroked' | 'raised' | 'flat'): string;
+    ratingMax(def?: any): number;
+    ratingThemeColor(def?: any): string | undefined;
+    ratingIconStyle(def?: any): string;
+    ratingRange(def?: any): number[];
     trackBySection: (_: number, s: ListSection<any>) => string | number;
     trackByItem: (i: number, it: any) => any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PraxisList, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisList, "praxis-list", never, { "config": { "alias": "config"; "required": false; }; "form": { "alias": "form"; "required": false; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+    isActionLoading(actionId: string, item: any, index: number): boolean;
+    private evaluateActionVisibility;
+    private resolveShowIfOperand;
+    private looseEquals;
+    private warnInvalidShowIfOnce;
+    private buildActionLoadingKey;
+    private ensureActionItemObjectId;
+    private warnGlobalCommandUnavailableOnce;
+    private buildLogOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisList, "praxis-list", never, { "config": { "alias": "config"; "required": false; }; "listId": { "alias": "listId"; "required": true; }; "componentInstanceId": { "alias": "componentInstanceId"; "required": false; }; "form": { "alias": "form"; "required": false; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 type NormalizedListConfig = Omit<PraxisListConfig, 'dataSource' | 'layout' | 'selection' | 'skin' | 'i18n'> & {
@@ -233,7 +383,7 @@ type NormalizedListConfig = Omit<PraxisListConfig, 'dataSource' | 'layout' | 'se
         sort?: string[];
     };
     layout: {
-        variant: 'list' | 'cards';
+        variant: 'list' | 'cards' | 'tiles';
         density?: 'default' | 'comfortable' | 'compact';
         lines: 1 | 2 | 3;
         dividers?: 'none' | 'between' | 'all';
@@ -244,7 +394,7 @@ type NormalizedListConfig = Omit<PraxisListConfig, 'dataSource' | 'layout' | 'se
         pageSize?: number;
     };
     skin: {
-        type: 'pill-soft' | 'gradient-tile' | 'glass' | 'elevated' | 'custom';
+        type: 'pill-soft' | 'gradient-tile' | 'glass' | 'elevated' | 'outline' | 'flat' | 'neumorphism' | 'custom';
         gradient: {
             from: string;
             to: string;
@@ -269,7 +419,12 @@ type NormalizedListConfig = Omit<PraxisListConfig, 'dataSource' | 'layout' | 'se
         currency?: string;
     };
     actions?: PraxisListConfig['actions'];
+    ui: NonNullable<PraxisListConfig['ui']>;
+    a11y?: PraxisListConfig['a11y'];
+    events?: PraxisListConfig['events'];
 };
+type SkinType = NormalizedListConfig['skin']['type'];
+type SkinPreset = Exclude<SkinType, 'custom'>;
 declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
     config: PraxisListConfig;
     listId?: string;
@@ -285,25 +440,27 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
     sortDir: 'asc' | 'desc';
     mappingPrimary: {
         field?: string;
-        type: 'text' | 'currency' | 'date';
+        type: 'text' | 'currency' | 'date' | 'html';
         currencyCode?: string;
         locale?: string;
         dateStyle?: 'short' | 'medium' | 'long' | 'full';
         class?: string;
         style?: string;
+        extraPipe?: string;
     };
     mappingSecondary: {
         field?: string;
-        type: 'text' | 'currency' | 'date';
+        type: 'text' | 'currency' | 'date' | 'html';
         currencyCode?: string;
         locale?: string;
         dateStyle?: 'short' | 'medium' | 'long' | 'full';
         class?: string;
         style?: string;
+        extraPipe?: string;
     };
     mappingMeta: {
         field?: string;
-        type: 'text' | 'currency' | 'date' | 'chip' | 'rating';
+        type: 'text' | 'currency' | 'date' | 'chip' | 'rating' | 'icon' | 'image' | 'html';
         currencyCode?: string;
         locale?: string;
         dateStyle?: 'short' | 'medium' | 'long' | 'full';
@@ -312,31 +469,106 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
         placement?: 'side' | 'line';
         chipColor?: string;
         chipVariant?: 'filled' | 'outlined';
+        ratingColor?: string;
+        ratingSize?: number;
+        ratingMax?: number;
+        iconColor?: string;
+        imageAlt?: string;
+        extraPipe?: string;
     };
     mappingMetaPrefixIcon?: string;
     mappingTrailing: {
         field?: string;
-        type?: 'text' | 'currency' | 'date' | 'chip';
+        type?: 'text' | 'currency' | 'date' | 'chip' | 'icon' | 'rating' | 'html' | 'image';
         class?: string;
         style?: string;
         chipColor?: string;
         chipVariant?: 'filled' | 'outlined';
+        ratingColor?: string;
+        ratingSize?: number;
+        ratingMax?: number;
+        iconColor?: string;
+        imageUrl?: string;
+        imageAlt?: string;
         currencyCode?: string;
         locale?: string;
         dateStyle?: 'short' | 'medium' | 'long' | 'full';
+        extraPipe?: string;
     };
     mappingLeading: {
-        type: 'icon' | 'image';
+        field?: string;
+        type: 'icon' | 'image' | 'text' | 'chip' | 'rating' | 'html';
         icon?: string;
         imageUrl?: string;
+        imageAlt?: string;
         badgeText?: string;
         badgeColor?: string;
         badgeVariant?: 'filled' | 'outlined';
+        class?: string;
+        style?: string;
+        chipColor?: string;
+        chipVariant?: 'filled' | 'outlined';
+        ratingColor?: string;
+        ratingSize?: number;
+        ratingMax?: number;
+        iconColor?: string;
+        extraPipe?: string;
+    };
+    mappingSectionHeader: {
+        type: 'text' | 'chip' | 'icon' | 'image' | 'rating' | 'html';
+        expr?: string;
+        class?: string;
+        style?: string;
+        chipColor?: string;
+        chipVariant?: 'filled' | 'outlined';
+        ratingColor?: string;
+        ratingSize?: number;
+        ratingMax?: number;
+        iconColor?: string;
+        imageUrl?: string;
+        imageAlt?: string;
+        extraPipe?: string;
+    };
+    mappingEmptyState: {
+        type: 'text' | 'chip' | 'icon' | 'image' | 'rating' | 'html';
+        expr?: string;
+        class?: string;
+        style?: string;
+        chipColor?: string;
+        chipVariant?: 'filled' | 'outlined';
+        ratingColor?: string;
+        ratingSize?: number;
+        ratingMax?: number;
+        iconColor?: string;
+        imageUrl?: string;
+        imageAlt?: string;
+        extraPipe?: string;
     };
     mapping: {
         leadingIcon?: string;
     };
     private mappingDirty;
+    private appliedMappingSnapshot;
+    statusPosition: 'inline' | 'top-right' | undefined;
+    iconColorMapEntries: Array<{
+        key: string;
+        color?: string;
+    }>;
+    chipColorMapEntries: Array<{
+        key: string;
+        color?: string;
+    }>;
+    chipLabelMapEntries: Array<{
+        key: string;
+        label?: string;
+    }>;
+    globalActionCatalog: GlobalActionCatalogEntry[];
+    selectedGlobalActionId?: string;
+    uiSortRows: Array<{
+        label?: string;
+        field?: string;
+        dir?: 'asc' | 'desc';
+    }>;
     mappingMetaFields: string[];
     mappingMetaSeparator: string;
     mappingMetaWrapSecondInParens: boolean;
@@ -349,6 +581,9 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
     }>;
     featuresVisible: boolean;
     featuresMode: 'icons+labels' | 'icons-only' | 'labels-only';
+    skeletonCountInput: number;
+    queryJson: string;
+    queryError: string;
     private crud;
     private resourcePathChanges;
     constructor(injected?: any);
@@ -361,7 +596,8 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
     private normalize;
     private setupSchemaWatcher;
     onResourcePathChange(value: string): void;
-    applySkinPreset(preset: 'pill-soft' | 'gradient-tile' | 'glass' | 'elevated' | 'outline' | 'flat' | 'neumorphism'): void;
+    applySkinPreset(preset: SkinPreset): void;
+    applyLayoutPreset(preset: 'tiles-modern'): void;
     previewData: {
         title: string;
         subtitle: string;
@@ -369,17 +605,103 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
         salary: number;
         hireDate: string;
         rating: number;
+        name: string;
+        status: string;
+        price: number;
+        imageUrl: string;
     }[];
     skinPreviewTheme: 'light' | 'dark' | 'grid';
+    readonly metaTypeConfigs: Array<{
+        type: 'text' | 'chip' | 'rating' | 'currency' | 'date' | 'icon' | 'image' | 'html';
+        label: string;
+        icon: string;
+        props?: string[];
+    }>;
+    readonly primaryTypeConfigs: {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    }[];
+    readonly secondaryTypeConfigs: {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    }[];
+    readonly leadingTypeConfigs: {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    }[];
+    readonly trailingTypeConfigs: {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    }[];
+    readonly sectionHeaderTypeConfigs: {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    }[];
+    readonly emptyStateTypeConfigs: {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    }[];
+    readonly paletteOptions: Array<{
+        value?: string;
+        label: string;
+    }>;
+    isThemeColor(value?: string): boolean;
+    isM3Color(value?: string): boolean;
+    isCustomColor(value?: string): boolean;
+    iconStyle(color?: string): string;
+    buttonStyle(color?: string, variant?: 'stroked' | 'raised' | 'flat'): string;
+    colorDotBackground(value?: string): string;
+    enableCustomColor(obj: any, prop: string, fallback?: string): void;
+    enableCustomActionColor(action: any, fallback?: string): void;
     addAction(): void;
     removeAction(idx: number): void;
     onActionsChanged(): void;
+    ensureConfirmation(action: any): void;
+    setConfirmationField(action: any, field: 'title' | 'message', value: string): void;
+    applyConfirmationPreset(action: any, type?: 'danger' | 'warning' | 'info' | ''): void;
+    isGlobalPayloadInvalid(payload: any): boolean;
+    applyGlobalPayloadExample(action: any): void;
+    globalPayloadExampleHint(action: any): string;
+    globalPayloadSchemaTooltip(action: any): string;
+    onGlobalActionSelected(id?: string): void;
+    private addGlobalActionFromCatalog;
+    metaTypeConfig(type?: string): {
+        type: "text" | "chip" | "rating" | "currency" | "date" | "icon" | "image" | "html";
+        label: string;
+        icon: string;
+        props?: string[];
+    } | undefined;
+    metaSupports(prop: string): boolean;
     ngDoCheck(): void;
     reset(): void;
     onLayoutChanged(): void;
     onSelectionChanged(): void;
+    onSkinGradientChanged(prop: 'from' | 'to' | 'angle', value: string | number): void;
+    onSkinTypeChanged(type: SkinType): void;
     onSkinChanged(): void;
+    private ensureSkinGradient;
+    onQueryChanged(value: string): void;
     onPageSizeChange(value: any): void;
+    onUiChanged(): void;
+    onSkeletonChanged(value: any): void;
+    addUiSortRow(): void;
+    removeUiSortRow(i: number): void;
+    onUiSortRowsChanged(): void;
+    isUiSortRowDuplicate(index: number): boolean;
+    isIconColorDuplicate(index: number): boolean;
+    private hydrateUiEditorFromConfig;
     private loadFieldsIfNeeded;
     updateSortConfig(): void;
     applyTemplate(): void;
@@ -388,6 +710,16 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
     addFeature(): void;
     removeFeature(idx: number): void;
     onFeaturesChanged(): void;
+    addIconColorEntry(): void;
+    removeIconColorEntry(i: number): void;
+    onIconColorMapChanged(): void;
+    addChipColorEntry(): void;
+    removeChipColorEntry(i: number): void;
+    onChipColorMapChanged(): void;
+    addChipLabelEntry(): void;
+    removeChipLabelEntry(i: number): void;
+    onChipLabelMapChanged(): void;
+    setPipe(target: any, spec: string): void;
     insertFeatureToken(index: number, inputEl: HTMLInputElement | HTMLTextAreaElement, field: string): void;
     insertLiteralAt(index: number, inputEl: HTMLInputElement | HTMLTextAreaElement, text: string): void;
     wrapSelectionAt(index: number, inputEl: HTMLInputElement | HTMLTextAreaElement, left: string, right: string): void;
@@ -395,13 +727,25 @@ declare class PraxisListConfigEditor implements SettingsValueProvider, DoCheck {
     private updateFeatureExpr;
     private hydrateMappingFromTemplating;
     markDirty(): void;
+    private getMappingSnapshot;
+    private updateMappingDirty;
+    private isJsonLike;
+    private resolveGlobalActionCatalog;
+    private normalizeActionPayloads;
     verify(): void;
     inferFromFields(): void;
     generateFeaturesFromMetaComposition(): void;
     metaComposePreview(): string;
+    private splitTopLevelPipe;
+    private validateImageUrl;
+    isImageUrlInvalid(url?: string): boolean;
+    isImageUrlRequiredInvalid(url?: string): boolean;
+    isRatingSizeInvalid(value?: number): boolean;
+    isRatingMaxInvalid(value?: number): boolean;
     private suggestIcon;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PraxisListConfigEditor, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisListConfigEditor, "praxis-list-config-editor", never, { "config": { "alias": "config"; "required": false; }; "listId": { "alias": "listId"; "required": false; }; }, {}, never, never, true, never>;
+    getTypeIcon(type: string): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisListConfigEditor, [{ optional: true; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisListConfigEditor, "praxis-list-config-editor", never, { "config": { "alias": "config"; "required": false; }; "listId": { "alias": "listId"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -413,9 +757,10 @@ declare function inferTemplatingFromSchema(cfg: PraxisListConfig, fieldNames: st
 
 declare class ListSkinService {
     toHostClasses(config?: PraxisListConfig): string[];
-    toInlineStyle(config?: PraxisListConfig): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ListSkinService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ListSkinService>;
+    toCssVars(config?: PraxisListConfig): Record<string, string>;
+    toInlineStyle(config?: PraxisListConfig, rootSelector?: string, includeVars?: boolean): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListSkinService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ListSkinService>;
 }
 
 /**
@@ -447,5 +792,245 @@ declare function adaptSelection(config: PraxisListConfig | undefined, items: any
 declare const PRAXIS_LIST_COMPONENT_METADATA: ComponentDocMeta;
 declare function providePraxisListMetadata(): Provider;
 
-export { ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PraxisList, PraxisListConfigEditor, adaptSelection, evalExpr, evaluateTemplate, inferTemplatingFromSchema, providePraxisListMetadata };
-export type { ListActionEvent, ListFeatureDef, ListItemEvent, ListSection, ListSelectionEvent, PraxisListConfig, TemplateDef, TemplateType };
+/**
+ * Capabilities catalog for PraxisListConfig.
+ * Uses paths compatible with AiConfigAgentService (patch is merged into config).
+ */
+
+declare module '@praxisui/core' {
+    interface AiCapabilityCategoryMap {
+        meta: true;
+        skin: true;
+        selection: true;
+        templating: true;
+        actions: true;
+        ui: true;
+        i18n: true;
+        a11y: true;
+    }
+}
+type CapabilityCategory = AiCapabilityCategory;
+type ValueKind = AiValueKind;
+interface Capability extends AiCapability {
+    category: CapabilityCategory;
+}
+interface CapabilityCatalog extends AiCapabilityCatalog {
+    capabilities: Capability[];
+}
+declare const LIST_AI_CAPABILITIES: CapabilityCatalog;
+
+type DemoScenario = 'operations' | 'catalog' | 'empty';
+type DemoVariant = 'list' | 'cards' | 'tiles';
+type DemoDensity = 'default' | 'comfortable' | 'compact';
+type DemoFeaturesMode = 'icons+labels' | 'icons-only' | 'labels-only';
+type DemoSelectionMode = 'none' | 'single' | 'multiple';
+type DemoSkin = 'elevated' | 'outline' | 'flat' | 'neumorphism' | 'pill-soft' | 'glass' | 'gradient-tile' | 'custom';
+type CodeTab = 'template' | 'ts' | 'config' | 'remote';
+interface ScenarioOption {
+    id: DemoScenario;
+    label: string;
+    helper: string;
+}
+interface VariantOption {
+    id: DemoVariant;
+    label: string;
+}
+interface DensityOption {
+    id: DemoDensity;
+    label: string;
+}
+interface FeaturesModeOption {
+    id: DemoFeaturesMode;
+    label: string;
+}
+interface SelectionModeOption {
+    id: DemoSelectionMode;
+    label: string;
+}
+interface SkinOption {
+    id: DemoSkin;
+    label: string;
+}
+interface CodeTabOption {
+    id: CodeTab;
+    label: string;
+}
+interface CoverageTopic {
+    title: string;
+    details: string;
+}
+interface EventLogEntry {
+    id: number;
+    message: string;
+}
+interface DemoItem {
+    id: number;
+    title: string;
+    subtitle: string;
+    department: string;
+    status: string;
+    statusIcon: string;
+    priority: string;
+    budget: number;
+    updatedAt: string;
+    rating: number;
+    owner: string;
+    city: string;
+    trend: string;
+    cover: string;
+}
+declare class PraxisListDocPageComponent {
+    readonly form: FormGroup<{
+        selectedItems: FormControl<unknown>;
+    }>;
+    readonly scenario: _angular_core.WritableSignal<DemoScenario>;
+    readonly variant: _angular_core.WritableSignal<DemoVariant>;
+    readonly density: _angular_core.WritableSignal<DemoDensity>;
+    readonly lines: _angular_core.WritableSignal<1 | 2 | 3>;
+    readonly skin: _angular_core.WritableSignal<DemoSkin>;
+    readonly featuresMode: _angular_core.WritableSignal<DemoFeaturesMode>;
+    readonly selectionMode: _angular_core.WritableSignal<DemoSelectionMode>;
+    readonly customizationEnabled: _angular_core.WritableSignal<boolean>;
+    readonly activeTab: _angular_core.WritableSignal<CodeTab>;
+    readonly eventLog: _angular_core.WritableSignal<EventLogEntry[]>;
+    private nextLogId;
+    readonly scenarioOptions: ReadonlyArray<ScenarioOption>;
+    readonly variantOptions: ReadonlyArray<VariantOption>;
+    readonly densityOptions: ReadonlyArray<DensityOption>;
+    readonly featuresModeOptions: ReadonlyArray<FeaturesModeOption>;
+    readonly selectionOptions: ReadonlyArray<SelectionModeOption>;
+    readonly skinOptions: ReadonlyArray<SkinOption>;
+    readonly codeTabs: ReadonlyArray<CodeTabOption>;
+    readonly featureCoverage: ReadonlyArray<CoverageTopic>;
+    readonly liveItems: _angular_core.Signal<DemoItem[]>;
+    readonly activeScenarioMeta: _angular_core.Signal<ScenarioOption | null>;
+    readonly liveConfig: _angular_core.Signal<PraxisListConfig>;
+    readonly skinPreviewItems: DemoItem[];
+    readonly skinPreviewConfigs: _angular_core.Signal<{
+        type: DemoSkin;
+        config: {
+            layout: {
+                variant: "cards";
+                lines: 2;
+                density: "compact";
+                model: "hotel";
+                groupBy: undefined;
+                dividers?: "none" | "between" | "all";
+                stickySectionHeader?: boolean;
+                virtualScroll?: boolean;
+                pageSize?: number;
+            };
+            selection: {
+                mode: "none";
+            };
+            dataSource: {
+                data: DemoItem[];
+            };
+            skin: {
+                type?: "pill-soft" | "gradient-tile" | "glass" | "elevated" | "outline" | "flat" | "neumorphism" | "custom";
+                gradient?: {
+                    from: string;
+                    to: string;
+                    angle?: number;
+                };
+                radius?: string;
+                shadow?: string;
+                border?: string;
+                backdropBlur?: string;
+                class?: string;
+                inlineStyle?: string;
+            } | undefined;
+            id?: string;
+            templating?: {
+                leading?: TemplateDef;
+                primary?: TemplateDef;
+                secondary?: TemplateDef;
+                meta?: TemplateDef;
+                trailing?: TemplateDef;
+                metaPlacement?: "side" | "line";
+                metaPrefixIcon?: string;
+                statusPosition?: "inline" | "top-right";
+                chipColorMap?: Record<string, string>;
+                chipLabelMap?: Record<string, string>;
+                iconColorMap?: Record<string, string>;
+                features?: ListFeatureDef[];
+                featuresVisible?: boolean;
+                featuresMode?: "icons+labels" | "icons-only" | "labels-only";
+                sectionHeader?: TemplateDef;
+                emptyState?: TemplateDef;
+                skeleton?: {
+                    count?: number;
+                };
+            };
+            actions?: Array<{
+                id: string;
+                icon?: string;
+                label?: string;
+                color?: string;
+                kind?: "icon" | "button";
+                buttonVariant?: "stroked" | "raised" | "flat";
+                showIf?: string;
+                emitPayload?: "item" | "id" | "value";
+                command?: string;
+                globalPayload?: any;
+                emitLocal?: boolean;
+                showLoading?: boolean;
+                confirmation?: {
+                    title?: string;
+                    message?: string;
+                    type?: "danger" | "warning" | "info";
+                };
+            }>;
+            i18n?: Record<string, string>;
+            ui?: {
+                showSearch?: boolean;
+                searchField?: string;
+                searchPlaceholder?: string;
+                showSort?: boolean;
+                sortOptions?: Array<string | {
+                    label: string;
+                    value: string;
+                }>;
+                showRange?: boolean;
+            };
+            a11y?: {
+                ariaLabel?: string;
+                ariaLabelledBy?: string;
+                highContrast?: boolean;
+                reduceMotion?: boolean;
+            };
+            events?: {
+                itemClick?: string;
+                actionClick?: string;
+                selectionChange?: string;
+                loaded?: string;
+            };
+        };
+    }[]>;
+    readonly configPreview: _angular_core.Signal<string>;
+    readonly selectedSnippet: _angular_core.Signal<string>;
+    readonly templateSnippet = "<praxis-list-doc-page></praxis-list-doc-page>";
+    readonly tsSnippet = "import { Component } from '@angular/core';\nimport { PraxisListDocPageComponent } from '@praxisui/list';\n\n@Component({\n  selector: 'app-list-doc',\n  standalone: true,\n  imports: [PraxisListDocPageComponent],\n  template: '<praxis-list-doc-page />',\n})\nexport class ListDocHostComponent {}";
+    readonly remoteSnippet = "const config = {\n  id: 'employees-remote',\n  dataSource: {\n    resourcePath: 'employees',\n    query: { active: true },\n    sort: ['updatedAt,desc']\n  },\n  layout: { variant: 'list', pageSize: 12, lines: 2 },\n  templating: {\n    primary: { type: 'text', expr: '${item.name}' },\n    secondary: { type: 'text', expr: '${item.role}' },\n    meta: { type: 'date', expr: '${item.updatedAt}|pt-BR:short' },\n    trailing: { type: 'chip', expr: '${item.status}' }\n  },\n  ui: {\n    showSearch: true,\n    searchField: 'name',\n    showSort: true,\n    sortOptions: [{ label: 'Nome A-Z', value: 'name,asc' }]\n  }\n} as const;";
+    setScenario(next: DemoScenario): void;
+    setVariant(next: DemoVariant): void;
+    setDensity(next: DemoDensity): void;
+    setLines(next: 1 | 2 | 3): void;
+    setSkin(next: DemoSkin): void;
+    setFeaturesMode(next: DemoFeaturesMode): void;
+    setSelectionMode(next: DemoSelectionMode): void;
+    setCodeTab(next: CodeTab): void;
+    setCustomizationMode(enabled: boolean): void;
+    clearLog(): void;
+    handleItemClick(event: ListItemEvent): void;
+    handleActionClick(event: ListActionEvent): void;
+    handleSelectionChange(event: ListSelectionEvent): void;
+    private buildSkinConfig;
+    private buildTemplatingConfig;
+    private pushLog;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PraxisListDocPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PraxisListDocPageComponent, "praxis-list-doc-page", never, {}, {}, never, never, true, never>;
+}
+
+export { LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, adaptSelection, evalExpr, evaluateTemplate, inferTemplatingFromSchema, providePraxisListMetadata };
+export type { Capability, CapabilityCatalog, CapabilityCategory, ListActionEvent, ListFeatureDef, ListItemEvent, ListSection, ListSelectionEvent, PraxisListConfig, TemplateDef, TemplateType, ValueKind };