ngx-kit 6.3.0 → 7.0.1

package/types/ngx-kit-drawer-menu.d.ts

@@ -1,112 +1,161 @@
+import * as ngx_kit_drawer_menu from 'ngx-kit/drawer-menu';
 import * as _angular_core from '@angular/core';
 
 /** Logical drawer placement. `start` is right in RTL and left in LTR. */
 type NgxDrawerSide = 'start' | 'end';
-/** How the drawer interacts with the application content. */
-type NgxDrawerMode = 'overlay' | 'push' | 'reveal';
-/** Desktop/mobile layout behavior when responsive mode is enabled. */
-type NgxDrawerResponsiveBehavior = 'overlay' | 'dock';
 /** Visual physics used by the drawer while opening/closing. */
-type NgxDrawerEffect = 'slide' | 'spring' | 'fabric' | 'curtain' | 'elastic' | 'reveal';
-type NgxDrawerResponsiveMode = 'off' | 'auto';
-interface NgxDrawerResponsiveConfig {
+type NgxDrawerEffect = 'none' | 'fabric' | 'slide' | 'push' | 'scale';
+type NgxDrawerBehavior = 'dock' | 'overlay';
+type NgxDrawerResponsiveMode = 'auto' | 'desktop' | 'mobile';
+interface NgxDrawerResponsive {
+    /**
+     * auto:
+     *   breakpoint determines desktop/mobile mode
+     *
+     * desktop:
+     *   always desktop
+     *
+     * mobile:
+     *   always mobile
+     */
     mode?: NgxDrawerResponsiveMode;
+    /**
+     * Width at which the drawer switches
+     * between desktop and mobile.
+     */
     breakpoint?: number;
+    /**
+     * Initial/default state on desktop.
+     */
     desktopOpen?: boolean;
+    /**
+     * Initial/default state on mobile.
+     */
     mobileOpen?: boolean;
-    /** Desktop layout: dock means a real sidebar; overlay means floating drawer. */
-    desktopBehavior?: NgxDrawerResponsiveBehavior;
-    /** Mobile layout is normally overlay. */
-    mobileBehavior?: NgxDrawerResponsiveBehavior;
+    /**
+     * Desktop drawer behavior.
+     */
+    desktopBehavior?: NgxDrawerBehavior;
+    /**
+     * Mobile drawer behavior.
+     */
+    mobileBehavior?: NgxDrawerBehavior;
+    /**
+     * If true, pinned state is preserved
+     * when switching between desktop/mobile.
+     */
     respectPinned?: boolean;
 }
+declare const DEFAULT_DRAWER_RESPONSIVE: Required<NgxDrawerResponsive>;
 
 declare class NgxDrawerMenuComponent {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly platformId;
     readonly side: _angular_core.InputSignal<NgxDrawerSide>;
-    readonly mode: _angular_core.InputSignal<NgxDrawerMode>;
-    /** When responsive mode is active, desktop/mobile can use different layout behavior. */
-    readonly desktopBehavior: _angular_core.InputSignal<NgxDrawerResponsiveBehavior>;
-    readonly mobileBehavior: _angular_core.InputSignal<NgxDrawerResponsiveBehavior>;
-    private readonly responsiveDesktopBehavior;
-    private readonly responsiveMobileBehavior;
     readonly effect: _angular_core.InputSignal<NgxDrawerEffect>;
-    readonly width: _angular_core.InputSignal<number>;
-    readonly maxWidth: _angular_core.InputSignal<number>;
-    readonly edgeSize: _angular_core.InputSignal<number>;
-    readonly dragThreshold: _angular_core.InputSignal<number>;
-    readonly velocityThreshold: _angular_core.InputSignal<number>;
-    /** Opens/closes the panel from the edge and while the panel itself is dragged. */
-    readonly swipeEnabled: _angular_core.InputSignal<boolean>;
-    /** Allows closing by clicking the backdrop. */
-    readonly backdropClose: _angular_core.InputSignal<boolean>;
-    /** Allows Escape to close the drawer. */
-    readonly escapeClose: _angular_core.InputSignal<boolean>;
-    /** The drawer starts open unless explicitly configured otherwise. */
+    readonly width: _angular_core.InputSignal<string | number>;
+    /**
+     * Main drawer state.
+     *
+     * Usage:
+     *
+     * [(open)]="sidebarOpen"
+     */
     readonly open: _angular_core.ModelSignal<boolean>;
-    /** Pinned drawers are intended for persistent desktop navigation. */
+    /**
+     * Pinned state.
+     *
+     * Useful for desktop layouts.
+     *
+     * [(pinned)]="sidebarPinned"
+     */
     readonly pinned: _angular_core.ModelSignal<boolean>;
-    /** Responsive behavior. Can be overridden with individual inputs below. */
-    readonly responsive: _angular_core.InputSignal<NgxDrawerResponsiveConfig>;
-    /** Convenience aliases for the common responsive configuration. */
-    readonly respondToViewport: _angular_core.InputSignal<boolean>;
-    readonly mobileBreakpoint: _angular_core.InputSignal<number>;
-    readonly openOnDesktop: _angular_core.InputSignal<boolean>;
-    readonly openOnMobile: _angular_core.InputSignal<boolean>;
-    /** Visual tuning. */
-    readonly curtainStrips: _angular_core.InputSignal<number>;
-    readonly backdropOpacity: _angular_core.InputSignal<number>;
-    readonly transitionMs: _angular_core.InputSignal<number>;
-    readonly focusOnOpen: _angular_core.InputSignal<boolean>;
-    protected readonly dragProgress: _angular_core.WritableSignal<number | null>;
-    protected readonly dragVelocity: _angular_core.WritableSignal<number>;
-    protected readonly isMobile: _angular_core.WritableSignal<boolean>;
-    protected readonly effectiveBehavior: _angular_core.Signal<NgxDrawerResponsiveBehavior>;
-    protected readonly isDocked: _angular_core.Signal<boolean>;
-    protected readonly usesOverlay: _angular_core.Signal<boolean>;
-    protected readonly isDragging: _angular_core.Signal<boolean>;
-    protected readonly progress: _angular_core.Signal<number>;
-    protected readonly isActuallyOpen: _angular_core.Signal<boolean>;
-    protected readonly strips: _angular_core.Signal<number[]>;
-    /** Physical side: true means the drawer is attached to the physical left edge. */
-    protected readonly isPhysicalLeft: _angular_core.Signal<boolean>;
-    protected readonly physicalSign: _angular_core.Signal<1 | -1>;
-    protected readonly effectiveMode: _angular_core.Signal<NgxDrawerMode>;
-    protected readonly duration: _angular_core.Signal<string>;
-    private readonly directionService;
-    private readonly document;
-    private readonly destroyRef;
-    private pointerId;
-    private dragStartX;
-    private dragStartProgress;
-    private dragLastX;
-    private dragLastTime;
-    private lastVelocity;
-    private activePointerTarget;
-    private resizeObserver?;
+    readonly responsive: _angular_core.InputSignal<NgxDrawerResponsive>;
+    /**
+     * Whether clicking backdrop closes drawer.
+     */
+    readonly closeOnBackdrop: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether Escape closes drawer.
+     */
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether body scrolling should be locked
+     * while an overlay drawer is open.
+     */
+    readonly lockBodyScroll: _angular_core.InputSignal<boolean>;
+    /**
+     * Animation duration in milliseconds.
+     */
+    readonly animationDuration: _angular_core.InputSignal<number>;
+    /**
+     * z-index.
+     */
+    readonly zIndex: _angular_core.InputSignal<number>;
+    private readonly isBrowser;
+    readonly isMobile: _angular_core.WritableSignal<boolean>;
+    readonly initialized: _angular_core.WritableSignal<boolean>;
+    /**
+     * Used to avoid applying responsive defaults repeatedly.
+     */
+    private previousResponsiveMode;
     private mediaQuery?;
-    private mediaQueryListener?;
-    private lastManagedViewportState;
+    private removeMediaQueryListener?;
+    readonly responsiveConfig: _angular_core.Signal<{
+        mode: ngx_kit_drawer_menu.NgxDrawerResponsiveMode;
+        breakpoint: number;
+        desktopOpen: boolean;
+        mobileOpen: boolean;
+        desktopBehavior: NgxDrawerBehavior;
+        mobileBehavior: NgxDrawerBehavior;
+        respectPinned: boolean;
+    }>;
+    readonly currentMode: _angular_core.Signal<"desktop" | "mobile">;
+    readonly currentBehavior: _angular_core.Signal<NgxDrawerBehavior>;
+    readonly isOverlay: _angular_core.Signal<boolean>;
+    readonly isDocked: _angular_core.Signal<boolean>;
+    readonly shouldShowBackdrop: _angular_core.Signal<boolean>;
+    readonly drawerWidth: _angular_core.Signal<string>;
+    readonly drawerVisible: _angular_core.Signal<boolean>;
+    readonly shouldPreservePinned: _angular_core.Signal<boolean>;
+    readonly isPinnedAndDesktop: _angular_core.Signal<boolean>;
+    get drawerStart(): boolean;
+    get drawerEnd(): boolean;
+    get drawerOpen(): boolean;
+    get drawerMobile(): boolean;
+    get drawerDesktop(): boolean;
+    get drawerOverlay(): boolean;
+    get drawerDock(): boolean;
+    get hostWidth(): string;
+    get hostDuration(): string;
+    get hostZIndex(): number;
+    get effectNone(): boolean;
+    get effectFabric(): boolean;
+    get effectSlide(): boolean;
+    get effectPush(): boolean;
+    get effectScale(): boolean;
     constructor();
+    private setupResponsive;
+    private setupMediaQuery;
+    private updateMobileState;
+    private handleResponsiveModeChange;
+    private applyInitialResponsiveState;
+    private destroyResponsive;
     toggle(): void;
     openDrawer(): void;
-    closeDrawer(): void;
+    close(): void;
     pin(): void;
     unpin(): void;
-    protected onEscape(): void;
-    protected onBackdropPointerDown(event: PointerEvent): void;
-    protected onEdgePointerDown(event: PointerEvent): void;
-    protected onPanelPointerDown(event: PointerEvent): void;
-    private beginDrag;
-    private readonly onPointerMove;
-    private readonly onPointerUp;
-    private readonly onPointerCancel;
-    private disposePointer;
-    private setupViewportSync;
-    private disposeViewportSync;
-    private clamp01;
+    togglePinned(): void;
+    onBackdropClick(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private lockScroll;
+    private unlockScroll;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDrawerMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDrawerMenuComponent, "ngx-drawer-menu", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "desktopBehavior": { "alias": "desktopBehavior"; "required": false; "isSignal": true; }; "mobileBehavior": { "alias": "mobileBehavior"; "required": false; "isSignal": true; }; "effect": { "alias": "effect"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "edgeSize": { "alias": "edgeSize"; "required": false; "isSignal": true; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; "isSignal": true; }; "velocityThreshold": { "alias": "velocityThreshold"; "required": false; "isSignal": true; }; "swipeEnabled": { "alias": "swipeEnabled"; "required": false; "isSignal": true; }; "backdropClose": { "alias": "backdropClose"; "required": false; "isSignal": true; }; "escapeClose": { "alias": "escapeClose"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "pinned": { "alias": "pinned"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "respondToViewport": { "alias": "respondToViewport"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "openOnDesktop": { "alias": "openOnDesktop"; "required": false; "isSignal": true; }; "openOnMobile": { "alias": "openOnMobile"; "required": false; "isSignal": true; }; "curtainStrips": { "alias": "curtainStrips"; "required": false; "isSignal": true; }; "backdropOpacity": { "alias": "backdropOpacity"; "required": false; "isSignal": true; }; "transitionMs": { "alias": "transitionMs"; "required": false; "isSignal": true; }; "focusOnOpen": { "alias": "focusOnOpen"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "pinned": "pinnedChange"; }, never, ["*", "[drawerContent]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDrawerMenuComponent, "ngx-drawer-menu", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "effect": { "alias": "effect"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "pinned": { "alias": "pinned"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "lockBodyScroll": { "alias": "lockBodyScroll"; "required": false; "isSignal": true; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "pinned": "pinnedChange"; }, never, ["[drawerContent]", "*"], true, never>;
 }
 
-export { NgxDrawerMenuComponent };
-export type { NgxDrawerEffect, NgxDrawerMode, NgxDrawerResponsiveBehavior, NgxDrawerResponsiveConfig, NgxDrawerResponsiveMode, NgxDrawerSide };
+export { DEFAULT_DRAWER_RESPONSIVE, NgxDrawerMenuComponent };
+export type { NgxDrawerBehavior, NgxDrawerEffect, NgxDrawerResponsive, NgxDrawerResponsiveMode, NgxDrawerSide };

package/types/ngx-kit-grid-layout.d.ts

@@ -0,0 +1,311 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
+import * as i1 from 'ngx-kit/drag-resize';
+
+type GridFlow = 'free' | 'horizontal' | 'vertical';
+type CompactMode = 'none' | 'vertical' | 'horizontal' | 'both';
+interface IGridBackgroundCfg {
+    show?: 'never' | 'always' | 'whenDragging';
+    borderColor?: string;
+    gapColor?: string;
+    rowColor?: string;
+    columnColor?: string;
+    borderWidth?: number;
+}
+interface IGridLayoutOptions {
+    cols: number;
+    rowHeight: number | 'fit';
+    gap?: number;
+    padding?: number;
+    flow?: GridFlow;
+    compact?: CompactMode;
+    allowOverlap?: boolean;
+    pushItems?: boolean;
+    /** When two items would swap places, prefer swapping over cascading a push. */
+    swap?: boolean;
+    dragThreshold?: number;
+    animate?: boolean;
+    /**
+     * `true` / `false` force a direction; `'auto'` (default) reads the host element's
+     * computed `direction`, so the grid follows the surrounding page automatically.
+     */
+    rtl?: boolean | 'auto';
+    /** Caps the number of rows the grid can grow to. `undefined` = unbounded. */
+    maxRows?: number;
+    gridBackgroundConfig?: IGridBackgroundCfg;
+}
+declare class GridLayoutOptions implements IGridLayoutOptions {
+    cols: number;
+    rowHeight: number | 'fit';
+    gap: number;
+    padding: number;
+    flow: GridFlow;
+    compact: CompactMode;
+    allowOverlap: boolean;
+    pushItems: boolean;
+    swap: boolean;
+    dragThreshold: number;
+    animate: boolean;
+    rtl: boolean | "auto";
+    maxRows?: number;
+    gridBackgroundConfig: IGridBackgroundCfg;
+}
+
+declare class GridItemConfig {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+    /** Item can't be dragged or resized, and never moves during compaction/push. */
+    static?: boolean;
+    /** Overrides the layout-level draggable/resizable flags for this item only. */
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    constructor(x?: number, y?: number, w?: number, h?: number, s?: boolean);
+}
+declare const normalizeGridItem: (value?: Partial<GridItemConfig>) => GridItemConfig;
+/**
+ * Value equality for two (already-normalized) configs.
+ *
+ * This is what breaks the register -> settle -> new-object -> re-register
+ * feedback loop: signals compare by *reference*, so anything that recomputes
+ * a fresh config object on every change-detection pass (a `computed()` layout,
+ * an inline object literal in a template, etc.) will always look "changed" to
+ * an `effect()` even when nothing meaningful did. Callers must compare by
+ * value before writing back to a signal, otherwise the write itself produces
+ * a new reference that trips the same effect again — forever.
+ */
+declare function gridItemConfigsEqual(a: GridItemConfig, b: GridItemConfig): boolean;
+
+interface LayoutOutput extends GridItemConfig {
+    id?: string;
+}
+
+interface LayoutNode {
+    id: string;
+    config: GridItemConfig;
+}
+/** Axis-aligned bounding-box overlap test in grid-cell space. */
+declare function collides(a: GridItemConfig, b: GridItemConfig): boolean;
+/** First item (other than `self`) whose cells overlap `config`, or null. */
+declare function getFirstCollision<T extends LayoutNode>(items: readonly T[], selfId: string, config: GridItemConfig): T | null;
+/** All items whose cells overlap `config`, excluding `selfId`. */
+declare function getAllCollisions<T extends LayoutNode>(items: readonly T[], selfId: string, config: GridItemConfig): T[];
+
+interface MoveOptions {
+    cols: number;
+    compact: CompactMode;
+    allowOverlap: boolean;
+    maxRows?: number;
+}
+/**
+ * Moves `id` to grid cell (x, y) and, unless overlap is explicitly allowed,
+ * cascades any resulting collisions by pushing the colliding items out of the
+ * way (downward for vertical-flow grids, rightward for horizontal-flow ones).
+ * Static items are treated as fixed obstacles: they block, but never move.
+ * Pure function — returns a new array, never mutates its input.
+ */
+declare function moveItem<T extends LayoutNode>(items: readonly T[], id: string, x: number, y: number, opts: MoveOptions, depth?: number): T[];
+/**
+ * When the actively-moved item directly overlaps exactly one same-size item,
+ * exchanging their positions reads much better than a cascading push. The
+ * caller (service) decides when to offer this vs. falling back to `moveItem`.
+ */
+declare function trySwap<T extends LayoutNode>(items: readonly T[], id: string, previous: GridItemConfig, next: GridItemConfig): T[] | null;
+/**
+ * Removes gaps by pulling every non-static item as far toward the start of the
+ * grid as it can go without overlapping another item, in reading order.
+ */
+declare function compact<T extends LayoutNode>(items: readonly T[], mode: CompactMode): T[];
+/** Highest occupied row (0-based, exclusive) across all items — drives the grid's auto-height. */
+declare function maxOccupiedRow(items: readonly LayoutNode[]): number;
+/**
+ * Finds a cell for `config` that doesn't collide with any existing item.
+ * Tries the requested (x, y) first; if that's already occupied, scans
+ * forward in reading order (row by row, top to bottom, left to right — the
+ * caller is responsible for any RTL flipping when it turns this back into
+ * pixels) for the first gap large enough to fit it.
+ *
+ * This is what a newly-registered item (or one whose config changes to a
+ * position that's no longer free) should go through instead of silently
+ * overlapping whatever's already there: unlike a drag/resize, registering an
+ * item isn't a deliberate "make room for me" gesture, so relocating the new
+ * item to open space reads far better than shoving already-placed items
+ * around to accommodate it.
+ */
+declare function findFreeSpot<T extends LayoutNode>(items: readonly T[], config: GridItemConfig, cols: number, excludeId?: string): {
+    x: number;
+    y: number;
+};
+
+/**
+ * All pixel <-> grid-cell math lives here, in one RTL-aware place.
+ *
+ * Grid coordinates are always *logical* (reading-order): x = 0 is the first
+ * column in the direction text flows — the left edge in LTR, the right edge
+ * in RTL. Every physical (CSS `left`/pixel) calculation goes through here so
+ * the rest of the codebase never has to think about direction again.
+ */
+interface GridMetrics {
+    /** Inner content width available for columns (container width minus padding). */
+    contentWidth: number;
+    colWidth: number;
+    rowHeight: number;
+    gap: number;
+    padding: number;
+}
+declare function computeMetrics(containerWidth: number, options: IGridLayoutOptions): GridMetrics;
+/** Physical CSS `left` (px, relative to the grid surface's content box) for a logical column. */
+declare function colToLeft(colIndex: number, spanCols: number, m: GridMetrics, rtl: boolean): number;
+declare function rowToTop(rowIndex: number, m: GridMetrics): number;
+declare function spanToWidthPx(spanCols: number, m: GridMetrics): number;
+declare function spanToHeightPx(spanRows: number, m: GridMetrics): number;
+/** Physical left px (as above) -> nearest logical column index. Inverse of `colToLeft`. */
+declare function leftToCol(leftPx: number, spanCols: number, m: GridMetrics, rtl: boolean): number;
+declare function topToRow(topPx: number, m: GridMetrics): number;
+/** Places an item's pixel box (left/top/width/height) inside the grid surface, RTL-aware. */
+declare function placeItem(config: GridItemConfig, m: GridMetrics, rtl: boolean): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+
+interface GridItemState {
+    id: string;
+    config: GridItemConfig;
+    element?: HTMLElement;
+    dragging?: boolean;
+    resizing?: boolean;
+}
+declare class GridLayoutService {
+    readonly options: _angular_core.WritableSignal<GridLayoutOptions>;
+    readonly items: _angular_core.WritableSignal<readonly GridItemState[]>;
+    readonly editMode: _angular_core.WritableSignal<boolean>;
+    readonly activeId: _angular_core.WritableSignal<string | null>;
+    readonly isInteracting: _angular_core.Signal<boolean>;
+    readonly height: _angular_core.Signal<number>;
+    readonly layout: _angular_core.Signal<LayoutOutput[]>;
+    readonly columns: _angular_core.Signal<number>;
+    readonly rtl: _angular_core.Signal<boolean>;
+    private rtlTick;
+    private layoutListener?;
+    private startConfig;
+    private startItems;
+    private previewItems;
+    private _element;
+    private placeholder?;
+    constructor();
+    connect(onLayout: (layout: LayoutOutput[]) => void): void;
+    setOptions(value: Partial<IGridLayoutOptions>): void;
+    setEditMode(value: boolean): void;
+    setItems(items: GridItemState[]): void;
+    registerItem(item: GridItemState): void;
+    updateItemConfig(id: string, config: GridItemConfig): void;
+    unregisterItem(id: string): void;
+    /** Called once the grid surface element exists (e.g. from `ngAfterViewInit`). */
+    attachElement(el: HTMLElement): void;
+    /** Recomputes pixel positions after the surface resizes. Call from a `ResizeObserver`. */
+    refreshMetrics(): void;
+    isItemDraggable(item: GridItemState): boolean;
+    isItemResizable(item: GridItemState): boolean;
+    begin(id: string): void;
+    move(id: string): void;
+    resize(id: string, out: {
+        width: number;
+        height: number;
+        moveLeft: number;
+        moveTop: number;
+    }): void;
+    end(id: string): void;
+    /** Moves an item by whole grid cells — used by arrow-key handling in the item component. */
+    moveByCells(id: string, dCols: number, dRows: number): void;
+    /** Resizes an item by whole grid cells — used by shift+arrow handling in the item component. */
+    resizeByCells(id: string, dCols: number, dRows: number): void;
+    private preview;
+    private screenToGrid;
+    private screenResizeToGrid;
+    private clamp;
+    private clampSize;
+    /** Applies pushes on drag-end and, when configured, removes gaps via compaction. */
+    private settle;
+    private applyCss;
+    private metrics;
+    private resolveRtl;
+    private calculateHeight;
+    private emit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridLayoutService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridLayoutService>;
+}
+
+declare class NgxGridLayoutComponent implements AfterViewInit, OnDestroy {
+    readonly options: _angular_core.InputSignal<IGridLayoutOptions>;
+    readonly editMode: _angular_core.InputSignal<boolean>;
+    readonly layoutChange: _angular_core.OutputEmitterRef<LayoutOutput[]>;
+    /** Explicit direction override. Leave unset to inherit the page/host direction automatically. */
+    readonly dir: _angular_core.InputSignal<"rtl" | "ltr" | undefined>;
+    readonly dirOverride: _angular_core.InputSignal<"rtl" | "ltr" | undefined>;
+    readonly service: GridLayoutService;
+    private readonly el;
+    private surface?;
+    private resizeObserver?;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    setItems(items: GridItemState[]): void;
+    update(options: Partial<IGridLayoutOptions>): void;
+    private setCss;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxGridLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxGridLayoutComponent, "ngx-grid-layout", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "editMode": { "alias": "editMode"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; }, { "layoutChange": "layoutChange"; }, never, ["*"], true, never>;
+}
+
+declare class NgxGridItemComponent implements OnDestroy, OnInit {
+    /** Bound as `[id]` in templates (matches the demo app's existing usage). */
+    readonly itemId: _angular_core.InputSignal<string | undefined>;
+    readonly config: _angular_core.InputSignal<GridItemConfig>;
+    readonly layoutChange: _angular_core.OutputEmitterRef<GridItemConfig>;
+    readonly dragging: _angular_core.WritableSignal<boolean>;
+    readonly resizing: _angular_core.WritableSignal<boolean>;
+    readonly active: _angular_core.Signal<boolean>;
+    readonly transitionStyle: _angular_core.Signal<"none" | "left .18s ease, top .18s ease, width .18s ease, height .18s ease">;
+    readonly interactive: _angular_core.Signal<boolean>;
+    private readonly service;
+    private readonly el;
+    private readonly drag;
+    private readonly resize;
+    readonly resizable: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onDragStart: () => void;
+    onDragMove: () => void;
+    onDragEnd: () => void;
+    onResizeStart: () => void;
+    onResizeMove: (v: {
+        width: number;
+        height: number;
+        moveLeft: number;
+        moveTop: number;
+    }) => void;
+    onResizeEnd: () => void;
+    /** Arrow keys move the item by one cell; Shift+arrow resizes it by one cell. */
+    onKeyDown(e: KeyboardEvent): void;
+    private finishInteraction;
+    /** Converts the item's min/max cell counts (config) into px for the resize directive. */
+    private applySizeConstraints;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxGridItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxGridItemComponent, "ngx-grid-item", never, { "itemId": { "alias": "id"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "layoutChange": "layoutChange"; }, never, ["*"], true, [{ directive: typeof i1.NgxDraggable; inputs: { "dragHandle": "dragHandle"; "lockAxis": "lockAxis"; }; outputs: {}; }, { directive: typeof i1.NgxResizable; inputs: {}; outputs: {}; }]>;
+}
+
+declare class NgxGridLayoutModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxGridLayoutModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgxGridLayoutModule, never, [typeof NgxGridLayoutComponent, typeof NgxGridItemComponent], [typeof NgxGridLayoutComponent, typeof NgxGridItemComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxGridLayoutModule>;
+}
+
+export { GridItemConfig, GridLayoutOptions, GridLayoutService, NgxGridItemComponent, NgxGridLayoutComponent, NgxGridLayoutModule, colToLeft, collides, compact, computeMetrics, findFreeSpot, getAllCollisions, getFirstCollision, gridItemConfigsEqual, leftToCol, maxOccupiedRow, moveItem, normalizeGridItem, placeItem, rowToTop, spanToHeightPx, spanToWidthPx, topToRow, trySwap };
+export type { CompactMode, GridFlow, GridItemState, GridMetrics, IGridBackgroundCfg, IGridLayoutOptions, LayoutNode, LayoutOutput, MoveOptions };

package/types/ngx-kit-image-editor.d.ts

@@ -96,7 +96,7 @@ declare const DEFAULT_NGX_IMAGE_EDITOR_LOCALIZATION: NgxImageEditorLocalization;
  * شدن‌شون می‌شد).
  */
 declare class NgxImageEditorComponent {
-    source: _angular_core.InputSignal<string | File | Blob | null>;
+    source: _angular_core.InputSignal<string | Blob | File | null>;
     /** قفل نسبتِ کراپ (مثلاً ۱ برای آواتار مربعی)؛ undefined یعنی آزاد */
     aspectRatio: _angular_core.InputSignal<number | undefined>;
     outputMaxWidth: _angular_core.InputSignal<number | undefined>;

package/types/ngx-kit-shared.d.ts

@@ -210,6 +210,17 @@ declare function randomStrnig(extraLength?: number, useNumeric?: boolean): strin
 
 declare function makeConfetti(doc: Document, wrap: HTMLElement): void;
 
+declare function generateSequentialGuid(): string;
+
+/**
+ * Performs a deep merge of objects and returns new object. Does not modify
+ * objects (immutable) and merges arrays via concatenation.
+ *
+ * @param {...object} objects - Objects to merge
+ * @returns {object} New object with merged key/values
+ */
+declare function mergeDeep(...objects: any[]): any;
+
 declare class BrowserService {
     private platformId;
     constructor(platformId: object);
@@ -331,5 +342,5 @@ interface OverlayInstance {
     cleanup: () => void;
 }
 
-export { BrowserService, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, getOffsetPosition, makeConfetti, mergeConfig, randomStrnig, startDragSession };
+export { BrowserService, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, generateSequentialGuid, getOffsetPosition, makeConfetti, mergeConfig, mergeDeep, randomStrnig, startDragSession };
 export type { Alignment, BaseOverlayOptions, Direction, DragSessionCallbacks, IPosition, IValue, OverlayInstance, OverlayOptions, Placement, Point, TemplateOptions };