@ogidor/dashboard 1.0.3 → 1.0.4

package/fesm2020/ogidor-dashboard.mjs

@@ -0,0 +1,1229 @@
+import * as i0 from '@angular/core';
+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 { 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(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: [] }
+        ];
+        this.pagesSubject = new BehaviorSubject(this.initialPages);
+        this.activePageIdSubject = new BehaviorSubject(this.initialPages[0].id);
+        this.pages$ = this.pagesSubject.asObservable();
+        this.activePageId$ = this.activePageIdSubject.asObservable();
+        // 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._applyShared(JSON.parse(shared), false);
+            }
+            catch (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); }
+    addPage(name) {
+        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 updated = pages.filter(p => p.id !== id);
+        this.pagesSubject.next(updated);
+        if (this.activePageIdSubject.value === id) {
+            this.activePageIdSubject.next(updated[0].id);
+        }
+        this._saveShared();
+        this._broadcast({ type: 'PAGE_REMOVED', pageId: id });
+    }
+    // ── Widget structural actions (synced to all windows) ─────────
+    addWidget(widget) {
+        const activePage = this.getActivePage();
+        if (!activePage)
+            throw new Error('No active page');
+        const newWidget = {
+            id: `widget-${Date.now()}`,
+            x: 0, y: 0, cols: 4, rows: 3,
+            ...widget,
+        };
+        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;
+    }
+    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 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 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
+        }
+    }
+    // ── 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 ───────────────────────────────────────────
+    /**
+     * Save page list + widget metadata (titles, cardColor, data) — no positions.
+     */
+    _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 };
+            }
+        }
+        localStorage.setItem(this.positionsKey, JSON.stringify(positions));
+    }
+    /**
+     * 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.pagesSubject.next([...pages]);
+        }
+        catch (e) {
+            console.error('[Dashboard] bad positions state', e);
+        }
+    }
+    /**
+     * 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();
+    }
+    /**
+     * 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;
+            }
+        }
+    }
+    _broadcast(event) {
+        this.channel?.postMessage(event);
+    }
+}
+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 [{ type: i0.NgZone }]; } });
+
+class WidgetRendererComponent {
+    constructor() {
+        this.editRequested = new EventEmitter();
+        this.removeRequested = new EventEmitter();
+        this.cardBg = 'var(--dash-card-bg, #2c2c2e)';
+    }
+    ngOnChanges(changes) {
+        if (changes['widget'] || changes['theme']) {
+            this.cardBg = this.widget?.cardColor ?? 'var(--dash-card-bg, #2c2c2e)';
+        }
+    }
+}
+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">
+            <i class="la la-pen"></i>
+          </button>
+          <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">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, 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-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">
+            <i class="la la-pen"></i>
+          </button>
+          <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">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, 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',
+    foreColor: '#8e8e93',
+    accentColor: '#0a84ff',
+    dangerColor: '#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 = '';
+        this.isPoppedOut = false;
+        this.subs = new Subscription();
+    }
+    ngOnChanges(changes) {
+        if (changes['theme'] || changes['initialLayout'])
+            this.applyTheme();
+    }
+    ngOnInit() {
+        this.applyTheme();
+        if (this.initialLayout) {
+            try {
+                this.stateService.loadLayout(JSON.parse(this.initialLayout));
+            }
+            catch (e) {
+                console.error('[Dashboard] Failed to parse initialLayout', e);
+            }
+        }
+        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 => {
+            this.activePageId = id;
+            this.updateActivePage();
+        }));
+    }
+    ngOnDestroy() { this.subs.unsubscribe(); }
+    onItemChanged(widget) {
+        this.stateService.updateWidgetPosition(this.activePageId, widget.id, widget.x, widget.y, widget.cols, widget.rows);
+    }
+    onRemoveWidget(widgetId) { this.stateService.removeWidget(widgetId); }
+    onSelectPage(id) { this.stateService.setActivePage(id); }
+    onAddPage() {
+        const name = prompt('Workspace name:', `Workspace ${this.pages.length + 1}`);
+        if (name)
+            this.stateService.addPage(name);
+    }
+    onRemovePage(event, id) {
+        event.stopPropagation();
+        if (confirm('Remove this workspace?'))
+            this.stateService.removePage(id);
+    }
+    onPopOut(event, pageId) {
+        event.stopPropagation();
+        this.stateService.popOutPage(pageId);
+    }
+    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,
+        };
+    }
+    updateActivePage() {
+        this.activePage = this.pages.find(p => p.id === this.activePageId);
+    }
+}
+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" }, 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>
+        <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)"
+              >
+                <ng-container
+                  *ngIf="cellTemplate"
+                  [ngTemplateOutlet]="cellTemplate"
+                  [ngTemplateOutletContext]="{ widget: widget }">
+                </ng-container>
+              </app-widget-renderer>
+            </ng-template>
+          </app-grid>
+        </div>
+      </div>
+    </ng-container>
+
+    <!-- ══════════════════════════════════════════════════════════
+         NORMAL MODE
+         ══════════════════════════════════════════════════════════ -->
+    <ng-template #normalMode>
+      <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
+        <main class="main-content">
+
+          <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>
+                <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>
+
+            <!-- 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>
+
+          <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>
+
+        </main>
+      </div>
+    </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: `
+    <!-- ══════════════════════════════════════════════════════════
+         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>
+        <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)"
+              >
+                <ng-container
+                  *ngIf="cellTemplate"
+                  [ngTemplateOutlet]="cellTemplate"
+                  [ngTemplateOutletContext]="{ widget: widget }">
+                </ng-container>
+              </app-widget-renderer>
+            </ng-template>
+          </app-grid>
+        </div>
+      </div>
+    </ng-container>
+
+    <!-- ══════════════════════════════════════════════════════════
+         NORMAL MODE
+         ══════════════════════════════════════════════════════════ -->
+    <ng-template #normalMode>
+      <div class="dashboard-wrapper" [ngStyle]="wrapperStyles">
+        <main class="main-content">
+
+          <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>
+                <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>
+
+            <!-- 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>
+
+          <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>
+
+        </main>
+      </div>
+    </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,
+        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,
+                        CustomGridComponent,
+                        GridCellDirective,
+                    ],
+                    imports: [
+                        CommonModule,
+                    ],
+                    providers: [DashboardStateService],
+                    exports: [
+                        DashboardComponent,
+                        WidgetRendererComponent,
+                        CustomGridComponent,
+                        GridCellDirective,
+                    ],
+                }]
+        }] });
+/**
+ * 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] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AppModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [BrowserModule, DashboardModule],
+                    bootstrap: [DashboardComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of @ogidor/dashboard
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppModule, CustomGridComponent, DashboardComponent, DashboardModule, DashboardStateService, GridCellDirective, WidgetRendererComponent };
+//# sourceMappingURL=ogidor-dashboard.mjs.map