@ogidor/dashboard 1.0.3 → 1.0.5

package/README.md

@@ -1,103 +1,338 @@
 # @ogidor/dashboard
 
-A professional, high-performance financial dashboard for Angular. Highly customizable, themeable via CSS variables, and powered by `angular-gridster2` and `ApexCharts`.
+A lightweight, content-agnostic drag-and-drop dashboard library for Angular 15.  
+Drop it into any project, feed it your own card content, and get a fully functional multi-workspace grid with persistent layout, pop-out windows, and live cross-tab sync — out of the box.
+
+---
 
 ## Features
 
-- **Drag & Drop Layout:** Responsive grid system using `angular-gridster2`.
-- **Interactive Charts:** Beautiful Line, Bar, and Donut charts via `ng-apexcharts`.
-- **Multi-Workspace Support:** Manage multiple dashboard pages (workspaces).
-- **Deeply Themeable:** Customize every color and font using simple CSS variables or a configuration object.
-- **Standalone Ready:** Sidebar removed for easy integration into your own application's navigation.
+- **Drag & Drop Grid** — smooth cursor-following drag with animated collision resolution and auto-compaction
+- **Resize** — live resize with a bottom-right handle; other cards shift out of the way in real time
+- **Multi-Workspace** — unlimited tabbed workspaces, each with its own independent widget layout
+- **Independent Pop-out Layouts** — each window keeps its own card positions; drag cards in Window B and Window A is completely unaffected
+- **Structural Sync** — adding, removing, or editing a widget in any window immediately appears in all other open windows
+- **Persistent Layout** — layout is saved to `localStorage` and restored on reload
+- **Content-Agnostic Cards** — you own the card body; render any Angular component, chart, or HTML inside
+- **Themeable** — override colors and fonts via a theme input or CSS custom properties
+
+---
 
 ## Installation
 
 ```bash
-npm install @ogidor/dashboard angular-gridster2 apexcharts ng-apexcharts line-awesome
+npm install @ogidor/dashboard line-awesome
 ```
 
-Ensure you have `line-awesome` icons included in your global styles (e.g., `angular.json` or `styles.scss`):
+Add the Line Awesome icon font to your global styles (`angular.json` or `styles.scss`):
 
 ```scss
 @import "line-awesome/dist/line-awesome/css/line-awesome.css";
 ```
 
-## Usage
+---
+
+## Quick Start
 
-Import the `DashboardModule` in your `AppModule`:
+### 1. Import the module
 
 ```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { DashboardModule } from '@ogidor/dashboard';
 
 @NgModule({
-  imports: [
-    DashboardModule,
-    // ...
-  ]
+  imports: [BrowserModule, DashboardModule],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
-Use the component in your template:
+### 2. Use the component
 
 ```html
-<app-dashboard 
-  [initialLayout]="savedLayout"
-  [theme]="myCustomTheme"
-></app-dashboard>
+<app-dashboard
+  (addWidgetRequested)="onAddWidget()"
+  (editWidgetRequested)="onEditWidget($event)"
+>
+  <!-- Optional: custom card body rendered inside every widget -->
+  <ng-template gridCell let-widget="widget">
+    <div style="padding: 8px; color: white;">
+      {{ widget.data | json }}
+    </div>
+  </ng-template>
+</app-dashboard>
 ```
 
+### 3. Add widgets programmatically
+
+Inject `DashboardStateService` anywhere in your app:
+
+```typescript
+import { DashboardStateService, Widget } from '@ogidor/dashboard';
+
+@Component({ ... })
+export class AppComponent {
+  constructor(private dashboard: DashboardStateService) {}
+
+  onAddWidget() {
+    this.dashboard.addWidget({
+      title: 'Sales Overview',
+      cols: 6,
+      rows: 4,
+      cardColor: '#1a1a2e',   // optional — overrides the theme card color
+      data: { metric: 'revenue', period: 'Q1' }, // any shape you need
+    });
+  }
+
+  onEditWidget(widget: Widget) {
+    // open your own dialog, then:
+    this.dashboard.updateWidget(widget.id, {
+      title: 'Updated Title',
+      cardColor: '#0f3460',
+      data: { metric: 'users' },
+    });
+  }
+}
+```
+
+---
+
 ## API Reference
 
-### Inputs
+### `<app-dashboard>`
+
+#### Inputs
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `initialLayout` | `string` | — | JSON string from a previous `serializeLayout()` call. Restores a full layout on load. |
+| `theme` | `DashboardTheme` | See below | Override default colors and font. |
+
+#### Outputs
+
+| Output | Payload | Description |
+|---|---|---|
+| `addWidgetRequested` | `void` | Fires when the user clicks **Add Widget**. Open your own dialog here. |
+| `editWidgetRequested` | `Widget` | Fires when the user clicks the edit icon on a card. Receives the full widget object. |
+
+#### Content children
 
-| Input | Type | Description |
+| Selector | Description |
+|---|---|
+| `<ng-template gridCell let-widget="widget">` | Optional template rendered inside every card body. The `widget` context variable gives you the full `Widget` object including your `data`. |
+
+#### Methods (via `@ViewChild`)
+
+```typescript
+@ViewChild(DashboardComponent) dash!: DashboardComponent;
+
+// Serialize the current layout to a JSON string (e.g. to save to a backend)
+const json = this.dash.serializeLayout();
+```
+
+---
+
+### `DashboardStateService`
+
+The service is provided at root level. Inject it directly for full programmatic control.
+
+```typescript
+constructor(private state: DashboardStateService) {}
+```
+
+#### Methods
+
+| Method | Signature | Description |
 |---|---|---|
-| `initialLayout` | `string` | A JSON string representing a previously exported layout. |
-| `theme` | `DashboardTheme` | An object to override default colors and fonts programmatically. |
+| `addWidget` | `(widget: Partial<Widget> & { title: string }) => Widget` | Adds a widget to the active workspace. Returns the created widget with its generated `id`. |
+| `updateWidget` | `(id: string, patch: Partial<Widget>) => void` | Update any widget field except `id`, `x`, `y`, `cols`, `rows`. |
+| `removeWidget` | `(id: string) => void` | Remove a widget from the active workspace. |
+| `updateWidgetPosition` | `(pageId, widgetId, x, y, cols, rows) => void` | Manually reposition/resize a widget. |
+| `addPage` | `(name: string) => void` | Add a new workspace tab. |
+| `removePage` | `(id: string) => void` | Remove a workspace tab (minimum 1 kept). |
+| `setActivePage` | `(id: string) => void` | Switch to a workspace by id. |
+| `popOutPage` | `(id: string) => void` | Open a workspace in its own browser window. |
+| `loadLayout` | `(config: DashboardConfig) => void` | Load a full layout object (parsed from `serializeLayout`). |
+| `serializeLayout` | `() => string` | Serialize the full layout to a JSON string. |
 
-### DashboardTheme Interface
+#### Observables
+
+| Observable | Type | Description |
+|---|---|---|
+| `pages$` | `Observable<Page[]>` | Emits the full page list on every change. |
+| `activePageId$` | `Observable<string>` | Emits the active workspace id on every change. |
+
+---
+
+### `Widget`
+
+```typescript
+export interface Widget {
+  id: string;       // auto-generated — do not set manually
+  x: number;        // grid column (0-based)
+  y: number;        // grid row (0-based)
+  cols: number;     // column span (default: 4)
+  rows: number;     // row span (default: 3)
+  title: string;    // displayed in the card header
+  cardColor?: string; // optional background color for this card
+  data?: any;       // your custom payload — stored & synced, never inspected
+}
+```
+
+---
+
+### `DashboardTheme`
+
+All fields are optional. Any omitted field falls back to its default.
 
 ```typescript
 export interface DashboardTheme {
-  backgroundColor?: string;
-  panelColor?: string;
-  widgetCardColor?: string;
-  chartForeColor?: string;
-  accentColor?: string;
-  dangerColor?: string;
-  chartColors?: string[];
-  fontFamily?: string;
+  backgroundColor?: string; // wrapper background         default: #000000
+  panelColor?:      string; // main panel background      default: #1c1c1e
+  widgetCardColor?: string; // card background            default: #2c2c2e
+  foreColor?:       string; // text / labels              default: #8e8e93
+  accentColor?:     string; // buttons, active states     default: #0a84ff
+  dangerColor?:     string; // remove / close actions     default: #ff453a
+  fontFamily?:      string; // applied globally           default: system-ui stack
 }
 ```
 
-## Customization (Theming)
+---
 
-You can customize the dashboard's look and feel by overriding the following CSS variables in your global stylesheet:
+## CSS Custom Properties
+
+You can also theme the dashboard entirely via CSS in your global stylesheet:
 
 ```css
-:root {
-  --dash-bg: #000000;           /* Overall background */
-  --dash-panel-bg: #1c1c1e;     /* Main content panel */
-  --dash-card-bg: #2c2c2e;      /* Widget card background */
-  --dash-fore-color: #8e8e93;    /* Primary text/chart labels */
-  --dash-accent-color: #0a84ff;  /* Action buttons & active states */
-  --dash-danger-color: #ff453a;  /* Delete/Close actions */
-  --dash-font-family: 'Inter', sans-serif;
+app-dashboard {
+  --dash-bg:           #0d0d0d;
+  --dash-panel-bg:     #161616;
+  --dash-card-bg:      #1f1f1f;
+  --dash-fore-color:   #a0a0a0;
+  --dash-accent-color: #6c63ff;
+  --dash-danger-color: #e84545;
+  --dash-font-family:  'Inter', sans-serif;
 }
 ```
 
-## Methods (Public API)
+---
+
+## Pop-out Windows
+
+Every workspace tab has a **pop-out** button (the arrow icon, visible on hover). Clicking it opens that workspace in a separate browser window.
+
+The popped-out window:
+- shows only that one workspace — no tabs, no "Add Widget" bar, just the grid
+- has its **own independent card layout** — dragging and resizing cards there does not affect any other window
+- **does** receive structural changes from other windows in real time
+
+### What syncs and what doesn't
 
-Access the dashboard instance via `@ViewChild` to trigger actions:
+The library separates two kinds of state:
+
+| State | Synced across windows? | Stored where |
+|---|---|---|
+| Page list (add / remove / rename workspace) | ✅ Yes | `ogidor_shared` in localStorage |
+| Widget list (add / remove a card) | ✅ Yes | `ogidor_shared` in localStorage |
+| Widget metadata (title, card color, data) | ✅ Yes | `ogidor_shared` in localStorage |
+| Card positions and sizes (drag / resize) | ❌ No — local only | `ogidor_positions_<windowId>` |
+
+**Example:** you have your main dashboard open in Tab A, and you pop out "Workspace 2" into Window B.
+
+- You drag a card in **Window B** → it stays where you put it in B; Tab A is completely unaffected
+- You add a widget from **Tab A** → the new card appears in **Window B** at its default position
+- You delete a widget in **Window B** → it disappears from **Tab A** immediately
+- Each window remembers its own layout between page reloads
+
+To pop out a workspace programmatically:
 
 ```typescript
-@ViewChild(DashboardComponent) dashboard!: DashboardComponent;
+this.state.popOutPage(pageId);
+```
+
+---
+
+## Persisting Layouts
+
+The library automatically persists state to `localStorage` on every change using two keys:
 
-// Export the current layout as a JSON string
-const layout = this.dashboard.serializeLayout();
+| Key | Contains |
+|---|---|
+| `ogidor_shared` | Page list and widget metadata (titles, colors, data). Shared across all windows. |
+| `ogidor_positions_main` | Card positions/sizes for the main window. |
+| `ogidor_positions_<pageId>` | Card positions/sizes for each pop-out window, keyed by the workspace id. |
+
+To save the full current layout to a backend and restore it later:
+
+```typescript
+// Save (includes this window's positions)
+const json = this.dash.serializeLayout();
+await myApi.saveLayout(json);
+
+// Restore
+const json = await myApi.loadLayout();
+this.dash.stateService.loadLayout(JSON.parse(json));
+```
+
+---
+
+## Example: Full Integration
+
+```typescript
+// app.component.ts
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-dashboard
+      [theme]="theme"
+      (addWidgetRequested)="openAddDialog()"
+      (editWidgetRequested)="openEditDialog($event)"
+    >
+      <ng-template gridCell let-widget="widget">
+        <my-chart [config]="widget.data"></my-chart>
+      </ng-template>
+    </app-dashboard>
+
+    <!-- Your own add/edit dialogs -->
+    <my-add-widget-dialog
+      *ngIf="addOpen"
+      (confirmed)="onAddConfirmed($event)"
+      (cancelled)="addOpen = false"
+    ></my-add-widget-dialog>
+
+    <my-edit-widget-dialog
+      *ngIf="editTarget"
+      [widget]="editTarget"
+      (confirmed)="onEditConfirmed($event)"
+      (cancelled)="editTarget = null"
+    ></my-edit-widget-dialog>
+  `,
+})
+export class AppComponent {
+  theme: DashboardTheme = { accentColor: '#6c63ff' };
+  addOpen = false;
+  editTarget: Widget | null = null;
+
+  constructor(private state: DashboardStateService) {}
+
+  openAddDialog()              { this.addOpen = true; }
+  openEditDialog(w: Widget)    { this.editTarget = w; }
+
+  onAddConfirmed(payload: { title: string; data: any; cols: number; rows: number }) {
+    this.state.addWidget(payload);
+    this.addOpen = false;
+  }
+
+  onEditConfirmed(patch: Partial<Widget>) {
+    this.state.updateWidget(this.editTarget!.id, patch);
+    this.editTarget = null;
+  }
+}
 ```
 
+---
+
 ## License
 
 MIT

package/app/app.module.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dashboard.component";
+import * as i2 from "./widget-renderer.component";
+import * as i3 from "./custom-grid.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/platform-browser";
+export declare class DashboardModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DashboardModule, [typeof i1.DashboardComponent, typeof i2.WidgetRendererComponent, typeof i3.CustomGridComponent, typeof i3.GridCellDirective], [typeof i4.CommonModule], [typeof i1.DashboardComponent, typeof i2.WidgetRendererComponent, typeof i3.CustomGridComponent, typeof i3.GridCellDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DashboardModule>;
+}
+/**
+ * Root module for local demo / testing purposes only.
+ * Library consumers import DashboardModule, not AppModule.
+ */
+export declare class AppModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AppModule, never, [typeof i5.BrowserModule, typeof DashboardModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AppModule>;
+}

package/app/custom-grid.component.d.ts

@@ -0,0 +1,93 @@
+import { EventEmitter, ElementRef, OnDestroy, OnInit, NgZone, ChangeDetectorRef, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Widget } from './models';
+import * as i0 from "@angular/core";
+/**
+ * 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>
+ */
+export declare class GridCellDirective {
+    templateRef: TemplateRef<{
+        widget: Widget;
+    }>;
+    constructor(templateRef: TemplateRef<{
+        widget: Widget;
+    }>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridCellDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GridCellDirective, "[gridCell]", never, {}, {}, never, never, false, never>;
+}
+export declare class CustomGridComponent implements OnInit, OnDestroy, OnChanges {
+    private zone;
+    private cdr;
+    widgets: Widget[];
+    columns: number;
+    gap: number;
+    rowHeight: number;
+    minItemCols: number;
+    minItemRows: number;
+    itemChanged: EventEmitter<Widget>;
+    layoutChanged: EventEmitter<Widget[]>;
+    gridContainer: ElementRef<HTMLDivElement>;
+    /** The ng-template decorated with gridCell from the parent */
+    cellTemplate: TemplateRef<{
+        widget: Widget;
+    }>;
+    placeholder: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null;
+    containerHeight: number;
+    dragging: {
+        id: string;
+        offsetX: number;
+        offsetY: number;
+        currentPixelX: number;
+        currentPixelY: number;
+    } | null;
+    resizing: {
+        id: string;
+        startMouseX: number;
+        startMouseY: number;
+        startCols: number;
+        startRows: number;
+        currentPixelW: number;
+        currentPixelH: number;
+    } | null;
+    private previewWidgets;
+    private boundMouseMove;
+    private boundMouseUp;
+    constructor(zone: NgZone, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(_changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    trackByFn(_index: number, item: Widget): string;
+    private get cellWidth();
+    private colToPixel;
+    private rowToPixel;
+    private pixelToCol;
+    private pixelToRow;
+    private colsToPixelWidth;
+    private rowsToPixelHeight;
+    getItemLeft(w: Widget): number;
+    getItemTop(w: Widget): number;
+    getItemWidth(w: Widget): number;
+    getItemHeight(w: Widget): number;
+    onDragStart(event: MouseEvent, widget: Widget): void;
+    onResizeStart(event: MouseEvent, widget: Widget): void;
+    private onMouseMove;
+    private onMouseUp;
+    private handleDragMove;
+    private finalizeDrag;
+    private handleResizeMove;
+    private finalizeResize;
+    private compactAndApply;
+    private updateContainerHeight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomGridComponent, "app-grid", never, { "widgets": "widgets"; "columns": "columns"; "gap": "gap"; "rowHeight": "rowHeight"; "minItemCols": "minItemCols"; "minItemRows": "minItemRows"; }, { "itemChanged": "itemChanged"; "layoutChanged": "layoutChanged"; }, ["cellTemplate"], never, false, never>;
+}

package/app/dashboard-state.service.d.ts

@@ -0,0 +1,70 @@
+import { NgZone, OnDestroy } from '@angular/core';
+import { Page, Widget } from './models';
+import * as i0 from "@angular/core";
+export declare class DashboardStateService implements OnDestroy {
+    private zone;
+    /**
+     * Shared key — stores page list + widget metadata (no positions).
+     * Read and written by every window.
+     */
+    private readonly SHARED_KEY;
+    /**
+     * Per-window positions key — stores {pageId:widgetId → {x,y,cols,rows}}.
+     * Pop-out windows get a key scoped to their pageId so they never overwrite
+     * the main window or each other.
+     *   main window  → ogidor_positions_main
+     *   pop-out #abc → ogidor_positions_abc
+     */
+    private readonly positionsKey;
+    private readonly CHANNEL_NAME;
+    private channel;
+    private readonly initialPages;
+    private pagesSubject;
+    private activePageIdSubject;
+    pages$: import("rxjs").Observable<Page[]>;
+    activePageId$: import("rxjs").Observable<string>;
+    constructor(zone: NgZone);
+    ngOnDestroy(): void;
+    getActivePage(): Page | undefined;
+    setActivePage(id: string): void;
+    addPage(name: string): void;
+    removePage(id: string): void;
+    addWidget(widget: Partial<Widget> & {
+        title: string;
+    }): Widget;
+    updateWidget(widgetId: string, patch: Partial<Omit<Widget, 'id' | 'x' | 'y' | 'cols' | 'rows'>>): void;
+    removeWidget(widgetId: string): void;
+    /**
+     * Update a widget's grid position/size.
+     * Saved only for this window — never broadcast to others.
+     */
+    updateWidgetPosition(pageId: string, widgetId: string, x: number, y: number, cols: number, rows: number): void;
+    serializeLayout(): string;
+    loadLayout(config: any): void;
+    popOutPage(pageId: string): void;
+    /**
+     * Save page list + widget metadata (titles, cardColor, data) — no positions.
+     */
+    private _saveShared;
+    /**
+     * Save this window's grid positions (x, y, cols, rows) per widget.
+     */
+    private _savePositions;
+    /**
+     * Overlay the positions saved for THIS window on top of the current pages.
+     */
+    private _restorePositions;
+    /**
+     * Apply a shared config object (page list + metadata) without touching
+     * this window's saved positions.
+     */
+    private _applyShared;
+    /**
+     * Handle a structural sync event arriving from another window.
+     * Position changes are never sent so we never receive them here.
+     */
+    private _onSyncEvent;
+    private _broadcast;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DashboardStateService>;
+}

package/app/dashboard.component.d.ts

@@ -0,0 +1,48 @@
+import { OnInit, OnDestroy, OnChanges, SimpleChanges, EventEmitter, TemplateRef } from '@angular/core';
+import { DashboardStateService } from './dashboard-state.service';
+import { Page, Widget, DashboardTheme } from './models';
+import * as i0 from "@angular/core";
+export declare class DashboardComponent implements OnInit, OnDestroy, OnChanges {
+    stateService: DashboardStateService;
+    initialLayout?: string;
+    theme?: DashboardTheme;
+    /**
+     * Emits when the user clicks "Add Widget".
+     * The consumer should open their own dialog and call `stateService.addWidget(...)`.
+     */
+    addWidgetRequested: EventEmitter<void>;
+    /**
+     * 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(...)`.
+     */
+    editWidgetRequested: EventEmitter<Widget>;
+    /**
+     * Optional: consumer can provide an `<ng-template widgetCell let-widget="widget">` child
+     * to render custom content inside every card body.
+     */
+    cellTemplate?: TemplateRef<{
+        widget: Widget;
+    }>;
+    resolvedTheme: Required<DashboardTheme>;
+    wrapperStyles: Record<string, string>;
+    pages: Page[];
+    activePageId: string;
+    activePage?: Page;
+    isPoppedOut: boolean;
+    private subs;
+    constructor(stateService: DashboardStateService);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onItemChanged(widget: Widget): void;
+    onRemoveWidget(widgetId: string): void;
+    onSelectPage(id: string): void;
+    onAddPage(): void;
+    onRemovePage(event: Event, id: string): void;
+    onPopOut(event: Event, pageId: string): void;
+    serializeLayout(): string;
+    private applyTheme;
+    private updateActivePage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DashboardComponent, "app-dashboard", never, { "initialLayout": "initialLayout"; "theme": "theme"; }, { "addWidgetRequested": "addWidgetRequested"; "editWidgetRequested": "editWidgetRequested"; }, ["cellTemplate"], never, false, never>;
+}

package/app/models.d.ts

@@ -0,0 +1,53 @@
+/**
+ * A single widget on the grid.
+ * The lib is content-agnostic — `data` can hold anything the consumer needs.
+ */
+export interface Widget {
+    id: string;
+    /** Grid column (0-based) */
+    x: number;
+    /** Grid row (0-based) */
+    y: number;
+    /** Number of columns this widget spans */
+    cols: number;
+    /** Number of rows this widget spans */
+    rows: number;
+    /** Display title shown in the card header */
+    title: string;
+    /** Optional per-widget card background color. Overrides the global theme widgetCardColor. */
+    cardColor?: string;
+    /**
+     * Arbitrary consumer data.
+     * The lib stores and syncs this but never inspects it.
+     */
+    data?: any;
+}
+export interface Page {
+    id: string;
+    name: string;
+    widgets: Widget[];
+}
+export interface DashboardConfig {
+    pages: Page[];
+    activePageId: string;
+}
+/**
+ * Theme configuration for the dashboard.
+ * All properties are optional — any values not provided will fall back to defaults.
+ */
+export interface DashboardTheme {
+    /** Background color of the overall dashboard wrapper. Default: `#000000` */
+    backgroundColor?: string;
+    /** Background color of the main content panel. Default: `#1c1c1e` */
+    panelColor?: string;
+    /** Background color of individual widget cards. Default: `#2c2c2e` */
+    widgetCardColor?: string;
+    /** Primary foreground/text color. Default: `#8e8e93` */
+    foreColor?: string;
+    /** Primary accent color (active tabs, buttons, etc.). Default: `#0a84ff` */
+    accentColor?: string;
+    /** Danger color used on remove-widget button hover. Default: `#ff453a` */
+    dangerColor?: string;
+    /** Font family applied to the whole dashboard. Default: system-ui stack */
+    fontFamily?: string;
+}