@ogidor/dashboard 1.0.2 → 1.0.4

package/fesm2020/ogidor-dashboard.mjs

@@ -1,433 +1,910 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { BehaviorSubject, Subject, Subscription } from 'rxjs';
+import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChild, Injectable, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i4 from 'angular-gridster2';
-import { GridsterModule } from 'angular-gridster2';
-import * as i3 from 'ng-apexcharts';
-import { NgApexchartsModule } from 'ng-apexcharts';
-import { BrowserModule } from '@angular/platform-browser';
+import { BehaviorSubject, Subscription } from 'rxjs';
+
+/**
+ * Directive applied to the template that should be stamped inside each grid cell.
+ * Usage:
+ *   <app-grid [widgets]="...">
+ *     <ng-template gridCell let-widget="widget">
+ *       <app-widget-renderer [widget]="widget" ...></app-widget-renderer>
+ *     </ng-template>
+ *   </app-grid>
+ */
+class GridCellDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+GridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+GridCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: GridCellDirective, selector: "[gridCell]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridCellDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[gridCell]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+class GridEngine {
+    /**
+     * Check if two rects overlap.
+     */
+    static collides(a, b) {
+        return !(a.x + a.cols <= b.x ||
+            b.x + b.cols <= a.x ||
+            a.y + a.rows <= b.y ||
+            b.y + b.rows <= a.y);
+    }
+    /**
+     * Get ALL widgets that collide with `rect`.
+     */
+    static getAllCollisions(widgets, rect) {
+        return widgets.filter(w => w.id !== rect.id && GridEngine.collides(w, rect));
+    }
+    /**
+     * Sort widgets top-to-bottom, left-to-right.
+     */
+    static sortByPosition(widgets) {
+        return [...widgets].sort((a, b) => a.y - b.y || a.x - b.x);
+    }
+    /**
+     * Move a widget to (x, y) and push any colliding widgets downward.
+     * Returns the full list with resolved positions.
+     */
+    static moveWidget(allWidgets, widget, newX, newY, columns) {
+        const widgets = allWidgets.map(w => ({ ...w }));
+        const moving = widgets.find(w => w.id === widget.id);
+        if (!moving)
+            return widgets;
+        moving.x = Math.max(0, Math.min(newX, columns - moving.cols));
+        moving.y = Math.max(0, newY);
+        const sorted = GridEngine.sortByPosition(widgets);
+        GridEngine.resolveCollisions(sorted, moving);
+        return GridEngine.compact(sorted, columns);
+    }
+    /**
+     * Resize a widget and push colliding widgets down.
+     */
+    static resizeWidget(allWidgets, widget, newCols, newRows, columns) {
+        const widgets = allWidgets.map(w => ({ ...w }));
+        const resizing = widgets.find(w => w.id === widget.id);
+        if (!resizing)
+            return widgets;
+        resizing.cols = Math.max(1, Math.min(newCols, columns - resizing.x));
+        resizing.rows = Math.max(1, newRows);
+        const sorted = GridEngine.sortByPosition(widgets);
+        GridEngine.resolveCollisions(sorted, resizing);
+        return GridEngine.compact(sorted, columns);
+    }
+    /**
+     * Push all widgets that collide with `movedWidget` downward, recursively.
+     */
+    static resolveCollisions(widgets, movedWidget) {
+        const collisions = GridEngine.getAllCollisions(widgets, movedWidget);
+        for (const collider of collisions) {
+            collider.y = movedWidget.y + movedWidget.rows;
+            GridEngine.resolveCollisions(widgets, collider);
+        }
+    }
+    /**
+     * Compact the grid: move every widget as far up as possible without overlapping.
+     */
+    static compact(widgets, _columns) {
+        const sorted = GridEngine.sortByPosition(widgets);
+        const placed = [];
+        for (const widget of sorted) {
+            widget.y = GridEngine.findCompactY(placed, widget);
+            placed.push(widget);
+        }
+        return placed;
+    }
+    /**
+     * Find the highest Y position a widget can occupy without overlapping any already-placed widget.
+     */
+    static findCompactY(placed, widget) {
+        let y = 0;
+        while (true) {
+            const test = { ...widget, y };
+            const collision = placed.find(p => GridEngine.collides(p, test));
+            if (!collision)
+                return y;
+            y = collision.y + collision.rows;
+        }
+    }
+    /**
+     * Compute the total number of rows the grid needs.
+     */
+    static getGridHeight(widgets) {
+        if (widgets.length === 0)
+            return 0;
+        return Math.max(...widgets.map(w => w.y + w.rows));
+    }
+}
+/* ═══════════════════════════════════════════════════════════════════════
+   CUSTOM GRID COMPONENT
+   ═══════════════════════════════════════════════════════════════════════ */
+class CustomGridComponent {
+    constructor(zone, cdr) {
+        this.zone = zone;
+        this.cdr = cdr;
+        this.widgets = [];
+        this.columns = 12;
+        this.gap = 16;
+        this.rowHeight = 80;
+        this.minItemCols = 1;
+        this.minItemRows = 1;
+        this.itemChanged = new EventEmitter();
+        this.layoutChanged = new EventEmitter();
+        this.placeholder = null;
+        this.containerHeight = 400;
+        this.dragging = null;
+        this.resizing = null;
+        this.previewWidgets = [];
+        this.boundMouseMove = this.onMouseMove.bind(this);
+        this.boundMouseUp = this.onMouseUp.bind(this);
+    }
+    ngOnInit() {
+        this.compactAndApply();
+        this.updateContainerHeight();
+        this.zone.runOutsideAngular(() => {
+            window.addEventListener('mousemove', this.boundMouseMove);
+            window.addEventListener('mouseup', this.boundMouseUp);
+        });
+    }
+    ngOnChanges(_changes) {
+        this.updateContainerHeight();
+    }
+    ngOnDestroy() {
+        window.removeEventListener('mousemove', this.boundMouseMove);
+        window.removeEventListener('mouseup', this.boundMouseUp);
+    }
+    trackByFn(_index, item) { return item.id; }
+    // ── Geometry ──
+    get cellWidth() {
+        const containerW = this.gridContainer?.nativeElement?.clientWidth ?? 800;
+        return (containerW - (this.columns - 1) * this.gap) / this.columns;
+    }
+    colToPixel(col) {
+        return col * (this.cellWidth + this.gap);
+    }
+    rowToPixel(row) {
+        return row * (this.rowHeight + this.gap);
+    }
+    pixelToCol(px) {
+        return Math.round(px / (this.cellWidth + this.gap));
+    }
+    pixelToRow(px) {
+        return Math.round(px / (this.rowHeight + this.gap));
+    }
+    colsToPixelWidth(cols) {
+        return cols * this.cellWidth + (cols - 1) * this.gap;
+    }
+    rowsToPixelHeight(rows) {
+        return rows * this.rowHeight + (rows - 1) * this.gap;
+    }
+    getItemLeft(w) {
+        return this.dragging?.id === w.id ? this.dragging.currentPixelX : this.colToPixel(w.x);
+    }
+    getItemTop(w) {
+        return this.dragging?.id === w.id ? this.dragging.currentPixelY : this.rowToPixel(w.y);
+    }
+    getItemWidth(w) {
+        return this.resizing?.id === w.id ? this.resizing.currentPixelW : this.colsToPixelWidth(w.cols);
+    }
+    getItemHeight(w) {
+        return this.resizing?.id === w.id ? this.resizing.currentPixelH : this.rowsToPixelHeight(w.rows);
+    }
+    // ── Drag ──
+    onDragStart(event, widget) {
+        const target = event.target;
+        if (target.closest('button, input, select, textarea, a, .resize-handle'))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = this.gridContainer.nativeElement.getBoundingClientRect();
+        const itemLeft = this.colToPixel(widget.x);
+        const itemTop = this.rowToPixel(widget.y);
+        this.dragging = {
+            id: widget.id,
+            offsetX: event.clientX - rect.left - itemLeft,
+            offsetY: event.clientY - rect.top - itemTop,
+            currentPixelX: itemLeft,
+            currentPixelY: itemTop,
+        };
+        this.previewWidgets = this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows }));
+        this.placeholder = {
+            left: itemLeft, top: itemTop,
+            width: this.colsToPixelWidth(widget.cols),
+            height: this.rowsToPixelHeight(widget.rows),
+        };
+        this.cdr.markForCheck();
+    }
+    onResizeStart(event, widget) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.resizing = {
+            id: widget.id,
+            startMouseX: event.clientX,
+            startMouseY: event.clientY,
+            startCols: widget.cols,
+            startRows: widget.rows,
+            currentPixelW: this.colsToPixelWidth(widget.cols),
+            currentPixelH: this.rowsToPixelHeight(widget.rows),
+        };
+        this.previewWidgets = this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows }));
+        this.placeholder = {
+            left: this.colToPixel(widget.x), top: this.rowToPixel(widget.y),
+            width: this.colsToPixelWidth(widget.cols),
+            height: this.rowsToPixelHeight(widget.rows),
+        };
+        this.cdr.markForCheck();
+    }
+    onMouseMove(event) {
+        if (this.dragging)
+            this.handleDragMove(event);
+        else if (this.resizing)
+            this.handleResizeMove(event);
+    }
+    onMouseUp(_event) {
+        if (this.dragging)
+            this.zone.run(() => this.finalizeDrag());
+        else if (this.resizing)
+            this.zone.run(() => this.finalizeResize());
+    }
+    handleDragMove(event) {
+        if (!this.dragging)
+            return;
+        const rect = this.gridContainer.nativeElement.getBoundingClientRect();
+        const widget = this.widgets.find(w => w.id === this.dragging.id);
+        if (!widget)
+            return;
+        let px = event.clientX - rect.left - this.dragging.offsetX;
+        let py = event.clientY - rect.top - this.dragging.offsetY;
+        px = Math.max(0, Math.min(px, rect.width - this.colsToPixelWidth(widget.cols)));
+        py = Math.max(0, py);
+        this.dragging.currentPixelX = px;
+        this.dragging.currentPixelY = py;
+        const targetCol = Math.max(0, Math.min(this.pixelToCol(px), this.columns - widget.cols));
+        const targetRow = Math.max(0, this.pixelToRow(py));
+        const resolved = GridEngine.moveWidget(this.previewWidgets, { id: widget.id, x: widget.x, y: widget.y, cols: widget.cols, rows: widget.rows }, targetCol, targetRow, this.columns);
+        this.placeholder = {
+            left: this.colToPixel(targetCol), top: this.rowToPixel(targetRow),
+            width: this.colsToPixelWidth(widget.cols),
+            height: this.rowsToPixelHeight(widget.rows),
+        };
+        this.zone.run(() => {
+            for (const rw of resolved) {
+                if (rw.id === widget.id)
+                    continue;
+                const w = this.widgets.find(ww => ww.id === rw.id);
+                if (w) {
+                    w.x = rw.x;
+                    w.y = rw.y;
+                }
+            }
+            this.updateContainerHeight();
+            this.cdr.markForCheck();
+        });
+    }
+    finalizeDrag() {
+        if (!this.dragging)
+            return;
+        const widget = this.widgets.find(w => w.id === this.dragging.id);
+        const targetCol = Math.max(0, Math.min(this.pixelToCol(this.dragging.currentPixelX), this.columns - widget.cols));
+        const targetRow = Math.max(0, this.pixelToRow(this.dragging.currentPixelY));
+        const resolved = GridEngine.moveWidget(this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows })), { id: widget.id, x: widget.x, y: widget.y, cols: widget.cols, rows: widget.rows }, targetCol, targetRow, this.columns);
+        for (const rw of resolved) {
+            const w = this.widgets.find(ww => ww.id === rw.id);
+            if (w) {
+                w.x = rw.x;
+                w.y = rw.y;
+                w.cols = rw.cols;
+                w.rows = rw.rows;
+                this.itemChanged.emit(w);
+            }
+        }
+        this.dragging = null;
+        this.placeholder = null;
+        this.previewWidgets = [];
+        this.updateContainerHeight();
+        this.layoutChanged.emit(this.widgets);
+        this.cdr.markForCheck();
+    }
+    handleResizeMove(event) {
+        if (!this.resizing)
+            return;
+        const widget = this.widgets.find(w => w.id === this.resizing.id);
+        if (!widget)
+            return;
+        const dx = event.clientX - this.resizing.startMouseX;
+        const dy = event.clientY - this.resizing.startMouseY;
+        let newCols = Math.max(this.minItemCols, Math.round((this.colsToPixelWidth(this.resizing.startCols) + dx) / (this.cellWidth + this.gap)));
+        let newRows = Math.max(this.minItemRows, Math.round((this.rowsToPixelHeight(this.resizing.startRows) + dy) / (this.rowHeight + this.gap)));
+        newCols = Math.min(newCols, this.columns - widget.x);
+        this.resizing.currentPixelW = this.colsToPixelWidth(newCols);
+        this.resizing.currentPixelH = this.rowsToPixelHeight(newRows);
+        const resolved = GridEngine.resizeWidget(this.previewWidgets, { id: widget.id, x: widget.x, y: widget.y, cols: widget.cols, rows: widget.rows }, newCols, newRows, this.columns);
+        this.placeholder = {
+            left: this.colToPixel(widget.x), top: this.rowToPixel(widget.y),
+            width: this.colsToPixelWidth(newCols),
+            height: this.rowsToPixelHeight(newRows),
+        };
+        this.zone.run(() => {
+            for (const rw of resolved) {
+                if (rw.id === widget.id)
+                    continue;
+                const w = this.widgets.find(ww => ww.id === rw.id);
+                if (w) {
+                    w.x = rw.x;
+                    w.y = rw.y;
+                }
+            }
+            this.updateContainerHeight();
+            this.cdr.markForCheck();
+        });
+    }
+    finalizeResize() {
+        if (!this.resizing)
+            return;
+        const widget = this.widgets.find(w => w.id === this.resizing.id);
+        let newCols = Math.max(this.minItemCols, Math.round(this.resizing.currentPixelW / (this.cellWidth + this.gap)));
+        let newRows = Math.max(this.minItemRows, Math.round(this.resizing.currentPixelH / (this.rowHeight + this.gap)));
+        newCols = Math.min(newCols, this.columns - widget.x);
+        const resolved = GridEngine.resizeWidget(this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows })), { id: widget.id, x: widget.x, y: widget.y, cols: widget.cols, rows: widget.rows }, newCols, newRows, this.columns);
+        for (const rw of resolved) {
+            const w = this.widgets.find(ww => ww.id === rw.id);
+            if (w) {
+                w.x = rw.x;
+                w.y = rw.y;
+                w.cols = rw.cols;
+                w.rows = rw.rows;
+                this.itemChanged.emit(w);
+            }
+        }
+        this.resizing = null;
+        this.placeholder = null;
+        this.previewWidgets = [];
+        this.updateContainerHeight();
+        this.layoutChanged.emit(this.widgets);
+        this.cdr.markForCheck();
+    }
+    // ── Utilities ──
+    compactAndApply() {
+        if (!this.widgets?.length)
+            return;
+        const compacted = GridEngine.compact(this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows })), this.columns);
+        for (const rw of compacted) {
+            const w = this.widgets.find(ww => ww.id === rw.id);
+            if (w) {
+                w.x = rw.x;
+                w.y = rw.y;
+            }
+        }
+    }
+    updateContainerHeight() {
+        if (!this.widgets?.length) {
+            this.containerHeight = 400;
+            return;
+        }
+        const maxRow = GridEngine.getGridHeight(this.widgets.map(w => ({ id: w.id, x: w.x, y: w.y, cols: w.cols, rows: w.rows })));
+        this.containerHeight = this.rowToPixel(maxRow) + this.rowHeight + this.gap;
+    }
+}
+CustomGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomGridComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CustomGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomGridComponent, selector: "app-grid", inputs: { widgets: "widgets", columns: "columns", gap: "gap", rowHeight: "rowHeight", minItemCols: "minItemCols", minItemRows: "minItemRows" }, outputs: { itemChanged: "itemChanged", layoutChanged: "layoutChanged" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "gridContainer", first: true, predicate: ["gridContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      #gridContainer
+      class="grid-container"
+      [style.height.px]="containerHeight"
+    >
+      <!-- Placeholder preview -->
+      <div
+        class="grid-placeholder"
+        *ngIf="placeholder"
+        [style.left.px]="placeholder.left"
+        [style.top.px]="placeholder.top"
+        [style.width.px]="placeholder.width"
+        [style.height.px]="placeholder.height"
+      ></div>
+
+      <!-- Widget items -->
+      <div
+        *ngFor="let widget of widgets; trackBy: trackByFn"
+        class="grid-item"
+        [class.is-dragging]="dragging?.id === widget.id"
+        [class.is-resizing]="resizing?.id === widget.id"
+        [style.left.px]="getItemLeft(widget)"
+        [style.top.px]="getItemTop(widget)"
+        [style.width.px]="getItemWidth(widget)"
+        [style.height.px]="getItemHeight(widget)"
+        [style.z-index]="(dragging?.id === widget.id || resizing?.id === widget.id) ? 100 : 1"
+        (mousedown)="onDragStart($event, widget)"
+      >
+        <!-- Content stamped from parent template, context carries the widget -->
+        <ng-container
+          *ngIf="cellTemplate"
+          [ngTemplateOutlet]="cellTemplate"
+          [ngTemplateOutletContext]="{ widget: widget }"
+        ></ng-container>
+
+        <!-- Resize handle -->
+        <div class="resize-handle" (mousedown)="onResizeStart($event, widget)">
+          <svg width="12" height="12" viewBox="0 0 12 12">
+            <path d="M11 1v10H1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M11 5v6H5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M11 9v2H9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.grid-container{position:relative;width:100%;min-height:100%;transition:height .25s ease}.grid-placeholder{position:absolute;background:var(--dash-accent-color, #0a84ff);opacity:.12;border-radius:24px;border:2px dashed var(--dash-accent-color, #0a84ff);transition:left .15s ease,top .15s ease,width .15s ease,height .15s ease;pointer-events:none;z-index:0}.grid-item{position:absolute;display:flex;flex-direction:column;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;border-radius:24px;overflow:hidden}.grid-item.is-dragging,.grid-item.is-resizing{transition:none!important;opacity:.88;overflow:visible;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}.resize-handle{position:absolute;right:4px;bottom:4px;width:22px;height:22px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#ffffff40;border-radius:6px;transition:color .2s,background .2s;z-index:20}.resize-handle:hover{color:var(--dash-accent-color, #0a84ff);background:rgba(255,255,255,.06)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-grid', template: `
+    <div
+      #gridContainer
+      class="grid-container"
+      [style.height.px]="containerHeight"
+    >
+      <!-- Placeholder preview -->
+      <div
+        class="grid-placeholder"
+        *ngIf="placeholder"
+        [style.left.px]="placeholder.left"
+        [style.top.px]="placeholder.top"
+        [style.width.px]="placeholder.width"
+        [style.height.px]="placeholder.height"
+      ></div>
+
+      <!-- Widget items -->
+      <div
+        *ngFor="let widget of widgets; trackBy: trackByFn"
+        class="grid-item"
+        [class.is-dragging]="dragging?.id === widget.id"
+        [class.is-resizing]="resizing?.id === widget.id"
+        [style.left.px]="getItemLeft(widget)"
+        [style.top.px]="getItemTop(widget)"
+        [style.width.px]="getItemWidth(widget)"
+        [style.height.px]="getItemHeight(widget)"
+        [style.z-index]="(dragging?.id === widget.id || resizing?.id === widget.id) ? 100 : 1"
+        (mousedown)="onDragStart($event, widget)"
+      >
+        <!-- Content stamped from parent template, context carries the widget -->
+        <ng-container
+          *ngIf="cellTemplate"
+          [ngTemplateOutlet]="cellTemplate"
+          [ngTemplateOutletContext]="{ widget: widget }"
+        ></ng-container>
+
+        <!-- Resize handle -->
+        <div class="resize-handle" (mousedown)="onResizeStart($event, widget)">
+          <svg width="12" height="12" viewBox="0 0 12 12">
+            <path d="M11 1v10H1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M11 5v6H5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M11 9v2H9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}.grid-container{position:relative;width:100%;min-height:100%;transition:height .25s ease}.grid-placeholder{position:absolute;background:var(--dash-accent-color, #0a84ff);opacity:.12;border-radius:24px;border:2px dashed var(--dash-accent-color, #0a84ff);transition:left .15s ease,top .15s ease,width .15s ease,height .15s ease;pointer-events:none;z-index:0}.grid-item{position:absolute;display:flex;flex-direction:column;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;border-radius:24px;overflow:hidden}.grid-item.is-dragging,.grid-item.is-resizing{transition:none!important;opacity:.88;overflow:visible;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}.resize-handle{position:absolute;right:4px;bottom:4px;width:22px;height:22px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#ffffff40;border-radius:6px;transition:color .2s,background .2s;z-index:20}.resize-handle:hover{color:var(--dash-accent-color, #0a84ff);background:rgba(255,255,255,.06)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { widgets: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], minItemCols: [{
+                type: Input
+            }], minItemRows: [{
+                type: Input
+            }], itemChanged: [{
+                type: Output
+            }], layoutChanged: [{
+                type: Output
+            }], gridContainer: [{
+                type: ViewChild,
+                args: ['gridContainer', { static: true }]
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: [GridCellDirective, { read: TemplateRef }]
+            }] } });
 
 class DashboardStateService {
-    constructor() {
-        this.STORAGE_KEY = 'xtb_dashboard_layout';
+    constructor(zone) {
+        this.zone = zone;
+        /**
+         * Shared key — stores page list + widget metadata (no positions).
+         * Read and written by every window.
+         */
+        this.SHARED_KEY = 'ogidor_shared';
+        this.CHANNEL_NAME = 'ogidor_dashboard_sync';
+        this.channel = typeof BroadcastChannel !== 'undefined'
+            ? new BroadcastChannel(this.CHANNEL_NAME) : null;
         this.initialPages = [
-            {
-                id: 'page-1',
-                name: 'Default Workspace',
-                widgets: [
-                    {
-                        id: 'w-1',
-                        type: 'LINE',
-                        x: 0,
-                        y: 0,
-                        cols: 4,
-                        rows: 4,
-                        title: 'Market Trend',
-                        data: { series: [{ name: 'Price', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }] }
-                    },
-                    {
-                        id: 'w-2',
-                        type: 'DONUT',
-                        x: 4,
-                        y: 0,
-                        cols: 2,
-                        rows: 4,
-                        title: 'Asset Allocation',
-                        data: { series: [44, 55, 41, 17, 15] }
-                    }
-                ]
-            }
+            { id: 'page-1', name: 'Default Workspace', widgets: [] }
         ];
         this.pagesSubject = new BehaviorSubject(this.initialPages);
         this.activePageIdSubject = new BehaviorSubject(this.initialPages[0].id);
-        /**
-         * Emits whenever a widget's data is updated programmatically.
-         * Key = widget id, value = new data payload.
-         */
-        this.widgetDataSubject = new Subject();
-        this.widgetData$ = this.widgetDataSubject.asObservable();
         this.pages$ = this.pagesSubject.asObservable();
         this.activePageId$ = this.activePageIdSubject.asObservable();
-        const saved = localStorage.getItem(this.STORAGE_KEY);
-        if (saved) {
+        // Determine whether we are a pop-out window
+        const hash = typeof window !== 'undefined'
+            ? window.location.hash.replace('#', '').trim() : '';
+        this.positionsKey = hash ? `ogidor_positions_${hash}` : 'ogidor_positions_main';
+        // 1. Load the shared structural state
+        const shared = localStorage.getItem(this.SHARED_KEY);
+        if (shared) {
             try {
-                this.loadLayout(JSON.parse(saved));
+                this._applyShared(JSON.parse(shared), false);
             }
             catch (e) {
-                console.error('Failed to load saved layout', e);
+                console.error('[Dashboard] bad shared state', e);
             }
         }
+        // 2. Overlay this window's saved positions on top
+        this._restorePositions();
+        // 3. Listen for structural changes broadcast by other windows
+        if (this.channel) {
+            this.channel.onmessage = (ev) => {
+                this.zone.run(() => this._onSyncEvent(ev.data));
+            };
+        }
     }
+    ngOnDestroy() { this.channel?.close(); }
+    // ── Page actions ──────────────────────────────────────────────
     getActivePage() {
         return this.pagesSubject.value.find(p => p.id === this.activePageIdSubject.value);
     }
-    setActivePage(id) {
-        this.activePageIdSubject.next(id);
-    }
+    setActivePage(id) { this.activePageIdSubject.next(id); }
     addPage(name) {
-        const newPage = {
-            id: `page-${Date.now()}`,
-            name,
-            widgets: []
-        };
-        const updatedPages = [...this.pagesSubject.value, newPage];
-        this.pagesSubject.next(updatedPages);
-        this.activePageIdSubject.next(newPage.id);
-        this.saveToLocalStorage();
+        const page = { id: `page-${Date.now()}`, name, widgets: [] };
+        this.pagesSubject.next([...this.pagesSubject.value, page]);
+        this.activePageIdSubject.next(page.id);
+        this._saveShared();
+        this._broadcast({ type: 'PAGE_ADDED', page });
     }
     removePage(id) {
         const pages = this.pagesSubject.value;
         if (pages.length <= 1)
             return;
-        const updatedPages = pages.filter(p => p.id !== id);
-        this.pagesSubject.next(updatedPages);
+        const updated = pages.filter(p => p.id !== id);
+        this.pagesSubject.next(updated);
         if (this.activePageIdSubject.value === id) {
-            this.activePageIdSubject.next(updatedPages[0].id);
+            this.activePageIdSubject.next(updated[0].id);
         }
-        this.saveToLocalStorage();
+        this._saveShared();
+        this._broadcast({ type: 'PAGE_REMOVED', pageId: id });
     }
-    addWidget(type) {
+    // ── Widget structural actions (synced to all windows) ─────────
+    addWidget(widget) {
         const activePage = this.getActivePage();
         if (!activePage)
-            return;
+            throw new Error('No active page');
         const newWidget = {
             id: `widget-${Date.now()}`,
-            type,
-            x: 0, y: 0,
-            cols: type === 'DONUT' ? 2 : 4,
-            rows: 4,
-            title: `${type.charAt(0) + type.slice(1).toLowerCase()} Chart`,
-            data: this.getDefaultDataForType(type)
+            x: 0, y: 0, cols: 4, rows: 3,
+            ...widget,
         };
-        activePage.widgets.push(newWidget);
-        this.updatePages(this.pagesSubject.value);
+        activePage.widgets = [...activePage.widgets, newWidget];
+        this.pagesSubject.next([...this.pagesSubject.value]);
+        this._saveShared();
+        this._savePositions(); // register default position locally
+        this._broadcast({ type: 'WIDGET_ADDED', pageId: activePage.id, widget: newWidget });
+        return newWidget;
     }
-    addWidgetWithData(type, title, data) {
+    updateWidget(widgetId, patch) {
+        const pages = this.pagesSubject.value;
+        for (const page of pages) {
+            const w = page.widgets.find(w => w.id === widgetId);
+            if (w) {
+                Object.assign(w, patch);
+                this.pagesSubject.next([...pages]);
+                this._saveShared();
+                this._broadcast({ type: 'WIDGET_META', widgetId, patch });
+                return;
+            }
+        }
+    }
+    removeWidget(widgetId) {
         const activePage = this.getActivePage();
         if (!activePage)
             return;
-        const newWidget = {
-            id: `widget-${Date.now()}`,
-            type,
-            x: 0, y: 0,
-            cols: type === 'DONUT' ? 3 : 6,
-            rows: 4,
-            title,
-            data
-        };
-        activePage.widgets.push(newWidget);
-        this.updatePages(this.pagesSubject.value);
-    }
-    getDefaultDataForType(type) {
-        if (type === 'DONUT') {
-            return { series: [30, 20, 50] };
-        }
-        return {
-            series: [{
-                    name: 'Sample Data',
-                    data: Array.from({ length: 10 }, () => Math.floor(Math.random() * 100))
-                }]
-        };
+        const pageId = activePage.id;
+        activePage.widgets = activePage.widgets.filter(w => w.id !== widgetId);
+        this.pagesSubject.next([...this.pagesSubject.value]);
+        this._saveShared();
+        this._savePositions();
+        this._broadcast({ type: 'WIDGET_REMOVED', pageId, widgetId });
     }
+    // ── Position actions (local to THIS window only) ──────────────
+    /**
+     * Update a widget's grid position/size.
+     * Saved only for this window — never broadcast to others.
+     */
     updateWidgetPosition(pageId, widgetId, x, y, cols, rows) {
         const pages = this.pagesSubject.value;
-        const page = pages.find(p => p.id === pageId);
-        if (page) {
-            const widget = page.widgets.find(w => w.id === widgetId);
-            if (widget) {
-                widget.x = x;
-                widget.y = y;
-                widget.cols = cols;
-                widget.rows = rows;
-                this.updatePages(pages);
-            }
+        const widget = pages.find(p => p.id === pageId)?.widgets.find(w => w.id === widgetId);
+        if (widget) {
+            widget.x = x;
+            widget.y = y;
+            widget.cols = cols;
+            widget.rows = rows;
+            this.pagesSubject.next([...pages]);
+            this._savePositions(); // local only — intentionally no _saveShared / no broadcast
         }
     }
-    removeWidget(widgetId) {
-        const activePage = this.getActivePage();
-        if (activePage) {
-            activePage.widgets = activePage.widgets.filter(w => w.id !== widgetId);
-            this.updatePages(this.pagesSubject.value);
-        }
+    // ── Serialization ─────────────────────────────────────────────
+    serializeLayout() {
+        return JSON.stringify({
+            pages: this.pagesSubject.value,
+            activePageId: this.activePageIdSubject.value,
+        });
+    }
+    loadLayout(config) {
+        if (!config?.pages)
+            return;
+        this._applyShared(config, true);
+        this._saveShared();
+        this._savePositions();
     }
+    popOutPage(pageId) {
+        const url = `${window.location.origin}${window.location.pathname}#${pageId}`;
+        window.open(url, `workspace_${pageId}`, 'width=1280,height=800,menubar=no,toolbar=no,location=no,status=no');
+    }
+    // ── Private helpers ───────────────────────────────────────────
     /**
-     * Push new data into a widget by its id.
-     * The widget's chart will re-render immediately.
-     *
-     * @param widgetId  The `id` of the target widget.
-     * @param data      New data — `LineBarData` for LINE/BAR, `DonutData` for DONUT.
+     * Save page list + widget metadata (titles, cardColor, data) — no positions.
      */
-    updateWidgetData(widgetId, data) {
-        const pages = this.pagesSubject.value;
-        for (const page of pages) {
-            const widget = page.widgets.find(w => w.id === widgetId);
-            if (widget) {
-                widget.data = data;
-                this.widgetDataSubject.next({ widgetId, data });
-                this.updatePages(pages);
-                return;
+    _saveShared() {
+        const stripped = this.pagesSubject.value.map(p => ({
+            ...p,
+            widgets: p.widgets.map(({ id, title, cardColor, data, cols, rows }) => 
+            // Keep default cols/rows so new windows get a sensible first-open layout.
+            // x/y are intentionally omitted from shared state.
+            ({ id, title, cardColor, data, x: 0, y: 0, cols, rows })),
+        }));
+        localStorage.setItem(this.SHARED_KEY, JSON.stringify({
+            pages: stripped,
+            activePageId: this.activePageIdSubject.value,
+        }));
+    }
+    /**
+     * Save this window's grid positions (x, y, cols, rows) per widget.
+     */
+    _savePositions() {
+        const positions = {};
+        for (const page of this.pagesSubject.value) {
+            for (const w of page.widgets) {
+                positions[`${page.id}:${w.id}`] = { x: w.x, y: w.y, cols: w.cols, rows: w.rows };
             }
         }
-        console.warn(`[Dashboard] updateWidgetData: widget "${widgetId}" not found.`);
+        localStorage.setItem(this.positionsKey, JSON.stringify(positions));
     }
-    updateWidgetMeta(widgetId, meta) {
-        const pages = this.pagesSubject.value;
-        for (const page of pages) {
-            const widget = page.widgets.find(w => w.id === widgetId);
-            if (widget) {
-                if (meta.title !== undefined)
-                    widget.title = meta.title;
-                if (meta.colors !== undefined)
-                    widget.colors = meta.colors;
-                if (meta.cardColor !== undefined)
-                    widget.cardColor = meta.cardColor;
-                if (meta.data !== undefined) {
-                    widget.data = meta.data;
-                    this.widgetDataSubject.next({ widgetId, data: meta.data });
+    /**
+     * Overlay the positions saved for THIS window on top of the current pages.
+     */
+    _restorePositions() {
+        const raw = localStorage.getItem(this.positionsKey);
+        if (!raw)
+            return;
+        try {
+            const positions = JSON.parse(raw);
+            const pages = this.pagesSubject.value;
+            for (const page of pages) {
+                for (const w of page.widgets) {
+                    const pos = positions[`${page.id}:${w.id}`];
+                    if (pos) {
+                        w.x = pos.x;
+                        w.y = pos.y;
+                        w.cols = pos.cols;
+                        w.rows = pos.rows;
+                    }
                 }
-                this.updatePages(pages);
-                return;
             }
+            this.pagesSubject.next([...pages]);
+        }
+        catch (e) {
+            console.error('[Dashboard] bad positions state', e);
         }
     }
-    updatePages(pages) {
-        this.pagesSubject.next([...pages]);
-        this.saveToLocalStorage();
-    }
-    serializeLayout() {
-        const config = {
-            pages: this.pagesSubject.value,
-            activePageId: this.activePageIdSubject.value
-        };
-        return JSON.stringify(config);
+    /**
+     * Apply a shared config object (page list + metadata) without touching
+     * this window's saved positions.
+     */
+    _applyShared(config, overwritePositions) {
+        if (!config?.pages)
+            return;
+        this.pagesSubject.next(config.pages);
+        if (config.activePageId)
+            this.activePageIdSubject.next(config.activePageId);
+        if (!overwritePositions)
+            this._restorePositions();
     }
-    loadLayout(config) {
-        if (config && config.pages) {
-            this.pagesSubject.next(config.pages);
-            if (config.activePageId) {
-                this.activePageIdSubject.next(config.activePageId);
+    /**
+     * Handle a structural sync event arriving from another window.
+     * Position changes are never sent so we never receive them here.
+     */
+    _onSyncEvent(event) {
+        // Work on a shallow clone of pages so Angular detects the change
+        const pages = this.pagesSubject.value.map(p => ({
+            ...p, widgets: [...p.widgets]
+        }));
+        switch (event.type) {
+            case 'PAGE_ADDED':
+                if (!pages.find(p => p.id === event.page.id)) {
+                    pages.push({ ...event.page, widgets: [...event.page.widgets] });
+                    this.pagesSubject.next(pages);
+                    this._saveShared();
+                }
+                break;
+            case 'PAGE_REMOVED': {
+                const updated = pages.filter(p => p.id !== event.pageId);
+                if (updated.length !== pages.length) {
+                    this.pagesSubject.next(updated);
+                    if (this.activePageIdSubject.value === event.pageId) {
+                        this.activePageIdSubject.next(updated[0]?.id ?? '');
+                    }
+                    this._saveShared();
+                }
+                break;
+            }
+            case 'WIDGET_ADDED': {
+                const page = pages.find(p => p.id === event.pageId);
+                if (page && !page.widgets.find(w => w.id === event.widget.id)) {
+                    page.widgets = [...page.widgets, { ...event.widget }];
+                    this.pagesSubject.next(pages);
+                    this._saveShared();
+                    // Don't touch positions — this window will keep its own layout for
+                    // existing widgets; the new one starts at its default position.
+                }
+                break;
+            }
+            case 'WIDGET_REMOVED': {
+                const page = pages.find(p => p.id === event.pageId);
+                if (page) {
+                    page.widgets = page.widgets.filter(w => w.id !== event.widgetId);
+                    this.pagesSubject.next(pages);
+                    this._saveShared();
+                    this._savePositions();
+                }
+                break;
+            }
+            case 'WIDGET_META': {
+                for (const page of pages) {
+                    const w = page.widgets.find(w => w.id === event.widgetId);
+                    if (w) {
+                        Object.assign(w, event.patch);
+                        this.pagesSubject.next(pages);
+                        this._saveShared();
+                        break;
+                    }
+                }
+                break;
             }
         }
     }
-    saveToLocalStorage() {
-        localStorage.setItem(this.STORAGE_KEY, this.serializeLayout());
+    _broadcast(event) {
+        this.channel?.postMessage(event);
     }
 }
-DashboardStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DashboardStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 DashboardStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardStateService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
-const DEFAULT_CHART_COLORS = ['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a'];
-const DEFAULT_FORECOLOR = '#8e8e93';
-const DEFAULT_CARD_BG = '#2c2c2e';
 class WidgetRendererComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
+    constructor() {
         this.editRequested = new EventEmitter();
-        this.cardStyles = {};
-        this.subs = new Subscription();
-    }
-    ngOnInit() {
-        this.applyStyles();
-        this.initChart();
-        this.subs.add(this.stateService.widgetData$.subscribe(({ widgetId, data }) => {
-            if (widgetId === this.widget.id) {
-                this.widget = { ...this.widget, data };
-                this.initChart();
-            }
-        }));
+        this.removeRequested = new EventEmitter();
+        this.cardBg = 'var(--dash-card-bg, #2c2c2e)';
     }
     ngOnChanges(changes) {
-        if (changes['theme']) {
-            this.applyStyles();
-            this.initChart();
+        if (changes['widget'] || changes['theme']) {
+            this.cardBg = this.widget?.cardColor ?? 'var(--dash-card-bg, #2c2c2e)';
         }
-        if (changes['widget'] && !changes['widget'].firstChange) {
-            this.applyStyles();
-            this.initChart();
-        }
-    }
-    ngOnDestroy() { this.subs.unsubscribe(); }
-    applyStyles() {
-        this.cardStyles = {
-            background: this.widget.cardColor ?? 'var(--dash-card-bg)'
-        };
-    }
-    resolvedColors() {
-        return this.widget.colors ?? this.theme?.chartColors ?? DEFAULT_CHART_COLORS;
     }
-    initChart() {
-        const isDonut = this.widget.type === 'DONUT';
-        const colors = this.resolvedColors();
-        const foreColor = this.theme?.chartForeColor ?? DEFAULT_FORECOLOR;
-        const lineBarData = !isDonut ? this.widget.data : null;
-        const donutData = isDonut ? this.widget.data : null;
-        const categories = lineBarData?.categories ?? [];
-        const donutLabels = donutData?.labels ?? ['A', 'B', 'C', 'D', 'E'];
-        this.chartOptions = {
-            series: this.widget.data.series,
-            chart: {
-                width: '100%', height: '100%',
-                type: this.widget.type.toLowerCase(),
-                toolbar: { show: false },
-                animations: { enabled: true, speed: 400 },
-                background: 'transparent', foreColor,
-                parentHeightOffset: 0, sparkline: { enabled: false },
-            },
-            theme: { mode: 'dark' },
-            colors,
-            stroke: { curve: 'smooth', width: isDonut ? 0 : 3 },
-            dataLabels: { enabled: false },
-            legend: { position: 'bottom', labels: { colors: foreColor } },
-            tooltip: { theme: 'dark' },
-            plotOptions: {
-                pie: { donut: { size: '70%', labels: { show: true, total: { show: true, label: 'Total', color: '#fff' } } } },
-                bar: { borderRadius: 8, columnWidth: '50%' }
-            },
-            xaxis: {
-                categories: categories.length ? categories : undefined,
-                labels: { style: { colors: foreColor } },
-                axisBorder: { show: false }, axisTicks: { show: false }
-            },
-            yaxis: { labels: { style: { colors: foreColor } } },
-            labels: isDonut ? donutLabels : undefined,
-        };
-    }
-    onRemove() { this.onRemoveWidget(this.widget.id); }
 }
-WidgetRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetRendererComponent, deps: [{ token: DashboardStateService }], target: i0.ɵɵFactoryTarget.Component });
-WidgetRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: { widget: "widget", onRemoveWidget: "onRemoveWidget", theme: "theme" }, outputs: { editRequested: "editRequested" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="widget-container" [ngStyle]="cardStyles">
+WidgetRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WidgetRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: { widget: "widget", theme: "theme" }, outputs: { editRequested: "editRequested", removeRequested: "removeRequested" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="widget-card" [style.background]="cardBg">
+      <!-- Header: drag handle + title + actions -->
       <div class="widget-header">
+        <div class="drag-handle" title="Drag to move">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+            <circle cx="4" cy="3"  r="1.2"/><circle cx="10" cy="3"  r="1.2"/>
+            <circle cx="4" cy="7"  r="1.2"/><circle cx="10" cy="7"  r="1.2"/>
+            <circle cx="4" cy="11" r="1.2"/><circle cx="10" cy="11" r="1.2"/>
+          </svg>
+        </div>
         <span class="widget-title">{{ widget.title }}</span>
         <div class="header-actions">
-          <button class="btn-icon btn-edit" (click)="editRequested.emit(widget)" title="Edit widget">
+          <button class="btn-icon btn-edit"   (click)="editRequested.emit(widget)"  title="Edit">
             <i class="la la-pen"></i>
           </button>
-          <button class="btn-icon btn-close-widget" (click)="onRemove()" title="Remove widget">
+          <button class="btn-icon btn-remove" (click)="removeRequested.emit(widget.id)" title="Remove">
             <i class="la la-times"></i>
           </button>
         </div>
       </div>
+
+      <!-- Consumer content slot -->
       <div class="widget-body">
-        <apx-chart
-          *ngIf="chartOptions.chart"
-          style="display:block;width:100%;height:100%;"
-          [series]="chartOptions.series!"
-          [chart]="chartOptions.chart!"
-          [xaxis]="chartOptions.xaxis!"
-          [stroke]="chartOptions.stroke!"
-          [dataLabels]="chartOptions.dataLabels!"
-          [plotOptions]="chartOptions.plotOptions!"
-          [yaxis]="chartOptions.yaxis!"
-          [labels]="chartOptions.labels!"
-          [legend]="chartOptions.legend!"
-          [colors]="chartOptions.colors!"
-          [theme]="chartOptions.theme!"
-          [tooltip]="chartOptions.tooltip!"
-        ></apx-chart>
+        <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [".widget-container{height:100%;width:100%;display:flex;flex-direction:column;border-radius:30px;overflow:hidden;box-shadow:0 8px 24px #00000040;border:1px solid rgba(255,255,255,.08);transition:box-shadow .2s ease;box-sizing:border-box;background:var(--dash-card-bg)}.widget-container:hover{box-shadow:0 12px 32px #00000059}.widget-header{padding:14px 16px 4px;display:flex;justify-content:space-between;align-items:center;cursor:move;flex-shrink:0}.widget-title{color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px}.header-actions{display:flex;gap:6px;align-items:center}.btn-icon{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);cursor:pointer;font-size:12px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-edit:hover{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.btn-close-widget:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.widget-body{flex:1;min-height:0;padding:4px 12px 12px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}.widget-card{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;box-shadow:0 8px 24px #00000040;border:1px solid rgba(255,255,255,.07);transition:box-shadow .2s ease;box-sizing:border-box;background:var(--dash-card-bg, #2c2c2e)}.widget-card:hover{box-shadow:0 12px 32px #00000059}.widget-header{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;flex-shrink:0}.drag-handle{color:#fff3;cursor:grab;display:flex;align-items:center;flex-shrink:0;transition:color .2s}.drag-handle:hover{color:#ffffff80}.widget-title{flex:1;color:#fff;font-size:14px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:4px;align-items:center;opacity:0;transition:opacity .2s}.widget-card:hover .header-actions{opacity:1}.btn-icon{background:rgba(255,255,255,.07);border:none;color:#ffffff80;cursor:pointer;font-size:11px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-edit:hover{background:rgba(10,132,255,.22);color:var(--dash-accent-color, #0a84ff)}.btn-remove:hover{background:rgba(255,69,58,.22);color:var(--dash-danger-color, #ff453a)}.widget-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 14px 14px;overflow:hidden}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-widget-renderer', template: `
-    <div class="widget-container" [ngStyle]="cardStyles">
+    <div class="widget-card" [style.background]="cardBg">
+      <!-- Header: drag handle + title + actions -->
       <div class="widget-header">
+        <div class="drag-handle" title="Drag to move">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+            <circle cx="4" cy="3"  r="1.2"/><circle cx="10" cy="3"  r="1.2"/>
+            <circle cx="4" cy="7"  r="1.2"/><circle cx="10" cy="7"  r="1.2"/>
+            <circle cx="4" cy="11" r="1.2"/><circle cx="10" cy="11" r="1.2"/>
+          </svg>
+        </div>
         <span class="widget-title">{{ widget.title }}</span>
         <div class="header-actions">
-          <button class="btn-icon btn-edit" (click)="editRequested.emit(widget)" title="Edit widget">
+          <button class="btn-icon btn-edit"   (click)="editRequested.emit(widget)"  title="Edit">
             <i class="la la-pen"></i>
           </button>
-          <button class="btn-icon btn-close-widget" (click)="onRemove()" title="Remove widget">
+          <button class="btn-icon btn-remove" (click)="removeRequested.emit(widget.id)" title="Remove">
             <i class="la la-times"></i>
           </button>
         </div>
       </div>
+
+      <!-- Consumer content slot -->
       <div class="widget-body">
-        <apx-chart
-          *ngIf="chartOptions.chart"
-          style="display:block;width:100%;height:100%;"
-          [series]="chartOptions.series!"
-          [chart]="chartOptions.chart!"
-          [xaxis]="chartOptions.xaxis!"
-          [stroke]="chartOptions.stroke!"
-          [dataLabels]="chartOptions.dataLabels!"
-          [plotOptions]="chartOptions.plotOptions!"
-          [yaxis]="chartOptions.yaxis!"
-          [labels]="chartOptions.labels!"
-          [legend]="chartOptions.legend!"
-          [colors]="chartOptions.colors!"
-          [theme]="chartOptions.theme!"
-          [tooltip]="chartOptions.tooltip!"
-        ></apx-chart>
+        <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [".widget-container{height:100%;width:100%;display:flex;flex-direction:column;border-radius:30px;overflow:hidden;box-shadow:0 8px 24px #00000040;border:1px solid rgba(255,255,255,.08);transition:box-shadow .2s ease;box-sizing:border-box;background:var(--dash-card-bg)}.widget-container:hover{box-shadow:0 12px 32px #00000059}.widget-header{padding:14px 16px 4px;display:flex;justify-content:space-between;align-items:center;cursor:move;flex-shrink:0}.widget-title{color:#fff;font-size:15px;font-weight:600;letter-spacing:.3px}.header-actions{display:flex;gap:6px;align-items:center}.btn-icon{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);cursor:pointer;font-size:12px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-edit:hover{background:rgba(10,132,255,.25);color:var(--dash-accent-color)}.btn-close-widget:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.widget-body{flex:1;min-height:0;padding:4px 12px 12px;display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: function () { return [{ type: DashboardStateService }]; }, propDecorators: { widget: [{
-                type: Input
-            }], onRemoveWidget: [{
+  `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}.widget-card{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;box-shadow:0 8px 24px #00000040;border:1px solid rgba(255,255,255,.07);transition:box-shadow .2s ease;box-sizing:border-box;background:var(--dash-card-bg, #2c2c2e)}.widget-card:hover{box-shadow:0 12px 32px #00000059}.widget-header{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;flex-shrink:0}.drag-handle{color:#fff3;cursor:grab;display:flex;align-items:center;flex-shrink:0;transition:color .2s}.drag-handle:hover{color:#ffffff80}.widget-title{flex:1;color:#fff;font-size:14px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:4px;align-items:center;opacity:0;transition:opacity .2s}.widget-card:hover .header-actions{opacity:1}.btn-icon{background:rgba(255,255,255,.07);border:none;color:#ffffff80;cursor:pointer;font-size:11px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-edit:hover{background:rgba(10,132,255,.22);color:var(--dash-accent-color, #0a84ff)}.btn-remove:hover{background:rgba(255,69,58,.22);color:var(--dash-danger-color, #ff453a)}.widget-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 14px 14px;overflow:hidden}\n"] }]
+        }], propDecorators: { widget: [{
                 type: Input
             }], theme: [{
                 type: Input
             }], editRequested: [{
                 type: Output
+            }], removeRequested: [{
+                type: Output
             }] } });
 
 const DEFAULT_THEME = {
     backgroundColor: '#000000',
     panelColor: '#1c1c1e',
     widgetCardColor: '#2c2c2e',
-    chartForeColor: '#8e8e93',
+    foreColor: '#8e8e93',
     accentColor: '#0a84ff',
     dangerColor: '#ff453a',
-    chartColors: ['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a'],
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
 };
 class DashboardComponent {
     constructor(stateService) {
         this.stateService = stateService;
+        /**
+         * Emits when the user clicks "Add Widget".
+         * The consumer should open their own dialog and call `stateService.addWidget(...)`.
+         */
+        this.addWidgetRequested = new EventEmitter();
+        /**
+         * Emits the Widget when the user clicks the edit (pen) icon on a card.
+         * The consumer should open their own edit UI and call `stateService.updateWidget(...)`.
+         */
+        this.editWidgetRequested = new EventEmitter();
         this.resolvedTheme = { ...DEFAULT_THEME };
         this.wrapperStyles = {};
         this.pages = [];
         this.activePageId = '';
-        // ── Dialog state ──
-        this.dialogOpen = false;
-        this.dialogType = 'LINE';
-        this.dialogTitle = '';
-        this.dialogCategories = '';
-        this.dialogSeries = [{ name: 'Series 1', dataRaw: '' }];
-        this.dialogSlices = [
-            { label: 'Slice A', value: null },
-            { label: 'Slice B', value: null },
-            { label: 'Slice C', value: null },
-        ];
-        this.widgetTypes = [
-            { value: 'LINE', label: 'Line', icon: 'la-chart-area' },
-            { value: 'BAR', label: 'Bar', icon: 'la-chart-bar' },
-            { value: 'DONUT', label: 'Donut', icon: 'la-chart-pie' },
-        ];
+        this.isPoppedOut = false;
         this.subs = new Subscription();
-        // ── Edit dialog state ──
-        this.editDialogOpen = false;
-        this.editWidgetType = 'LINE';
-        this.editTitle = '';
-        this.editCardColor = '';
-        this.editColors = [];
-        this.editSeries = [];
-        this.editCategories = '';
-        this.editSlices = [];
-        this.DEFAULT_COLORS = ['#0a84ff', '#30d158', '#ff9f0a', '#bf5af2', '#ff453a'];
-        this.removeWidgetHandler = (id) => { this.stateService.removeWidget(id); };
     }
     ngOnChanges(changes) {
         if (changes['theme'] || changes['initialLayout'])
@@ -443,21 +920,16 @@ class DashboardComponent {
                 console.error('[Dashboard] Failed to parse initialLayout', e);
             }
         }
-        this.options = {
-            gridType: 'fit',
-            displayGrid: 'none',
-            pushItems: true,
-            draggable: { enabled: true },
-            resizable: { enabled: true },
-            minCols: 12, maxCols: 12,
-            minRows: 12, maxRows: 50,
-            margin: 20, outerMargin: true,
-            itemChangeCallback: (item) => {
-                this.stateService.updateWidgetPosition(this.activePageId, item.id, item.x, item.y, item.cols, item.rows);
-            }
-        };
+        const hash = window.location.hash?.replace('#', '').trim();
+        if (hash)
+            this.isPoppedOut = true;
         this.subs.add(this.stateService.pages$.subscribe(pages => {
             this.pages = pages;
+            if (this.isPoppedOut && hash) {
+                const target = pages.find(p => p.id === hash);
+                if (target)
+                    this.stateService.setActivePage(hash);
+            }
             this.updateActivePage();
         }));
         this.subs.add(this.stateService.activePageId$.subscribe(id => {
@@ -466,25 +938,13 @@ class DashboardComponent {
         }));
     }
     ngOnDestroy() { this.subs.unsubscribe(); }
-    applyTheme() {
-        this.resolvedTheme = { ...DEFAULT_THEME, ...(this.theme ?? {}) };
-        this.wrapperStyles = {
-            '--dash-bg': this.resolvedTheme.backgroundColor,
-            '--dash-panel-bg': this.resolvedTheme.panelColor,
-            '--dash-card-bg': this.resolvedTheme.widgetCardColor,
-            '--dash-fore-color': this.resolvedTheme.chartForeColor,
-            '--dash-accent-color': this.resolvedTheme.accentColor,
-            '--dash-danger-color': this.resolvedTheme.dangerColor,
-            '--dash-font-family': this.resolvedTheme.fontFamily,
-        };
-    }
-    updateActivePage() {
-        this.activePage = this.pages.find(p => p.id === this.activePageId);
+    onItemChanged(widget) {
+        this.stateService.updateWidgetPosition(this.activePageId, widget.id, widget.x, widget.y, widget.cols, widget.rows);
     }
-    // ── Page actions ──
+    onRemoveWidget(widgetId) { this.stateService.removeWidget(widgetId); }
     onSelectPage(id) { this.stateService.setActivePage(id); }
     onAddPage() {
-        const name = prompt('Enter workspace name:', `Workspace ${this.pages.length + 1}`);
+        const name = prompt('Workspace name:', `Workspace ${this.pages.length + 1}`);
         if (name)
             this.stateService.addPage(name);
     }
@@ -493,653 +953,277 @@ class DashboardComponent {
         if (confirm('Remove this workspace?'))
             this.stateService.removePage(id);
     }
-    // ── Dialog ──
-    openDialog() {
-        this.dialogType = 'LINE';
-        this.dialogTitle = '';
-        this.dialogCategories = '';
-        this.dialogSeries = [{ name: 'Series 1', dataRaw: '' }];
-        this.dialogSlices = [
-            { label: 'Slice A', value: null },
-            { label: 'Slice B', value: null },
-            { label: 'Slice C', value: null },
-        ];
-        this.dialogOpen = true;
-    }
-    closeDialog() { this.dialogOpen = false; }
-    addSeries() { this.dialogSeries.push({ name: `Series ${this.dialogSeries.length + 1}`, dataRaw: '' }); }
-    removeSeries(i) { this.dialogSeries.splice(i, 1); }
-    addSlice() { this.dialogSlices.push({ label: `Slice ${this.dialogSlices.length + 1}`, value: null }); }
-    removeSlice(i) { this.dialogSlices.splice(i, 1); }
-    confirmAddWidget() {
-        const title = this.dialogTitle.trim();
-        if (!title)
-            return;
-        let data;
-        if (this.dialogType === 'DONUT') {
-            const validSlices = this.dialogSlices.filter(s => s.value !== null && s.label.trim());
-            data = {
-                series: validSlices.length
-                    ? validSlices.map(s => Number(s.value))
-                    : [30, 20, 50],
-                labels: validSlices.length
-                    ? validSlices.map(s => s.label)
-                    : ['A', 'B', 'C'],
-            };
-        }
-        else {
-            const parseNums = (raw) => raw.split(',').map(v => parseFloat(v.trim())).filter(n => !isNaN(n));
-            data = {
-                series: this.dialogSeries.map(s => ({
-                    name: s.name || 'Series',
-                    data: s.dataRaw.trim()
-                        ? parseNums(s.dataRaw)
-                        : Array.from({ length: 8 }, () => Math.floor(Math.random() * 100)),
-                })),
-                categories: this.dialogCategories.trim()
-                    ? this.dialogCategories.split(',').map(c => c.trim())
-                    : undefined,
-            };
-        }
-        this.stateService.addWidgetWithData(this.dialogType, title, data);
-        this.closeDialog();
-    }
-    openEditDialog(widget) {
-        this.editingWidget = widget;
-        this.editWidgetType = widget.type;
-        this.editTitle = widget.title;
-        this.editCardColor = widget.cardColor ?? this.resolvedTheme.widgetCardColor;
-        this.editColors = widget.colors?.length
-            ? [...widget.colors]
-            : [...this.resolvedTheme.chartColors];
-        if (widget.type === 'DONUT') {
-            const d = widget.data;
-            this.editSlices = d.series.map((v, i) => ({
-                label: d.labels?.[i] ?? `Slice ${i + 1}`,
-                value: v,
-            }));
-            this.editColors = this.editColors.slice(0, this.editSlices.length);
-            while (this.editColors.length < this.editSlices.length) {
-                this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-            }
-        }
-        else {
-            const d = widget.data;
-            this.editSeries = d.series.map((s) => ({ name: s.name, dataRaw: s.data.join(',') }));
-            this.editCategories = d.categories?.join(',') ?? '';
-            this.editColors = this.editColors.slice(0, this.editSeries.length);
-            while (this.editColors.length < this.editSeries.length) {
-                this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-            }
-        }
-        this.editDialogOpen = true;
-    }
-    closeEditDialog() { this.editDialogOpen = false; this.editingWidget = undefined; }
-    getEditSeriesLabel(i) {
-        if (this.editWidgetType === 'DONUT')
-            return this.editSlices[i]?.label || `Slice ${i + 1}`;
-        return this.editSeries[i]?.name || `Series ${i + 1}`;
-    }
-    addEditSeries() {
-        this.editSeries.push({ name: `Series ${this.editSeries.length + 1}`, dataRaw: '' });
-        this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
-    }
-    removeEditSeries(i) { this.editSeries.splice(i, 1); this.editColors.splice(i, 1); }
-    addEditSlice() {
-        this.editSlices.push({ label: `Slice ${this.editSlices.length + 1}`, value: null });
-        this.editColors.push(this.DEFAULT_COLORS[this.editColors.length % this.DEFAULT_COLORS.length]);
+    onPopOut(event, pageId) {
+        event.stopPropagation();
+        this.stateService.popOutPage(pageId);
     }
-    removeEditSlice(i) { this.editSlices.splice(i, 1); this.editColors.splice(i, 1); }
-    confirmEditWidget() {
-        if (!this.editingWidget)
-            return;
-        const parseNums = (raw) => raw.split(',').map(v => parseFloat(v.trim())).filter(n => !isNaN(n));
-        let data;
-        if (this.editWidgetType === 'DONUT') {
-            data = {
-                series: this.editSlices.map(s => Number(s.value) || 0),
-                labels: this.editSlices.map(s => s.label),
-            };
-        }
-        else {
-            data = {
-                series: this.editSeries.map(s => ({
-                    name: s.name || 'Series',
-                    data: s.dataRaw.trim() ? parseNums(s.dataRaw) : [],
-                })),
-                categories: this.editCategories.trim()
-                    ? this.editCategories.split(',').map(c => c.trim())
-                    : undefined,
-            };
-        }
-        this.stateService.updateWidgetMeta(this.editingWidget.id, {
-            title: this.editTitle.trim() || this.editingWidget.title,
-            colors: [...this.editColors],
-            cardColor: this.editCardColor,
-            data,
-        });
-        this.closeEditDialog();
+    serializeLayout() { return this.stateService.serializeLayout(); }
+    applyTheme() {
+        this.resolvedTheme = { ...DEFAULT_THEME, ...(this.theme ?? {}) };
+        this.wrapperStyles = {
+            '--dash-bg': this.resolvedTheme.backgroundColor,
+            '--dash-panel-bg': this.resolvedTheme.panelColor,
+            '--dash-card-bg': this.resolvedTheme.widgetCardColor,
+            '--dash-fore-color': this.resolvedTheme.foreColor,
+            '--dash-accent-color': this.resolvedTheme.accentColor,
+            '--dash-danger-color': this.resolvedTheme.dangerColor,
+            '--dash-font-family': this.resolvedTheme.fontFamily,
+        };
     }
-    // ── Widget actions ──
-    onAddWidget(type) { this.stateService.addWidget(type); }
-    updateWidgetData(widgetId, data) {
-        this.stateService.updateWidgetData(widgetId, data);
+    updateActivePage() {
+        this.activePage = this.pages.find(p => p.id === this.activePageId);
     }
-    serializeLayout() { return this.stateService.serializeLayout(); }
 }
 DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, deps: [{ token: DashboardStateService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "app-dashboard", inputs: { initialLayout: "initialLayout", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
-      <main class="main-content">
-
-        <!-- ── Header ── -->
-        <header class="dashboard-header">
-          <!-- Tabs -->
-          <div class="tabs-container">
-            <div
-              *ngFor="let page of pages"
-              class="tab"
-              [class.active]="page.id === activePageId"
-              (click)="onSelectPage(page.id)"
-            >
-              <span class="tab-name">{{ page.name }}</span>
-              <button class="tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)">
-                <i class="la la-times"></i>
-              </button>
-            </div>
-            <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
-              <i class="la la-plus"></i>
-            </button>
-          </div>
-
-          <!-- Add Widget button -->
-          <button class="btn-add-widget" (click)="openDialog()" title="Add widget">
-            <i class="la la-plus"></i>
-            <span>Add Widget</span>
-          </button>
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DashboardComponent, selector: "app-dashboard", inputs: { initialLayout: "initialLayout", theme: "theme" }, outputs: { addWidgetRequested: "addWidgetRequested", editWidgetRequested: "editWidgetRequested" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: GridCellDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: `
+    <!-- ══════════════════════════════════════════════════════════
+         POPPED-OUT MODE
+         ══════════════════════════════════════════════════════════ -->
+    <ng-container *ngIf="isPoppedOut; else normalMode">
+      <div class="popout-wrapper" [ngStyle]="wrapperStyles">
+        <header class="popout-header">
+          <span class="popout-title">{{ activePage?.name }}</span>
         </header>
-
-        <!-- ── Grid ── -->
         <div class="grid-container">
-          <gridster [options]="options">
-            <gridster-item [item]="widget" *ngFor="let widget of activePage?.widgets">
+          <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
+            <ng-template gridCell let-widget="widget">
               <app-widget-renderer
                 [widget]="widget"
-                [onRemoveWidget]="removeWidgetHandler"
                 [theme]="resolvedTheme"
-                (editRequested)="openEditDialog($event)"
-              ></app-widget-renderer>
-            </gridster-item>
-          </gridster>
+                (editRequested)="editWidgetRequested.emit($event)"
+                (removeRequested)="onRemoveWidget($event)"
+              >
+                <ng-container
+                  *ngIf="cellTemplate"
+                  [ngTemplateOutlet]="cellTemplate"
+                  [ngTemplateOutletContext]="{ widget: widget }">
+                </ng-container>
+              </app-widget-renderer>
+            </ng-template>
+          </app-grid>
         </div>
-      </main>
-    </div>
-
-    <!-- ── Add Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="dialogOpen" (click)="closeDialog()"></div>
-    <div class="dialog" *ngIf="dialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Add Widget</span>
-        <button class="dialog-close" (click)="closeDialog()"><i class="la la-times"></i></button>
       </div>
+    </ng-container>
 
-      <div class="dialog-body">
-
-        <!-- Chart type picker -->
-        <div class="field-group">
-          <label class="field-label">Chart type</label>
-          <div class="type-picker">
-            <button
-              *ngFor="let t of widgetTypes"
-              class="type-btn"
-              [class.selected]="dialogType === t.value"
-              (click)="dialogType = t.value"
-            >
-              <i [class]="'la ' + t.icon"></i>
-              <span>{{ t.label }}</span>
-            </button>
-          </div>
-        </div>
+    <!-- ══════════════════════════════════════════════════════════
+         NORMAL MODE
+         ══════════════════════════════════════════════════════════ -->
+    <ng-template #normalMode>
+      <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
+        <main class="main-content">
 
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="dialogTitle" placeholder="My Chart" />
-        </div>
-
-        <!-- Series (LINE / BAR) -->
-        <ng-container *ngIf="dialogType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series</label>
-              <button class="btn-link" (click)="addSeries()"><i class="la la-plus"></i> Add series</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of dialogSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Series name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw"
-                       placeholder="Comma-separated values, e.g. 10,25,40" />
-                <button class="btn-remove-series" *ngIf="dialogSeries.length > 1" (click)="removeSeries(i)">
-                  <i class="la la-times"></i>
+          <header class="dashboard-header">
+            <div class="tabs-container">
+              <div
+                *ngFor="let page of pages"
+                class="tab"
+                [class.active]="page.id === activePageId"
+                (click)="onSelectPage(page.id)"
+              >
+                <span class="tab-name">{{ page.name }}</span>
+                <button class="tab-action tab-popout" (click)="onPopOut($event, page.id)" title="Open in new window">
+                  <i class="la la-external-link-alt"></i>
                 </button>
-              </div>
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="dialogCategories" placeholder="Jan,Feb,Mar,Apr" />
-          </div>
-        </ng-container>
-
-        <!-- Slices (DONUT) -->
-        <ng-container *ngIf="dialogType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addSlice()"><i class="la la-plus"></i> Add slice</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of dialogSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="dialogSlices.length > 1" (click)="removeSlice(i)">
+                <button class="tab-action tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)" title="Close">
                   <i class="la la-times"></i>
                 </button>
               </div>
+              <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
+                <i class="la la-plus"></i>
+              </button>
             </div>
-          </div>
-        </ng-container>
-
-      </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmAddWidget()" [disabled]="!dialogTitle.trim()">
-          <i class="la la-check"></i> Add Widget
-        </button>
-      </div>
-    </div>
-    <!-- ── Edit Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="editDialogOpen" (click)="closeEditDialog()"></div>
-    <div class="dialog" *ngIf="editDialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Edit Widget</span>
-        <button class="dialog-close" (click)="closeEditDialog()"><i class="la la-times"></i></button>
-      </div>
-
-      <div class="dialog-body">
-
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="editTitle" placeholder="Chart title" />
-        </div>
-
-        <!-- Card background -->
-        <div class="field-group">
-          <label class="field-label">Card color</label>
-          <div class="color-row">
-            <input type="color" class="color-swatch" [(ngModel)]="editCardColor" />
-            <input class="field-input" [(ngModel)]="editCardColor" placeholder="#2c2c2e" />
-          </div>
-        </div>
-
-        <!-- Series colors -->
-        <div class="field-group">
-          <label class="field-label">Series colors</label>
-          <div class="color-list">
-            <div class="color-item" *ngFor="let c of editColors; let i = index">
-              <input type="color" class="color-swatch" [(ngModel)]="editColors[i]" />
-              <input class="field-input color-hex" [(ngModel)]="editColors[i]" placeholder="#0a84ff" />
-              <span class="color-label">{{ getEditSeriesLabel(i) }}</span>
-            </div>
-          </div>
-        </div>
 
-        <!-- Data: LINE / BAR -->
-        <ng-container *ngIf="editWidgetType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series data</label>
-              <button class="btn-link" (click)="addEditSeries()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of editSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw" placeholder="10,20,30" />
-                <button class="btn-remove-series" *ngIf="editSeries.length > 1" (click)="removeEditSeries(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="editCategories" placeholder="Jan,Feb,Mar" />
-          </div>
-        </ng-container>
+            <!-- Add Widget button — consumer decides what happens -->
+            <button class="btn-add-widget" (click)="addWidgetRequested.emit()" title="Add widget">
+              <i class="la la-plus"></i>
+              <span>Add Widget</span>
+            </button>
+          </header>
 
-        <!-- Data: DONUT -->
-        <ng-container *ngIf="editWidgetType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addEditSlice()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of editSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="editSlices.length > 1" (click)="removeEditSlice(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
+          <div class="grid-container">
+            <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
+              <ng-template gridCell let-widget="widget">
+                <app-widget-renderer
+                  [widget]="widget"
+                  [theme]="resolvedTheme"
+                  (editRequested)="editWidgetRequested.emit($event)"
+                  (removeRequested)="onRemoveWidget($event)"
+                >
+                  <!-- Stamp consumer's cell template (if provided) inside the card body -->
+                  <ng-container
+                    *ngIf="cellTemplate"
+                    [ngTemplateOutlet]="cellTemplate"
+                    [ngTemplateOutletContext]="{ widget: widget }">
+                  </ng-container>
+                </app-widget-renderer>
+              </ng-template>
+            </app-grid>
           </div>
-        </ng-container>
 
+        </main>
       </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeEditDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmEditWidget()">
-          <i class="la la-check"></i> Save
-        </button>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif}.dashboard-wrapper{display:flex;height:100vh;width:100vw;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);box-shadow:0 10px 30px #00000080;border:1px solid rgba(255,255,255,.05)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.tabs-container{display:flex;align-items:center;gap:8px;background:rgba(44,44,46,.6);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;padding:8px 20px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);transition:all .3s cubic-bezier(.25,.8,.25,1)}.tab.active{background:#3a3a3c;color:#fff;box-shadow:0 2px 10px #0003}.tab:hover:not(.active){color:#e5e5ea;background:rgba(255,255,255,.05)}.tab-name{margin-right:8px}.tab-close{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:12px;cursor:pointer;opacity:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.tab:hover .tab-close{opacity:1}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px #0a84ff66}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}gridster{background:transparent;height:100%!important}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:900}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:901;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:var(--dash-panel-bg);border-radius:28px;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px #000000b3;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.dialog-title{font-size:17px;font-weight:700;color:#fff}.dialog-close{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}.dialog-close:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.dialog-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}.field-group{display:flex;flex-direction:column;gap:8px}.field-label{font-size:13px;font-weight:600;color:var(--dash-fore-color);text-transform:uppercase;letter-spacing:.5px}.field-input{background:var(--dash-card-bg);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;color:#fff;font-size:14px;outline:none;width:100%;box-sizing:border-box}.field-input:focus{border-color:var(--dash-accent-color)}.type-picker{display:flex;gap:10px}.type-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--dash-card-bg);border:2px solid transparent;border-radius:16px;color:var(--dash-fore-color);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.type-btn.selected{border-color:var(--dash-accent-color);color:var(--dash-accent-color);background:rgba(10,132,255,.12)}.btn-link{background:transparent;border:none;color:var(--dash-accent-color);font-size:13px;font-weight:600;cursor:pointer}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid rgba(255,255,255,.07)}.btn-cancel{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--dash-fore-color);padding:10px 20px;border-radius:20px;cursor:pointer}.btn-confirm{background:var(--dash-accent-color);border:none;color:#fff;padding:10px 22px;border-radius:20px;font-weight:600;cursor:pointer}.btn-confirm:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i4.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "onRemoveWidget", "theme"], outputs: ["editRequested"] }] });
+    </ng-template>
+  `, isInline: true, styles: [":host{--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color:#8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif}.dashboard-wrapper{display:flex;height:100vh;width:100vw;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);box-shadow:0 10px 30px #00000080;border:1px solid rgba(255,255,255,.05)}.popout-wrapper{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:#fff}.popout-wrapper .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0;background:var(--dash-panel-bg);padding:16px;border:1px solid rgba(255,255,255,.05)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.tabs-container{display:flex;align-items:center;gap:8px;background:rgba(44,44,46,.6);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);transition:all .3s cubic-bezier(.25,.8,.25,1)}.tab.active{background:#3a3a3c;color:#fff;box-shadow:0 2px 10px #0003}.tab:hover:not(.active){color:#e5e5ea;background:rgba(255,255,255,.05)}.tab-name{flex:1;white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px #0a84ff66}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetRendererComponent, selector: "app-widget-renderer", inputs: ["widget", "theme"], outputs: ["editRequested", "removeRequested"] }, { kind: "component", type: CustomGridComponent, selector: "app-grid", inputs: ["widgets", "columns", "gap", "rowHeight", "minItemCols", "minItemRows"], outputs: ["itemChanged", "layoutChanged"] }, { kind: "directive", type: GridCellDirective, selector: "[gridCell]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dashboard', template: `
-    <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
-      <main class="main-content">
-
-        <!-- ── Header ── -->
-        <header class="dashboard-header">
-          <!-- Tabs -->
-          <div class="tabs-container">
-            <div
-              *ngFor="let page of pages"
-              class="tab"
-              [class.active]="page.id === activePageId"
-              (click)="onSelectPage(page.id)"
-            >
-              <span class="tab-name">{{ page.name }}</span>
-              <button class="tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)">
-                <i class="la la-times"></i>
-              </button>
-            </div>
-            <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
-              <i class="la la-plus"></i>
-            </button>
-          </div>
-
-          <!-- Add Widget button -->
-          <button class="btn-add-widget" (click)="openDialog()" title="Add widget">
-            <i class="la la-plus"></i>
-            <span>Add Widget</span>
-          </button>
+    <!-- ══════════════════════════════════════════════════════════
+         POPPED-OUT MODE
+         ══════════════════════════════════════════════════════════ -->
+    <ng-container *ngIf="isPoppedOut; else normalMode">
+      <div class="popout-wrapper" [ngStyle]="wrapperStyles">
+        <header class="popout-header">
+          <span class="popout-title">{{ activePage?.name }}</span>
         </header>
-
-        <!-- ── Grid ── -->
         <div class="grid-container">
-          <gridster [options]="options">
-            <gridster-item [item]="widget" *ngFor="let widget of activePage?.widgets">
+          <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
+            <ng-template gridCell let-widget="widget">
               <app-widget-renderer
                 [widget]="widget"
-                [onRemoveWidget]="removeWidgetHandler"
                 [theme]="resolvedTheme"
-                (editRequested)="openEditDialog($event)"
-              ></app-widget-renderer>
-            </gridster-item>
-          </gridster>
+                (editRequested)="editWidgetRequested.emit($event)"
+                (removeRequested)="onRemoveWidget($event)"
+              >
+                <ng-container
+                  *ngIf="cellTemplate"
+                  [ngTemplateOutlet]="cellTemplate"
+                  [ngTemplateOutletContext]="{ widget: widget }">
+                </ng-container>
+              </app-widget-renderer>
+            </ng-template>
+          </app-grid>
         </div>
-      </main>
-    </div>
-
-    <!-- ── Add Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="dialogOpen" (click)="closeDialog()"></div>
-    <div class="dialog" *ngIf="dialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Add Widget</span>
-        <button class="dialog-close" (click)="closeDialog()"><i class="la la-times"></i></button>
       </div>
+    </ng-container>
 
-      <div class="dialog-body">
-
-        <!-- Chart type picker -->
-        <div class="field-group">
-          <label class="field-label">Chart type</label>
-          <div class="type-picker">
-            <button
-              *ngFor="let t of widgetTypes"
-              class="type-btn"
-              [class.selected]="dialogType === t.value"
-              (click)="dialogType = t.value"
-            >
-              <i [class]="'la ' + t.icon"></i>
-              <span>{{ t.label }}</span>
-            </button>
-          </div>
-        </div>
+    <!-- ══════════════════════════════════════════════════════════
+         NORMAL MODE
+         ══════════════════════════════════════════════════════════ -->
+    <ng-template #normalMode>
+      <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
+        <main class="main-content">
 
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="dialogTitle" placeholder="My Chart" />
-        </div>
-
-        <!-- Series (LINE / BAR) -->
-        <ng-container *ngIf="dialogType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series</label>
-              <button class="btn-link" (click)="addSeries()"><i class="la la-plus"></i> Add series</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of dialogSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Series name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw"
-                       placeholder="Comma-separated values, e.g. 10,25,40" />
-                <button class="btn-remove-series" *ngIf="dialogSeries.length > 1" (click)="removeSeries(i)">
-                  <i class="la la-times"></i>
+          <header class="dashboard-header">
+            <div class="tabs-container">
+              <div
+                *ngFor="let page of pages"
+                class="tab"
+                [class.active]="page.id === activePageId"
+                (click)="onSelectPage(page.id)"
+              >
+                <span class="tab-name">{{ page.name }}</span>
+                <button class="tab-action tab-popout" (click)="onPopOut($event, page.id)" title="Open in new window">
+                  <i class="la la-external-link-alt"></i>
                 </button>
-              </div>
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="dialogCategories" placeholder="Jan,Feb,Mar,Apr" />
-          </div>
-        </ng-container>
-
-        <!-- Slices (DONUT) -->
-        <ng-container *ngIf="dialogType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addSlice()"><i class="la la-plus"></i> Add slice</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of dialogSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="dialogSlices.length > 1" (click)="removeSlice(i)">
+                <button class="tab-action tab-close" *ngIf="pages.length > 1" (click)="onRemovePage($event, page.id)" title="Close">
                   <i class="la la-times"></i>
                 </button>
               </div>
+              <button class="btn-add-page" (click)="onAddPage()" title="New workspace">
+                <i class="la la-plus"></i>
+              </button>
             </div>
-          </div>
-        </ng-container>
-
-      </div>
-
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmAddWidget()" [disabled]="!dialogTitle.trim()">
-          <i class="la la-check"></i> Add Widget
-        </button>
-      </div>
-    </div>
-    <!-- ── Edit Widget Dialog ── -->
-    <div class="dialog-backdrop" *ngIf="editDialogOpen" (click)="closeEditDialog()"></div>
-    <div class="dialog" *ngIf="editDialogOpen">
-      <div class="dialog-header">
-        <span class="dialog-title">Edit Widget</span>
-        <button class="dialog-close" (click)="closeEditDialog()"><i class="la la-times"></i></button>
-      </div>
-
-      <div class="dialog-body">
-
-        <!-- Title -->
-        <div class="field-group">
-          <label class="field-label">Title</label>
-          <input class="field-input" [(ngModel)]="editTitle" placeholder="Chart title" />
-        </div>
-
-        <!-- Card background -->
-        <div class="field-group">
-          <label class="field-label">Card color</label>
-          <div class="color-row">
-            <input type="color" class="color-swatch" [(ngModel)]="editCardColor" />
-            <input class="field-input" [(ngModel)]="editCardColor" placeholder="#2c2c2e" />
-          </div>
-        </div>
-
-        <!-- Series colors -->
-        <div class="field-group">
-          <label class="field-label">Series colors</label>
-          <div class="color-list">
-            <div class="color-item" *ngFor="let c of editColors; let i = index">
-              <input type="color" class="color-swatch" [(ngModel)]="editColors[i]" />
-              <input class="field-input color-hex" [(ngModel)]="editColors[i]" placeholder="#0a84ff" />
-              <span class="color-label">{{ getEditSeriesLabel(i) }}</span>
-            </div>
-          </div>
-        </div>
 
-        <!-- Data: LINE / BAR -->
-        <ng-container *ngIf="editWidgetType !== 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Series data</label>
-              <button class="btn-link" (click)="addEditSeries()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let s of editSeries; let i = index">
-                <input class="field-input series-name" [(ngModel)]="s.name" placeholder="Name" />
-                <input class="field-input series-data" [(ngModel)]="s.dataRaw" placeholder="10,20,30" />
-                <button class="btn-remove-series" *ngIf="editSeries.length > 1" (click)="removeEditSeries(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="field-group">
-            <label class="field-label">X-axis labels <span class="field-hint">(optional, comma-separated)</span></label>
-            <input class="field-input" [(ngModel)]="editCategories" placeholder="Jan,Feb,Mar" />
-          </div>
-        </ng-container>
+            <!-- Add Widget button — consumer decides what happens -->
+            <button class="btn-add-widget" (click)="addWidgetRequested.emit()" title="Add widget">
+              <i class="la la-plus"></i>
+              <span>Add Widget</span>
+            </button>
+          </header>
 
-        <!-- Data: DONUT -->
-        <ng-container *ngIf="editWidgetType === 'DONUT'">
-          <div class="field-group">
-            <div class="field-row-header">
-              <label class="field-label">Slices</label>
-              <button class="btn-link" (click)="addEditSlice()"><i class="la la-plus"></i> Add</button>
-            </div>
-            <div class="series-list">
-              <div class="series-row" *ngFor="let sl of editSlices; let i = index">
-                <input class="field-input series-name" [(ngModel)]="sl.label" placeholder="Label" />
-                <input class="field-input series-data" [(ngModel)]="sl.value" type="number" placeholder="Value" />
-                <button class="btn-remove-series" *ngIf="editSlices.length > 1" (click)="removeEditSlice(i)">
-                  <i class="la la-times"></i>
-                </button>
-              </div>
-            </div>
+          <div class="grid-container">
+            <app-grid [widgets]="activePage?.widgets || []" (itemChanged)="onItemChanged($event)">
+              <ng-template gridCell let-widget="widget">
+                <app-widget-renderer
+                  [widget]="widget"
+                  [theme]="resolvedTheme"
+                  (editRequested)="editWidgetRequested.emit($event)"
+                  (removeRequested)="onRemoveWidget($event)"
+                >
+                  <!-- Stamp consumer's cell template (if provided) inside the card body -->
+                  <ng-container
+                    *ngIf="cellTemplate"
+                    [ngTemplateOutlet]="cellTemplate"
+                    [ngTemplateOutletContext]="{ widget: widget }">
+                  </ng-container>
+                </app-widget-renderer>
+              </ng-template>
+            </app-grid>
           </div>
-        </ng-container>
-
-      </div>
 
-      <div class="dialog-footer">
-        <button class="btn-cancel" (click)="closeEditDialog()">Cancel</button>
-        <button class="btn-confirm" (click)="confirmEditWidget()">
-          <i class="la la-check"></i> Save
-        </button>
+        </main>
       </div>
-    </div>
-  `, styles: [":host{--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color: #8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif}.dashboard-wrapper{display:flex;height:100vh;width:100vw;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);box-shadow:0 10px 30px #00000080;border:1px solid rgba(255,255,255,.05)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.tabs-container{display:flex;align-items:center;gap:8px;background:rgba(44,44,46,.6);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;padding:8px 20px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);transition:all .3s cubic-bezier(.25,.8,.25,1)}.tab.active{background:#3a3a3c;color:#fff;box-shadow:0 2px 10px #0003}.tab:hover:not(.active){color:#e5e5ea;background:rgba(255,255,255,.05)}.tab-name{margin-right:8px}.tab-close{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:12px;cursor:pointer;opacity:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.tab:hover .tab-close{opacity:1}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px #0a84ff66}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}gridster{background:transparent;height:100%!important}.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:900}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:901;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 64px);display:flex;flex-direction:column;background:var(--dash-panel-bg);border-radius:28px;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px #000000b3;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.dialog-title{font-size:17px;font-weight:700;color:#fff}.dialog-close{background:rgba(255,255,255,.08);border:none;color:var(--dash-fore-color);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}.dialog-close:hover{background:rgba(255,69,58,.25);color:var(--dash-danger-color)}.dialog-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}.field-group{display:flex;flex-direction:column;gap:8px}.field-label{font-size:13px;font-weight:600;color:var(--dash-fore-color);text-transform:uppercase;letter-spacing:.5px}.field-input{background:var(--dash-card-bg);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;color:#fff;font-size:14px;outline:none;width:100%;box-sizing:border-box}.field-input:focus{border-color:var(--dash-accent-color)}.type-picker{display:flex;gap:10px}.type-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--dash-card-bg);border:2px solid transparent;border-radius:16px;color:var(--dash-fore-color);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.type-btn.selected{border-color:var(--dash-accent-color);color:var(--dash-accent-color);background:rgba(10,132,255,.12)}.btn-link{background:transparent;border:none;color:var(--dash-accent-color);font-size:13px;font-weight:600;cursor:pointer}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid rgba(255,255,255,.07)}.btn-cancel{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--dash-fore-color);padding:10px 20px;border-radius:20px;cursor:pointer}.btn-confirm{background:var(--dash-accent-color);border:none;color:#fff;padding:10px 22px;border-radius:20px;font-weight:600;cursor:pointer}.btn-confirm:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+    </ng-template>
+  `, styles: [":host{--dash-bg: #000000;--dash-panel-bg: #1c1c1e;--dash-card-bg: #2c2c2e;--dash-fore-color:#8e8e93;--dash-accent-color: #0a84ff;--dash-danger-color: #ff453a;--dash-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif}.dashboard-wrapper{display:flex;height:100vh;width:100vw;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:40px;padding:20px;background:var(--dash-panel-bg);box-shadow:0 10px 30px #00000080;border:1px solid rgba(255,255,255,.05)}.popout-wrapper{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;padding:16px;box-sizing:border-box;background:var(--dash-bg);color:var(--dash-fore-color);font-family:var(--dash-font-family)}.popout-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:10px 18px;background:var(--dash-panel-bg);border-radius:20px;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.popout-title{font-size:16px;font-weight:700;color:#fff}.popout-wrapper .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0;background:var(--dash-panel-bg);padding:16px;border:1px solid rgba(255,255,255,.05)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.tabs-container{display:flex;align-items:center;gap:8px;background:rgba(44,44,46,.6);backdrop-filter:blur(10px);border-radius:25px;padding:6px}.tab{display:flex;align-items:center;gap:4px;padding:8px 14px 8px 18px;border-radius:20px;cursor:pointer;font-size:14px;font-weight:500;color:var(--dash-fore-color);transition:all .3s cubic-bezier(.25,.8,.25,1)}.tab.active{background:#3a3a3c;color:#fff;box-shadow:0 2px 10px #0003}.tab:hover:not(.active){color:#e5e5ea;background:rgba(255,255,255,.05)}.tab-name{flex:1;white-space:nowrap}.tab-action{background:transparent;border:none;color:var(--dash-fore-color);padding:2px;font-size:11px;cursor:pointer;opacity:0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.tab:hover .tab-action{opacity:1}.tab-popout:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.18)}.tab-close:hover{color:var(--dash-danger-color);background:rgba(255,69,58,.2)}.btn-add-page{background:transparent;border:none;color:var(--dash-fore-color);padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s}.btn-add-page:hover{color:var(--dash-accent-color);background:rgba(10,132,255,.1)}.btn-add-widget{display:flex;align-items:center;gap:6px;background:var(--dash-accent-color);border:none;color:#fff;font-size:14px;font-weight:600;padding:10px 20px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .15s;box-shadow:0 4px 14px #0a84ff66}.btn-add-widget:hover{opacity:.9;transform:translateY(-1px)}.btn-add-widget:active{transform:translateY(0)}.main-content .grid-container{flex:1;overflow:auto;border-radius:24px;min-height:0}app-grid{background:transparent;display:block;height:100%;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: DashboardStateService }]; }, propDecorators: { initialLayout: [{
                 type: Input
             }], theme: [{
                 type: Input
+            }], addWidgetRequested: [{
+                type: Output
+            }], editWidgetRequested: [{
+                type: Output
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: [GridCellDirective, { read: TemplateRef }]
             }] } });
 
 class DashboardModule {
 }
 DashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, declarations: [DashboardComponent,
-        WidgetRendererComponent], imports: [CommonModule,
-        FormsModule,
-        GridsterModule,
-        NgApexchartsModule], exports: [DashboardComponent,
-        WidgetRendererComponent] });
-DashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, providers: [DashboardStateService], imports: [CommonModule,
-        FormsModule,
-        GridsterModule,
-        NgApexchartsModule] });
+        WidgetRendererComponent,
+        CustomGridComponent,
+        GridCellDirective], imports: [CommonModule], exports: [DashboardComponent,
+        WidgetRendererComponent,
+        CustomGridComponent,
+        GridCellDirective] });
+DashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, providers: [DashboardStateService], imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         DashboardComponent,
-                        WidgetRendererComponent
+                        WidgetRendererComponent,
+                        CustomGridComponent,
+                        GridCellDirective,
                     ],
                     imports: [
                         CommonModule,
-                        FormsModule,
-                        GridsterModule,
-                        NgApexchartsModule
                     ],
                     providers: [DashboardStateService],
                     exports: [
                         DashboardComponent,
-                        WidgetRendererComponent
+                        WidgetRendererComponent,
+                        CustomGridComponent,
+                        GridCellDirective,
                     ],
-                    schemas: [NO_ERRORS_SCHEMA]
                 }]
         }] });
 /**
- * Root module for local demo / testing purposes.
- * In the final NPM package, users would only import the `DashboardModule`.
+ * Root module for local demo / testing purposes only.
+ * Library consumers import DashboardModule, not AppModule.
  */
 class AppModule {
 }
 AppModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AppModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AppModule, bootstrap: [DashboardComponent], imports: [BrowserModule, DashboardModule] });
-AppModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, imports: [BrowserModule,
-        DashboardModule] });
+AppModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, imports: [BrowserModule, DashboardModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        BrowserModule,
-                        DashboardModule
-                    ],
-                    bootstrap: [DashboardComponent]
+                    imports: [BrowserModule, DashboardModule],
+                    bootstrap: [DashboardComponent],
                 }]
         }] });
 
 /*
- * Public API Surface of the dashboard library
+ * Public API Surface of @ogidor/dashboard
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppModule, DashboardComponent, DashboardModule, DashboardStateService, WidgetRendererComponent };
+export { AppModule, CustomGridComponent, DashboardComponent, DashboardModule, DashboardStateService, GridCellDirective, WidgetRendererComponent };
 //# sourceMappingURL=ogidor-dashboard.mjs.map