@aquera/nile-visualization 0.1.0

package/dist/src/index.d.ts

@@ -0,0 +1,35 @@
+export { NileBarChart } from './nile-bar-chart/index.js';
+export type { BarChartSeriesData } from './nile-bar-chart/index.js';
+export { NilePieChart } from './nile-pie-chart/index.js';
+export type { PieChartSeriesData } from './nile-pie-chart/index.js';
+export { NileTrendlineChart } from './nile-trendline-chart/index.js';
+export type { TrendlineSeriesData, ForecastConfig } from './nile-trendline-chart/index.js';
+export { NileAnomalyChart } from './nile-anomaly-chart/index.js';
+export type { AnomalySeriesData, AnomalyConfig } from './nile-anomaly-chart/index.js';
+export { NileChart } from './nile-chart/index.js';
+export type { NileChartConfig, NileBarChartConfig, NilePieChartConfig, NileTrendlineChartConfig, NileAnomalyChartConfig, ChartType, SwitchAggregation, NileAiConfig, } from './nile-chart/index.js';
+export { convertConfig, registerAdapter } from './nile-chart/index.js';
+export { NileLineChart } from './nile-line-chart/index.js';
+export type { LineChartSeriesData } from './nile-line-chart/index.js';
+export { NileAreaChart } from './nile-area-chart/index.js';
+export type { AreaChartSeriesData } from './nile-area-chart/index.js';
+export { NileColumnChart } from './nile-column-chart/index.js';
+export type { ColumnChartSeriesData } from './nile-column-chart/index.js';
+export { NileDonutChart } from './nile-donut-chart/index.js';
+export type { DonutChartSeriesData } from './nile-donut-chart/index.js';
+export { NileScatterChart } from './nile-scatter-chart/index.js';
+export type { ScatterChartSeriesData } from './nile-scatter-chart/index.js';
+export { NileBubbleChart } from './nile-bubble-chart/index.js';
+export type { BubbleChartSeriesData } from './nile-bubble-chart/index.js';
+export { NileSplineChart } from './nile-spline-chart/index.js';
+export type { SplineChartSeriesData } from './nile-spline-chart/index.js';
+export { NileRadarChart } from './nile-radar-chart/index.js';
+export type { RadarChartSeriesData } from './nile-radar-chart/index.js';
+export { NileGaugeChart } from './nile-gauge-chart/index.js';
+export type { GaugeBand } from './nile-gauge-chart/index.js';
+export { NileWaterfallChart } from './nile-waterfall-chart/index.js';
+export type { WaterfallDataPoint } from './nile-waterfall-chart/index.js';
+export { NileKpiChart } from './nile-kpi-chart/index.js';
+export type { KpiConfig, TrendDirection, KpiVariant } from './nile-kpi-chart/index.js';
+export { NileAiSender } from './nile-ai-sender/index.js';
+export { NileAiPanel } from './nile-ai-panel/index.js';

package/dist/src/index.js

@@ -0,0 +1,20 @@
+export { NileBarChart } from './nile-bar-chart/index.js';
+export { NilePieChart } from './nile-pie-chart/index.js';
+export { NileTrendlineChart } from './nile-trendline-chart/index.js';
+export { NileAnomalyChart } from './nile-anomaly-chart/index.js';
+export { NileChart } from './nile-chart/index.js';
+export { convertConfig, registerAdapter } from './nile-chart/index.js';
+export { NileLineChart } from './nile-line-chart/index.js';
+export { NileAreaChart } from './nile-area-chart/index.js';
+export { NileColumnChart } from './nile-column-chart/index.js';
+export { NileDonutChart } from './nile-donut-chart/index.js';
+export { NileScatterChart } from './nile-scatter-chart/index.js';
+export { NileBubbleChart } from './nile-bubble-chart/index.js';
+export { NileSplineChart } from './nile-spline-chart/index.js';
+export { NileRadarChart } from './nile-radar-chart/index.js';
+export { NileGaugeChart } from './nile-gauge-chart/index.js';
+export { NileWaterfallChart } from './nile-waterfall-chart/index.js';
+export { NileKpiChart } from './nile-kpi-chart/index.js';
+export { NileAiSender } from './nile-ai-sender/index.js';
+export { NileAiPanel } from './nile-ai-panel/index.js';
+//# sourceMappingURL=index.js.map

package/dist/src/internal/chart-adapters.d.ts

@@ -0,0 +1,11 @@
+import type { NileChartConfig, ChartType } from '../nile-chart/nile-chart-config.js';
+type AdapterFn = (config: NileChartConfig) => NileChartConfig;
+/**
+ * Register a custom adapter for converting between chart types.
+ */
+export declare function registerAdapter(fromType: ChartType, toType: ChartType, adapter: AdapterFn): void;
+/**
+ * Convert a chart config from one type to another using registered adapters.
+ */
+export declare function convertConfig(config: NileChartConfig, toType: ChartType): NileChartConfig;
+export {};

package/dist/src/internal/chart-adapters.js

@@ -0,0 +1,159 @@
+// ── Bar → Pie helpers ───────────────────────────────────────────────
+function barToPieByCategory(data, categories) {
+    return categories.map((cat, i) => ({
+        name: cat,
+        y: data.reduce((sum, series) => sum + (series.data[i] ?? 0), 0),
+    }));
+}
+function barToPieBySeries(data) {
+    return data.map(series => ({
+        name: series.name,
+        y: series.data.reduce((sum, val) => sum + val, 0),
+        color: series.color,
+    }));
+}
+function barToPieFlatten(data, categories) {
+    const slices = [];
+    for (const series of data) {
+        for (let i = 0; i < categories.length; i++) {
+            slices.push({
+                name: `${series.name} – ${categories[i]}`,
+                y: series.data[i] ?? 0,
+                color: series.color,
+            });
+        }
+    }
+    return slices;
+}
+function barLikeToPie(data, categories, aggregation) {
+    switch (aggregation) {
+        case 'by-series':
+            return barToPieBySeries(data);
+        case 'flatten':
+            return barToPieFlatten(data, categories);
+        case 'by-category':
+        default:
+            return barToPieByCategory(data, categories);
+    }
+}
+// ── Pie → Bar-like helper ───────────────────────────────────────────
+function pieToBarLike(data, seriesName) {
+    return {
+        categories: data.map(d => d.name),
+        data: [
+            {
+                name: seriesName || 'Value',
+                data: data.map(d => d.y),
+            },
+        ],
+    };
+}
+const adapters = {
+    // ── Bar ↔ Pie ──
+    'bar->pie': (config) => {
+        if (config.type !== 'bar')
+            throw new Error('Expected bar config');
+        const agg = config.switchAggregation ?? 'by-category';
+        return {
+            ...config,
+            type: 'pie',
+            data: barLikeToPie(config.data, config.categories ?? [], agg),
+            seriesName: config.chartTitle || 'Series',
+        };
+    },
+    'pie->bar': (config) => {
+        if (config.type !== 'pie')
+            throw new Error('Expected pie config');
+        const { data, categories } = pieToBarLike(config.data, config.seriesName);
+        return { ...config, type: 'bar', data, categories };
+    },
+    // ── Bar ↔ Trendline (same data shape, direct pass-through) ──
+    'bar->trendline': (config) => {
+        if (config.type !== 'bar')
+            throw new Error('Expected bar config');
+        return { ...config, type: 'trendline', data: config.data, categories: config.categories };
+    },
+    'trendline->bar': (config) => {
+        if (config.type !== 'trendline')
+            throw new Error('Expected trendline config');
+        return { ...config, type: 'bar', data: config.data, categories: config.categories };
+    },
+    // ── Bar ↔ Anomaly (same data shape, direct pass-through) ──
+    'bar->anomaly': (config) => {
+        if (config.type !== 'bar')
+            throw new Error('Expected bar config');
+        return { ...config, type: 'anomaly', data: config.data, categories: config.categories };
+    },
+    'anomaly->bar': (config) => {
+        if (config.type !== 'anomaly')
+            throw new Error('Expected anomaly config');
+        return { ...config, type: 'bar', data: config.data, categories: config.categories };
+    },
+    // ── Pie ↔ Trendline ──
+    'pie->trendline': (config) => {
+        if (config.type !== 'pie')
+            throw new Error('Expected pie config');
+        const { data, categories } = pieToBarLike(config.data, config.seriesName);
+        return { ...config, type: 'trendline', data, categories };
+    },
+    'trendline->pie': (config) => {
+        if (config.type !== 'trendline')
+            throw new Error('Expected trendline config');
+        const agg = config.switchAggregation ?? 'by-category';
+        return {
+            ...config,
+            type: 'pie',
+            data: barLikeToPie(config.data, config.categories ?? [], agg),
+            seriesName: config.chartTitle || 'Series',
+        };
+    },
+    // ── Pie ↔ Anomaly ──
+    'pie->anomaly': (config) => {
+        if (config.type !== 'pie')
+            throw new Error('Expected pie config');
+        const { data, categories } = pieToBarLike(config.data, config.seriesName);
+        return { ...config, type: 'anomaly', data, categories };
+    },
+    'anomaly->pie': (config) => {
+        if (config.type !== 'anomaly')
+            throw new Error('Expected anomaly config');
+        const agg = config.switchAggregation ?? 'by-category';
+        return {
+            ...config,
+            type: 'pie',
+            data: barLikeToPie(config.data, config.categories ?? [], agg),
+            seriesName: config.chartTitle || 'Series',
+        };
+    },
+    // ── Trendline ↔ Anomaly (identical data shape) ──
+    'trendline->anomaly': (config) => {
+        if (config.type !== 'trendline')
+            throw new Error('Expected trendline config');
+        return { ...config, type: 'anomaly', data: config.data, categories: config.categories };
+    },
+    'anomaly->trendline': (config) => {
+        if (config.type !== 'anomaly')
+            throw new Error('Expected anomaly config');
+        return { ...config, type: 'trendline', data: config.data, categories: config.categories };
+    },
+};
+/**
+ * Register a custom adapter for converting between chart types.
+ */
+export function registerAdapter(fromType, toType, adapter) {
+    adapters[`${fromType}->${toType}`] = adapter;
+}
+/**
+ * Convert a chart config from one type to another using registered adapters.
+ */
+export function convertConfig(config, toType) {
+    if (config.type === toType)
+        return config;
+    const key = `${config.type}->${toType}`;
+    const adapter = adapters[key];
+    if (!adapter) {
+        throw new Error(`No adapter registered for converting "${config.type}" to "${toType}"`);
+    }
+    return adapter(config);
+}
+//# sourceMappingURL=chart-adapters.js.map

package/dist/src/internal/highcharts-provider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Highcharts provider that works in both npm/bundler and CDN/browser contexts.
+ *
+ * - npm users: their bundler resolves `import('highcharts')` from node_modules.
+ * - CDN users: the dynamic import fails (bare specifier), falls back to `window.Highcharts`.
+ *   Consumer must load Highcharts via `<script>` before nile-visualization.
+ */
+type HighchartsStatic = typeof import('highcharts');
+/**
+ * Returns a promise that resolves to the Highcharts instance.
+ * The initialization runs only once and is shared across all callers.
+ */
+export declare function getHighcharts(): Promise<HighchartsStatic>;
+export {};

package/dist/src/internal/highcharts-provider.js

@@ -0,0 +1,56 @@
+/**
+ * Highcharts provider that works in both npm/bundler and CDN/browser contexts.
+ *
+ * - npm users: their bundler resolves `import('highcharts')` from node_modules.
+ * - CDN users: the dynamic import fails (bare specifier), falls back to `window.Highcharts`.
+ *   Consumer must load Highcharts via `<script>` before nile-visualization.
+ */
+let _Highcharts;
+let _initPromise = null;
+async function init() {
+    if (_Highcharts)
+        return _Highcharts;
+    try {
+        // Try ES module import first (works in npm/bundler context)
+        const mod = await import('highcharts');
+        _Highcharts = (mod.default || mod);
+        try {
+            const more = await import('highcharts/highcharts-more.js');
+            if (typeof more.default === 'function') {
+                more.default(_Highcharts);
+            }
+        }
+        catch {
+            // highcharts-more not available — consumer may have loaded it globally
+        }
+        try {
+            const solidGauge = await import('highcharts/modules/solid-gauge.js');
+            if (typeof solidGauge.default === 'function') {
+                solidGauge.default(_Highcharts);
+            }
+        }
+        catch {
+            // solid-gauge not available — consumer may have loaded it globally
+        }
+    }
+    catch {
+        // Fallback to global (works in CDN/browser context)
+        _Highcharts = globalThis.Highcharts;
+    }
+    if (!_Highcharts) {
+        throw new Error('Highcharts is required. Either install it via npm (`npm i highcharts`) ' +
+            'or load it globally via <script> before nile-visualization.');
+    }
+    return _Highcharts;
+}
+/**
+ * Returns a promise that resolves to the Highcharts instance.
+ * The initialization runs only once and is shared across all callers.
+ */
+export function getHighcharts() {
+    if (!_initPromise) {
+        _initPromise = init();
+    }
+    return _initPromise;
+}
+//# sourceMappingURL=highcharts-provider.js.map

package/dist/src/internal/nile-element.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export default class NileElement extends LitElement {
+    protected BUBBLES: boolean;
+    protected COMPOSED: boolean;
+    protected CANCELABLE: boolean;
+    /** Emits a custom event with more convenient defaults. */
+    emit(name: string, detail?: any, bubbles?: boolean, composed?: boolean, cancelable?: boolean): CustomEvent<any>;
+}

package/dist/src/internal/nile-element.js

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export default class NileElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.BUBBLES = true;
+        this.COMPOSED = true;
+        this.CANCELABLE = false;
+    }
+    /** Emits a custom event with more convenient defaults. */
+    emit(name, detail, bubbles, composed, cancelable) {
+        const event = new CustomEvent(name, {
+            bubbles: bubbles ?? this.BUBBLES,
+            cancelable: cancelable ?? this.CANCELABLE,
+            composed: composed ?? this.COMPOSED,
+            detail,
+        });
+        this.dispatchEvent(event);
+        return event;
+    }
+}
+//# sourceMappingURL=nile-element.js.map

package/dist/src/internal/utils.d.ts

@@ -0,0 +1 @@
+export declare function deepMerge(target: any, source: any): any;

package/dist/src/internal/utils.js

@@ -0,0 +1,23 @@
+function isObject(item) {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+}
+export function deepMerge(target, source) {
+    const output = { ...target };
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isObject(source[key])) {
+                if (!(key in target)) {
+                    Object.assign(output, { [key]: source[key] });
+                }
+                else {
+                    output[key] = deepMerge(target[key], source[key]);
+                }
+            }
+            else {
+                Object.assign(output, { [key]: source[key] });
+            }
+        });
+    }
+    return output;
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/nile-ai-panel/index.d.ts

@@ -0,0 +1 @@
+export { NileAiPanel } from './nile-ai-panel.js';

package/dist/src/nile-ai-panel/index.js

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

package/dist/src/nile-ai-panel/nile-ai-panel.css.d.ts

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

package/dist/src/nile-ai-panel/nile-ai-panel.css.js

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .message {
+    max-width: 85%;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
+    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));
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  .message--user {
+    align-self: flex-end;
+    background: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-bottom-right-radius: var(--nile-radius-radius-sm, var(--ng-radius-xs));
+  }
+
+  .message--assistant {
+    align-self: flex-start;
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border-bottom-left-radius: var(--nile-radius-radius-sm, var(--ng-radius-xs));
+  }
+
+  .typing {
+    align-self: flex-start;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    display: flex;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    align-items: center;
+  }
+
+  .typing-dot {
+    width: var(--nile-width-6px, var(--ng-width-1-5));
+    height: var(--nile-height-6px, var(--ng-height-6px));
+    border-radius: 50%;
+    background: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
+    animation: typing-bounce 1.2s infinite;
+  }
+
+  .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+  .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+  @keyframes typing-bounce {
+    0%, 60%, 100% { transform: translateY(0); }
+    30% { transform: translateY(-4px); }
+  }
+
+  .sender-wrapper {
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-top: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+`;
+//# sourceMappingURL=nile-ai-panel.css.js.map

package/dist/src/nile-ai-panel/nile-ai-panel.d.ts

@@ -0,0 +1,29 @@
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import '../nile-ai-sender/index.js';
+export declare class NileAiPanel extends NileElement {
+    static styles: CSSResultGroup;
+    /** Placeholder text passed to nile-ai-sender. */
+    placeholder: string;
+    /** Welcome message shown when the panel opens. */
+    welcomeMessage: string;
+    private messages;
+    private loading;
+    private messagesEl;
+    /** Add a user message to the conversation. */
+    addUserMessage(text: string): void;
+    /** Add an assistant response to the conversation. */
+    addAssistantMessage(text: string): void;
+    /** Show or hide the typing indicator. */
+    setLoading(val: boolean): void;
+    /** Clear all messages. */
+    clear(): void;
+    private scrollToBottom;
+    private handleSend;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-ai-panel': NileAiPanel;
+    }
+}

package/dist/src/nile-ai-panel/nile-ai-panel.js

@@ -0,0 +1,98 @@
+import { __decorate } from "tslib";
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { styles } from './nile-ai-panel.css.js';
+import '../nile-ai-sender/index.js';
+let NileAiPanel = class NileAiPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Placeholder text passed to nile-ai-sender. */
+        this.placeholder = 'Ask about this chart...';
+        /** Welcome message shown when the panel opens. */
+        this.welcomeMessage = '';
+        this.messages = [];
+        this.loading = false;
+    }
+    /** Add a user message to the conversation. */
+    addUserMessage(text) {
+        this.messages = [...this.messages, { role: 'user', text }];
+        this.scrollToBottom();
+    }
+    /** Add an assistant response to the conversation. */
+    addAssistantMessage(text) {
+        this.loading = false;
+        this.messages = [...this.messages, { role: 'assistant', text }];
+        this.scrollToBottom();
+    }
+    /** Show or hide the typing indicator. */
+    setLoading(val) {
+        this.loading = val;
+        if (val)
+            this.scrollToBottom();
+    }
+    /** Clear all messages. */
+    clear() {
+        this.messages = [];
+        this.loading = false;
+    }
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            if (this.messagesEl) {
+                this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
+            }
+        });
+    }
+    handleSend(e) {
+        e.stopPropagation();
+        const { message } = e.detail;
+        this.addUserMessage(message);
+        this.setLoading(true);
+        this.emit('nile-ai-send', { message });
+    }
+    render() {
+        return html `
+      <div class="messages">
+        ${this.welcomeMessage
+            ? html `<div class="message message--assistant">${this.welcomeMessage}</div>`
+            : nothing}
+        ${this.messages.map(m => html `<div class="message message--${m.role}">${m.text}</div>`)}
+        ${this.loading
+            ? html `<div class="typing">
+              <span class="typing-dot"></span>
+              <span class="typing-dot"></span>
+              <span class="typing-dot"></span>
+            </div>`
+            : nothing}
+      </div>
+      <div class="sender-wrapper">
+        <nile-ai-sender
+          .placeholder=${this.placeholder}
+          .disabled=${this.loading}
+          @nile-ai-send=${this.handleSend}
+        ></nile-ai-sender>
+      </div>
+    `;
+    }
+};
+NileAiPanel.styles = styles;
+__decorate([
+    property({ type: String })
+], NileAiPanel.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: 'welcome-message' })
+], NileAiPanel.prototype, "welcomeMessage", void 0);
+__decorate([
+    state()
+], NileAiPanel.prototype, "messages", void 0);
+__decorate([
+    state()
+], NileAiPanel.prototype, "loading", void 0);
+__decorate([
+    query('.messages')
+], NileAiPanel.prototype, "messagesEl", void 0);
+NileAiPanel = __decorate([
+    customElement('nile-ai-panel')
+], NileAiPanel);
+export { NileAiPanel };
+//# sourceMappingURL=nile-ai-panel.js.map

package/dist/src/nile-ai-sender/index.d.ts

@@ -0,0 +1 @@
+export { NileAiSender } from './nile-ai-sender.js';

package/dist/src/nile-ai-sender/index.js

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

package/dist/src/nile-ai-sender/nile-ai-sender.css.d.ts

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

package/dist/src/nile-ai-sender/nile-ai-sender.css.js

@@ -0,0 +1,71 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .sender {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    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));
+    transition: border-color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, box-shadow var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+  }
+
+  .sender:focus-within {
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+  }
+
+  .sender-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: none;
+    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));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    line-height: 1.5;
+    min-height: var(--nile-height-20px, var(--ng-height-20px));
+    resize: none;
+  }
+
+  .sender-input::placeholder {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-placeholder));
+  }
+
+  .sender-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nile-width-32px, var(--ng-height-32px));
+    height: var(--nile-width-32px, var(--ng-height-32px));
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, opacity var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+  }
+
+  .sender-btn:hover:not(:disabled) {
+    background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
+  }
+
+  .sender-btn:disabled {
+    opacity: var(--nile-opacity-40, var(--ng-opacity-40));
+    cursor: not-allowed;
+  }
+
+  .sender-btn:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: var(--nile-spacing-2px, var(--ng-outline-offset-2));
+  }
+`;
+//# sourceMappingURL=nile-ai-sender.css.js.map