@praxisui/page-builder 1.0.0-beta.5 → 1.0.0-beta.52

package/index.d.ts

@@ -1,8 +1,14 @@
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import * as i0 from '@angular/core';
-import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { ComponentDocMeta, ComponentMetadataRegistry, GridPageDefinition, GridWidgetInstance, WidgetConnection } from '@praxisui/core';
+import { EventEmitter, OnInit, OnChanges, SimpleChanges, InjectionToken, Provider, ElementRef } from '@angular/core';
+import { ComponentDocMeta, ComponentMetadataRegistry, GridPageDefinition, GridWidgetInstance, WidgetConnection, WidgetShellConfig, WidgetShellAction, WidgetPageOrientation, WidgetPageDefinition, WidgetPageLayout, AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog, PageIdentity, ConnectionManagerService, AsyncConfigStorage, ComponentKeyService, SettingsPanelBridge, WidgetShellActionEvent } from '@praxisui/core';
+export { WidgetShellComponent } from '@praxisui/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import * as rxjs from 'rxjs';
+import { FormGroup, FormControl, FormArray } from '@angular/forms';
+import { SettingsValueProvider } from '@praxisui/settings-panel';
+import { GridsterConfig, GridsterItem } from 'angular-gridster2';
+import { Router, ActivatedRoute } from '@angular/router';
 
 declare const PLACEHOLDER = 1;
 
@@ -26,8 +32,9 @@ declare class TileToolbarComponent {
     widgetType: string | null;
     remove: EventEmitter<void>;
     settings: EventEmitter<void>;
+    shell: EventEmitter<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TileToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TileToolbarComponent, "praxis-tile-toolbar", never, { "selected": { "alias": "selected"; "required": false; }; "widgetType": { "alias": "widgetType"; "required": false; }; }, { "remove": "remove"; "settings": "settings"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TileToolbarComponent, "praxis-tile-toolbar", never, { "selected": { "alias": "selected"; "required": false; }; "widgetType": { "alias": "widgetType"; "required": false; }; }, { "remove": "remove"; "settings": "settings"; "shell": "shell"; }, never, never, true, never>;
 }
 
 declare class FloatingToolbarComponent {
@@ -44,7 +51,7 @@ declare class FloatingToolbarComponent {
     connectionsVisual: EventEmitter<void>;
     save: EventEmitter<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FloatingToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FloatingToolbarComponent, "praxis-floating-toolbar", never, { "visible": { "alias": "visible"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; }, { "add": "add"; "undo": "undo"; "redo": "redo"; "settings": "settings"; "preview": "preview"; "connections": "connections"; "connectionsEdit": "connectionsEdit"; "connectionsVisual": "connectionsVisual"; "save": "save"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FloatingToolbarComponent, "praxis-floating-toolbar", never, { "visible": { "alias": "visible"; "required": false; }; "canUndo": { "alias": "canUndo"; "required": false; }; "canRedo": { "alias": "canRedo"; "required": false; }; }, { "add": "add"; "undo": "undo"; "redo": "redo"; "settings": "settings"; "preview": "preview"; "connections": "connections"; "connectionsEdit": "connectionsEdit"; "connectionsVisual": "connectionsVisual"; "save": "save"; }, never, ["[pdx-toolbar-extra]"], true, never>;
 }
 
 interface ComponentPaletteData {
@@ -130,5 +137,460 @@ declare class ConnectionBuilderComponent implements OnInit, OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<ConnectionBuilderComponent, "praxis-connection-builder", never, { "page": { "alias": "page"; "required": false; }; "widgets": { "alias": "widgets"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
 }
 
-export { ComponentPaletteDialogComponent, ConfirmDialogComponent, ConnectionBuilderComponent, FloatingToolbarComponent, PLACEHOLDER, TileToolbarComponent };
-export type { ComponentPaletteData, ConfirmDialogData };
+type ShellInputs = {
+    shell?: WidgetShellConfig | null;
+    widgetKey?: string;
+    widgetType?: string;
+    presets?: Record<string, WidgetShellConfig['appearance']> | null;
+    pagePreset?: string | null;
+};
+type ShellEditorResult = {
+    shell: WidgetShellConfig | null;
+    applyToAll?: boolean;
+    pagePreset?: string;
+};
+type AvailableShellAction = {
+    kind: 'action' | 'command';
+    id: string;
+    label: string;
+    icon?: string;
+    scope?: NonNullable<ComponentDocMeta['actions']>[number]['scope'] | 'any';
+    emit?: string;
+    command?: string;
+    description?: string;
+    payloadExample?: any;
+};
+type SetInputValueOption = {
+    label: string;
+    value: any;
+    icon?: string;
+};
+type SetInputPreset = {
+    input: string;
+    label: string;
+    icon?: string;
+    values: SetInputValueOption[];
+};
+declare class WidgetShellEditorComponent implements SettingsValueProvider {
+    private registry?;
+    form: FormGroup<{
+        kind: FormControl<"none" | "dashboard-card">;
+        preset: FormControl<string>;
+        applyToAll: FormControl<boolean>;
+        title: FormControl<string>;
+        subtitle: FormControl<string>;
+        icon: FormControl<string>;
+        showHeader: FormControl<"auto" | "true" | "false">;
+        collapsible: FormControl<boolean>;
+        cardBg: FormControl<string>;
+        cardBorder: FormControl<string>;
+        cardRadius: FormControl<string>;
+        cardShadow: FormControl<string>;
+        headerBg: FormControl<string>;
+        headerBorder: FormControl<string>;
+        titleColor: FormControl<string>;
+        subtitleColor: FormControl<string>;
+        iconColor: FormControl<string>;
+        bodyBg: FormControl<string>;
+        bodyColor: FormControl<string>;
+        bodyPadding: FormControl<string>;
+        titleSize: FormControl<string>;
+        titleWeight: FormControl<string>;
+        subtitleSize: FormControl<string>;
+        actions: FormArray<FormGroup<any>>;
+    }>;
+    private readonly initialShell;
+    private readonly dirtySubject;
+    private readonly validSubject;
+    private readonly busySubject;
+    isDirty$: rxjs.Observable<boolean>;
+    isValid$: rxjs.Observable<boolean>;
+    isBusy$: rxjs.Observable<boolean>;
+    private snapshot;
+    presetOptions: Array<{
+        id: string;
+        label: string;
+    }>;
+    private presets;
+    availableActions: AvailableShellAction[];
+    actionQuery: FormControl<string>;
+    showScopeShell: boolean;
+    showScopeAny: boolean;
+    showScopeToolbar: boolean;
+    showScopeContext: boolean;
+    setInputPresets: SetInputPreset[];
+    setInputTarget: FormControl<string>;
+    setInputValue: FormControl<any>;
+    previewCollapsed: boolean;
+    previewExpanded: boolean;
+    pagePreset: string | null;
+    constructor(data?: ShellInputs | null, registry?: (ComponentMetadataRegistry | null) | undefined);
+    get actions(): FormArray<FormGroup>;
+    get hasAvailableActions(): boolean;
+    addAction(seed?: Partial<WidgetShellAction>): void;
+    removeAction(index: number): void;
+    getSettingsValue(): ShellEditorResult;
+    onSave(): ShellEditorResult;
+    reset(): void;
+    private applyShell;
+    private loadAvailableActions;
+    private createActionGroup;
+    private buildShell;
+    private buildResult;
+    private buildAppearance;
+    previewVars(): Record<string, string | null>;
+    previewShowHeader(): boolean;
+    previewTitle(): string;
+    previewSubtitle(): string;
+    private buildPreviewAppearance;
+    private mergeAppearance;
+    togglePreviewCollapse(): void;
+    togglePreviewExpand(): void;
+    previewHeaderActions(): WidgetShellAction[];
+    previewOverflowCount(): number;
+    previewWindowActions(): WidgetShellAction[];
+    private normalizeAction;
+    private tryParsePayload;
+    private snapshotValue;
+    filteredAvailableActions(): AvailableShellAction[];
+    isActionSelected(action: AvailableShellAction): boolean;
+    toggleAvailableAction(action: AvailableShellAction): void;
+    scopeLabel(scope?: string): string;
+    stringifyPayload(payload: any): string;
+    displayInputPath(path: string): string;
+    extractActionInput(actionValue: any): string;
+    showActionInputPath(actionValue: any): boolean;
+    currentSetInputValues(): SetInputValueOption[];
+    addSetInputAction(): void;
+    private findActionIndex;
+    private previewActions;
+    private loadSetInputPresets;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WidgetShellEditorComponent, [{ optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WidgetShellEditorComponent, "praxis-widget-shell-editor", never, {}, {}, never, never, true, never>;
+}
+
+type DynamicPageEditorInputs = {
+    page?: WidgetPageDefinition | null;
+    layout?: WidgetPageLayout | null;
+    presets?: Record<string, WidgetShellConfig['appearance']> | null;
+    pagePreset?: string | null;
+};
+type DynamicPageEditorResult = {
+    layout: WidgetPageLayout | null;
+    pagePreset: string;
+    fullPage?: WidgetPageDefinition;
+};
+declare class DynamicPageConfigEditorComponent implements SettingsValueProvider {
+    form: FormGroup<{
+        pagePreset: FormControl<string>;
+        orientation: FormControl<WidgetPageOrientation>;
+        columns: FormControl<number>;
+        gap: FormControl<string>;
+        bpSm: FormControl<number>;
+        bpMd: FormControl<number>;
+        bpLg: FormControl<number>;
+        bpXl: FormControl<number>;
+    }>;
+    jsonControl: FormControl<string>;
+    private readonly initialLayout;
+    private readonly dirtySubject;
+    private readonly validSubject;
+    private readonly busySubject;
+    isDirty$: rxjs.Observable<boolean>;
+    isValid$: rxjs.Observable<boolean>;
+    isBusy$: rxjs.Observable<boolean>;
+    private snapshot;
+    presetOptions: Array<{
+        id: string;
+        label: string;
+    }>;
+    private pagePreset;
+    private currentFullConfig;
+    private activeTab;
+    constructor(data?: DynamicPageEditorInputs | null);
+    onTabChange(index: number): void;
+    getSettingsValue(): DynamicPageEditorResult;
+    formatJson(): void;
+    onSave(): DynamicPageEditorResult;
+    reset(): void;
+    private updateValidity;
+    private updateStateFromForm;
+    private applyLayoutToForm;
+    private toggleGridControls;
+    private syncJsonFromState;
+    private extractPreset;
+    private snapshotValue;
+    private formatPresetLabel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicPageConfigEditorComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicPageConfigEditorComponent, "praxis-dynamic-page-config-editor", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Capabilities catalog for Dynamic Gridster Page (GridPageDefinition + inputs).
+ */
+
+declare module '@praxisui/core' {
+    interface AiCapabilityCategoryMap {
+        page: true;
+        widgets: true;
+        connections: true;
+        context: true;
+    }
+}
+type CapabilityCategory = AiCapabilityCategory;
+type ValueKind = AiValueKind;
+interface Capability extends AiCapability {
+    category: CapabilityCategory;
+}
+interface CapabilityCatalog extends AiCapabilityCatalog {
+    capabilities: Capability[];
+}
+declare const PAGE_BUILDER_AI_CAPABILITIES: CapabilityCatalog;
+
+type PageBuilderConfig = {
+    page?: GridPageDefinition;
+    context?: Record<string, unknown> | null;
+    editModeEnabled?: boolean;
+    showSettingsButton?: boolean;
+    strictValidation?: boolean;
+    gridsterOptions?: Partial<GridsterConfig>;
+    pageIdentity?: PageIdentity;
+};
+interface PageBuilderHost {
+    page?: GridPageDefinition | string;
+    context?: Record<string, unknown> | null;
+    editModeEnabled: boolean;
+    showSettingsButton: boolean;
+    strictValidation: boolean;
+    gridsterOptions?: Partial<GridsterConfig>;
+    pageIdentity?: PageIdentity;
+    applyConfigFromAdapter(config: PageBuilderConfig): void;
+}
+type PatchResult = {
+    success: boolean;
+    warnings?: string[];
+    error?: string;
+};
+declare class PageBuilderAiAdapter {
+    private host;
+    private registry?;
+    componentName: string;
+    componentId: string;
+    componentType: string;
+    constructor(host: PageBuilderHost, registry?: ComponentMetadataRegistry | undefined);
+    getCurrentConfig(): PageBuilderConfig;
+    getCapabilities(): AiCapability[];
+    getRuntimeState(): Record<string, unknown>;
+    createSnapshot(): PageBuilderConfig;
+    restoreSnapshot(snapshot: PageBuilderConfig): Promise<void>;
+    applyPatch(patch: Partial<PageBuilderConfig>, _intent?: string): Promise<PatchResult>;
+    private applyConfig;
+    private parsePage;
+    private normalizePageForAi;
+    private normalizeConfigForRuntime;
+    private normalizePageForRuntime;
+    private normalizePatch;
+    private mergeWidgets;
+    private mergeConnections;
+    private ensureLayoutFromLegacy;
+    private ensureLegacyLayout;
+    private layoutFromLegacy;
+    private getWidgetKey;
+    private generateWidgetKey;
+    private connectionKey;
+    private gridsterFromPageOptions;
+    private mergeRuntimeGridsterOptions;
+    private pageOptionsFromGridster;
+    private pickGridsterOptions;
+    private buildComponentCatalog;
+    private pickNumber;
+    private coerceNumber;
+    private clone;
+}
+
+declare function registerWidgetAiCatalog(widgetId: string, catalog: AiCapabilityCatalog): void;
+declare function registerWidgetAiCatalogs(entries: Record<string, AiCapabilityCatalog>): void;
+declare function clearWidgetAiCatalogs(): void;
+/**
+ * Retrieves the CapabilityCatalog for a given widget ID.
+ */
+declare function getWidgetAiCapabilities(widgetId: string): AiCapabilityCatalog | undefined;
+/**
+ * Aggregates macro page builder capabilities with specific micro capabilities
+ * of the widgets present in the page configuration.
+ */
+declare function getPageAiCatalog(pageConfig?: PageBuilderConfig): AiCapabilityCatalog;
+
+declare const PAGE_BUILDER_WIDGET_AI_CATALOGS: InjectionToken<Record<string, AiCapabilityCatalog>>;
+
+declare function providePageBuilderWidgetAiCatalogs(): Provider;
+
+interface GraphNode {
+    id: string;
+    label: string;
+    icon?: string;
+    type: string;
+    parentId?: string | null;
+    collapsed?: boolean;
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    ports: GraphPort[];
+}
+interface GraphPort {
+    id: string;
+    label: string;
+    kind: 'input' | 'output';
+    /** For inputs that map into deep paths (e.g. Tabs internals) */
+    path?: string;
+    /** Optional description (from metadata) for tooltips */
+    description?: string;
+    anchor: {
+        x: number;
+        y: number;
+    };
+}
+interface GraphEdgeMeta {
+    map?: string;
+    transform?: string;
+    bindingOrder?: string[];
+    routerMode?: 'auto' | 'elbow' | 'bezier' | 'straight';
+}
+interface GraphEdge {
+    id: string;
+    from: {
+        nodeId: string;
+        portId: string;
+    };
+    to: {
+        nodeId: string;
+        portId: string;
+    };
+    label?: string;
+    meta?: GraphEdgeMeta;
+}
+
+declare class GraphMapperService {
+    private registry;
+    constructor(registry: ComponentMetadataRegistry);
+    /** Build nodes and edges for a given page definition and widgets. */
+    mapToGraph(page: GridPageDefinition | undefined, widgets: GridWidgetInstance[]): {
+        nodes: GraphNode[];
+        edges: GraphEdge[];
+    };
+    private ensurePort;
+    /**
+     * Parse dot-path for Tabs internals. Supported:
+     * - inputs.config.tabs[<i>].widgets[<j>].inputs.<input>
+     * - inputs.config.nav.links[<i>].widgets[<j>].inputs.<input>
+     */
+    parseTabsPath(path: string | undefined): {
+        kind: 'group' | 'nav';
+        index: number;
+        widgetIndex: number;
+        input: string;
+    } | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GraphMapperService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GraphMapperService>;
+}
+
+type ItemWithKey = GridsterItem & {
+    __key__: string;
+};
+declare class DynamicGridsterPageComponent implements OnChanges, PageBuilderHost {
+    private conn;
+    private router;
+    private host;
+    private dialog;
+    private graphMapper;
+    private registry;
+    private storage;
+    private componentKeys;
+    private tableConfigEditor;
+    private stepperConfigEditor;
+    private settingsPanel;
+    private route;
+    page?: GridPageDefinition | string;
+    context?: Record<string, any> | null;
+    strictValidation: boolean;
+    gridsterOptions?: Partial<GridsterConfig>;
+    /** Shows settings button and enables in-place editing affordances */
+    editModeEnabled: boolean;
+    /** When true, shows small floating settings fab; if false, rely on bottom toolbar */
+    showSettingsButton: boolean;
+    /** Optional identity; if not provided, will derive routePath from current Router URL */
+    pageIdentity?: PageIdentity;
+    /** Optional instance key for pages rendered multiple times */
+    componentInstanceId?: string;
+    layoutChange: EventEmitter<GridWidgetInstance[]>;
+    pageChange: EventEmitter<GridPageDefinition>;
+    mergedContext: Record<string, any>;
+    private selectedKey;
+    private widgets;
+    private readonly globalActions;
+    items: i0.WritableSignal<ItemWithKey[]>;
+    interacting: boolean;
+    overlayEnabled: boolean;
+    private appliedPersisted;
+    aiAdapter: PageBuilderAiAdapter;
+    options: GridsterConfig;
+    trackItem: (_: number, it: ItemWithKey) => string;
+    constructor(conn: ConnectionManagerService, router: Router, host: ElementRef<HTMLElement>, dialog: MatDialog, graphMapper: GraphMapperService, registry: ComponentMetadataRegistry, storage: AsyncConfigStorage, componentKeys: ComponentKeyService, tableConfigEditor: any, stepperConfigEditor: any, settingsPanel: SettingsPanelBridge | null, route: ActivatedRoute | null);
+    applyConfigFromAdapter(next: PageBuilderConfig): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private parsePage;
+    private gridsterFromPageOptions;
+    private enrichWithInheritedInputs;
+    private applyWidgetInputs;
+    private ensureComponentInstanceId;
+    private widgetToItem;
+    computeTileDomId(key: string): string;
+    isSelected(key: string): boolean;
+    getWidgetType(key: string): string | undefined;
+    getWidgetDef(key: string): any;
+    getWidgetShell(key: string): any;
+    onTileClick(key: string, ev: MouseEvent): void;
+    onItemChanged(item: GridsterItem): void;
+    togglePreview(): void;
+    confirmRemoveWidget(key: string): void;
+    removeWidget(key: string): void;
+    onAddComponent(): void;
+    addWidget(type: string): void;
+    createWidgetKey(type: string): string;
+    openWidgetSettings(key: string): void;
+    openWidgetShellSettings(key: string): void;
+    openConnectionsGraph(): void;
+    openConnectionsBuilder(): void;
+    openConnectionsEditor(): Promise<void>;
+    openPageSettings(): void;
+    private derivePageIdentity;
+    savePage(): void;
+    private applyPage;
+    private loadPersistedPage;
+    onWidgetEvent(fromKey: string, evt: {
+        output?: string;
+        payload?: any;
+    }): void;
+    onShellAction(fromKey: string, evt: WidgetShellActionEvent): void;
+    private handleSetInputCommand;
+    private maybeExecuteMappedAction;
+    private maybeExecuteGlobalCommand;
+    private resolveActionPayload;
+    private resolveTemplate;
+    private lookup;
+    private applyWidgetShell;
+    private applyPageShellPreset;
+    private applyEditShellActions;
+    showSettings(): boolean;
+    private storageKey;
+    private componentKeyId;
+    private buildPageScopeId;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicGridsterPageComponent, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicGridsterPageComponent, "praxis-dynamic-gridster-page", never, { "page": { "alias": "page"; "required": false; }; "context": { "alias": "context"; "required": false; }; "strictValidation": { "alias": "strictValidation"; "required": false; }; "gridsterOptions": { "alias": "gridsterOptions"; "required": false; }; "editModeEnabled": { "alias": "editModeEnabled"; "required": false; }; "showSettingsButton": { "alias": "showSettingsButton"; "required": false; }; "pageIdentity": { "alias": "pageIdentity"; "required": false; }; "componentInstanceId": { "alias": "componentInstanceId"; "required": false; }; }, { "layoutChange": "layoutChange"; "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+export { ComponentPaletteDialogComponent, ConfirmDialogComponent, ConnectionBuilderComponent, DynamicGridsterPageComponent, DynamicPageConfigEditorComponent, FloatingToolbarComponent, PAGE_BUILDER_AI_CAPABILITIES, PAGE_BUILDER_WIDGET_AI_CATALOGS, PLACEHOLDER, TileToolbarComponent, WidgetShellEditorComponent, clearWidgetAiCatalogs, getPageAiCatalog, getWidgetAiCapabilities, providePageBuilderWidgetAiCatalogs, registerWidgetAiCatalog, registerWidgetAiCatalogs };
+export type { Capability, CapabilityCatalog, CapabilityCategory, ComponentPaletteData, ConfirmDialogData, ValueKind };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/page-builder",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.52",
   "description": "Page and widget builder utilities for Praxis UI (grid, dynamic widgets, editors).",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
@@ -9,8 +9,8 @@
     "@angular/cdk": "^20.0.0",
     "@angular/material": "^20.0.0",
     "angular-gridster2": "^20.2.2",
-    "@praxisui/core": "^1.0.0-beta.5",
-    "@praxisui/settings-panel": "^1.0.0-beta.5"
+    "@praxisui/core": "^1.0.0-beta.52",
+    "@praxisui/settings-panel": "^1.0.0-beta.52"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -21,11 +21,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/codexrodrigues/praxis"
+    "url": "https://github.com/codexrodrigues/praxis-ui-angular"
   },
-  "homepage": "https://github.com/codexrodrigues/praxis#readme",
+  "homepage": "https://github.com/codexrodrigues/praxis-ui-angular#readme",
   "bugs": {
-    "url": "https://github.com/codexrodrigues/praxis/issues"
+    "url": "https://github.com/codexrodrigues/praxis-ui-angular/issues"
   },
   "keywords": [
     "angular",