@praxisui/settings-panel 3.0.0-beta.8 → 4.0.0-beta.0

package/index.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Type, Injector, Provider, ComponentRef, ChangeDetectorRef, InjectionToken, OnInit, AfterViewInit, ViewContainerRef } from '@angular/core';
-import { OverlayRef, Overlay } from '@angular/cdk/overlay';
+import { Type, Injector, ComponentRef, Provider, ChangeDetectorRef, InjectionToken, OnDestroy, OnInit, AfterViewInit, ViewContainerRef } from '@angular/core';
 import * as rxjs from 'rxjs';
 import { Observable, BehaviorSubject } from 'rxjs';
+import { OverlayRef, Overlay } from '@angular/cdk/overlay';
+import { PraxisI18nService, GlobalConfig, FormConfig, FormValueChangeEvent, AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog } from '@praxisui/core';
 import { MatDialog } from '@angular/material/dialog';
-import { GlobalConfig, FormConfig, FormValueChangeEvent, AiCapabilityCategory, AiValueKind, AiCapability, AiCapabilityCatalog } from '@praxisui/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { AiProviderCatalogItem } from '@praxisui/ai';
 
@@ -15,6 +15,10 @@ interface SettingsPanelConfig {
     titleIcon?: string;
     /** Optional initial expanded state */
     expanded?: boolean;
+    resizable?: boolean;
+    persistSizeKey?: string;
+    minWidth?: string;
+    maxWidth?: string;
     content: {
         component: Type<any>;
         inputs?: Record<string, any>;
@@ -107,10 +111,15 @@ declare class SettingsPanelRef {
     private savedSubject;
     private resetSubject;
     private closedSubject;
+    private sizeChangedSubject;
+    private sizePersistor?;
     applied$: rxjs.Observable<any>;
     saved$: rxjs.Observable<any>;
     reset$: rxjs.Observable<void>;
     closed$: rxjs.Observable<SettingsPanelCloseReason>;
+    sizeChanged$: rxjs.Observable<{
+        width: string;
+    }>;
     constructor(overlayRef: OverlayRef);
     apply(value: any): void;
     /**
@@ -121,17 +130,171 @@ declare class SettingsPanelRef {
      */
     save(value: any): void;
     reset(): void;
+    bindSizePersistor(fn: (width: string) => void): void;
     updateSize(width: string | number): void;
     close(reason?: SettingsPanelCloseReason): void;
     private complete;
 }
 
+type SidePanelWidthPreset = 'narrow' | 'default' | 'wide' | 'full';
+type SidePanelCssVarName = '--pfx-side-panel-width' | '--pfx-side-panel-max-width' | '--pfx-side-panel-header-height' | '--pfx-side-panel-header-gap' | '--pfx-side-panel-header-padding-x' | '--pfx-side-panel-body-padding' | '--pfx-side-panel-footer-padding' | '--pfx-side-panel-footer-gap' | '--pfx-side-panel-border-radius' | '--pfx-side-panel-elevation' | '--pfx-side-panel-backdrop' | '--pfx-side-panel-backdrop-blur' | '--pfx-side-panel-motion-duration-enter' | '--pfx-side-panel-motion-duration-exit' | '--pfx-side-panel-motion-easing-enter' | '--pfx-side-panel-motion-easing-exit';
+interface SidePanelMotionContract {
+    durationEnterMs?: number;
+    durationExitMs?: number;
+    easingEnter?: string;
+    easingExit?: string;
+    respectReducedMotion?: boolean;
+}
+interface SidePanelThemeContract {
+    /**
+     * Host-provided width preset. The visual shell may translate the preset into
+     * concrete CSS variables, but the base contract stays product-neutral.
+     */
+    widthPreset?: SidePanelWidthPreset;
+    /**
+     * Additional host classes applied to the drawer shell to infer brand/theme
+     * without hardcoding product-level skin in the base component.
+     */
+    hostClasses?: string[];
+    /**
+     * Optional CSS custom properties injected by the host. Keys must use the
+     * neutral side-panel naming, never `settings-panel` naming.
+     */
+    cssVars?: Partial<Record<SidePanelCssVarName, string>>;
+    /**
+     * Motion remains host-driven and must support reduced motion.
+     */
+    motion?: SidePanelMotionContract;
+}
+/**
+ * Neutral theme contract for the future shared drawer base.
+ *
+ * This contract intentionally does not expose `settings-panel` naming so the
+ * runtime drawer can inherit host look-and-feel without importing authoring
+ * semantics or product-specific skin.
+ */
+declare const SIDE_PANEL_THEME_CSS_VARS: readonly SidePanelCssVarName[];
+
+type BaseSidePanelCloseReason = 'close' | 'backdrop' | 'esc';
+type BaseSidePanelResizeAxis = 'x';
+interface BaseSidePanelResult<T = unknown> {
+    type?: string;
+    data?: T;
+}
+interface BaseSidePanelRef<T = unknown> {
+    closed$: Observable<BaseSidePanelResult<T> | undefined>;
+    result$?: Observable<BaseSidePanelResult<T>>;
+    sizeChanged$?: Observable<{
+        width: string;
+    }>;
+    close(result?: BaseSidePanelResult<T>): void;
+    emitResult?(result: BaseSidePanelResult<T>): void;
+    updateTitle?(title: string): void;
+    updateSize?(size: SidePanelWidthPreset | string | {
+        width?: string;
+    }): void;
+}
+interface BaseSidePanelContent<TInputs = any> {
+    component: Type<any>;
+    inputs?: TInputs;
+}
+interface BaseSidePanelOpenOptions<TInputs = any> {
+    id: string;
+    title?: string;
+    titleIcon?: string;
+    subtitle?: string;
+    scope?: string;
+    widthPreset?: SidePanelWidthPreset;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    resizable?: boolean;
+    resizeAxis?: BaseSidePanelResizeAxis;
+    persistSizeKey?: string;
+    content: BaseSidePanelContent<TInputs>;
+    footer?: BaseSidePanelContent;
+    theme?: SidePanelThemeContract;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+}
+
+declare class BaseSidePanelOverlayRef<T = unknown> implements BaseSidePanelRef<T> {
+    private readonly closedSubject;
+    private readonly resultSubject;
+    private readonly sizeChangedSubject;
+    private overlayRef;
+    private titleUpdater?;
+    private sizePersistor?;
+    readonly closed$: rxjs.Observable<BaseSidePanelResult<T> | undefined>;
+    readonly result$: rxjs.Observable<BaseSidePanelResult<T>>;
+    readonly sizeChanged$: rxjs.Observable<{
+        width: string;
+    }>;
+    constructor(overlayRef: OverlayRef);
+    bindTitleUpdater(fn: (title: string) => void): void;
+    bindSizePersistor(fn: (width: string) => void): void;
+    emitResult(result: BaseSidePanelResult<T>): void;
+    updateTitle(title: string): void;
+    updateSize(size: string | {
+        width?: string;
+    }): void;
+    close(result?: BaseSidePanelResult<T>): void;
+    private resolveWidth;
+}
+
+interface SidePanelActiveRef {
+    readonly closed$: Observable<unknown>;
+    bindSizePersistor?: (fn: (width: string) => void) => void;
+}
+interface SidePanelHostOpenOptions<TComponent, TRef extends SidePanelActiveRef> {
+    readonly component: Type<TComponent>;
+    readonly config: BaseSidePanelOpenOptions;
+    readonly backdropClass?: string;
+    readonly panelClass?: string;
+    readonly overlayWidth?: string | null;
+    readonly overlaySize?: {
+        width?: string;
+        minWidth?: string;
+        maxWidth?: string;
+        height?: string;
+        minHeight?: string;
+        maxHeight?: string;
+    } | null;
+    readonly createRef: (overlayRef: OverlayRef) => TRef;
+    readonly attach: (panelRef: ComponentRef<TComponent>, ref: TRef, resolvedConfig: BaseSidePanelOpenOptions) => void;
+    readonly createCloser: (ref: TRef) => (reason?: string) => void;
+    readonly onBackdrop: (ref: TRef) => void;
+    readonly onEsc: (ref: TRef) => void;
+}
+declare class BaseSidePanelService {
+    private readonly overlay;
+    private readonly injector;
+    private readonly currentByScope;
+    constructor(overlay: Overlay, injector: Injector);
+    open<TInputs = any, TResult = unknown>(config: BaseSidePanelOpenOptions<TInputs>): BaseSidePanelOverlayRef<TResult>;
+    close(reason?: string): void;
+    openHost<TComponent, TRef extends SidePanelActiveRef>(options: SidePanelHostOpenOptions<TComponent, TRef>): TRef;
+    closeScope(scope: string, reason?: string): void;
+    private buildOverlayConfig;
+    private resolveWidth;
+    private resolveOpenConfig;
+    private resolvePersistedWidth;
+    private persistWidth;
+    private storageKey;
+    private isPixelWidth;
+    private closeResult;
+    private trackCurrentRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseSidePanelService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseSidePanelService>;
+}
+
 declare class SettingsPanelService {
-    private overlay;
+    private readonly baseSidePanelService;
     private injector;
     private currentRef?;
     private readonly i18n;
-    constructor(overlay: Overlay, injector: Injector);
+    private readonly layerScale;
+    constructor(baseSidePanelService: BaseSidePanelService, injector: Injector);
     /**
      * Opens a new settings panel. If another panel is already open it will be
      * closed before the new one is created. Future improvements may reuse the
@@ -143,13 +306,48 @@ declare class SettingsPanelService {
     static ɵprov: i0.ɵɵInjectableDeclaration<SettingsPanelService>;
 }
 
-declare function providePraxisSettingsPanelBridge(): Provider;
+declare function providePraxisSettingsPanelBridge(): Provider[];
+
+declare function providePraxisSurfaceDrawerBridge(): Provider[];
+
+declare class SurfaceDrawerComponent {
+    private readonly cdr;
+    private readonly i18n;
+    title: string;
+    titleIcon?: string;
+    subtitle?: string;
+    widthPreset: 'narrow' | 'default' | 'wide' | 'full';
+    useHostWidth: boolean;
+    theme: SidePanelThemeContract | null;
+    onClose?: () => void;
+    private static nextId;
+    titleId: string;
+    contentRef?: ComponentRef<any>;
+    private contentHost;
+    constructor(cdr: ChangeDetectorRef, i18n: PraxisI18nService);
+    get hostClasses(): string[];
+    get hostCssVars(): Record<string, string>;
+    get closeLabel(): string;
+    get hasHeader(): boolean;
+    get widthClass(): string | null;
+    setTitle(title: string): void;
+    attachContent(component: Type<any>, injector: Injector, inputs?: Record<string, unknown>): ComponentRef<any>;
+    private applyInputs;
+    private resolveSupportedInputs;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SurfaceDrawerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SurfaceDrawerComponent, "praxis-surface-drawer", never, {}, {}, never, never, true, never>;
+}
 
 declare class SettingsPanelComponent {
     private cdr;
     private dialog;
     title: string;
     titleIcon?: string;
+    width: string;
+    minWidth?: string;
+    maxWidth?: string;
+    resizable: boolean;
+    persistSizeKey?: string;
     expanded: boolean;
     ref: SettingsPanelRef;
     contentRef?: ComponentRef<any>;
@@ -159,11 +357,18 @@ declare class SettingsPanelComponent {
     isValid: boolean;
     isBusy: boolean;
     private lastSavedAt;
+    private activePointerId;
+    private dragStartX;
+    private dragStartWidth;
+    private collapsedWidthBeforeExpand;
     private readonly destroyRef;
     private readonly i18n;
     private contentHost;
     constructor(cdr: ChangeDetectorRef, dialog: MatDialog);
     get canApply(): boolean;
+    get panelInlineStyles(): Record<string, string | null>;
+    get showResizeHandle(): boolean;
+    get resizeHandleLabel(): string;
     get canSave(): boolean;
     get disabledReason(): string;
     get statusTone(): 'busy' | 'dirty' | 'saved' | 'idle';
@@ -178,8 +383,17 @@ declare class SettingsPanelComponent {
     private emitSave;
     private formatClock;
     toggleExpand(): void;
+    onResizeHandlePointerDown(event: PointerEvent): void;
+    onResizeHandleKeydown(event: KeyboardEvent): void;
     onCancel(): void;
     handleKeydown(event: KeyboardEvent): void;
+    onDocumentPointerMove(event: PointerEvent): void;
+    onDocumentPointerEnd(event: PointerEvent): void;
+    private getCurrentWidthPx;
+    private applyWidthPx;
+    private clampWidthPx;
+    private computeExpandedWidth;
+    private parseWidthPx;
     static ɵfac: i0.ɵɵFactoryDeclaration<SettingsPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SettingsPanelComponent, "praxis-settings-panel", never, {}, {}, never, never, true, never>;
 }
@@ -187,6 +401,66 @@ declare class SettingsPanelComponent {
 declare const SETTINGS_PANEL_DATA: InjectionToken<any>;
 declare const SETTINGS_PANEL_REF: InjectionToken<SettingsPanelRef>;
 
+declare const BASE_SIDE_PANEL_DATA: InjectionToken<any>;
+declare const BASE_SIDE_PANEL_REF: InjectionToken<BaseSidePanelRef<unknown>>;
+
+declare class BaseSidePanelComponent implements OnDestroy {
+    private readonly cdr;
+    private readonly i18n;
+    title: string;
+    titleIcon?: string;
+    subtitle?: string;
+    widthPreset: 'narrow' | 'default' | 'wide' | 'full';
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    resizable: boolean;
+    resizeAxis: BaseSidePanelResizeAxis;
+    persistSizeKey?: string;
+    useHostWidth: boolean;
+    theme: SidePanelThemeContract | null;
+    onClose?: () => void;
+    onResizeWidth?: (width: string) => void;
+    private static nextId;
+    titleId: string;
+    private activePointerId;
+    private dragStartX;
+    private dragStartWidth;
+    contentRef?: ComponentRef<any>;
+    footerRef?: ComponentRef<any>;
+    private contentHost;
+    private footerHost;
+    constructor(cdr: ChangeDetectorRef, i18n: PraxisI18nService);
+    ngOnDestroy(): void;
+    get hostClasses(): string[];
+    get hostCssVars(): Record<string, string>;
+    get panelInlineStyles(): Record<string, string | null>;
+    get mergedHostStyles(): Record<string, string | null>;
+    get closeLabel(): string;
+    get resizeHandleLabel(): string;
+    get hasHeader(): boolean;
+    get hasFooter(): boolean;
+    get widthClass(): string | null;
+    get showResizeHandle(): boolean;
+    setTitle(title: string): void;
+    onResizeHandlePointerDown(event: PointerEvent): void;
+    onResizeHandleKeydown(event: KeyboardEvent): void;
+    onDocumentPointerMove(event: PointerEvent): void;
+    onDocumentPointerEnd(event: PointerEvent): void;
+    attachContent(component: Type<any>, injector: Injector, inputs?: Record<string, unknown>): ComponentRef<any>;
+    attachFooter(component: Type<any>, injector: Injector, inputs?: Record<string, unknown>): ComponentRef<any>;
+    clearFooter(): void;
+    private applyInputs;
+    private resolveSupportedInputs;
+    private stopResizeSession;
+    private getCurrentWidthPx;
+    private applyWidthPx;
+    private clampWidthPx;
+    private parseWidthPx;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseSidePanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BaseSidePanelComponent, "praxis-base-side-panel", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Admin helper to load, patch and persist GlobalConfig.
  * Intended to be used by the Global Config Editor UI.
@@ -398,5 +672,5 @@ interface CapabilityCatalog extends AiCapabilityCatalog {
 }
 declare const SETTINGS_PANEL_AI_CAPABILITIES: CapabilityCatalog;
 
-export { GLOBAL_CONFIG_DYNAMIC_FORM_COMPONENT, GlobalConfigAdminService, GlobalConfigEditorComponent, SETTINGS_PANEL_AI_CAPABILITIES, SETTINGS_PANEL_DATA, SETTINGS_PANEL_REF, SettingsPanelComponent, SettingsPanelRef, SettingsPanelService, buildGlobalConfigFormConfig, openGlobalConfigEditor, providePraxisSettingsPanelBridge };
-export type { Capability, CapabilityCatalog, CapabilityCategory, GlobalConfigEditorFieldSpec, GlobalConfigEditorGroup, GlobalConfigEditorOption, GlobalConfigEditorState, OpenGlobalConfigOptions, SettingsPanelAction, SettingsPanelCloseReason, SettingsPanelConfig, SettingsValueProvider, ValueKind };
+export { BASE_SIDE_PANEL_DATA, BASE_SIDE_PANEL_REF, BaseSidePanelComponent, BaseSidePanelOverlayRef, BaseSidePanelService, GLOBAL_CONFIG_DYNAMIC_FORM_COMPONENT, GlobalConfigAdminService, GlobalConfigEditorComponent, SETTINGS_PANEL_AI_CAPABILITIES, SETTINGS_PANEL_DATA, SETTINGS_PANEL_REF, SIDE_PANEL_THEME_CSS_VARS, SettingsPanelComponent, SettingsPanelRef, SettingsPanelService, SurfaceDrawerComponent, buildGlobalConfigFormConfig, openGlobalConfigEditor, providePraxisSettingsPanelBridge, providePraxisSurfaceDrawerBridge };
+export type { BaseSidePanelCloseReason, BaseSidePanelContent, BaseSidePanelOpenOptions, BaseSidePanelRef, BaseSidePanelResizeAxis, BaseSidePanelResult, Capability, CapabilityCatalog, CapabilityCategory, GlobalConfigEditorFieldSpec, GlobalConfigEditorGroup, GlobalConfigEditorOption, GlobalConfigEditorState, OpenGlobalConfigOptions, SettingsPanelAction, SettingsPanelCloseReason, SettingsPanelConfig, SettingsValueProvider, SidePanelCssVarName, SidePanelMotionContract, SidePanelThemeContract, SidePanelWidthPreset, ValueKind };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@praxisui/settings-panel",
-  "version": "3.0.0-beta.8",
+  "version": "4.0.0-beta.0",
   "description": "Settings panel for Praxis UI libraries: open editors for configuration at runtime and persist settings.",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/cdk": "^20.0.0",
     "@angular/material": "^20.0.0",
-    "@praxisui/ai": "^3.0.0-beta.8",
-    "@praxisui/core": "^3.0.0-beta.8",
-    "@praxisui/dynamic-fields": "^3.0.0-beta.8"
+    "@praxisui/ai": "^4.0.0-beta.0",
+    "@praxisui/core": "^4.0.0-beta.0",
+    "@praxisui/dynamic-fields": "^4.0.0-beta.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"