@aquera/nile-visualization 0.5.0 → 0.7.0

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';
@@ -58,6 +59,11 @@ export declare class NileChart extends NileElement {
      */
     chartTypeAttr: string;
     /** 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;
     private activeType;
     private activeConfig;
@@ -67,9 +73,12 @@ export declare class NileChart extends NileElement {
     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();
     /** 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;
@@ -91,6 +100,8 @@ export declare class NileChart extends NileElement {
     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;

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';
@@ -66,6 +67,7 @@ const CORE_CHART_LABELS = {
     radar: 'Radar',
     gauge: 'Gauge',
     waterfall: 'Waterfall',
+    map: 'Map',
     stacked: 'Stacked column',
     cluster: 'Cluster',
     histogram: 'Histogram',
@@ -107,6 +109,11 @@ let NileChart = class NileChart extends NileElement {
          */
         this.chartTypeAttr = '';
         /** 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 = '';
         this.activeType = null;
         this.activeConfig = null;
@@ -120,6 +127,7 @@ let NileChart = class NileChart extends NileElement {
             if (!this.contains(e.target)) {
                 this.menuOpen = false;
                 this.chatOpen = false;
+                this.chatOpen = false;
             }
         };
         this.resolvedConfig = null;
@@ -128,8 +136,10 @@ let NileChart = class NileChart extends NileElement {
         return this.resolvedConfig?.summary ?? this.summary;
     }
     /** 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 || !!this.effectiveSummary;
+        return this.resolvedConfig?.ai?.enabled === true || !!this.effectiveSummary;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -248,12 +258,22 @@ let NileChart = class NileChart extends NileElement {
         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() {
@@ -309,13 +329,14 @@ let NileChart = class NileChart extends NileElement {
         const title = this.headerTitle;
         const subtitle = this.headerSubtitle;
         const showDefaultTitles = !this.hasHeaderSlotContent && !!(title || subtitle);
+        const headerCompact = !subtitle?.trim();
         return html `
-      <div class="chart-header">
+      <div class="chart-header ${headerCompact ? 'chart-header--compact' : ''}">
         <div class="chart-header-titles">
           <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
           ${showDefaultTitles
             ? html `
-                ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
+                ${title ? html `<p class="chart-header-title">${title}</p>` : nothing}
                 ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
               `
             : nothing}
@@ -429,6 +450,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}
@@ -489,6 +511,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}
@@ -819,6 +852,7 @@ let NileChart = class NileChart extends NileElement {
             case 'kpi': {
                 const k = config;
                 return html `<nile-kpi-chart
+          embed-in-nile-chart
           .config=${{
                     chart: {
                         type: 'kpi',
@@ -859,6 +893,9 @@ let NileChart = class NileChart extends NileElement {
         ${this.renderHeader()}
         <div class="chart-wrapper">
           <div class="chart-inner">
+          <div
+            class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}"
+          >
             ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
             ${this.renderAiPanel()}
           </div>

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

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

@@ -1,18 +1,20 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     position: relative;
+    box-sizing: border-box;
   }
 
   :host([hidden]) {
     display: none;
   }
 
-  /* ── Card variant ── */
-
-  .kpi-card {
+  /* Card / gauge chrome on the host when used alone (inside nile-chart, embed-in-nile-chart skips this). */
+  :host([variant='card']:not([embed-in-nile-chart])),
+  :host([variant='gauge']:not([embed-in-nile-chart])) {
     background: transparent;
     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));
@@ -20,13 +22,14 @@ export const styles = css `
     transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
   }
 
-  .kpi-card:hover {
+  :host([variant='card']:not([embed-in-nile-chart]):hover),
+  :host([variant='gauge']:not([embed-in-nile-chart]):hover) {
     box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
   }
 
-  /* ── Base layout ── */
-
   .kpi {
+    flex: 1 1 auto;
+    
     display: flex;
     flex-direction: column;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
@@ -52,7 +55,7 @@ export const styles = css `
   .kpi-value {
     margin: 0;
     font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
-    font-size: 36px;
+    font-size: clamp(1.25rem, 2.5vw + 0.75rem, 36px);
     font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.2;
@@ -115,7 +118,8 @@ export const styles = css `
 
   .kpi-sparkline {
     width: 100%;
-    height: 48px;
+    flex: 0 1 48px;
+    min-height: 22px;
     margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
@@ -127,8 +131,11 @@ export const styles = css `
   }
 
   .kpi-gauge-container {
-    width: 160px;
-    height: 160px;
+    width: 100%;
+    max-width: 160px;
+    aspect-ratio: 1;
+    flex: 0 1 160px;
+    min-width: 72px;
     margin: 0 auto;
   }
 
@@ -153,6 +160,7 @@ export const styles = css `
   /* ── Loading state ── */
 
   .chart-loading {
+    flex: 1 1 auto;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -24,8 +24,8 @@ export interface ChartKpiSeparatedPayload {
     gaugeColor?: string;
     loading?: boolean;
     options?: Highcharts.Options;
-    /** Optional min height when embedded in `<nile-chart>` (maps to host `min-height`). */
-    height?: string;
+    /** Box size when a height is set (host min-height and height). */
+    height?: string | number;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {
@@ -89,12 +89,18 @@ export declare class NileKpiChart extends NileElement {
     loading: boolean;
     /** Highcharts options override for the sparkline or gauge. */
     options: Highcharts.Options;
+    /**
+     * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
+     */
+    embedInNileChart: boolean;
+    private formatCssLength;
     /** Apply `{ chart, aq }` to individual properties. */
     private applyConfig;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
+    private syncSparklineChartSize;
     private setupResizeObserver;
     private buildSparklineOptions;
     private buildGaugeOptions;

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

@@ -47,6 +47,23 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.loading = false;
         /** Highcharts options override for the sparkline or gauge. */
         this.options = {};
+        /**
+         * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
+         */
+        this.embedInNileChart = false;
+    }
+    formatCssLength(value) {
+        if (value == null)
+            return null;
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? `${value}px` : null;
+        }
+        const s = String(value).trim();
+        if (!s)
+            return null;
+        if (/^-?\d*\.?\d+$/.test(s))
+            return `${s}px`;
+        return s;
     }
     /** Apply `{ chart, aq }` to individual properties. */
     applyConfig(cfg) {
@@ -86,11 +103,19 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loading = c.loading;
             if (c.options !== undefined)
                 this.options = c.options;
-            if (c.height !== undefined) {
-                if (c.height)
-                    this.style.minHeight = c.height;
-                else
+            if ('height' in c) {
+                const h = this.formatCssLength(c.height);
+                if (h) {
+                    /* min-height only: host can grow with content; sparkline shrinks via flex + setSize */
+                    this.style.minHeight = h;
+                    this.style.removeProperty('height');
+                    this.style.removeProperty('max-height');
+                }
+                else {
                     this.style.removeProperty('min-height');
+                    this.style.removeProperty('height');
+                    this.style.removeProperty('max-height');
+                }
             }
         }
         if (aq) {
@@ -125,6 +150,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (sparklineProps.some(p => changedProperties.has(p))) {
             if (this.sparklineChart) {
                 this.sparklineChart.update(this.buildSparklineOptions(), true, true);
+                requestAnimationFrame(() => this.syncSparklineChartSize());
             }
             else {
                 this.initSparkline();
@@ -140,9 +166,16 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             }
         }
     }
+    syncSparklineChartSize() {
+        if (!this.sparklineChart || !this.sparklineContainer)
+            return;
+        const rect = this.sparklineContainer.getBoundingClientRect();
+        const h = Math.max(22, Math.round(rect.height));
+        this.sparklineChart.setSize(null, h, false);
+    }
     setupResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
-            this.sparklineChart?.reflow();
+            this.syncSparklineChartSize();
             this.gaugeChart?.reflow();
         });
         if (this.sparklineContainer)
@@ -252,6 +285,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
+        requestAnimationFrame(() => this.syncSparklineChartSize());
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
     }
     async initGauge() {
@@ -326,10 +360,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (this.loading) {
             return html `<div class="chart-loading">Loading...</div>`;
         }
-        const useCard = this.variant === 'card' || this.variant === 'gauge';
-        if (useCard) {
-            return html `<div class="kpi-card">${this.renderContent()}</div>`;
-        }
+        /* Same DOM as inside nile-chart: one surface; card/gauge chrome is on :host when standalone. */
         return this.renderContent();
     }
 };
@@ -394,6 +425,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'embed-in-nile-chart' })
+], NileKpiChart.prototype, "embedInNileChart", void 0);
 NileKpiChart = __decorate([
     customElement('nile-kpi-chart')
 ], NileKpiChart);

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

@@ -0,0 +1,2 @@
+export { NileMapChart } from './nile-map-chart.js';
+export type { MapChartDataPoint } from './nile-map-chart.js';

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .chart-container {
+    width: 100%;
+    min-height: var(--nile-height-200px, var(--ng-height-200px));
+  }
+
+  .chart-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: inherit;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  }
+`;
+//# sourceMappingURL=nile-map-chart.css.js.map

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

@@ -0,0 +1,74 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
+export interface MapChartDataPoint {
+    /** Highcharts map key matching the map topology (e.g. 'us-ca'). */
+    'hc-key'?: string;
+    value: number;
+    name?: string;
+    color?: string;
+    [key: string]: unknown;
+}
+export declare class NileMapChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
+    /** The chart title displayed above the chart. */
+    chartTitle: string;
+    /** The subtitle displayed below the title. */
+    chartSubtitle: string;
+    /**
+     * Array of data points. Each point should have a value and a key matching the
+     * map topology (e.g. `{ 'hc-key': 'us-ca', value: 42 }`).
+     */
+    data: MapChartDataPoint[];
+    /**
+     * GeoJSON or Highcharts topology object describing the map shapes.
+     * Obtain from https://code.highcharts.com/mapdata/ or supply your own.
+     */
+    mapData: object | null;
+    /**
+     * How to join `data` with `mapData`. Defaults to `['hc-key', 'hc-key']`.
+     * Pass a single string to match by that property name on both sides,
+     * or a two-element array `[mapKey, dataKey]` for different key names.
+     */
+    joinBy: string | string[];
+    /** Deep-merge override object for full Highcharts options. */
+    options: Highcharts.Options;
+    /** Whether to show a loading indicator instead of the chart. */
+    loading: boolean;
+    /** CSS height for the chart container. */
+    height: string;
+    /** Enable mouse-wheel zoom, double-click zoom, and +/− zoom buttons. Default: true. */
+    zoom: boolean;
+    /**
+     * Type of the primary map series.
+     * - `'map'` (default) — choropleth/filled regions
+     * - `'mapline'` — line/route overlay
+     * - `'mappoint'` — scatter points on map
+     * - `'mapbubble'` — sized bubbles on map
+     * For multi-series or `tiledwebmap`, pass `options.series` directly (it replaces the default series).
+     */
+    seriesType: 'map' | 'mapline' | 'mappoint' | 'mapbubble' | 'tiledwebmap';
+    /** Apply { chart, aq } config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private buildOptions;
+    private initChart;
+    private destroyChart;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-map-chart': NileMapChart;
+    }
+}