codexly-ui 0.15.1 → 0.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.15.1",
+  "version": "0.15.3",
   "description": "Standalone, signal-based Angular UI component library for Codexly, styled with Tailwind CSS.",
   "keywords": [
     "angular",

package/types/codexly-ui.d.ts

@@ -3709,8 +3709,17 @@ declare class ClxGridItemDirective {
  *  using column/row units, supports drag-to-reorder (via Angular CDK's CdkDropList/CdkDrag — no
  *  new dependency, @angular/cdk is already pulled in by ClxProfileComponent/ClxWidgetCardComponent's
  *  overlay usage) and resize-by-dragging a corner handle. Persistence is the caller's job: listen
- *  to (layoutChange) and save the resulting ClxGridItem[] (e.g. to rp_dashboard_layouts.layout). */
-declare class ClxDashboardGridComponent {
+ *  to (layoutChange) and save the resulting ClxGridItem[] (e.g. to rp_dashboard_layouts.layout).
+ *
+ *  Responsive: `columns` is the desktop column count; the grid itself halves it under 1024px and
+ *  collapses to a single column under 640px (both breakpoints measured off its own host width via
+ *  ResizeObserver, not the viewport — correct inside a narrow sidebar-pushed layout too). Below
+ *  640px, pointer-drag reorder/resize is replaced by an up/down reorder button pair per item —
+ *  CdkDrag's pointer events are unreliable with real fingers on a dense grid, and a 1-column layout
+ *  has nothing to resize width-wise anyway. */
+declare class ClxDashboardGridComponent implements OnDestroy {
+    private readonly _themeSvc;
+    private readonly _isBrowser;
     readonly items: _angular_core.InputSignal<ClxGridItem[]>;
     readonly columns: _angular_core.InputSignal<number>;
     readonly rowHeight: _angular_core.InputSignal<number>;
@@ -3719,10 +3728,25 @@ declare class ClxDashboardGridComponent {
     readonly layoutChange: _angular_core.OutputEmitterRef<ClxGridItem[]>;
     readonly itemResize: _angular_core.OutputEmitterRef<ClxGridItemResizeEvent>;
     protected readonly _itemTemplate: _angular_core.Signal<ClxGridItemDirective | undefined>;
+    private readonly _container;
+    private readonly _hostWidth;
+    private _resizeObserver?;
+    /** Below 640px: single column, no drag/resize (reorder buttons instead). 640-1024px: half the
+     *  desktop column count (min 2). 1024px+: the full `columns()` count. */
+    protected readonly _isCompact: _angular_core.Signal<boolean>;
+    private readonly _effectiveColumns;
     protected readonly _gridCols: _angular_core.Signal<string>;
+    /** Editing gets a visibly distinct "canvas" — dashed border + dotted background + surface-2 tint
+     *  — so the grid reads as an editable panel, not bare page background with cards floating on it. */
+    protected readonly _containerClass: _angular_core.Signal<string>;
     private _resizing;
+    constructor();
+    ngOnDestroy(): void;
     protected _onDrop(event: CdkDragDrop<ClxGridItem[]>): void;
     protected _onDragMoved(_event: CdkDragMove<ClxGridItem>): void;
+    /** Compact-mode reorder (touch-friendly alternative to CdkDrag) — swap item at `index` with its
+     *  neighbor `delta` positions away (-1 = up/earlier, 1 = down/later). */
+    protected _moveBy(index: number, delta: number): void;
     protected _startResize(event: PointerEvent, item: ClxGridItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxDashboardGridComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxDashboardGridComponent, "clx-dashboard-grid", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; }, { "layoutChange": "layoutChange"; "itemResize": "itemResize"; }, ["_itemTemplate"], never, true, never>;