@aquera/nile-visualization 0.4.0 → 0.6.0

package/dist/src/nile-chart/nile-chart.css.js

@@ -13,7 +13,7 @@ export const styles = css `
   /* ── Unified Card Container ── */
 
   .chart-card {
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-quaternary-alt));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
@@ -33,7 +33,7 @@ export const styles = css `
     position: relative;
     z-index: 10;
     padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background: transparent;
     border-bottom: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl)) 0 0;
   }
@@ -82,10 +82,35 @@ export const styles = css `
     contain: layout style;
   }
 
-  ::slotted(*) {
+  /* ── Default slot (custom chart body only — not named slots) ── */
+  slot:not([name])::slotted(*) {
+    display: block;
     width: 100%;
   }
 
+  /* ── header / header-actions slots (one row; built-in AI + switcher on the right) ── */
+  slot[name='header']::slotted(*) {
+    display: block;
+    width: 100%;
+  }
+
+  slot[name='header-actions']::slotted(*) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  /* ── footer slot ── */
+  slot[name='footer']::slotted(*) {
+    display: block;
+    margin: 0;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    border-top: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+  }
+
   nile-bar-chart,
   nile-pie-chart,
   nile-trendline-chart,
@@ -128,7 +153,7 @@ export const styles = css `
   }
 
   .chart-toggle:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
   }
 
@@ -188,7 +213,7 @@ export const styles = css `
   }
 
   .chart-menu-trigger:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: transparent;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
@@ -228,7 +253,7 @@ export const styles = css `
   }
 
   .chart-menu-item:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: transparent;
   }
 
   .chart-menu-item.active {
@@ -259,7 +284,7 @@ export const styles = css `
   }
 
   .ai-trigger:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    background: transparent;
     color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
   }
 

package/dist/src/nile-chart/nile-chart.d.ts

@@ -16,6 +16,7 @@ import '../nile-spline-chart/index.js';
 import '../nile-radar-chart/index.js';
 import '../nile-gauge-chart/index.js';
 import '../nile-waterfall-chart/index.js';
+import '../nile-map-chart/index.js';
 import '../nile-cluster-chart/index.js';
 import '../nile-stacked-chart/index.js';
 import '../nile-histogram-chart/index.js';
@@ -46,6 +47,7 @@ import '../nile-euler-chart/index.js';
 import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
+import '../nile-kpi-chart/index.js';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
@@ -56,19 +58,27 @@ export declare class NileChart extends NileElement {
      * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
      */
     chartTypeAttr: string;
-    /** The summary/insight text displayed in the overlay (fallback when config is not set). */
+    /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
+    /**
+     * When set, fills `chart.type` if the config omits it (same values as `chart.type`, e.g. `stacked`, `pie`).
+     * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
+     */
+    /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
     summary: string;
-    /** Label for the toggle button (fallback when config is not set). */
-    toggleLabel: string;
-    /** Whether the insight overlay is visible. */
-    open: boolean;
     private activeType;
     private activeConfig;
     private menuOpen;
     private chatOpen;
+    /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
+    private hasHeaderSlotContent;
+    /** True when elements are projected into `header-actions` (used to show the header row). */
+    private hasHeaderActionsSlot;
+    /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
+    /** True when elements are projected into `header-actions` (used to show the header row). */
     private aiPanel;
     private get effectiveSummary();
-    private get effectiveToggleLabel();
+    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
+    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
     private get aiEnabled();
     private handleOutsideClick;
     connectedCallback(): void;
@@ -78,7 +88,6 @@ export declare class NileChart extends NileElement {
     private resolveConfig;
     private resolvedConfig;
     protected updated(changedProperties: PropertyValues): void;
-    private toggle;
     private toggleMenu;
     private toggleChat;
     /** Push an AI response into the chat panel. Call this from your AI handler. */
@@ -87,6 +96,13 @@ export declare class NileChart extends NileElement {
     private switchType;
     private get headerTitle();
     private get headerSubtitle();
+    private onHeaderSlotChange;
+    private onHeaderActionsSlotChange;
+    private syncHeaderSlots;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /** Direct children with `slot=` — header row renders on first paint before slot assignment runs. */
+    private lightDomHasSlot;
+    private shouldShowHeader;
     private renderTypeSwitcher;
     private renderAiTrigger;
     private renderHeader;

package/dist/src/nile-chart/nile-chart.js

@@ -19,6 +19,7 @@ import '../nile-spline-chart/index.js';
 import '../nile-radar-chart/index.js';
 import '../nile-gauge-chart/index.js';
 import '../nile-waterfall-chart/index.js';
+import '../nile-map-chart/index.js';
 import '../nile-cluster-chart/index.js';
 import '../nile-stacked-chart/index.js';
 import '../nile-histogram-chart/index.js';
@@ -49,6 +50,7 @@ import '../nile-euler-chart/index.js';
 import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
+import '../nile-kpi-chart/index.js';
 import '../nile-ai-panel/index.js';
 const CORE_CHART_LABELS = {
     bar: 'Bar',
@@ -65,6 +67,7 @@ const CORE_CHART_LABELS = {
     radar: 'Radar',
     gauge: 'Gauge',
     waterfall: 'Waterfall',
+    map: 'Map',
     stacked: 'Stacked column',
     cluster: 'Cluster',
     histogram: 'Histogram',
@@ -84,6 +87,7 @@ const CORE_CHART_LABELS = {
     xrange: 'X-range',
     lollipop: 'Lollipop',
     'line-column': 'Line + column',
+    kpi: 'KPI',
 };
 function chartTypeLabel(type) {
     const hit = CORE_CHART_LABELS[type];
@@ -104,21 +108,26 @@ let NileChart = class NileChart extends NileElement {
          * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
          */
         this.chartTypeAttr = '';
-        /** The summary/insight text displayed in the overlay (fallback when config is not set). */
+        /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
+        /**
+         * When set, fills `chart.type` if the config omits it (same values as `chart.type`, e.g. `stacked`, `pie`).
+         * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
+         */
+        /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
         this.summary = '';
-        /** Label for the toggle button (fallback when config is not set). */
-        this.toggleLabel = 'Summary';
-        /** Whether the insight overlay is visible. */
-        this.open = false;
         this.activeType = null;
         this.activeConfig = null;
         this.menuOpen = false;
         this.chatOpen = false;
+        /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
+        this.hasHeaderSlotContent = false;
+        /** True when elements are projected into `header-actions` (used to show the header row). */
+        this.hasHeaderActionsSlot = false;
         this.handleOutsideClick = (e) => {
             if (!this.contains(e.target)) {
-                this.open = false;
                 this.menuOpen = false;
-                this.emit('nile-chart-toggle', { open: this.open });
+                this.chatOpen = false;
+                this.chatOpen = false;
             }
         };
         this.resolvedConfig = null;
@@ -126,11 +135,11 @@ let NileChart = class NileChart extends NileElement {
     get effectiveSummary() {
         return this.resolvedConfig?.summary ?? this.summary;
     }
-    get effectiveToggleLabel() {
-        return this.resolvedConfig?.toggleLabel ?? this.toggleLabel;
-    }
+    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
+    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
     get aiEnabled() {
-        return this.resolvedConfig?.ai?.enabled === true;
+        return this.resolvedConfig?.ai?.enabled === true || !!this.effectiveSummary;
+        return this.resolvedConfig?.ai?.enabled === true || !!this.effectiveSummary;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -169,13 +178,6 @@ let NileChart = class NileChart extends NileElement {
             this.activeConfig = this.resolvedConfig;
         }
     }
-    toggle(e) {
-        e.stopPropagation();
-        this.open = !this.open;
-        if (this.open)
-            this.chatOpen = false;
-        this.emit('nile-chart-toggle', { open: this.open });
-    }
     toggleMenu(e) {
         e.stopPropagation();
         this.menuOpen = !this.menuOpen;
@@ -183,8 +185,6 @@ let NileChart = class NileChart extends NileElement {
     toggleChat(e) {
         e.stopPropagation();
         this.chatOpen = !this.chatOpen;
-        if (this.chatOpen)
-            this.open = false;
         this.emit('nile-chart-ai-toggle', { open: this.chatOpen });
     }
     /** Push an AI response into the chat panel. Call this from your AI handler. */
@@ -220,6 +220,62 @@ let NileChart = class NileChart extends NileElement {
     get headerSubtitle() {
         return this.activeConfig?.chartSubtitle ?? this.resolvedConfig?.chartSubtitle ?? '';
     }
+    onHeaderSlotChange(e) {
+        const slot = e.target;
+        this.hasHeaderSlotContent = slot.assignedElements({ flatten: true }).length > 0;
+        this.requestUpdate();
+    }
+    onHeaderActionsSlotChange(e) {
+        const slot = e.target;
+        this.hasHeaderActionsSlot = slot.assignedElements({ flatten: true }).length > 0;
+        this.requestUpdate();
+    }
+    syncHeaderSlots() {
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        const headerSlot = root.querySelector('slot[name="header"]');
+        const actionsSlot = root.querySelector('slot[name="header-actions"]');
+        let changed = false;
+        if (headerSlot) {
+            const next = headerSlot.assignedElements({ flatten: true }).length > 0;
+            if (next !== this.hasHeaderSlotContent) {
+                this.hasHeaderSlotContent = next;
+                changed = true;
+            }
+        }
+        if (actionsSlot) {
+            const next = actionsSlot.assignedElements({ flatten: true }).length > 0;
+            if (next !== this.hasHeaderActionsSlot) {
+                this.hasHeaderActionsSlot = next;
+                changed = true;
+            }
+        }
+        if (changed)
+            this.requestUpdate();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.syncHeaderSlots();
+    }
+    /** Direct children with `slot=` — header row renders on first paint before slot assignment runs. */
+    lightDomHasSlot(name) {
+        for (let i = 0; i < this.children.length; i++) {
+            if (this.children[i].getAttribute('slot') === name)
+                return true;
+        }
+        return false;
+    }
+    shouldShowHeader() {
+        const hasTitles = !!(this.headerTitle || this.headerSubtitle);
+        const hasBuiltinActions = this.aiEnabled || (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0;
+        return (hasTitles ||
+            this.hasHeaderSlotContent ||
+            this.hasHeaderActionsSlot ||
+            this.lightDomHasSlot('header') ||
+            this.lightDomHasSlot('header-actions') ||
+            hasBuiltinActions);
+    }
     renderTypeSwitcher() {
         const types = this.resolvedConfig?.switchableTypes;
         if (!types || types.length === 0)
@@ -268,19 +324,24 @@ let NileChart = class NileChart extends NileElement {
     `;
     }
     renderHeader() {
+        if (!this.shouldShowHeader())
+            return nothing;
         const title = this.headerTitle;
         const subtitle = this.headerSubtitle;
-        const hasTypeSwitcher = (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0;
-        const hasActions = hasTypeSwitcher || this.aiEnabled;
-        if (!title && !subtitle && !hasActions)
-            return nothing;
+        const showDefaultTitles = !this.hasHeaderSlotContent && !!(title || subtitle);
         return html `
       <div class="chart-header">
         <div class="chart-header-titles">
-          ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
-          ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+          <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
+          ${showDefaultTitles
+            ? html `
+                ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
+                ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+              `
+            : nothing}
         </div>
         <div class="chart-header-actions">
+          <slot name="header-actions" @slotchange=${this.onHeaderActionsSlotChange}></slot>
           ${this.renderAiTrigger()}
           ${this.renderTypeSwitcher()}
         </div>
@@ -290,12 +351,19 @@ let NileChart = class NileChart extends NileElement {
     renderAiPanel() {
         if (!this.aiEnabled)
             return nothing;
-        const aiConfig = this.resolvedConfig.ai;
+        const aiConfig = this.resolvedConfig?.ai;
+        const summary = this.effectiveSummary;
+        // Summary always takes priority. When summary is present it is the only
+        // opening message (shown in blue). welcomeMessage is only used when there
+        // is no summary at all.
+        const summaryMessage = summary;
+        const welcomeMessage = summary ? '' : (aiConfig?.welcomeMessage ?? '');
         return html `
       <div class="ai-panel-overlay" ?data-open=${this.chatOpen}>
         <nile-ai-panel
-          .placeholder=${aiConfig.placeholder ?? 'Ask about this chart...'}
-          .welcomeMessage=${aiConfig.welcomeMessage ?? ''}
+          .placeholder=${aiConfig?.placeholder ?? 'Ask about this chart...'}
+          .welcomeMessage=${welcomeMessage}
+          .summaryMessage=${summaryMessage}
           @nile-ai-send=${this.handleAiSend}
         ></nile-ai-panel>
       </div>
@@ -381,6 +449,7 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '400px'}
           .innerSize=${config.innerSize ?? '50%'}
           .semiCircle=${config.semiCircle ?? false}
+          .semiCircle=${config.semiCircle ?? false}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -441,6 +510,17 @@ let NileChart = class NileChart extends NileElement {
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-waterfall-chart>`;
+            case 'map':
+                return html `<nile-map-chart
+          .data=${config.data}
+          .mapData=${config.mapData ?? null}
+          .joinBy=${config.joinBy ?? ['hc-key', 'hc-key']}
+          .seriesType=${config.seriesType ?? 'map'}
+          .zoom=${config.zoom ?? true}
+          .height=${config.height ?? '500px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-map-chart>`;
             case 'stacked':
                 return html `<nile-stacked-chart
           .data=${config.data}
@@ -768,6 +848,37 @@ let NileChart = class NileChart extends NileElement {
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-xrange-chart>`;
+            case 'kpi': {
+                const k = config;
+                return html `<nile-kpi-chart
+          .config=${{
+                    chart: {
+                        type: 'kpi',
+                        variant: k.variant,
+                        label: k.label,
+                        value: k.value,
+                        prefix: k.prefix,
+                        suffix: k.suffix,
+                        trendValue: k.trendValue,
+                        trendDirection: k.trendDirection,
+                        trendLabel: k.trendLabel,
+                        description: k.description,
+                        sparkline: k.sparkline,
+                        sparklineColor: k.sparklineColor,
+                        gaugeValue: k.gaugeValue,
+                        gaugeMin: k.gaugeMin,
+                        gaugeMax: k.gaugeMax,
+                        gaugeColor: k.gaugeColor,
+                        loading: k.loading,
+                        options: k.options,
+                        height: k.height,
+                    },
+                    aq: {
+                        chartSubtitle: k.chartSubtitle,
+                    },
+                }}
+        ></nile-kpi-chart>`;
+            }
             default: {
                 const _exhaustive = config;
                 return _exhaustive;
@@ -781,23 +892,11 @@ let NileChart = class NileChart extends NileElement {
         <div class="chart-wrapper">
           <div class="chart-inner">
             ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
-            <button
-              class="chart-toggle"
-              aria-expanded="${this.open}"
-              @click="${this.toggle}"
-            >
-              ${this.effectiveToggleLabel}
-            </button>
-            <div class="chart-overlay" ?data-open="${this.open}">
-              <div class="chart-content">
-                ${this.resolvedConfig
-            ? this.effectiveSummary
-            : html `<slot name="insight">${this.summary}</slot>`}
-              </div>
-            </div>
             ${this.renderAiPanel()}
           </div>
         </div>
+        <slot name="footer"></slot>
+        <slot name="footer"></slot>
       </div>
     `;
     }
@@ -812,12 +911,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileChart.prototype, "summary", void 0);
-__decorate([
-    property({ type: String, attribute: 'toggle-label' })
-], NileChart.prototype, "toggleLabel", void 0);
-__decorate([
-    state()
-], NileChart.prototype, "open", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "activeType", void 0);
@@ -830,6 +923,12 @@ __decorate([
 __decorate([
     state()
 ], NileChart.prototype, "chatOpen", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "hasHeaderSlotContent", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "hasHeaderActionsSlot", void 0);
 __decorate([
     query('nile-ai-panel')
 ], NileChart.prototype, "aiPanel", void 0);

package/dist/src/nile-dashboard-viewer/index.d.ts

@@ -0,0 +1,2 @@
+export { NileDashboardViewer } from './nile-dashboard-viewer.js';
+export type { NileDashboardConfig } from '../internal/types/dashboard-config.type.js';

package/dist/src/nile-dashboard-viewer/index.js

@@ -0,0 +1,2 @@
+export { NileDashboardViewer } from './nile-dashboard-viewer.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.css.js

@@ -0,0 +1,29 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .dashboard-grid {
+    display: grid;
+    width: 100%;
+  }
+
+  .dashboard-cell {
+    overflow: hidden;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  nile-widget-viewer {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+//# sourceMappingURL=nile-dashboard-viewer.css.js.map

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.d.ts

@@ -0,0 +1,43 @@
+import { nothing } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import type { NileDashboardConfig } from '../internal/types/dashboard-config.type.js';
+import '../nile-widget-viewer/index.js';
+/**
+ * Renders a full dashboard grid of widgets. Each widget is positioned using CSS Grid
+ * with the `layout: { x, y, w, h }` values from its config.
+ *
+ * - `x` / `w` → `grid-column: (x+1) / span w`
+ * - `y` / `h` → `grid-row: (y+1) / span h`
+ *
+ * @example
+ * ```html
+ * <nile-dashboard-viewer columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
+ * ```
+ * ```js
+ * el.config = {
+ *   name: 'My Dashboard',
+ *   widgets: [
+ *     { type: 'chart', layout: { x: 0, y: 0, w: 6, h: 4 }, nileConfig: { chart: { type: 'pie', data: [...] } } },
+ *     { type: 'kpi',   layout: { x: 0, y: 4, w: 3, h: 2 }, nileConfig: { chart: { type: 'kpi', label: 'Revenue', value: '$1.2M' } } },
+ *   ]
+ * };
+ * ```
+ */
+export declare class NileDashboardViewer extends NileElement {
+    static styles: CSSResultGroup;
+    /** Dashboard configuration containing all widget configs. */
+    config: NileDashboardConfig | null;
+    /** Total number of grid columns. Default: 12. */
+    columns: number;
+    /** Height of a single grid row in pixels. Default: 80. */
+    cellHeight: number;
+    /** Gap between grid cells in pixels. Default: 8. */
+    gap: number;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-dashboard-viewer': NileDashboardViewer;
+    }
+}

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { styles } from './nile-dashboard-viewer.css.js';
+import '../nile-widget-viewer/index.js';
+/**
+ * Renders a full dashboard grid of widgets. Each widget is positioned using CSS Grid
+ * with the `layout: { x, y, w, h }` values from its config.
+ *
+ * - `x` / `w` → `grid-column: (x+1) / span w`
+ * - `y` / `h` → `grid-row: (y+1) / span h`
+ *
+ * @example
+ * ```html
+ * <nile-dashboard-viewer columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
+ * ```
+ * ```js
+ * el.config = {
+ *   name: 'My Dashboard',
+ *   widgets: [
+ *     { type: 'chart', layout: { x: 0, y: 0, w: 6, h: 4 }, nileConfig: { chart: { type: 'pie', data: [...] } } },
+ *     { type: 'kpi',   layout: { x: 0, y: 4, w: 3, h: 2 }, nileConfig: { chart: { type: 'kpi', label: 'Revenue', value: '$1.2M' } } },
+ *   ]
+ * };
+ * ```
+ */
+let NileDashboardViewer = class NileDashboardViewer extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Dashboard configuration containing all widget configs. */
+        this.config = null;
+        /** Total number of grid columns. Default: 12. */
+        this.columns = 12;
+        /** Height of a single grid row in pixels. Default: 80. */
+        this.cellHeight = 80;
+        /** Gap between grid cells in pixels. Default: 8. */
+        this.gap = 8;
+    }
+    render() {
+        if (!this.config?.widgets?.length)
+            return nothing;
+        return html `
+      <div
+        class="dashboard-grid"
+        style="
+          grid-template-columns: repeat(${this.columns}, 1fr);
+          grid-auto-rows: ${this.cellHeight}px;
+          gap: ${this.gap}px;
+        "
+      >
+        ${this.config.widgets.map((widget) => html `
+            <div
+              class="dashboard-cell"
+              style="
+                grid-column: ${widget.layout.x + 1} / span ${widget.layout.w};
+                grid-row: ${widget.layout.y + 1} / span ${widget.layout.h};
+              "
+            >
+              <nile-widget-viewer .config=${widget}></nile-widget-viewer>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+NileDashboardViewer.styles = styles;
+__decorate([
+    property({ type: Object })
+], NileDashboardViewer.prototype, "config", void 0);
+__decorate([
+    property({ type: Number })
+], NileDashboardViewer.prototype, "columns", void 0);
+__decorate([
+    property({ type: Number, attribute: 'cell-height' })
+], NileDashboardViewer.prototype, "cellHeight", void 0);
+__decorate([
+    property({ type: Number })
+], NileDashboardViewer.prototype, "gap", void 0);
+NileDashboardViewer = __decorate([
+    customElement('nile-dashboard-viewer')
+], NileDashboardViewer);
+export { NileDashboardViewer };
+//# sourceMappingURL=nile-dashboard-viewer.js.map