@firestitch/report 18.0.0

package/fesm2022/firestitch-report-firestitch-report-Cnotycly.mjs

@@ -0,0 +1,3107 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1$3 from '@angular/forms';
+import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import * as i2$2 from '@firestitch/autocomplete-chips';
+import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
+import * as i2 from '@firestitch/filter';
+import { ItemType, FsFilterModule } from '@firestitch/filter';
+import * as i4$1 from '@firestitch/menu';
+import { FsMenuModule } from '@firestitch/menu';
+import { FsProcess } from '@firestitch/process';
+import { FsPrompt } from '@firestitch/prompt';
+import { of, Subject, map as map$1, debounceTime, forkJoin, BehaviorSubject, from } from 'rxjs';
+import { map, shareReplay, filter, tap, switchMap, catchError, finalize } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import { FsAiChatComponent } from '@firestitch/ai';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import * as i1$2 from '@firestitch/zoom-pan';
+import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
+import { FsApi } from '@firestitch/api';
+import * as i1$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { format, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, parseISO, isValid } from 'date-fns';
+import { DatePipe } from '@angular/common';
+import * as i1 from '@firestitch/list';
+import { PaginationStrategy, FsListComponent, FsListModule } from '@firestitch/list';
+import { MatFormField, MatLabel, MatSuffix, MatHint } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import * as i5 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i3 from '@firestitch/dialog';
+import { FsDialogModule } from '@firestitch/dialog';
+import * as i2$1 from '@firestitch/form';
+import { FsFormModule } from '@firestitch/form';
+import { FsLabelModule } from '@firestitch/label';
+import { FsMessage } from '@firestitch/message';
+import * as i4 from '@firestitch/tabs';
+import { FsTabsModule } from '@firestitch/tabs';
+import { MatSelect, MatOption as MatOption$1 } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { guid } from '@firestitch/common';
+
+// API gateway for the Reports module. Every endpoint hangs off [basePath],
+// which defaults to "reports" (the framework reports backend at /api/reports)
+// and can be repointed by the host so the package stays self-contained and portable.
+class ReportData {
+    _api = inject(FsApi);
+    // The API root for every reports endpoint. Defaults to the framework reports
+    // context; set it once (e.g. from the host's report page) to mount elsewhere.
+    basePath = 'reports';
+    // Build an endpoint path under the configured base, e.g. _path() => "ai/reports",
+    // _path(`${id}/pages`) => "ai/reports/123/pages".
+    _path(suffix = '') {
+        return suffix ? `${this.basePath}/${suffix}` : this.basePath;
+    }
+    reports(query = {}, config = {}) {
+        return this._api.get(this._path(), query, {
+            key: 'reports',
+            ...config,
+        });
+    }
+    create(name, config = {}) {
+        return this._api.post(this._path(), { name }, {
+            key: 'report',
+            ...config,
+        });
+    }
+    rename(reportId, name, config = {}) {
+        return this._api.put(this._path(`${reportId}`), { name }, {
+            key: 'report',
+            ...config,
+        });
+    }
+    // Report settings: any subset of { name, pageSize, pageOrientation, layout,
+    // styles } — styles carry the report's typographic config (e.g. heading size).
+    update(reportId, settings, config = {}) {
+        return this._api.put(this._path(`${reportId}`), settings, {
+            key: 'report',
+            ...config,
+        });
+    }
+    // Append a blank page to the report; resolves to the new page.
+    addPage(reportId, config = {}) {
+        return this._api.post(this._path(`${reportId}/pages`), {}, {
+            key: 'page',
+            ...config,
+        });
+    }
+    // Component settings: any subset of { title, padding } — the human-facing
+    // dialog edits; geometry (x/y/w/h/flowWidth) is persisted via savePositions
+    // from the canvas instead.
+    updateComponent(reportId, componentId, settings, config = {}) {
+        return this._api.put(this._path(`${reportId}/components/${componentId}/settings`), settings, {
+            key: 'component',
+            ...config,
+        });
+    }
+    delete(reportId, config = {}) {
+        return this._api.delete(this._path(`${reportId}`), {}, {
+            key: 'report',
+            ...config,
+        });
+    }
+    // The assembled structure: pages → components (+ their filters) and the
+    // report's filter groups.
+    get(reportId, config = {}) {
+        return this._api.get(this._path(`${reportId}`), {}, {
+            key: 'report',
+            ...config,
+        });
+    }
+    // Persist geometry for the moved components only — any subset of
+    // { x, y, w, h } (inches), flowWidth (percent) and order (flow position).
+    savePositions(reportId, positions, config = {}) {
+        return this._api.put(this._path(`${reportId}/components/positions`), { positions }, {
+            key: null,
+            ...config,
+        });
+    }
+    // One component's data. The body carries everything session-scoped: the
+    // resolved filter values and the component's own interaction state.
+    componentData(reportId, componentId, filters = [], state = {}, config = {}) {
+        return this._api.post(this._path(`${reportId}/components/${componentId}/data`), { filters, state }, {
+            key: 'data',
+            ...config,
+        });
+    }
+    // Exports the component's FULL filtered dataset to CSV server-side and
+    // resolves to a presigned download URL. The backend streams percentage
+    // progress while chunking; consume through FsProcess.download.
+    exportComponent(reportId, componentId, filters = [], state = {}, config = {}) {
+        return this._api.post(this._path(`${reportId}/components/${componentId}/export`), { filters, state }, {
+            key: 'url',
+            ...config,
+        });
+    }
+    // Distinct options for a select filter (drives multiselect controls).
+    filterOptions(reportId, filterId, config = {}) {
+        return this._api.get(this._path(`${reportId}/filters/${filterId}/options`), {}, {
+            key: 'options',
+            ...config,
+        });
+    }
+    // The component SQL's filterable output columns — drives the column picker
+    // in the filter UI so a column name is never typed by hand.
+    componentColumns(reportId, componentId, config = {}) {
+        return this._api.get(this._path(`${reportId}/components/${componentId}/columns`), {}, {
+            key: 'columns',
+            ...config,
+        });
+    }
+    // Make one column filterable. `level` (component | report) places a new
+    // group; `groupId` instead links into an existing group. A select filter's
+    // options are derived from the component SQL when optionsSql is omitted.
+    addFilter(reportId, componentId, filter, config = {}) {
+        return this._api.post(this._path(`${reportId}/components/${componentId}/filters`), filter, {
+            key: 'filter',
+            ...config,
+        });
+    }
+    // Update a filter — any subset of { label, optionsSql, enabled }.
+    updateFilter(reportId, filterId, changes, config = {}) {
+        return this._api.put(this._path(`${reportId}/filters/${filterId}`), changes, {
+            key: 'filter',
+            ...config,
+        });
+    }
+    // Remove a filter (its group goes too when nothing else uses it).
+    deleteFilter(reportId, filterId, config = {}) {
+        return this._api.delete(this._path(`${reportId}/filters/${filterId}`), {}, {
+            key: 'filter',
+            ...config,
+        });
+    }
+    // Set where a filter group renders: 'component', 'report' or 'both'.
+    setFilterGroupLevel(reportId, groupId, level, config = {}) {
+        return this._api.put(this._path(`${reportId}/filtergroups/${groupId}`), { level }, {
+            key: 'filterGroup',
+            ...config,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportData, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportData, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportData, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// Page padding for flow layout, inches — mirrored by the canvas CSS.
+const FLOW_PADDING = 0.25;
+// Default content padding around a component's body, inches (1/8").
+const DEFAULT_COMPONENT_PADDING = 0.125;
+// Default report heading size, points (1/72"). Applies to component titles.
+const DEFAULT_HEADING_SIZE = 16;
+// Resolved geometry (inches) for every component on a page, in BOTH layout
+// modes — the single definition the PPT and PDF exports lay out from:
+//
+//   Freeform: the stored x/y/w/h verbatim.
+//   Flow:     components in `order`, each flowWidth% of the content width,
+//             wrapping into rows (a row breaks when the next component would
+//             exceed 100%); row height = the tallest component in the row.
+//             Matches the canvas's flex-wrap rendering.
+function pageGeometry(report, page) {
+    const geometry = new Map();
+    if (report.layout !== 'flow') {
+        for (const component of page.components) {
+            geometry.set(component.id, {
+                x: component.x, y: component.y, w: component.w, h: component.h,
+            });
+        }
+        return geometry;
+    }
+    const contentW = report.pageWidth - FLOW_PADDING * 2;
+    const sorted = [...page.components].sort((a, b) => (a.order - b.order) || (a.y - b.y) || (a.x - b.x));
+    let cursorX = 0; // fraction of contentW consumed in the current row
+    let rowTop = FLOW_PADDING;
+    let rowHeight = 0;
+    for (const component of sorted) {
+        const fraction = Math.min(100, Math.max(10, component.flowWidth ?? 50)) / 100;
+        // Wrap when this component doesn't fit the remainder (small tolerance for
+        // 33.33+33.33+33.33 style splits).
+        if (cursorX + fraction > 1.001) {
+            rowTop += rowHeight;
+            cursorX = 0;
+            rowHeight = 0;
+        }
+        geometry.set(component.id, {
+            x: FLOW_PADDING + cursorX * contentW,
+            y: rowTop,
+            w: fraction * contentW,
+            h: component.h,
+        });
+        cursorX += fraction;
+        rowHeight = Math.max(rowHeight, component.h);
+    }
+    return geometry;
+}
+
+// A date-range boundary as the picked LOCAL calendar day (no time, no tz).
+// Date-range filters are calendar-day semantics, so the boundary must carry
+// only Y-M-D — never a timezone-bearing instant the backend would shift.
+function dateBoundString(value) {
+    if (value instanceof Date) {
+        return format(value, 'yyyy-MM-dd');
+    }
+    // Authored/relative defaults arrive as strings already in Y-M-D form;
+    // keep just the date portion.
+    return value ? String(value).slice(0, 10) : undefined;
+}
+// Maps a report filter GROUP to an fs-filter config item, and reads fs-filter
+// query values back into per-group FilterGroupValues. Shared by the report-bar
+// fs-filter and the per-component fs-filter so both render through the same
+// library and write into ReportFilterStateService identically. Items are named
+// `g<groupId>` so the query keys map straight back to the group.
+//
+// (Lists keep their own filters in FsList and name items `f<filterId>`; this is
+// the group-keyed path for charts/KPIs and the report bar.)
+// The query key fs-filter uses for a group's item(s).
+const itemName = (group) => `g${group.id}`;
+// Build the fs-filter config item for a group, seeding its default from the
+// current session value so authored/relative defaults show selected on open.
+function filterItemForGroup(group, reportData, reportId, initial) {
+    const name = itemName(group);
+    const label = group.label || group.filters?.[0]?.filterColumn || '';
+    switch (group.type) {
+        case 'dateRange':
+            return {
+                name,
+                type: ItemType.DateRange,
+                label: { from: `${label} From`, to: `${label} To` },
+                default: (initial?.start || initial?.end)
+                    ? { from: initial.start ?? undefined, to: initial.end ?? undefined }
+                    : undefined,
+            };
+        case 'select': {
+            // Options come from the first member filter that declares them — members
+            // are the same data point, so any member's list serves the group.
+            const optionFilter = (group.filters ?? []).find((member) => member.hasOptions);
+            // The distinct option list is fetched once (server caps it) and replayed
+            // to every keystroke, so typing never refetches.
+            let options$ = null;
+            const loadOptions = () => {
+                if (!optionFilter) {
+                    return of([]);
+                }
+                if (!options$) {
+                    options$ = reportData.filterOptions(reportId, optionFilter.id)
+                        .pipe(map((options) => (options ?? [])
+                        .map((option) => ({ name: String(option), value: option }))), shareReplay({ bufferSize: 1, refCount: false }));
+                }
+                return options$;
+            };
+            return {
+                name,
+                type: ItemType.AutoCompleteChips,
+                label,
+                fetchOnFocus: true,
+                // fs-autocomplete renders whatever we return verbatim, so the typed
+                // keyword has to be matched here. Match case-insensitively against the
+                // displayed name — works for any select filter regardless of its column.
+                values: (keyword) => loadOptions()
+                    .pipe(map((options) => {
+                    const term = (keyword ?? '').trim().toLowerCase();
+                    return term
+                        ? options.filter((option) => option.name.toLowerCase().includes(term))
+                        : options;
+                })),
+                default: initial?.values?.length
+                    ? initial.values.map((value) => ({ name: String(value), value }))
+                    : undefined,
+            };
+        }
+        case 'keyword':
+        default:
+            return {
+                name,
+                type: ItemType.Keyword,
+                label,
+                default: initial?.value,
+            };
+    }
+}
+// Read an fs-filter change query into per-group values. Returns one entry per
+// group with the value to store (or null to clear) — callers feed these to
+// ReportFilterStateService.setValue.
+function groupValuesFromQuery(query, groups) {
+    return groups.map((group) => {
+        const name = itemName(group);
+        if (group.type === 'dateRange') {
+            const start = query[`${name}From`];
+            const end = query[`${name}To`];
+            return {
+                groupId: group.id,
+                value: (start || end) ? { start: start || null, end: end || null } : null,
+            };
+        }
+        if (group.type === 'select') {
+            const values = selectQueryValues(query[name]);
+            return { groupId: group.id, value: values.length ? { values } : null };
+        }
+        const keyword = String(query[name] ?? '').trim();
+        return { groupId: group.id, value: keyword ? { value: keyword } : null };
+    });
+}
+// fs-filter's AutoCompleteChips serialises a multi-select into ONE query value:
+// the selected values joined by "," (its `query` getter does `.map(value).join(',')`).
+// So a 2+ selection arrives as the string "a,b", not an array — splitting on ","
+// reverses that faithfully. Without this, a multi-select was sent as the single
+// value ["a,b"], producing `col IN ('a,b')` server-side, which matches nothing.
+function selectQueryValues(raw) {
+    if (Array.isArray(raw)) {
+        return raw;
+    }
+    if (raw === null || raw === undefined || raw === '') {
+        return [];
+    }
+    return String(raw).split(',');
+}
+
+// Session filter state for the open report. Filter VALUES are never persisted
+// — this service holds them per filter GROUP (the propagation unit), resolves
+// them into per-component member-filter values for each data request, and
+// notifies the components whose groups changed so only they refetch.
+//
+// Also session-scoped: per-filter enable/disable toggles from a component's
+// filter menu (the `enabled` column is the authored default; a viewer's toggle
+// shouldn't write to the report).
+class ReportFilterStateService {
+    _values = new Map();
+    _groups = new Map();
+    _sessionDisabled = new Set();
+    // The runtime Frequency control: a single session-wide bucket override for all
+    // time-series charts. Unset = each chart uses its authored granularity. Never
+    // persisted (it dies with this report view), and carried in the data request's
+    // `state`, so it propagates through to the PDF/PowerPoint exports too.
+    _frequency = null;
+    _frequencyChanged$ = new Subject();
+    // Emits the group id that changed; components listen filtered to their own
+    // group ids. null = everything changed (re-init).
+    _changed$ = new Subject();
+    // Seed groups + their defaults when a report loads. Existing session values
+    // for still-existing groups survive a structure re-fetch (a chat edit
+    // shouldn't reset the viewer's filters).
+    init(report) {
+        this._groups.clear();
+        const validIds = new Set();
+        for (const group of report.filterGroups ?? []) {
+            this._groups.set(group.id, group);
+            validIds.add(group.id);
+            if (!this._values.has(group.id)) {
+                const defaultValue = this._defaultValue(group);
+                if (defaultValue) {
+                    this._values.set(group.id, defaultValue);
+                }
+            }
+        }
+        for (const groupId of [...this._values.keys()]) {
+            if (!validIds.has(groupId)) {
+                this._values.delete(groupId);
+            }
+        }
+        this._changed$.next(null);
+    }
+    value(groupId) {
+        return this._values.get(groupId);
+    }
+    setValue(groupId, value) {
+        if (value === null) {
+            this._values.delete(groupId);
+        }
+        else {
+            this._values.set(groupId, value);
+        }
+        this._changed$.next(groupId);
+    }
+    // The active Frequency override, or null when the viewer hasn't chosen one.
+    frequency() {
+        return this._frequency;
+    }
+    setFrequency(frequency) {
+        this._frequency = frequency;
+        this._frequencyChanged$.next();
+    }
+    // Fires whenever the Frequency changes — every time-series chart listens so it
+    // refetches and re-buckets (the override isn't scoped to any filter group, so
+    // changesFor() can't carry it).
+    frequencyChanges() {
+        return this._frequencyChanged$.asObservable();
+    }
+    isFilterDisabled(filterId) {
+        return this._sessionDisabled.has(filterId);
+    }
+    toggleFilter(filterId, groupId) {
+        if (this._sessionDisabled.has(filterId)) {
+            this._sessionDisabled.delete(filterId);
+        }
+        else {
+            this._sessionDisabled.add(filterId);
+        }
+        this._changed$.next(groupId);
+    }
+    // Notifications relevant to ONE component: any change to a group one of its
+    // filters belongs to (or a full re-init).
+    changesFor(component) {
+        const groupIds = new Set((component.filters ?? []).map((filter) => filter.filterGroupId));
+        return this._changed$.asObservable()
+            .pipe(filter((groupId) => groupId === null || groupIds.has(groupId)));
+    }
+    // The group values resolved into this component's member-filter values —
+    // what the data request carries. Disabled filters (authored or session) are
+    // skipped entirely.
+    resolveForComponent(component) {
+        const resolved = [];
+        for (const filter of component.filters ?? []) {
+            if (!filter.enabled || this._sessionDisabled.has(filter.id)) {
+                continue;
+            }
+            const value = this._values.get(filter.filterGroupId);
+            if (!value) {
+                continue;
+            }
+            const entry = { filterId: filter.id };
+            if (value.start) {
+                entry.start = dateBoundString(value.start);
+            }
+            if (value.end) {
+                entry.end = dateBoundString(value.end);
+            }
+            if (value.values?.length) {
+                entry.values = value.values;
+            }
+            if (value.value?.trim()) {
+                entry.value = value.value.trim();
+            }
+            if (entry.start || entry.end || entry.values || entry.value) {
+                resolved.push(entry);
+            }
+        }
+        return resolved;
+    }
+    // A group's authored default — relative presets resolve against "now" each
+    // time the report opens, so a saved "last 12 months" stays relative.
+    _defaultValue(group) {
+        const groupDefault = group.config?.default;
+        if (!groupDefault) {
+            return null;
+        }
+        if (groupDefault.relative) {
+            const range = this._relativeRange(groupDefault.relative);
+            return range ? { start: range.start, end: range.end } : null;
+        }
+        if (groupDefault.start || groupDefault.end) {
+            return {
+                start: groupDefault.start ?? null,
+                end: groupDefault.end ?? null,
+            };
+        }
+        return null;
+    }
+    _relativeRange(relative) {
+        const now = new Date();
+        switch (relative) {
+            case 'last7Days':
+                return { start: subDays(now, 7), end: now };
+            case 'last30Days':
+                return { start: subDays(now, 30), end: now };
+            case 'last3Months':
+                return { start: subMonths(now, 3), end: now };
+            case 'last6Months':
+                return { start: subMonths(now, 6), end: now };
+            case 'last12Months':
+                return { start: subMonths(now, 12), end: now };
+            case 'thisMonth':
+                return { start: startOfMonth(now), end: now };
+            case 'thisQuarter':
+                return { start: startOfQuarter(now), end: now };
+            case 'thisYear':
+            case 'yearToDate':
+                return { start: startOfYear(now), end: now };
+            default:
+                return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportFilterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportFilterStateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportFilterStateService, decorators: [{
+            type: Injectable
+        }] });
+
+const BUCKET_GRANULARITIES = ['day', 'week', 'month', 'quarter', 'year'];
+// colorBy applies only to single-dimension bar charts, and only when splitBy
+// isn't already driving multiple series: it colors each bar by its category and
+// shows a legend (one series per category, overlapped to full width).
+function isColorBy(config) {
+    return !!config.colorBy?.column && !config.splitBy?.column && (config.chartType ?? 'bar') === 'bar';
+}
+function extractChartSeries(component, data) {
+    const config = component.config;
+    const xColumn = config.xAxis?.column ?? data.columns[0];
+    const splitColumn = config.splitBy?.column;
+    // colorBy emits one series per category too (so each bar carries its own
+    // color + legend entry), but the bars are overlapped to full width in
+    // buildAxisOption rather than laid side-by-side. splitBy wins if both are set.
+    const groupColumn = splitColumn || (isColorBy(config) ? config.colorBy?.column : undefined);
+    const measures = config.measures?.length
+        ? config.measures
+        : [{ column: data.columns[data.columns.length - 1] }];
+    const rawCategories = uniqueValues(data.rows, xColumn);
+    const categories = rawCategories.map((category) => String(category ?? '—'));
+    const series = [];
+    if (groupColumn) {
+        // One series per group value (splitBy/colorBy), pivoted over the first measure.
+        const measure = measures[0];
+        for (const groupValue of uniqueValues(data.rows, groupColumn)) {
+            const byCategory = new Map();
+            for (const row of data.rows) {
+                if (row[groupColumn] === groupValue) {
+                    byCategory.set(row[xColumn], row[measure.column]);
+                }
+            }
+            series.push({
+                name: String(groupValue ?? '—'),
+                values: rawCategories.map((category) => numeric(byCategory.get(category))),
+            });
+        }
+    }
+    else {
+        for (const measure of measures) {
+            const byCategory = new Map();
+            for (const row of data.rows) {
+                byCategory.set(row[xColumn], row[measure.column]);
+            }
+            series.push({
+                name: measure.label ?? measure.column,
+                values: rawCategories.map((category) => numeric(byCategory.get(category))),
+            });
+        }
+    }
+    return { categories, series };
+}
+// The one pure mapping from our standard camelCase chart config + the data
+// endpoint's rows to an ECharts option. Everything visual that isn't in the
+// registered 'report' theme is decided here, so report standards have exactly
+// two homes.
+function buildChartOption(component, data) {
+    const config = component.config;
+    const chartType = config.chartType ?? 'bar';
+    if (chartType === 'pie' || chartType === 'donut') {
+        return buildPieOption(component, data, chartType === 'donut');
+    }
+    return buildAxisOption(component, data, chartType);
+}
+function buildAxisOption(component, data, chartType) {
+    const config = component.config;
+    const extracted = extractChartSeries(component, data);
+    const horizontal = config.orientation === 'horizontal';
+    const colorBy = isColorBy(config);
+    // colorBy emits one series per category; overlapping them (barGap -100%) makes
+    // each render at the full category-band width — one full-width, distinctly
+    // colored bar per category — instead of side-by-side slivers. The layout props
+    // are read from the first series of the coordinate system.
+    const series = extracted.series.map((extractedSeries, index) => buildSeries(extractedSeries.name, extractedSeries.values, chartType, config.stacked, colorBy && index === 0));
+    const granularity = bucketGranularity(data);
+    const categoryAxis = {
+        type: 'category',
+        data: extracted.categories,
+        name: config.xAxis?.label,
+        nameLocation: 'middle',
+        nameGap: granularity && spansMultipleYears(extracted.categories) ? 40 : 28,
+        ...periodAxisLabel(granularity, extracted.categories),
+    };
+    const valueAxis = { type: 'value' };
+    const legendPosition = resolveLegendPosition(config, series.length, colorBy);
+    return {
+        grid: axisGrid(legendPosition),
+        legend: legendOption(legendPosition),
+        // colorBy charts overlap N mostly-null series, so an axis tooltip would list
+        // every category; an item tooltip shows just the hovered bar.
+        tooltip: { trigger: colorBy ? 'item' : 'axis' },
+        xAxis: horizontal ? valueAxis : categoryAxis,
+        yAxis: horizontal ? categoryAxis : valueAxis,
+        series,
+    };
+}
+// Default legend placement when the config doesn't pin one: pie charts read
+// best with the slice key beside them (right); axis charts only need a legend
+// to tell multiple series apart, so a single-series chart hides it. An explicit
+// config.legend (including 'hidden') always wins. Shared with the PowerPoint
+// export so both media place the legend identically.
+function resolveLegendPosition(config, seriesCount, colorBy = false) {
+    if (config.legend) {
+        return config.legend;
+    }
+    const pie = config.chartType === 'pie' || config.chartType === 'donut';
+    // colorBy maps each bar's color to its category, so it needs a legend even
+    // though it's a single measure.
+    return pie || colorBy || seriesCount > 1 ? (pie ? 'right' : 'top') : 'hidden';
+}
+function legendOption(position) {
+    if (position === 'hidden') {
+        return { show: false };
+    }
+    const base = { type: 'scroll' };
+    switch (position) {
+        case 'bottom':
+            return { ...base, bottom: 0 };
+        case 'left':
+            return { ...base, orient: 'vertical', left: 0, top: 'middle' };
+        case 'right':
+            return { ...base, orient: 'vertical', right: 0, top: 'middle' };
+        default:
+            return { ...base, top: 0 };
+    }
+}
+// Reserve plot-edge room on whichever side the legend occupies so it never
+// overlaps the bars/lines; containLabel already accounts for the axis labels.
+function axisGrid(position) {
+    const base = { left: 8, right: 16, top: 8, bottom: 8, containLabel: true };
+    switch (position) {
+        case 'bottom':
+            return { ...base, bottom: 32 };
+        case 'left':
+            return { ...base, left: 96 };
+        case 'right':
+            return { ...base, right: 96 };
+        case 'hidden':
+            return base;
+        default:
+            return { ...base, top: 32 };
+    }
+}
+function buildSeries(name, values, chartType, stacked, overlap) {
+    if (chartType === 'bar') {
+        return {
+            name,
+            type: 'bar',
+            data: values,
+            stack: stacked ? 'total' : undefined,
+            barMaxWidth: 48,
+            // colorBy: overlap the per-category series so each bar renders full-width.
+            ...(overlap ? { barGap: '-100%', barCategoryGap: '20%' } : {}),
+        };
+    }
+    return {
+        name,
+        type: 'line',
+        data: values,
+        stack: stacked ? 'total' : undefined,
+        smooth: true,
+        symbolSize: 6,
+        areaStyle: chartType === 'area' ? { opacity: 0.25 } : undefined,
+    };
+}
+function buildPieOption(component, data, donut) {
+    const config = component.config;
+    const extracted = extractChartSeries(component, data);
+    const values = extracted.series[0]?.values ?? [];
+    const legendPosition = resolveLegendPosition(config, extracted.series.length);
+    return {
+        tooltip: { trigger: 'item' },
+        legend: legendOption(legendPosition),
+        series: [
+            {
+                type: 'pie',
+                radius: donut ? ['45%', '72%'] : '72%',
+                center: pieCenter(legendPosition),
+                label: { show: false },
+                data: extracted.categories.map((category, index) => ({
+                    name: category,
+                    value: values[index] ?? 0,
+                })),
+            },
+        ],
+    };
+}
+// Nudge the pie off-center toward the opposite edge from its legend so the two
+// don't collide; centered when the legend is hidden.
+function pieCenter(position) {
+    switch (position) {
+        case 'left':
+            return ['60%', '50%'];
+        case 'right':
+            return ['40%', '50%'];
+        case 'top':
+            return ['50%', '58%'];
+        case 'bottom':
+            return ['50%', '46%'];
+        default:
+            return ['50%', '50%'];
+    }
+}
+function uniqueValues(rows, column) {
+    const seen = new Set();
+    const values = [];
+    for (const row of rows) {
+        const value = row[column];
+        if (!seen.has(value)) {
+            seen.add(value);
+            values.push(value);
+        }
+    }
+    return values;
+}
+function numeric(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+// The effective time bucket the rows were grouped into (from the data endpoint),
+// or null when the x-axis isn't a time axis — gates the compact period labels.
+function bucketGranularity(data) {
+    return data.granularity && BUCKET_GRANULARITIES.includes(data.granularity) ? data.granularity : null;
+}
+// Whether the period-start categories cross a year boundary. When they don't,
+// the year is pure noise on every label, so it's dropped entirely.
+function spansMultipleYears(categories) {
+    const years = new Set();
+    for (const category of categories) {
+        const date = parseISO(category);
+        if (isValid(date)) {
+            years.add(date.getFullYear());
+        }
+    }
+    return years.size > 1;
+}
+// A bucket's period-start split into its primary label and its year. Day/week
+// read as "May 1", month as "May", quarter as "Q2", year as "2025". Returns null
+// for a value that isn't a parseable date (left as-is by callers).
+function periodLabelParts(value, granularity) {
+    const date = parseISO(value);
+    if (!isValid(date)) {
+        return null;
+    }
+    const year = String(date.getFullYear());
+    switch (granularity) {
+        case 'year':
+            return { primary: year, year };
+        case 'quarter':
+            return { primary: `Q${Math.floor(date.getMonth() / 3) + 1}`, year };
+        case 'month':
+            return { primary: format(date, 'MMMM'), year };
+        default: // day, week — the bucket start as a compact "MMM d"
+            return { primary: format(date, 'MMM d'), year };
+    }
+}
+// A compact single-line period label (year appended only when the data spans
+// years) — for media that can't do a styled second line, e.g. PowerPoint.
+function formatPeriodLabel(value, granularity, multiYear) {
+    const parts = periodLabelParts(value, granularity);
+    if (!parts) {
+        return value;
+    }
+    return multiYear && granularity !== 'year' ? `${parts.primary} ${parts.year}` : parts.primary;
+}
+// ECharts category-axis label config for a time bucket: the primary label on
+// line one, and — only when the data spans multiple years — the year on a small
+// gray second line, centered under the tick (year granularity needs no second
+// line, it already is the year). Empty for a non-time axis (labels as-is).
+function periodAxisLabel(granularity, categories) {
+    if (!granularity) {
+        return {};
+    }
+    const multiYear = spansMultipleYears(categories);
+    return {
+        axisLabel: {
+            formatter: (value) => {
+                const parts = periodLabelParts(value, granularity);
+                if (!parts) {
+                    return value;
+                }
+                return multiYear && granularity !== 'year'
+                    ? `${parts.primary}\n{yr|${parts.year}}`
+                    : parts.primary;
+            },
+            rich: { yr: { fontSize: 10, color: '#9aa0a6', lineHeight: 14 } },
+        },
+    };
+}
+
+// ECharts host for a chart component. Pure rendering: the parent owns the
+// data fetch; this maps (component config, rows) → option and exposes the
+// chart instance for resize + the future image exports (getDataURL needs the
+// canvas renderer registered in theme/echarts.ts).
+class ComponentChartComponent {
+    component;
+    data = null;
+    options = null;
+    _chart = null;
+    ngOnChanges() {
+        this.options = this.component && this.data
+            ? buildChartOption(this.component, this.data)
+            : null;
+    }
+    onChartInit(chart) {
+        this._chart = chart;
+    }
+    // Called by the canvas when the box is resized in edit mode.
+    resize() {
+        this._chart?.resize();
+    }
+    // High-res image for the (later-phase) PPT/PDF exports.
+    getDataURL(pixelRatio = 3) {
+        return this._chart?.getDataURL({
+            type: 'png',
+            pixelRatio,
+            backgroundColor: '#ffffff',
+        }) ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ComponentChartComponent, isStandalone: true, selector: "app-report-component-chart", inputs: { component: "component", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\">\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-host{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgxEchartsDirective,
+                    ], template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\">\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-host{width:100%;height:100%}\n"] }]
+        }], propDecorators: { component: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+// Measure-value formatting shared by the KPI renderer and the exports — the
+// config's `format` (number | percent | currency) means the same thing on
+// screen, in PowerPoint and in PDF.
+function formatMeasureValue(value, format) {
+    if (value === null || value === undefined || value === '') {
+        return '—';
+    }
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+        return String(value);
+    }
+    switch (format) {
+        case 'percent':
+            return `${new Intl.NumberFormat().format(numeric)}%`;
+        case 'currency':
+            return new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: 'USD',
+                maximumFractionDigits: 0,
+            }).format(numeric);
+        default:
+            return new Intl.NumberFormat().format(numeric);
+    }
+}
+
+// A single big number: the component's measure aggregated over all (filtered)
+// rows server-side; this just formats the one cell.
+class ComponentKpiComponent {
+    component;
+    data = null;
+    value = '—';
+    label = '';
+    ngOnChanges() {
+        const config = (this.component?.config ?? {});
+        this.label = config.measure?.label ?? '';
+        const row = this.data?.rows?.[0];
+        if (!row) {
+            this.value = '—';
+            return;
+        }
+        const column = config.measure?.column ?? Object.keys(row)[0];
+        this.value = formatMeasureValue(row[column], config.measure?.format);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentKpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentKpiComponent, isStandalone: true, selector: "app-report-component-kpi", inputs: { component: "component", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"kpi\">\n  <div class=\"kpi-value\">{{ value }}</div>\n  @if (label) {\n    <div class=\"kpi-label\">{{ label }}</div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.kpi .kpi-value{font-size:34px;font-weight:600;color:#1f2933;line-height:1}.kpi .kpi-label{font-size:12px;color:#7b8794}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentKpiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-kpi', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"kpi\">\n  <div class=\"kpi-value\">{{ value }}</div>\n  @if (label) {\n    <div class=\"kpi-label\">{{ label }}</div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.kpi .kpi-value{font-size:34px;font-weight:600;color:#1f2933;line-height:1}.kpi .kpi-label{font-size:12px;color:#7b8794}\n"] }]
+        }], propDecorators: { component: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+// A list component: FsList + FsFilter rendered from the component's config and
+// its report_filters rows. The component's own filter bar carries its filters
+// whose group renders at the component level; report-level groups apply
+// through the shared filter-state service and merge into every request.
+// Paging and sorting are pushed into the SQL wrap server-side.
+class ComponentListComponent {
+    reportId;
+    component;
+    groups;
+    listComponent;
+    listConfig;
+    columns = [];
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    _destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        const config = (this.component.config ?? {});
+        this.columns = config.columns ?? [];
+        this._initListConfig(config);
+        // Report-level filter changes that scope this component re-run the list.
+        this._filterState.changesFor(this.component)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.listComponent?.reload());
+    }
+    _initListConfig(config) {
+        this.listConfig = {
+            // Inside a report component the list is a clean data pane — no status
+            // bar, no reload button (filter changes already refetch).
+            status: false,
+            reload: false,
+            // Never touch the URL or persist filter/paging state — report filtering
+            // is session-only.
+            queryParam: false,
+            persist: false,
+            sort: config.sort
+                ? { value: config.sort.column, direction: config.sort.direction ?? 'asc' }
+                : undefined,
+            paging: {
+                limit: config.pageSize ?? 25,
+                strategy: PaginationStrategy.Page,
+            },
+            filters: this._ownFilters().map((filter) => this._filterItem(filter)),
+            fetch: (query) => this._fetch(query),
+        };
+    }
+    // The filters this list renders in its own bar: its report_filters whose
+    // group is component-level. Report-level groups render in the report bar.
+    _ownFilters() {
+        return (this.component.filters ?? [])
+            .filter((filter) => {
+            const group = this.groups?.get(filter.filterGroupId);
+            return filter.enabled && (!group || group.level === 'component' || group.level === 'both');
+        });
+    }
+    _filterItem(filter) {
+        const group = this.groups?.get(filter.filterGroupId);
+        const name = `f${filter.id}`;
+        const label = filter.label || group?.label || filter.filterColumn;
+        switch (group?.type) {
+            case 'dateRange':
+                return {
+                    name,
+                    type: ItemType.DateRange,
+                    label: [`${label} From`, `${label} To`],
+                };
+            case 'select':
+                return {
+                    name,
+                    type: ItemType.AutoCompleteChips,
+                    label,
+                    values: () => this._reportData.filterOptions(this.reportId, filter.id)
+                        .pipe(map$1((options) => (options ?? [])
+                        .map((option) => ({ name: String(option), value: option })))),
+                };
+            case 'keyword':
+            default:
+                return {
+                    name,
+                    type: ItemType.Keyword,
+                    label,
+                };
+        }
+    }
+    _fetch(query) {
+        const state = {
+            page: query.page ?? 1,
+            pageSize: query.limit ?? 25,
+        };
+        const order = String(query.order ?? '');
+        if (order) {
+            const [column, direction] = order.split(',');
+            state.sort = { column, direction: direction === 'desc' ? 'desc' : 'asc' };
+        }
+        // Report-level values from the shared session state, merged with this
+        // list's own filter-bar values (own values win per filter).
+        const resolved = new Map();
+        for (const value of this._filterState.resolveForComponent(this.component)) {
+            resolved.set(value.filterId, value);
+        }
+        for (const value of this._barValues(query)) {
+            resolved.set(value.filterId, value);
+        }
+        return this._reportData
+            .componentData(this.reportId, this.component.id, [...resolved.values()], state)
+            .pipe(map$1((data) => ({
+            data: data.rows ?? [],
+            paging: {
+                limit: data.paging?.pageSize ?? state.pageSize,
+                records: data.paging?.total ?? (data.rows?.length ?? 0),
+                page: data.paging?.page ?? state.page,
+            },
+        })));
+    }
+    // The list's own FsFilter values, read back out of the fetch query by the
+    // `f<filterId>` naming convention.
+    _barValues(query) {
+        const values = [];
+        for (const filter of this._ownFilters()) {
+            const group = this.groups?.get(filter.filterGroupId);
+            const name = `f${filter.id}`;
+            if (group?.type === 'dateRange') {
+                const from = dateBoundString(query[`${name}From`]);
+                const to = dateBoundString(query[`${name}To`]);
+                if (from || to) {
+                    values.push({ filterId: filter.id, start: from, end: to });
+                }
+            }
+            else if (group?.type === 'select') {
+                // fs-filter joins a multi-select into one "a,b" string; split it back
+                // so each value binds separately (else `col IN ('a,b')` matches nothing).
+                const selected = query[name];
+                const selectedValues = Array.isArray(selected)
+                    ? selected
+                    : (selected ? String(selected).split(',') : []);
+                if (selectedValues.length) {
+                    values.push({ filterId: filter.id, values: selectedValues });
+                }
+            }
+            else {
+                const keyword = String(query[name] ?? '').trim();
+                if (keyword) {
+                    values.push({ filterId: filter.id, value: keyword });
+                }
+            }
+        }
+        return values;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  @for (column of columns; track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"true\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DatePipe,
+                        FsListModule,
+                    ], template: "<fs-list [config]=\"listConfig\">\n  @for (column of columns; track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"true\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;overflow:auto}\n"] }]
+        }], propDecorators: { reportId: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], listComponent: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }] } });
+
+// Freeform resize handles, named by compass direction.
+const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+// Flow width snaps to the useful fractions of a page row.
+const FLOW_WIDTH_STOPS = [25, 33.33, 50, 66.67, 75, 100];
+const MIN_W = 0.6; // inches
+const MIN_H = 0.4; // inches
+// One component on the page: title bar, the type-specific body (chart | list
+// | kpi), a menu (settings, filter toggles, export) — and the editing
+// interactions:
+//
+//   Freeform: click selects; the selection frame shows 8 resize handles;
+//   dragging the body moves with smart alignment guides (via the canvas
+//   snapper); everything works at any zoom (pixel deltas ÷ zoom·96 → inches).
+//
+//   Flow: dragging reorders (drop position decided by the canvas); the E
+//   handle resizes flowWidth % (snapping to 25/33/50/66/75/100), the S handle
+//   resizes height in inches.
+//
+// Charts and KPIs fetch their own data here; lists fetch inside
+// ComponentListComponent through FsList paging.
+class ReportComponentComponent {
+    reportId;
+    component;
+    groups;
+    editMode = false;
+    layout = 'freeform';
+    // The canvas zoom — converts on-screen pixel deltas back to inches.
+    zoom = 1;
+    snapper = null;
+    selected = false;
+    selectComponent = new EventEmitter();
+    positionChanged = new EventEmitter();
+    flowReorder = new EventEmitter();
+    openSettings = new EventEmitter();
+    chartComponent;
+    // Freeform resize handles by type: a fixed-height component (chart) gets all
+    // eight (resize width AND height); an auto-height one (list/kpi) gets only the
+    // side handles since its height fits its content and can't be set.
+    get resizeHandles() {
+        return this._heightAuto ? ['e', 'w'] : HANDLES;
+    }
+    // The component's header IS an fs-filter: heading template = its title (and
+    // the drag handle), actions = the Settings / filter-toggles / Export menu,
+    // items = its component-level filter groups (none for lists — they filter
+    // through FsList). Rebuilt when a filter toggle changes which groups show.
+    filterConfig;
+    data = null;
+    loading = false;
+    error = null;
+    _refresh$ = new Subject();
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    _process = inject(FsProcess);
+    _destroyRef = inject(DestroyRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _zone = inject(NgZone);
+    _host = inject(ElementRef);
+    ngOnInit() {
+        this._buildFilterConfig();
+        if (this.component.type !== 'list') {
+            // Debounced so a rapid filter sweep fires one query, not one per change.
+            this._refresh$
+                .pipe(debounceTime(300), takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => this._load());
+            this._filterState.changesFor(this.component)
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => this._refresh$.next());
+            // A Frequency change re-buckets every time-series chart; it isn't scoped
+            // to a filter group, so it rides its own stream.
+            if (this._isTimeSeries) {
+                this._filterState.frequencyChanges()
+                    .pipe(takeUntilDestroyed(this._destroyRef))
+                    .subscribe(() => this._refresh$.next());
+            }
+            this._load();
+        }
+    }
+    // The report reloads (e.g. after the settings dialog adds/moves a filter)
+    // hand this instance fresh `component`/`groups` inputs without re-running
+    // ngOnInit. Rebuild the header config so the inline component-filter strip
+    // reflects the new filters; the template recreates the fs-filter via
+    // `filterKey` so it actually re-reads this config.
+    ngOnChanges(changes) {
+        const filtersChanged = (changes.component && !changes.component.firstChange)
+            || (changes.groups && !changes.groups.firstChange);
+        if (filtersChanged) {
+            this._buildFilterConfig();
+        }
+    }
+    // fs-filter reads its config only once at init, so the header is keyed on the
+    // set of component-level filter groups: the block is recreated (re-reading
+    // the rebuilt config) whenever that set changes.
+    get filterKey() {
+        return this.componentFilterGroups.map((group) => `${group.id}:${group.level}`).join('|');
+    }
+    get truncated() {
+        return !!this.data?.truncated;
+    }
+    // Content padding (inches → px at 96/in; the canvas zoom scales the page as
+    // a whole). Each edge defaults to 1/8".
+    get bodyPadding() {
+        const padding = this.component.config?.padding;
+        const edge = (value) => `${(value ?? DEFAULT_COMPONENT_PADDING) * PX_PER_INCH}px`;
+        return `${edge(padding?.top)} ${edge(padding?.right)} ${edge(padding?.bottom)} ${edge(padding?.left)}`;
+    }
+    // The component-level filter groups that should render as an inline control
+    // strip on THIS component: a group is included when it's level=component and
+    // has an enabled, session-on filter here. Report-level groups live in the
+    // top bar instead; lists render their own filters through FsList, so they
+    // never use this strip.
+    get componentFilterGroups() {
+        if (this.component.type === 'list' || !this.groups) {
+            return [];
+        }
+        const groupIds = new Set();
+        for (const filter of this.component.filters ?? []) {
+            if (!filter.enabled || this._filterState.isFilterDisabled(filter.id)) {
+                continue;
+            }
+            const group = this.groups.get(filter.filterGroupId);
+            if (group && (group.level === 'component' || group.level === 'both')) {
+                groupIds.add(group.id);
+            }
+        }
+        return [...groupIds].map((id) => this.groups.get(id)).filter(Boolean);
+    }
+    settings() {
+        this.openSettings.emit(this.component);
+    }
+    exportCsv() {
+        const filters = this._filterState.resolveForComponent(this.component);
+        this._process.download(`Exporting ${this.component.title ?? 'component'}`, this._reportData.exportComponent(this.reportId, this.component.id, filters));
+    }
+    // Any interaction inside a component must never start a canvas pan (the
+    // zoom-pan host listens for mousedown/touchstart at the container level).
+    stopCanvasPan(event) {
+        event.stopPropagation();
+    }
+    onComponentPointerDown(event) {
+        event.stopPropagation();
+        if (this.editMode && !this.selected) {
+            this.selectComponent.emit(this.component.id);
+        }
+    }
+    // ----- edit-mode gestures ---------------------------------------------------
+    onDragStart(event) {
+        if (!this.editMode) {
+            return;
+        }
+        this.selectComponent.emit(this.component.id);
+        if (this.layout === 'flow') {
+            this._flowDrag(event);
+            return;
+        }
+        this._track(event, (deltaX, deltaY) => {
+            let x = Math.max(0, this._origin.x + this._inches(deltaX));
+            let y = Math.max(0, this._origin.y + this._inches(deltaY));
+            if (this.snapper) {
+                ({ x, y } = this.snapper.snapMove(this.component, x, y));
+            }
+            this.component.x = x;
+            this.component.y = y;
+            this._applyGeometry();
+        }, () => this._emitGeometry());
+    }
+    onResizeStart(event, handle) {
+        if (!this.editMode) {
+            return;
+        }
+        this.selectComponent.emit(this.component.id);
+        if (this.layout === 'flow') {
+            this._flowResize(event, handle);
+            return;
+        }
+        this._track(event, (deltaX, deltaY) => {
+            const dx = this._inches(deltaX);
+            const dy = this._inches(deltaY);
+            let { x, y, w, h } = this._origin;
+            if (handle.includes('e')) {
+                w = Math.max(MIN_W, this._origin.w + dx);
+            }
+            if (handle.includes('s')) {
+                h = Math.max(MIN_H, this._origin.h + dy);
+            }
+            if (handle.includes('w')) {
+                const clamped = Math.min(dx, this._origin.w - MIN_W);
+                x = this._origin.x + clamped;
+                w = this._origin.w - clamped;
+            }
+            if (handle.includes('n')) {
+                const clamped = Math.min(dy, this._origin.h - MIN_H);
+                y = this._origin.y + clamped;
+                h = this._origin.h - clamped;
+            }
+            let geometry = { x, y, w, h };
+            if (this.snapper) {
+                geometry = this.snapper.snapResize(this.component, geometry, handle);
+            }
+            Object.assign(this.component, geometry);
+            this._applyGeometry();
+            this.chartComponent?.resize();
+        }, () => this._emitGeometry());
+    }
+    // (Re)build the header fs-filter config: heading template renders the title
+    // and items are this component's component-level filter groups. The actions
+    // menu (Settings / Export CSV) is NOT here — it's a standalone kebab floated
+    // top-right in the template, so its button height no longer drives the header
+    // row's height (which would otherwise inflate the heading by ~40px).
+    _buildFilterConfig() {
+        this.filterConfig = {
+            // Never touch the URL or persist filter state — component filters are
+            // session-only, owned by ReportFilterStateService.
+            queryParam: false,
+            persist: false,
+            items: this.componentFilterGroups.map((group) => filterItemForGroup(group, this._reportData, this.reportId, this._filterState.value(group.id))),
+            change: (query) => {
+                for (const { groupId, value } of groupValuesFromQuery(query ?? {}, this.componentFilterGroups)) {
+                    this._filterState.setValue(groupId, value);
+                }
+            },
+        };
+    }
+    // Flow: only the east handle resizes (width %). Height is always auto in flow
+    // (the box fits its content), so there's no south handle here.
+    _flowResize(event, handle) {
+        const pageWidth = this._host.nativeElement.parentElement?.clientWidth || 1;
+        this._track(event, (deltaX) => {
+            if (handle.includes('e')) {
+                const deltaPercent = (deltaX / this.zoom / pageWidth) * 100;
+                const raw = Math.min(100, Math.max(10, this._origin.flowWidth + deltaPercent));
+                this.component.flowWidth = this._snapFlowWidth(raw);
+                this._host.nativeElement.style.width = `${this.component.flowWidth}%`;
+            }
+        }, () => {
+            this.positionChanged.emit({
+                componentId: this.component.id,
+                flowWidth: this.component.flowWidth,
+            });
+        });
+    }
+    // Flow: drag lifts the component (ghost) and the canvas decides the drop
+    // index from the pointer position.
+    _flowDrag(event) {
+        const host = this._host.nativeElement;
+        let lastClientX = event.clientX;
+        let lastClientY = event.clientY;
+        host.classList.add('flow-dragging');
+        this._track(event, (deltaX, deltaY, e) => {
+            lastClientX = e.clientX;
+            lastClientY = e.clientY;
+            host.style.transform = `translate(${deltaX / this.zoom}px, ${deltaY / this.zoom}px)`;
+        }, () => {
+            host.classList.remove('flow-dragging');
+            host.style.transform = '';
+            this.flowReorder.emit({
+                componentId: this.component.id,
+                clientX: lastClientX,
+                clientY: lastClientY,
+            });
+        });
+    }
+    _origin = { x: 0, y: 0, w: 0, h: 0, flowWidth: 50 };
+    // Pointer-capture gesture loop: runs outside Angular, repaints imperatively,
+    // and finishes back inside Angular (selection/persistence).
+    _track(event, onMove, onEnd) {
+        event.preventDefault();
+        event.stopPropagation();
+        const handle = event.target;
+        handle.setPointerCapture(event.pointerId);
+        this._origin = {
+            x: this.component.x,
+            y: this.component.y,
+            w: this.component.w,
+            h: this.component.h,
+            flowWidth: this.component.flowWidth ?? 50,
+        };
+        const startX = event.clientX;
+        const startY = event.clientY;
+        this._zone.runOutsideAngular(() => {
+            const move = (e) => onMove(e.clientX - startX, e.clientY - startY, e);
+            const end = () => {
+                handle.releasePointerCapture(event.pointerId);
+                handle.removeEventListener('pointermove', move);
+                handle.removeEventListener('pointerup', end);
+                handle.removeEventListener('pointercancel', end);
+                this._zone.run(() => {
+                    this.snapper?.clear();
+                    onEnd();
+                    this._cdRef.markForCheck();
+                });
+            };
+            handle.addEventListener('pointermove', move);
+            handle.addEventListener('pointerup', end);
+            handle.addEventListener('pointercancel', end);
+        });
+    }
+    _emitGeometry() {
+        this.component.x = this._round(this.component.x);
+        this.component.y = this._round(this.component.y);
+        this.component.w = this._round(Math.max(MIN_W, this.component.w));
+        this.component.h = this._round(Math.max(MIN_H, this.component.h));
+        this._applyGeometry();
+        this.chartComponent?.resize();
+        this.positionChanged.emit({
+            componentId: this.component.id,
+            x: this.component.x,
+            y: this.component.y,
+            w: this.component.w,
+            h: this.component.h,
+        });
+    }
+    // A chart on a time x-axis — the only component the runtime Frequency control
+    // applies to.
+    get _isTimeSeries() {
+        return this.component.type === 'chart' && this.component.config?.xAxis?.kind === 'time';
+    }
+    // Auto height (box fits its content) vs fixed (use `h` exactly). Derived from
+    // type, server-side: lists and KPI tiles are auto; charts are always fixed so
+    // they fit the box and never overflow.
+    get _heightAuto() {
+        return this.component.autoHeight !== false;
+    }
+    // Drives the auto-only CSS default (empty-state baseline) so it never applies
+    // to a fixed-height component.
+    get heightAuto() {
+        return this._heightAuto;
+    }
+    // Screen pixels → inches at the current zoom.
+    _inches(pixels) {
+        return pixels / (this.zoom * PX_PER_INCH);
+    }
+    // Clean persisted values: hundredths of an inch.
+    _round(value) {
+        return Math.round(value * 100) / 100;
+    }
+    _snapFlowWidth(value) {
+        for (const stop of FLOW_WIDTH_STOPS) {
+            if (Math.abs(value - stop) < 3) {
+                return stop;
+            }
+        }
+        return Math.round(value * 10) / 10;
+    }
+    // The canvas positions the host via [style]; mid-gesture we set it directly
+    // so OnPush never re-renders in the move loop.
+    _applyGeometry() {
+        const style = this._host.nativeElement.style;
+        style.left = `${this.component.x * PX_PER_INCH}px`;
+        style.top = `${this.component.y * PX_PER_INCH}px`;
+        style.width = `${this.component.w * PX_PER_INCH}px`;
+        // Auto (list/kpi): no fixed height — the box sizes to its content. Fixed
+        // (chart): `h` is the exact height. Mirrors the canvas [style] binding so
+        // the mid-gesture paint matches the post-gesture re-render.
+        if (this._heightAuto) {
+            style.height = '';
+        }
+        else {
+            style.height = `${this.component.h * PX_PER_INCH}px`;
+        }
+    }
+    // ----- data ----------------------------------------------------------------
+    _load() {
+        this.loading = true;
+        this.error = null;
+        this._cdRef.markForCheck();
+        const filters = this._filterState.resolveForComponent(this.component);
+        // Time-series charts carry the runtime Frequency override (if chosen) so the
+        // backend re-buckets; everything else sends no interaction state here.
+        const state = this._isTimeSeries && this._filterState.frequency()
+            ? { frequency: this._filterState.frequency() }
+            : {};
+        this._reportData.componentData(this.reportId, this.component.id, filters, state)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: (data) => {
+                this.data = data;
+                this.loading = false;
+                this._cdRef.markForCheck();
+            },
+            error: (error) => {
+                this.loading = false;
+                this.error = error?.error?.message ?? error?.message ?? 'Failed to load data';
+                this._cdRef.markForCheck();
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: "reportId", component: "component", groups: "groups", editMode: "editMode", layout: "layout", zoom: "zoom", snapper: "snapper", selected: "selected" }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", flowReorder: "flowReorder", openSettings: "openSettings" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  @for (key of [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          {{ component.title }}\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  <button\n      mat-icon-button\n      class=\"component-menu\"\n      [matMenuTriggerFor]=\"menu\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"stopCanvasPan($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"settings()\">\n      <mat-icon>tune</mat-icon>\n      <span>Settings</span>\n    </button>\n    <button mat-menu-item (click)=\"exportCsv()\">\n      <mat-icon>download</mat-icon>\n      <span>Export CSV</span>\n    </button>\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\n    } @else if (loading) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error) {\n      <div class=\"component-state error\">\n        {{ error }}\n      </div>\n    } @else if (!data?.rows?.length) {\n      <div class=\"component-state\">\n        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\n    @for (handle of resizeHandles; track handle) {\n      <div\n        class=\"handle handle-{{ handle }}\"\n        (mousedown)=\"stopCanvasPan($event)\"\n        (pointerdown)=\"onResizeStart($event, handle)\">\n      </div>\n    }\n  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component", "groups"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatMenuModule,
+                        MatTooltip,
+                        FsFilterModule,
+                        ComponentChartComponent,
+                        ComponentKpiComponent,
+                        ComponentListComponent,
+                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  @for (key of [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          {{ component.title }}\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  <button\n      mat-icon-button\n      class=\"component-menu\"\n      [matMenuTriggerFor]=\"menu\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"stopCanvasPan($event)\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n  <mat-menu #menu=\"matMenu\">\n    <button mat-menu-item (click)=\"settings()\">\n      <mat-icon>tune</mat-icon>\n      <span>Settings</span>\n    </button>\n    <button mat-menu-item (click)=\"exportCsv()\">\n      <mat-icon>download</mat-icon>\n      <span>Export CSV</span>\n    </button>\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\n    } @else if (loading) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error) {\n      <div class=\"component-state error\">\n        {{ error }}\n      </div>\n    } @else if (!data?.rows?.length) {\n      <div class=\"component-state\">\n        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\n    @for (handle of resizeHandles; track handle) {\n      <div\n        class=\"handle handle-{{ handle }}\"\n        (mousedown)=\"stopCanvasPan($event)\"\n        (pointerdown)=\"onResizeStart($event, handle)\">\n      </div>\n    }\n  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
+        }], propDecorators: { reportId: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], snapper: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectComponent: [{
+                type: Output
+            }], positionChanged: [{
+                type: Output
+            }], flowReorder: [{
+                type: Output
+            }], openSettings: [{
+                type: Output
+            }], chartComponent: [{
+                type: ViewChild,
+                args: [ComponentChartComponent]
+            }], heightAuto: [{
+                type: HostBinding,
+                args: ['class.height-auto']
+            }] } });
+
+// Screen density of the canvas: 96 CSS px per inch (the CSS reference pixel),
+// before zoom. All geometry stays in inches; only rendering multiplies by it.
+const PX_PER_INCH = 96;
+// The fixed-size page canvas — the PowerPoint model. Pages are tabs (only the
+// ACTIVE page's components exist → only they fetch); the page is a
+// pageWidth×pageHeight INCHES sheet rendered at 96px/in inside fs-zoom-pan
+// (wheel zoom, background drag pan, toolbar buttons).
+//
+// Freeform layout: components are absolutely positioned; dragging gets smart
+// alignment guides (edges + centers of siblings and the page) with snapping.
+// Flow layout: components flow into rows (flowWidth % of the content width),
+// drag reorders, east/south handles resize width%/height.
+class ReportCanvasComponent {
+    report;
+    editMode = false;
+    // A component asked for its settings dialog — the page-level host opens it
+    // (it owns MatDialog + the post-save reload).
+    componentSettings = new EventEmitter();
+    // The report's structure changed here (a page was added) — the host re-fetches
+    // it (it owns the assembled report + filter state).
+    reportChanged = new EventEmitter();
+    // The viewer dismissed edit mode from the on-canvas badge — the host owns the
+    // editMode flag, so it flips it off (mirrors the menu's "Done editing layout").
+    editDone = new EventEmitter();
+    zoomPan;
+    _viewport;
+    _guides;
+    PX = PX_PER_INCH;
+    flowPadding = FLOW_PADDING;
+    activePageIndex = 0;
+    zoom = 1;
+    groups = new Map();
+    selectedComponentId = null;
+    // The snapper handed to every component (stable identity for OnPush).
+    snapper = {
+        snapMove: (component, x, y) => this._snapMove(component, x, y),
+        snapResize: (component, geometry, handle) => this._snapResize(component, geometry, handle),
+        clear: () => this._clearGuides(),
+    };
+    _reportData = inject(ReportData);
+    _cdRef = inject(ChangeDetectorRef);
+    _destroyRef = inject(DestroyRef);
+    _fitted = false;
+    _previousPageCount = 0;
+    ngOnChanges() {
+        this.groups = new Map((this.report?.filterGroups ?? []).map((group) => [group.id, group]));
+        const pageCount = this.report?.pages?.length ?? 0;
+        // A page was just added (the host re-fetched the report) — land on it.
+        if (pageCount > this._previousPageCount && this._previousPageCount > 0) {
+            this.activePageIndex = pageCount - 1;
+        }
+        this._previousPageCount = pageCount;
+        if (this.activePageIndex >= pageCount) {
+            this.activePageIndex = 0;
+        }
+    }
+    // Report heading size in px (config is points; the canvas renders at
+    // 96px/in, so points × 96/72). Inherited by component titles via a CSS var.
+    get headingSizePx() {
+        const points = this.report?.config?.styles?.heading?.size ?? DEFAULT_HEADING_SIZE;
+        return points * (PX_PER_INCH / 72);
+    }
+    ngAfterViewInit() {
+        // Fit the page to the viewport once on first render; after that the
+        // viewer's zoom choice is respected across re-renders.
+        setTimeout(() => this.zoomFit());
+    }
+    get isFlow() {
+        return this.report?.layout === 'flow';
+    }
+    get activePage() {
+        return this.report?.pages?.[this.activePageIndex] ?? null;
+    }
+    // Flow render order (the assembler already sorts, but a local reorder
+    // mid-session must hold without a re-fetch).
+    get flowComponents() {
+        return [...(this.activePage?.components ?? [])].sort((a, b) => a.order - b.order);
+    }
+    selectPage(index) {
+        this.activePageIndex = index;
+        this.selectedComponentId = null;
+    }
+    // Append a blank page; the host re-fetches the report and ngOnChanges lands
+    // the view on the new (last) page.
+    addPage() {
+        if (!this.report) {
+            return;
+        }
+        this._reportData.addPage(this.report.id)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.reportChanged.emit());
+    }
+    pageLabel(page, index) {
+        return page.name || `Page ${index + 1}`;
+    }
+    selectComponent(componentId) {
+        this.selectedComponentId = componentId;
+        this._cdRef.markForCheck();
+    }
+    onCanvasPointerDown() {
+        // Background click (pan start) deselects.
+        if (this.selectedComponentId !== null) {
+            this.selectComponent(null);
+        }
+    }
+    // ----- zoom toolbar ---------------------------------------------------------
+    onZoomed(scale) {
+        this.zoom = scale;
+        this._cdRef.markForCheck();
+    }
+    zoomIn() {
+        this.zoomPan?.zoomIn();
+    }
+    zoomOut() {
+        this.zoomPan?.zoomOut();
+    }
+    zoomFit() {
+        const viewport = this._viewport?.nativeElement;
+        if (!viewport || !this.report?.pageWidth || !this.zoomPan) {
+            return;
+        }
+        const fit = Math.min((viewport.clientWidth - 32) / (this.report.pageWidth * PX_PER_INCH), (viewport.clientHeight - 32) / (this.report.pageHeight * PX_PER_INCH));
+        this.zoomPan.zoom(Math.min(1.5, Math.max(0.1, fit)));
+        this.zoomPan.move(16, 16);
+        this._fitted = true;
+    }
+    zoomActual() {
+        this.zoomPan?.zoom(1);
+    }
+    // ----- persistence ----------------------------------------------------------
+    // A freeform drag/resize or a flow width resize landed — one PUT per gesture.
+    onPositionChanged(position) {
+        this._clearGuides();
+        this._reportData.savePositions(this.report.id, [position])
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    // A flow drag dropped: reorder the page's components around the moved one
+    // and persist every order in one PUT.
+    onFlowReorder(event) {
+        const page = this.activePage;
+        if (!page) {
+            return;
+        }
+        const ordered = this.flowComponents.filter((component) => component.id !== event.componentId);
+        const moved = page.components.find((component) => component.id === event.componentId);
+        if (!moved) {
+            return;
+        }
+        const index = this._flowDropIndex(ordered, event.clientX, event.clientY);
+        ordered.splice(index, 0, moved);
+        const positions = ordered.map((component, order) => {
+            component.order = order;
+            return { componentId: component.id, order };
+        });
+        this._cdRef.markForCheck();
+        this._reportData.savePositions(this.report.id, positions)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    // Where the pointer landed among the flowed components: before the first
+    // component whose center the pointer is above/left of.
+    _flowDropIndex(ordered, clientX, clientY) {
+        const hosts = Array.from(this._viewport.nativeElement.querySelectorAll('app-report-component')).filter((host) => !host.classList.contains('flow-dragging'));
+        for (let index = 0; index < hosts.length && index < ordered.length; index++) {
+            const rect = hosts[index].getBoundingClientRect();
+            if (clientY < rect.top + rect.height / 2
+                || (clientY < rect.bottom && clientX < rect.left + rect.width / 2)) {
+                return index;
+            }
+        }
+        return ordered.length;
+    }
+    // ----- smart guides ---------------------------------------------------------
+    // Pixel feel of the snap, converted to inches at the current zoom.
+    get _snapThreshold() {
+        return 8 / (PX_PER_INCH * Math.max(0.1, this.zoom));
+    }
+    _snapMove(component, x, y) {
+        const { vertical, horizontal } = this._candidates(component);
+        const guides = [];
+        const snappedX = this._snapAxis([
+            { offset: 0, value: x },
+            { offset: component.w / 2, value: x + component.w / 2 },
+            { offset: component.w, value: x + component.w },
+        ], vertical);
+        if (snappedX !== null) {
+            x = snappedX.base;
+            guides.push({ orientation: 'v', position: snappedX.guide });
+        }
+        const snappedY = this._snapAxis([
+            { offset: 0, value: y },
+            { offset: component.h / 2, value: y + component.h / 2 },
+            { offset: component.h, value: y + component.h },
+        ], horizontal);
+        if (snappedY !== null) {
+            y = snappedY.base;
+            guides.push({ orientation: 'h', position: snappedY.guide });
+        }
+        this._renderGuides(guides);
+        return { x, y };
+    }
+    _snapResize(component, geometry, handle) {
+        const { vertical, horizontal } = this._candidates(component);
+        const guides = [];
+        const result = { ...geometry };
+        // Only the edges the handle moves participate in snapping.
+        if (handle.includes('e')) {
+            const snapped = this._nearest(geometry.x + geometry.w, vertical);
+            if (snapped !== null) {
+                result.w = snapped - geometry.x;
+                guides.push({ orientation: 'v', position: snapped });
+            }
+        }
+        if (handle.includes('w')) {
+            const snapped = this._nearest(geometry.x, vertical);
+            if (snapped !== null) {
+                result.w = geometry.x + geometry.w - snapped;
+                result.x = snapped;
+                guides.push({ orientation: 'v', position: snapped });
+            }
+        }
+        if (handle.includes('s')) {
+            const snapped = this._nearest(geometry.y + geometry.h, horizontal);
+            if (snapped !== null) {
+                result.h = snapped - geometry.y;
+                guides.push({ orientation: 'h', position: snapped });
+            }
+        }
+        if (handle.includes('n')) {
+            const snapped = this._nearest(geometry.y, horizontal);
+            if (snapped !== null) {
+                result.h = geometry.y + geometry.h - snapped;
+                result.y = snapped;
+                guides.push({ orientation: 'h', position: snapped });
+            }
+        }
+        this._renderGuides(guides);
+        return result;
+    }
+    // Alignment candidates: the page's edges + center, and every sibling's
+    // edges + centers.
+    _candidates(moving) {
+        const vertical = [0, this.report.pageWidth / 2, this.report.pageWidth];
+        const horizontal = [0, this.report.pageHeight / 2, this.report.pageHeight];
+        for (const component of this.activePage?.components ?? []) {
+            if (component.id === moving.id) {
+                continue;
+            }
+            vertical.push(component.x, component.x + component.w / 2, component.x + component.w);
+            horizontal.push(component.y, component.y + component.h / 2, component.y + component.h);
+        }
+        return { vertical, horizontal };
+    }
+    // Snap one axis: of the moving box's three lines (edge/center/edge), find
+    // the closest candidate within threshold and return the adjusted base
+    // coordinate plus the guide to draw.
+    _snapAxis(lines, candidates) {
+        let best = null;
+        for (const line of lines) {
+            for (const candidate of candidates) {
+                const distance = Math.abs(candidate - line.value);
+                if (distance <= this._snapThreshold && (!best || distance < best.distance)) {
+                    best = { base: candidate - line.offset, guide: candidate, distance };
+                }
+            }
+        }
+        return best ? { base: best.base, guide: best.guide } : null;
+    }
+    _nearest(value, candidates) {
+        let best = null;
+        let bestDistance = this._snapThreshold;
+        for (const candidate of candidates) {
+            const distance = Math.abs(candidate - value);
+            if (distance <= bestDistance) {
+                best = candidate;
+                bestDistance = distance;
+            }
+        }
+        return best;
+    }
+    // The guides overlay is drawn imperatively — the drag loop runs outside
+    // Angular and repaints on every pointermove.
+    _renderGuides(guides) {
+        const host = this._guides?.nativeElement;
+        if (!host) {
+            return;
+        }
+        host.replaceChildren(...guides.map((guide) => {
+            const line = document.createElement('div');
+            line.className = `guide guide-${guide.orientation}`;
+            if (guide.orientation === 'v') {
+                line.style.left = `${guide.position * PX_PER_INCH}px`;
+            }
+            else {
+                line.style.top = `${guide.position * PX_PER_INCH}px`;
+            }
+            return line;
+        }));
+    }
+    _clearGuides() {
+        this._guides?.nativeElement?.replaceChildren();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", editDone: "editDone" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <div class=\"page-tabs\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <button\n            type=\"button\"\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            {{ pageLabel(page, index) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs .page-tab{border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 14px;font-size:12px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab.add-page{display:inline-flex;align-items:center;gap:2px;padding-left:8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i1$2.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-canvas', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatButton,
+                        MatIcon,
+                        MatTooltip,
+                        FsZoomPanModule,
+                        ReportComponentComponent,
+                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <div class=\"page-tabs\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <button\n            type=\"button\"\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            {{ pageLabel(page, index) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs .page-tab{border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 14px;font-size:12px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab.add-page{display:inline-flex;align-items:center;gap:2px;padding-left:8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
+        }], propDecorators: { report: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], componentSettings: [{
+                type: Output
+            }], reportChanged: [{
+                type: Output
+            }], editDone: [{
+                type: Output
+            }], zoomPan: [{
+                type: ViewChild,
+                args: [FsZoomPanComponent]
+            }], _viewport: [{
+                type: ViewChild,
+                args: ['viewport', { static: true }]
+            }], _guides: [{
+                type: ViewChild,
+                args: ['guides', { static: false }]
+            }] } });
+
+// Component settings, in tabs:
+//   Settings — title and content padding. Position/size are tuned by dragging
+//   on the canvas; height behaviour follows from the component type.
+//   Filters  — ONE listing of every filterable column on this component. Each
+//   row carries two toggles: show in the report bar and/or show on this
+//   component (both, either, or neither). The interface (date range vs value
+//   picker) is inferred from the data, never chosen. Each toggle persists
+//   immediately and refreshes the in-dialog list.
+//   SQL / Config — read-only diagnostics.
+class ComponentSettingsComponent {
+    component;
+    report;
+    selectedTab = 'settings';
+    title = '';
+    paddingTop = DEFAULT_COMPONENT_PADDING;
+    paddingRight = DEFAULT_COMPONENT_PADDING;
+    paddingBottom = DEFAULT_COMPONENT_PADDING;
+    paddingLeft = DEFAULT_COMPONENT_PADDING;
+    configJson = '';
+    // ---- filter management state ----
+    // One row per filterable column. The two booleans drive the toggles; we flip
+    // them optimistically on click (so the UI never blinks while the request is
+    // in flight) and reconcile from the server on reload.
+    rows = [];
+    columnsError = null;
+    // The raw inputs the rows are built from.
+    _filterableColumns = [];
+    _filters = [];
+    _groupsById = new Map();
+    _typeLabels = {
+        select: 'Pick values',
+        dateRange: 'Date range',
+        keyword: 'Search text',
+    };
+    // True once any filter mutation happened — the parent reloads the report so
+    // the canvas + report bar reflect the change.
+    _changed = false;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _reportData = inject(ReportData);
+    _message = inject(FsMessage);
+    _cdRef = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this.report = this._data.report;
+        this.component = this._data.component;
+        this.title = this.component.title ?? '';
+        const padding = this.component.config?.padding;
+        this.paddingTop = padding?.top ?? DEFAULT_COMPONENT_PADDING;
+        this.paddingRight = padding?.right ?? DEFAULT_COMPONENT_PADDING;
+        this.paddingBottom = padding?.bottom ?? DEFAULT_COMPONENT_PADDING;
+        this.paddingLeft = padding?.left ?? DEFAULT_COMPONENT_PADDING;
+        this.configJson = JSON.stringify(this.component.config ?? {}, null, 2);
+        this._seedFilters(this.report, this.component.id);
+        this._loadColumns();
+    }
+    get hasChanges() {
+        return this._changed;
+    }
+    // Human-friendly name for the inferred interface shown beside each column.
+    typeLabel(type) {
+        return this._typeLabels[type] ?? type;
+    }
+    save = () => {
+        const settings = {
+            title: this.title,
+            padding: {
+                top: this.paddingTop,
+                right: this.paddingRight,
+                bottom: this.paddingBottom,
+                left: this.paddingLeft,
+            },
+        };
+        return this._reportData.updateComponent(this.report.id, this.component.id, settings)
+            .pipe(tap(() => {
+            this._message.success('Component saved');
+            this._dialogRef.close(true);
+        }));
+    };
+    // Flip one exposure (report bar or this component) for a row. We update the
+    // row's boolean first — so the toggle stays put with no blink — then persist
+    // and reconcile on reload. Neither on → no filter (removed); either on → the
+    // filter exists at the combined level. The interface type is inferred
+    // server-side.
+    setExposure(row, target, on) {
+        row[target] = on;
+        const existing = this._filters.find((filter) => filter.filterColumn === row.column);
+        if (!row.report && !row.component) {
+            if (existing) {
+                this._run(this._reportData.deleteFilter(this.report.id, existing.id));
+            }
+            return;
+        }
+        const level = row.report && row.component
+            ? 'both'
+            : (row.report ? 'report' : 'component');
+        if (existing) {
+            this._run(this._reportData.setFilterGroupLevel(this.report.id, existing.filterGroupId, level));
+        }
+        else {
+            this._run(this._reportData.addFilter(this.report.id, this.component.id, {
+                filterColumn: row.column,
+                label: row.label,
+                level,
+            }));
+        }
+    }
+    // Run a filter mutation, then reload to reconcile the optimistic state.
+    _run(request) {
+        request.subscribe({
+            next: () => this._afterMutation(),
+            error: (error) => this._mutationError(error),
+        });
+    }
+    // Build the row view-model from the loaded columns + filters/groups. Each
+    // row's toggles reflect where its filter group is currently exposed.
+    _rebuildRows() {
+        this.rows = this._filterableColumns.map((column) => {
+            const filter = this._filters.find((candidate) => candidate.filterColumn === column.column);
+            const level = filter ? this._groupsById.get(filter.filterGroupId)?.level : undefined;
+            return {
+                column: column.column,
+                type: column.type,
+                label: filter?.label
+                    || this._groupsById.get(filter?.filterGroupId ?? -1)?.label
+                    || this._humanize(column.column),
+                report: level === 'report' || level === 'both',
+                component: level === 'component' || level === 'both',
+            };
+        });
+    }
+    // After any filter mutation: re-fetch the report so the dialog's filter list
+    // (and the parent canvas, on close) reflect the new groups/levels.
+    _afterMutation() {
+        this._changed = true;
+        this._reportData.get(this.report.id)
+            .subscribe((report) => {
+            this.report = report;
+            this._seedFilters(report, this.component.id);
+            this._cdRef.markForCheck();
+        });
+    }
+    _mutationError(error) {
+        this._message.error(error?.error?.message ?? error?.message ?? 'Filter operation failed');
+        // Re-seed from the server so the optimistic toggle snaps back to truth.
+        this._afterMutation();
+    }
+    _seedFilters(report, componentId) {
+        this._groupsById = new Map((report.filterGroups ?? []).map((group) => [group.id, group]));
+        const component = report.pages
+            .flatMap((page) => page.components)
+            .find((candidate) => candidate.id === componentId);
+        this._filters = component?.filters ?? [];
+        this._rebuildRows();
+    }
+    _loadColumns() {
+        this._reportData.componentColumns(this.report.id, this.component.id)
+            .subscribe({
+            next: (columns) => {
+                this._filterableColumns = columns ?? [];
+                this._rebuildRows();
+                this._cdRef.markForCheck();
+            },
+            error: (error) => {
+                this.columnsError = error?.error?.message ?? 'Could not read the component columns';
+                this._cdRef.markForCheck();
+            },
+        });
+    }
+    _humanize(column) {
+        return column
+            .replace(/[_\-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .replace(/\b\w/g, (character) => character.toUpperCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <div class=\"filter-list\">\n                <div class=\"filter-head\">\n                  <span class=\"filter-head-spacer\"></span>\n                  <span class=\"small\">\n                    Report bar\n                  </span>\n                  <span class=\"small\">\n                    This component\n                  </span>\n                </div>\n                @for (row of rows; track row.column) {\n                  <div class=\"filter-card\">\n                    <div class=\"filter-card-main\">\n                      <div class=\"filter-card-title\">\n                        {{ row.label }}\n                      </div>\n                      <div class=\"filter-card-meta\">\n                        {{ typeLabel(row.type) }}\n                      </div>\n                    </div>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.report\"\n                      (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show in the report bar\">\n                    </mat-slide-toggle>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.component\"\n                      (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show on this component\">\n                    </mat-slide-toggle>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-head{display:flex;align-items:center;gap:8px;padding:0 10px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#9aa5b1}.filter-head .filter-head-spacer{flex:1}.filter-head .filter-head-toggle{width:110px;flex:0 0 auto;text-align:center}.filter-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4e7eb;border-radius:8px;background:#fff}.filter-card .filter-card-main{flex:1;min-width:0}.filter-card .filter-card-main .filter-card-title{font-weight:600;font-size:13px;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-card .filter-card-main .filter-card-meta{font-size:12px;color:#7b8794}.filter-card .filter-card-main .filter-card-meta code{background:#f0f4f8;border-radius:3px;padding:0 4px}.filter-card .filter-toggle{width:110px;flex:0 0 auto;display:flex;justify-content:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i4.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i4.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        FsLabelModule,
+                        FsTabsModule,
+                        MatTabsModule,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatFormField,
+                        MatLabel,
+                        MatSuffix,
+                        MatInput,
+                        MatSlideToggle,
+                        MatTooltip,
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  type=\"number\"\n                  step=\"0.05\"\n                  min=\"0\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\">\n                <span matTextSuffix>\n                  in\n                </span>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <div class=\"filter-list\">\n                <div class=\"filter-head\">\n                  <span class=\"filter-head-spacer\"></span>\n                  <span class=\"small\">\n                    Report bar\n                  </span>\n                  <span class=\"small\">\n                    This component\n                  </span>\n                </div>\n                @for (row of rows; track row.column) {\n                  <div class=\"filter-card\">\n                    <div class=\"filter-card-main\">\n                      <div class=\"filter-card-title\">\n                        {{ row.label }}\n                      </div>\n                      <div class=\"filter-card-meta\">\n                        {{ typeLabel(row.type) }}\n                      </div>\n                    </div>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.report\"\n                      (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show in the report bar\">\n                    </mat-slide-toggle>\n                    <mat-slide-toggle\n                      class=\"filter-toggle\"\n                      [ngModel]=\"row.component\"\n                      (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      matTooltip=\"Show on this component\">\n                    </mat-slide-toggle>\n                  </div>\n                }\n              </div>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-head{display:flex;align-items:center;gap:8px;padding:0 10px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#9aa5b1}.filter-head .filter-head-spacer{flex:1}.filter-head .filter-head-toggle{width:110px;flex:0 0 auto;text-align:center}.filter-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4e7eb;border-radius:8px;background:#fff}.filter-card .filter-card-main{flex:1;min-width:0}.filter-card .filter-card-main .filter-card-title{font-weight:600;font-size:13px;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-card .filter-card-main .filter-card-meta{font-size:12px;color:#7b8794}.filter-card .filter-card-main .filter-card-meta code{background:#f0f4f8;border-radius:3px;padding:0 4px}.filter-card .filter-toggle{width:110px;flex:0 0 auto;display:flex;justify-content:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
+        }] });
+
+// Self-contained timezone picker for the report settings dialog. The IANA zone
+// list comes from the browser (Intl.supportedValuesOf), so the package carries no
+// dependency on any app timezone API. Defaults an empty value to the viewer's zone.
+class TimezoneSelectComponent {
+    placeholder = 'Timezone';
+    required = false;
+    disabled = false;
+    timezoneChange = new EventEmitter();
+    set timezone(value) {
+        if (value && value !== this._timezone) {
+            this._timezone = value;
+            this.timezoneChange.emit(this.timezone);
+        }
+    }
+    get timezone() {
+        return this._timezone;
+    }
+    guid = guid();
+    timezones = [];
+    _browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    _timezone = null;
+    ngOnInit() {
+        this.timezones = this._supportedTimezones();
+        if (!this.timezone) {
+            this.timezone = this._browserTimezone;
+        }
+    }
+    // The browser's IANA zone list where available; fall back to at least the
+    // viewer's own zone so the control is never empty.
+    _supportedTimezones() {
+        const intl = Intl;
+        return typeof intl.supportedValuesOf === 'function'
+            ? intl.supportedValuesOf('timeZone')
+            : [this._browserTimezone];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimezoneSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimezoneSelectComponent, isStandalone: true, selector: "fs-ai-report-timezone-select", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", timezone: "timezone" }, outputs: { timezoneChange: "timezoneChange" }, ngImport: i0, template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimezoneSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-ai-report-timezone-select', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatSelect,
+                        MatOption,
+                        FormsModule,
+                        FsFormModule,
+                    ], template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], timezoneChange: [{
+                type: Output
+            }], timezone: [{
+                type: Input
+            }] } });
+
+// Report settings, in two tabs:
+//   Settings — name + page setup (size, orientation, layout mode). The layout
+//   mode is the big one: Freeform (position anything anywhere) vs Flow
+//   (components flow into rows by width %).
+//   Styles   — the report's typographic styles. Sizes are in POINTS so they
+//   map 1:1 to PDF/PowerPoint; we start with the Heading size.
+class ReportSettingsComponent {
+    selectedTab = 'settings';
+    name = '';
+    pageSize = 'widescreen';
+    pageOrientation = 'landscape';
+    layout = 'freeform';
+    // Empty until the report has one; app-timezone-select then defaults it to the
+    // viewer's browser zone (which Save persists, making the report's zone explicit).
+    timezone = '';
+    headingSize = DEFAULT_HEADING_SIZE;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _reportData = inject(ReportData);
+    _message = inject(FsMessage);
+    _prompt = inject(FsPrompt);
+    _destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        const report = this._data.report;
+        this.name = report.name;
+        this.pageSize = report.pageSize;
+        this.pageOrientation = report.pageOrientation;
+        this.layout = report.layout ?? 'freeform';
+        this.timezone = report.timezone ?? '';
+        this.headingSize = report.config?.styles?.heading?.size ?? DEFAULT_HEADING_SIZE;
+    }
+    // Confirm and delete here, while the dialog is still open, then close with
+    // a `deleted` result. The page reacts to the result; it no longer owns the
+    // prompt or the API call.
+    delete() {
+        this._prompt.confirm({
+            title: 'Delete Report',
+            template: `Delete "${this._data.report.name}"? This cannot be undone.`,
+        })
+            .pipe(switchMap(() => this._reportData.delete(this._data.report.id)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success('Report deleted');
+            this._dialogRef.close({ action: 'deleted' });
+        });
+    }
+    save = () => {
+        return this._reportData.update(this._data.report.id, {
+            name: this.name,
+            pageSize: this.pageSize,
+            pageOrientation: this.pageOrientation,
+            layout: this.layout,
+            timezone: this.timezone,
+            styles: { heading: { size: this.headingSize } },
+        })
+            .pipe(tap(() => {
+            this._message.success('Report settings saved');
+            this._dialogRef.close({ action: 'saved' });
+        }));
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Page Size\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageSize\"\n                  name=\"pageSize\">\n                <mat-option value=\"widescreen\">\n                  Widescreen (13.33\" \u00D7 7.5\")\n                </mat-option>\n                <mat-option value=\"letter\">\n                  Letter (11\" \u00D7 8.5\")\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Orientation\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageOrientation\"\n                  name=\"pageOrientation\">\n                <mat-option value=\"landscape\">\n                  Landscape\n                </mat-option>\n                <mat-option value=\"portrait\">\n                  Portrait\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$1.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$1.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$1.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i4.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i4.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        FsTabsModule,
+                        MatTabsModule,
+                        MatButton,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatFormField,
+                        MatLabel,
+                        MatHint,
+                        MatSuffix,
+                        MatInput,
+                        MatSelect,
+                        MatOption$1,
+                        TimezoneSelectComponent,
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Page Size\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageSize\"\n                  name=\"pageSize\">\n                <mat-option value=\"widescreen\">\n                  Widescreen (13.33\" \u00D7 7.5\")\n                </mat-option>\n                <mat-option value=\"letter\">\n                  Letter (11\" \u00D7 8.5\")\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Orientation\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"pageOrientation\"\n                  name=\"pageOrientation\">\n                <mat-option value=\"landscape\">\n                  Landscape\n                </mat-option>\n                <mat-option value=\"portrait\">\n                  Portrait\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"] }]
+        }] });
+
+// The assembled report structure returned by GET /api/reports/:id — composed
+// server-side from the normalized tables (reports → report_pages →
+// report_components + report_filters, plus report_filter_groups). All keys are
+// camelCase; component `config` is the standard format the renderer maps to
+// ECharts options / FsList config.
+// The runtime Frequency control's choices — re-buckets every time-series chart
+// at view time, overriding each chart's authored granularity. 'year' reads as
+// "Annually" in the control.
+const FREQUENCY_OPTIONS = [
+    { value: 'day', name: 'Day' },
+    { value: 'week', name: 'Week' },
+    { value: 'month', name: 'Month' },
+    { value: 'quarter', name: 'Quarter' },
+    { value: 'year', name: 'Annually' },
+];
+
+// Rows fetched for a list component's export table — enough to fill a
+// slide/page table; the cap note covers the rest.
+const LIST_EXPORT_ROWS = 100;
+// Gathers everything an export needs: every component's data across ALL pages
+// (the canvas only renders the active page, so exports can't scrape the
+// screen), fetched fresh with the viewer's current filter state. One failed
+// component degrades to a note in the deck, never a failed export.
+class ReportExportCollectorService {
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    collect(report) {
+        const requests = [];
+        const slots = [];
+        report.pages.forEach((page, pageIndex) => {
+            for (const component of page.components) {
+                slots.push({ pageIndex });
+                requests.push(this._componentData(report, component));
+            }
+        });
+        const all$ = requests.length ? forkJoin(requests) : of([]);
+        return all$
+            .pipe(map$1((collected) => {
+            const pages = report.pages.map((page) => ({ page, components: [] }));
+            collected.forEach((item, index) => {
+                pages[slots[index].pageIndex].components.push(item);
+            });
+            return {
+                report,
+                pages,
+                filterSummary: this._filterSummary(report),
+            };
+        }));
+    }
+    _componentData(report, component) {
+        const filters = this._filterState.resolveForComponent(component);
+        // A time-series chart carries the viewer's Frequency override so the export
+        // re-buckets exactly as the screen does; lists carry their export paging.
+        const frequency = this._filterState.frequency();
+        const isTimeSeries = component.type === 'chart' && component.config?.xAxis?.kind === 'time';
+        const state = component.type === 'list'
+            ? { page: 1, pageSize: LIST_EXPORT_ROWS }
+            : (isTimeSeries && frequency ? { frequency } : {});
+        return this._reportData.componentData(report.id, component.id, filters, state)
+            .pipe(map$1((data) => ({ component, data })), catchError(() => of({ component, data: null })));
+    }
+    // "Report Period: Jun 12, 2025 – Jun 12, 2026", "Organization: A, B" — one
+    // line per filter group that has an active session value.
+    _filterSummary(report) {
+        const lines = [];
+        for (const group of report.filterGroups ?? []) {
+            const value = this._filterState.value(group.id);
+            if (!value) {
+                continue;
+            }
+            const label = group.label || 'Filter';
+            if (value.start || value.end) {
+                lines.push(`${label}: ${this._date(value.start)} – ${this._date(value.end)}`);
+            }
+            else if (value.values?.length) {
+                lines.push(`${label}: ${value.values.map((item) => String(item)).join(', ')}`);
+            }
+            else if (value.value?.trim()) {
+                lines.push(`${label}: "${value.value.trim()}"`);
+            }
+        }
+        const frequency = this._filterState.frequency();
+        if (frequency) {
+            const option = FREQUENCY_OPTIONS.find((item) => item.value === frequency);
+            lines.push(`Frequency: ${option?.name ?? frequency}`);
+        }
+        return lines;
+    }
+    _date(value) {
+        if (!value) {
+            return '…';
+        }
+        const date = value instanceof Date ? value : new Date(value);
+        return Number.isNaN(date.getTime()) ? String(value) : format(date, 'MMM d, yyyy');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportExportCollectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportExportCollectorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportExportCollectorService, decorators: [{
+            type: Injectable
+        }] });
+
+// Renders a chart to a PNG data URL WITHOUT it being on screen — the PDF
+// export needs every page's charts, but the canvas only renders the active
+// page. ECharts happily initializes against a detached element when given
+// explicit pixel dimensions; animations are disabled so getDataURL is
+// complete synchronously after setOption.
+async function renderChartImage(component, data, width, height, pixelRatio = 3) {
+    // The same tree-shaken echarts build + 'report' theme the live canvas uses.
+    const echarts = (await import('./firestitch-report-echarts-BxYnpz7n.mjs')).default;
+    const host = document.createElement('div');
+    host.style.width = `${width}px`;
+    host.style.height = `${height}px`;
+    const chart = echarts.init(host, 'report', {
+        renderer: 'canvas',
+        width,
+        height,
+    });
+    try {
+        chart.setOption({
+            ...buildChartOption(component, data),
+            animation: false,
+        });
+        return chart.getDataURL({
+            type: 'png',
+            pixelRatio,
+            backgroundColor: '#ffffff',
+        });
+    }
+    finally {
+        chart.dispose();
+    }
+}
+
+// Inches → points (the PDF unit).
+const PT = 72;
+// Component title strip height, points.
+const TITLE_H$1 = 18;
+// Approximate table row height, points — drives the rows-that-fit cap.
+const TABLE_ROW_H$1 = 16;
+// Builds the PDF client-side with jspdf. The report's unit is inches and PDFs
+// are points at exactly 72/inch, so each report page becomes one PDF page of
+// the exact physical size and components land at their precise positions.
+// Charts are rendered through an offscreen ECharts instance at 3× pixel
+// ratio — pixel-identical to the screen, crisp at print size — and tables are
+// drawn with jspdf-autotable. Both libraries load lazily into their own chunks.
+class ReportPdfService {
+    async export(collected) {
+        const { jsPDF } = await import('jspdf');
+        const autoTable = (await import('jspdf-autotable')).default;
+        const report = collected.report;
+        const pageW = report.pageWidth * PT;
+        const pageH = report.pageHeight * PT;
+        const doc = new jsPDF({
+            orientation: pageW >= pageH ? 'landscape' : 'portrait',
+            unit: 'pt',
+            format: [pageW, pageH],
+        });
+        this._titlePage(doc, collected, pageW, pageH);
+        for (const collectedPage of collected.pages) {
+            doc.addPage([pageW, pageH], pageW >= pageH ? 'landscape' : 'portrait');
+            const geometry = pageGeometry(report, collectedPage.page);
+            for (const item of collectedPage.components) {
+                await this._renderComponent(doc, autoTable, item, geometry.get(item.component.id));
+            }
+        }
+        doc.save(`${this._slug(report.name)}.pdf`);
+    }
+    _titlePage(doc, collected, pageW, pageH) {
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(28);
+        doc.setTextColor('#1f2933');
+        doc.text(collected.report.name, 40, pageH * 0.35);
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(11);
+        doc.setTextColor('#52606d');
+        const lines = [
+            format(new Date(), 'MMMM d, yyyy'),
+            ...collected.filterSummary,
+        ];
+        doc.text(lines, 40, pageH * 0.35 + 26);
+    }
+    async _renderComponent(doc, autoTable, item, geometry) {
+        const component = item.component;
+        // Geometry arrives in inches (flow layout pre-resolved); the PDF draws in
+        // points.
+        const inches = geometry ?? component;
+        const x = inches.x * PT;
+        const y = inches.y * PT;
+        const w = inches.w * PT;
+        const h = inches.h * PT;
+        if (component.title) {
+            doc.setFont('helvetica', 'bold');
+            doc.setFontSize(9);
+            doc.setTextColor('#1f2933');
+            doc.text(component.title, x, y + 10, { maxWidth: w });
+        }
+        const bodyY = y + TITLE_H$1;
+        const bodyH = Math.max(20, h - TITLE_H$1);
+        if (!item.data || !item.data.rows?.length) {
+            doc.setFont('helvetica', 'italic');
+            doc.setFontSize(9);
+            doc.setTextColor('#7b8794');
+            doc.text(item.data ? 'No data' : 'Data unavailable', x + w / 2, bodyY + bodyH / 2, { align: 'center' });
+            return;
+        }
+        switch (component.type) {
+            case 'chart': {
+                const image = await renderChartImage(component, item.data, w, bodyH);
+                doc.addImage(image, 'PNG', x, bodyY, w, bodyH);
+                break;
+            }
+            case 'list':
+                this._renderTable(doc, autoTable, component, item.data, x, bodyY, w, bodyH);
+                break;
+            case 'kpi':
+                this._renderKpi(doc, component, item.data, x, bodyY, w, bodyH);
+                break;
+        }
+    }
+    _renderTable(doc, autoTable, component, data, x, y, w, h) {
+        const config = component.config;
+        const columns = config.columns?.length
+            ? config.columns
+            : data.columns.map((column) => ({ column, label: column }));
+        const cap = Math.max(2, Math.floor(h / TABLE_ROW_H$1) - 1);
+        const rows = data.rows.slice(0, cap);
+        const remaining = (data.paging?.total ?? data.rows.length) - rows.length;
+        const body = rows.map((row) => columns.map((column) => this._cell(row[column.column], column.format)));
+        if (remaining > 0) {
+            body.push([`… ${remaining} more row(s) — use the component's CSV export for the full dataset`]);
+        }
+        autoTable(doc, {
+            head: [columns.map((column) => column.label || column.column)],
+            body,
+            startY: y,
+            margin: { left: x },
+            tableWidth: w,
+            styles: { fontSize: 8, cellPadding: 3, textColor: '#1f2933' },
+            headStyles: { fillColor: '#4e79a7', textColor: '#ffffff', fontStyle: 'bold' },
+            alternateRowStyles: { fillColor: '#f5f7fa' },
+            theme: 'grid',
+        });
+    }
+    _renderKpi(doc, component, data, x, y, w, h) {
+        const config = component.config;
+        const row = data.rows[0] ?? {};
+        const column = config.measure?.column ?? Object.keys(row)[0];
+        const value = formatMeasureValue(row[column], config.measure?.format);
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(26);
+        doc.setTextColor('#1f2933');
+        doc.text(value, x + w / 2, y + h / 2, { align: 'center' });
+        if (config.measure?.label) {
+            doc.setFont('helvetica', 'normal');
+            doc.setFontSize(9);
+            doc.setTextColor('#7b8794');
+            doc.text(config.measure.label, x + w / 2, y + h / 2 + 16, { align: 'center' });
+        }
+    }
+    _cell(value, columnFormat) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (columnFormat === 'date') {
+            const date = new Date(String(value));
+            return Number.isNaN(date.getTime()) ? String(value) : format(date, 'MMM d, yyyy');
+        }
+        if (columnFormat === 'number') {
+            return formatMeasureValue(value, 'number');
+        }
+        return String(value);
+    }
+    _slug(name) {
+        return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportPdfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportPdfService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportPdfService, decorators: [{
+            type: Injectable
+        }] });
+
+// The report chart palette — one definition shared by the ECharts theme (on
+// screen), the PowerPoint export's native chart colors, and the PDF export,
+// so a series keeps its color across every medium.
+const REPORT_CHART_COLORS = [
+    '4e79a7', 'f28e2b', 'e15759', '76b7b2', '59a14f',
+    'edc948', 'b07aa1', 'ff9da7', '9c755f', 'bab0ac',
+];
+// CSS-hex form for ECharts.
+const REPORT_CHART_COLORS_CSS = REPORT_CHART_COLORS.map((color) => `#${color}`);
+
+// Component title strip height on the slide, inches.
+const TITLE_H = 0.28;
+// Approximate table row height, inches — drives the rows-that-fit cap.
+const TABLE_ROW_H = 0.26;
+// Our legend positions mapped to pptxgenjs's single-letter legendPos codes.
+// 'hidden' has no slot — showLegend is turned off instead — so it falls back
+// to top.
+const PPTX_LEGEND_POS = {
+    top: 't',
+    bottom: 'b',
+    left: 'l',
+    right: 'r',
+    hidden: 't',
+};
+// Builds the PowerPoint deck client-side with pptxgenjs. Charts are NATIVE
+// editable PowerPoint charts (slide.addChart writes real chart XML with an
+// embedded data workbook — "Edit Data" works), never images. The page IS the
+// slide: the report's unit is inches — exactly PowerPoint's unit — so the
+// layout and every component position transfer with no conversion at all.
+// pptxgenjs is loaded lazily so it lives in its own webpack chunk.
+class ReportPptxService {
+    async export(collected) {
+        const PptxGenJS = (await import('pptxgenjs')).default;
+        const report = collected.report;
+        const pageW = report.pageWidth;
+        const pageH = report.pageHeight;
+        const pptx = new PptxGenJS();
+        pptx.defineLayout({ name: 'REPORT', width: pageW, height: pageH });
+        pptx.layout = 'REPORT';
+        pptx.title = report.name;
+        this._titleSlide(pptx, collected, pageW, pageH);
+        for (const collectedPage of collected.pages) {
+            const slide = pptx.addSlide();
+            const geometry = pageGeometry(report, collectedPage.page);
+            for (const item of collectedPage.components) {
+                this._renderComponent(pptx, slide, item, geometry.get(item.component.id));
+            }
+        }
+        await pptx.writeFile({ fileName: `${this._slug(report.name)}.pptx` });
+    }
+    _titleSlide(pptx, collected, pageW, pageH) {
+        const slide = pptx.addSlide();
+        slide.addText(collected.report.name, {
+            x: 0.5, y: pageH * 0.3, w: pageW - 1, h: 0.8,
+            fontSize: 30, bold: true, color: '1F2933',
+        });
+        const lines = [
+            format(new Date(), 'MMMM d, yyyy'),
+            ...collected.filterSummary,
+        ];
+        slide.addText(lines.join('\n'), {
+            x: 0.5, y: pageH * 0.3 + 0.9, w: pageW - 1, h: Math.max(0.4, lines.length * 0.25),
+            fontSize: 12, color: '52606D',
+        });
+    }
+    _renderComponent(pptx, slide, item, geometry) {
+        const component = item.component;
+        // Geometry is in inches — PowerPoint's native unit (flow layout arrives
+        // pre-resolved into rows by pageGeometry).
+        const { x, y, w, h } = geometry ?? component;
+        if (component.title) {
+            slide.addText(component.title, {
+                x, y, w, h: TITLE_H,
+                fontSize: 10, bold: true, color: '1F2933', valign: 'top',
+            });
+        }
+        const bodyY = y + TITLE_H;
+        const bodyH = Math.max(0.3, h - TITLE_H);
+        if (!item.data || !item.data.rows?.length) {
+            slide.addText(item.data ? 'No data' : 'Data unavailable', {
+                x, y: bodyY, w, h: bodyH,
+                fontSize: 10, italic: true, color: '7B8794', align: 'center', valign: 'middle',
+            });
+            return;
+        }
+        switch (component.type) {
+            case 'chart':
+                this._renderChart(pptx, slide, component, item.data, x, bodyY, w, bodyH);
+                break;
+            case 'list':
+                this._renderTable(slide, component, item.data, x, bodyY, w, bodyH);
+                break;
+            case 'kpi':
+                this._renderKpi(slide, component, item.data, x, bodyY, w, bodyH);
+                break;
+        }
+    }
+    _renderChart(pptx, slide, component, data, x, y, w, h) {
+        const config = component.config;
+        const chartType = config.chartType ?? 'bar';
+        const extracted = extractChartSeries(component, data);
+        const typeMap = {
+            bar: pptx.ChartType.bar,
+            line: pptx.ChartType.line,
+            area: pptx.ChartType.area,
+            pie: pptx.ChartType.pie,
+            donut: pptx.ChartType.doughnut,
+        };
+        const pie = chartType === 'pie' || chartType === 'donut';
+        const colorBy = isColorBy(config);
+        // Compact period labels match the on-screen axis (year only when the data
+        // spans years); PowerPoint can't do a styled second line, so it's inline.
+        const granularity = data.granularity;
+        const labels = granularity
+            ? extracted.categories.map((category) => formatPeriodLabel(category, granularity, spansMultipleYears(extracted.categories)))
+            : extracted.categories;
+        // Native chart data: one entry per series (pie charts take exactly one).
+        // colorBy emits one series per category for the on-screen overlap; PowerPoint
+        // has no equivalent overlap, so collapse them back into a single series (each
+        // category's value sits at its own slot) — one full-width bar per category —
+        // rather than letting PowerPoint cluster them into slivers.
+        const chartData = colorBy
+            ? [{
+                    name: config.measures?.[0]?.label ?? config.colorBy?.label ?? '',
+                    labels,
+                    values: extracted.categories.map((_, index) => extracted.series[index]?.values[index] ?? 0),
+                }]
+            : (pie ? extracted.series.slice(0, 1) : extracted.series)
+                .map((series) => ({
+                name: series.name,
+                labels,
+                values: series.values.map((value) => value ?? 0),
+            }));
+        // A single-series colorBy chart can't carry a per-category legend in a native
+        // PowerPoint bar chart; the category axis labels identify each bar instead.
+        const legendPosition = colorBy
+            ? 'hidden'
+            : resolveLegendPosition(config, extracted.series.length);
+        slide.addChart(typeMap[chartType], chartData, {
+            x, y, w, h,
+            chartColors: REPORT_CHART_COLORS,
+            showLegend: legendPosition !== 'hidden',
+            legendPos: PPTX_LEGEND_POS[legendPosition],
+            legendFontSize: 9,
+            barDir: config.orientation === 'horizontal' ? 'bar' : 'col',
+            barGrouping: config.stacked ? 'stacked' : 'clustered',
+            holeSize: chartType === 'donut' ? 55 : undefined,
+            catAxisLabelFontSize: 9,
+            valAxisLabelFontSize: 9,
+            showCatAxisTitle: !!config.xAxis?.label,
+            catAxisTitle: config.xAxis?.label,
+            catAxisTitleFontSize: 10,
+            showValAxisTitle: !!config.measures?.[0]?.label && !pie,
+            valAxisTitle: config.measures?.[0]?.label,
+            valAxisTitleFontSize: 10,
+            dataBorder: { pt: 0, color: 'FFFFFF' },
+        });
+    }
+    _renderTable(slide, component, data, x, y, w, h) {
+        const config = component.config;
+        const columns = config.columns?.length
+            ? config.columns
+            : data.columns.map((column) => ({ column, label: column }));
+        const cap = Math.max(2, Math.floor(h / TABLE_ROW_H) - 1);
+        const rows = data.rows.slice(0, cap);
+        const remaining = (data.paging?.total ?? data.rows.length) - rows.length;
+        const header = columns.map((column) => ({
+            text: column.label || column.column,
+            options: { bold: true, color: 'FFFFFF', fill: { color: '4E79A7' } },
+        }));
+        const body = rows.map((row) => columns.map((column) => ({
+            text: this._cell(row[column.column], column.format),
+            options: {},
+        })));
+        if (remaining > 0) {
+            body.push([{
+                    text: `… ${remaining} more row(s) — use the component's CSV export for the full dataset`,
+                    options: { colspan: columns.length, italic: true, color: '7B8794' },
+                }]);
+        }
+        slide.addTable([header, ...body], {
+            x, y, w,
+            fontSize: 9,
+            color: '1F2933',
+            border: { type: 'solid', pt: 0.5, color: 'E4E7EB' },
+            autoPage: false,
+            rowH: TABLE_ROW_H,
+            valign: 'middle',
+        });
+    }
+    _renderKpi(slide, component, data, x, y, w, h) {
+        const config = component.config;
+        const row = data.rows[0] ?? {};
+        const column = config.measure?.column ?? Object.keys(row)[0];
+        const value = formatMeasureValue(row[column], config.measure?.format);
+        slide.addText([
+            { text: value, options: { fontSize: 28, bold: true, color: '1F2933', breakLine: true } },
+            { text: config.measure?.label ?? '', options: { fontSize: 10, color: '7B8794' } },
+        ], {
+            x, y, w, h,
+            align: 'center',
+            valign: 'middle',
+        });
+    }
+    _cell(value, columnFormat) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (columnFormat === 'date') {
+            const date = new Date(String(value));
+            return Number.isNaN(date.getTime()) ? String(value) : format(date, 'MMM d, yyyy');
+        }
+        if (columnFormat === 'number') {
+            return formatMeasureValue(value, 'number');
+        }
+        return String(value);
+    }
+    _slug(name) {
+        return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportPptxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportPptxService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportPptxService, decorators: [{
+            type: Injectable
+        }] });
+
+// Holds the report list in memory so the picker doesn't hit the API on every
+// focus. Loaded once when the page opens; create/rename/delete keep the cache
+// in sync.
+class ReportService {
+    _reportData = inject(ReportData);
+    _reports$ = new BehaviorSubject([]);
+    get reports$() {
+        return this._reports$.asObservable();
+    }
+    load() {
+        return this._reportData.reports()
+            .pipe(tap((reports) => this._reports$.next(reports ?? [])));
+    }
+    // Filters the cached list locally — what the autocomplete's [fetch] calls.
+    filter(keyword) {
+        const term = (keyword ?? '').trim().toLowerCase();
+        const reports = this._reports$.getValue();
+        if (!term) {
+            return of(reports);
+        }
+        return of(reports.filter((report) => report.name.toLowerCase().includes(term)));
+    }
+    create(name) {
+        return this._reportData.create(name)
+            .pipe(tap((report) => {
+            this._reports$.next([...this._reports$.getValue(), report]);
+        }));
+    }
+    rename(reportId, name) {
+        return this._reportData.rename(reportId, name)
+            .pipe(tap((report) => {
+            this._reports$.next(this._reports$.getValue()
+                .map((existing) => (existing.id === report.id ? report : existing)));
+        }));
+    }
+    delete(reportId) {
+        return this._reportData.delete(reportId)
+            .pipe(tap(() => {
+            this._reports$.next(this._reports$.getValue().filter((report) => report.id !== reportId));
+        }), map(() => undefined));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// fs-filter query key for the runtime Frequency control (a render-layer bucket
+// override, not a filter group — so it's read straight off the query).
+const FREQUENCY_ITEM = 'frequency';
+// The Reports page: AI chat on the left, the report canvas on the right —
+// a split-pane layout; the viewer is our own canvas (no iframe, no embed URLs).
+// The chat is always scoped to the selected report; its id rides on every
+// turn via [requestData].
+class ReportComponent {
+    // The single report the viewer and chat are focused on.
+    selected = null;
+    report = null;
+    loadingReports = true;
+    editMode = false;
+    // The report toolbar IS an fs-filter: the picker rides in its heading
+    // template, the menu becomes its actions, and report-level filter groups
+    // become its items. Rebuilt whenever the loaded report (and thus its groups)
+    // changes; the menu's show-guards keep working while no report is selected.
+    reportFilterConfig;
+    _split;
+    _chatPanel;
+    introMessage = {
+        text: '',
+    };
+    _reportData = inject(ReportData);
+    _reportService = inject(ReportService);
+    _filterState = inject(ReportFilterStateService);
+    _exportCollector = inject(ReportExportCollectorService);
+    _pptxService = inject(ReportPptxService);
+    _pdfService = inject(ReportPdfService);
+    _process = inject(FsProcess);
+    _prompt = inject(FsPrompt);
+    _dialog = inject(MatDialog);
+    _destroyRef = inject(DestroyRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _zone = inject(NgZone);
+    constructor() {
+        this._buildReportConfig();
+        this._reportService.load()
+            .pipe(finalize(() => {
+            this.loadingReports = false;
+            this._cdRef.markForCheck();
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe({ error: () => undefined });
+    }
+    fetchReports = (keyword) => {
+        return this._reportService.filter(keyword);
+    };
+    reportChange(report) {
+        this.report = null;
+        this.editMode = false;
+        this._buildReportConfig();
+        if (report) {
+            this._loadReport(report.id);
+        }
+    }
+    createReport() {
+        this._prompt.input({
+            title: 'Create Report',
+            label: 'Name',
+            commitLabel: 'Create',
+            required: true,
+        })
+            .pipe(switchMap((name) => this._reportService.create(name)), takeUntilDestroyed(this._destroyRef))
+            .subscribe((report) => {
+            this.selected = report;
+            this._cdRef.markForCheck();
+            this._loadReport(report.id);
+        });
+    }
+    toggleEditMode() {
+        this.editMode = !this.editMode;
+    }
+    // Report settings — name, page size, orientation, layout mode. The picker
+    // list and structure both reload on save (a layout switch re-renders the
+    // whole canvas).
+    reportSettings() {
+        if (!this.report) {
+            return;
+        }
+        this._dialog.open(ReportSettingsComponent, {
+            data: { report: this.report },
+            width: '460px',
+        })
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((result) => {
+            // The dialog confirms + performs the delete itself; we just react to
+            // what it reports back.
+            if (result?.action === 'deleted') {
+                this.selected = null;
+                this.report = null;
+                this._buildReportConfig();
+                this._cdRef.markForCheck();
+                return;
+            }
+            if (result?.action === 'saved' && this.selected) {
+                this._loadReport(this.selected.id);
+                this._refreshReportName(this.selected.id);
+            }
+        });
+    }
+    // Component settings — title, exact geometry, and the diagnostic views
+    // (SQL, config, filter wiring).
+    componentSettings(component) {
+        if (!this.report) {
+            return;
+        }
+        this._dialog.open(ComponentSettingsComponent, {
+            data: { report: this.report, component },
+            width: '640px',
+        })
+            .afterClosed()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            // Always reload: filter add/remove/level changes persist immediately
+            // inside the dialog (no "save"), so the canvas + report bar must
+            // refresh however the dialog was closed.
+            if (this.selected) {
+                this._loadReport(this.selected.id);
+            }
+        });
+    }
+    // The canvas changed the report's structure (added a page) — re-fetch so the
+    // new page renders; the canvas lands the view on it.
+    onCanvasReportChanged() {
+        if (this.selected) {
+            this._loadReport(this.selected.id);
+        }
+    }
+    // Export the report to PowerPoint, entirely client-side: every component's
+    // data is fetched fresh with the current filter state (all pages, not just
+    // the visible one), then pptxgenjs builds a deck of NATIVE editable charts —
+    // page = slide, positions 1:1. The dock shows progress until the file saves.
+    exportPowerpoint() {
+        if (!this.report) {
+            return;
+        }
+        const report = this.report;
+        this._process.run('Exporting PowerPoint', this._exportCollector.collect(report)
+            .pipe(switchMap((collected) => from(this._pptxService.export(collected)))));
+    }
+    // Export to PDF, entirely client-side: same collection pass, charts rendered
+    // through an offscreen ECharts instance at 3× pixel ratio (pixel-identical
+    // to the screen), tables via jspdf-autotable — page = PDF page.
+    exportPdf() {
+        if (!this.report) {
+            return;
+        }
+        const report = this.report;
+        this._process.run('Exporting PDF', this._exportCollector.collect(report)
+            .pipe(switchMap((collected) => from(this._pdfService.export(collected)))));
+    }
+    // React to each chat turn (fs-chat handles the request + persistence); we
+    // only care about the report side effects this context's backend flags.
+    onChatResponse(response) {
+        // The agent changed the report's structure — re-fetch it. Session filter
+        // values survive (the filter-state service keeps values for groups that
+        // still exist).
+        if (response.reportChanged && this.selected) {
+            this._loadReport(this.selected.id);
+        }
+        // A rename changes nothing structural — refresh the picker chip label.
+        if (response.reportRenamed && this.selected) {
+            this._refreshReportName(this.selected.id);
+        }
+    }
+    // Drag the divider between the chat and canvas panes (pointer-capture loop
+    // outside Angular).
+    onResizeStart(event) {
+        event.preventDefault();
+        const handle = event.target;
+        handle.setPointerCapture(event.pointerId);
+        this._split.nativeElement.classList.add('resizing');
+        this._zone.runOutsideAngular(() => {
+            const move = (e) => this._resizeTo(e.clientX);
+            const end = () => {
+                handle.releasePointerCapture(event.pointerId);
+                handle.removeEventListener('pointermove', move);
+                handle.removeEventListener('pointerup', end);
+                handle.removeEventListener('pointercancel', end);
+                this._split.nativeElement.classList.remove('resizing');
+            };
+            handle.addEventListener('pointermove', move);
+            handle.addEventListener('pointerup', end);
+            handle.addEventListener('pointercancel', end);
+        });
+    }
+    _resizeTo(clientX) {
+        const rect = this._split.nativeElement.getBoundingClientRect();
+        if (rect.width === 0) {
+            return;
+        }
+        const ratio = (clientX - rect.left) / rect.width;
+        const clamped = Math.min(0.8, Math.max(0.2, ratio));
+        this._chatPanel.nativeElement.style.flexBasis = `${clamped * 100}%`;
+    }
+    _loadReport(reportId) {
+        this._reportData.get(reportId)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((report) => {
+            this.report = report;
+            this._filterState.init(report);
+            this._buildReportConfig();
+            this._cdRef.markForCheck();
+        });
+    }
+    // Report-level filter groups in their saved order — the ones that render in
+    // the toolbar (component-level groups render on their components).
+    _reportGroups() {
+        return (this.report?.filterGroups ?? [])
+            .filter((group) => group.level === 'report' || group.level === 'both')
+            .sort((a, b) => a.order - b.order);
+    }
+    // Whether the loaded report has any report-level filters OR a time-series
+    // chart (which earns the runtime Frequency control) — gates the toolbar
+    // fs-filter so it isn't rendered (taking space) when there's nothing to show.
+    get reportHasFilters() {
+        return this._reportGroups().length > 0 || this._hasTimeSeriesChart();
+    }
+    // fs-filter reads its config only once (at init) — re-binding does nothing.
+    // The template keys the toolbar fs-filter on this signature so it's recreated
+    // (and re-reads the rebuilt config) whenever the report-level filter set
+    // changes, e.g. after the component settings dialog adds/moves a filter.
+    get reportFilterKey() {
+        return [
+            ...this._reportGroups().map((group) => `${group.id}:${group.level}:${group.label}`),
+            this._hasTimeSeriesChart() ? 'frequency' : '',
+        ].join('|');
+    }
+    // (Re)build the toolbar fs-filter config — report-level filter items, plus the
+    // runtime Frequency control when the report has a time-series chart. The
+    // report's actions live in the fs-menu beside the picker, not here. Only
+    // built/used once a report is loaded (the template gates it on `report`).
+    _buildReportConfig() {
+        const reportId = this.report?.id ?? null;
+        const items = reportId
+            ? this._reportGroups().map((group) => filterItemForGroup(group, this._reportData, reportId, this._filterState.value(group.id)))
+            : [];
+        if (reportId && this._hasTimeSeriesChart()) {
+            items.push({
+                name: FREQUENCY_ITEM,
+                type: ItemType.Select,
+                label: 'Frequency',
+                multiple: false,
+                values: () => FREQUENCY_OPTIONS,
+                default: this._filterState.frequency() ?? undefined,
+            });
+        }
+        this.reportFilterConfig = {
+            // Never touch the URL or persist filter state — report filters are
+            // session-only, owned by ReportFilterStateService.
+            queryParam: false,
+            persist: false,
+            items,
+            change: (query) => {
+                for (const { groupId, value } of groupValuesFromQuery(query ?? {}, this._reportGroups())) {
+                    this._filterState.setValue(groupId, value);
+                }
+                // Frequency isn't a filter group — it's a render-layer bucket override.
+                this._filterState.setFrequency(query?.[FREQUENCY_ITEM] || null);
+            },
+        };
+    }
+    // The report has at least one time-series chart (a chart whose x-axis is a
+    // time axis) — the only kind the Frequency control affects.
+    _hasTimeSeriesChart() {
+        return (this.report?.pages ?? []).some((page) => page.components.some((component) => component.type === 'chart' && component.config?.xAxis?.kind === 'time'));
+    }
+    _refreshReportName(reportId) {
+        this._reportService.load()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((reports) => {
+            const renamed = reports.find((report) => report.id === reportId);
+            if (renamed) {
+                this.selected = renamed;
+                if (this.report) {
+                    this.report = { ...this.report, name: renamed.name };
+                }
+                this._cdRef.markForCheck();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponent, isStandalone: true, selector: "ng-component", providers: [
+            // Session filter state is per-open-report-page, not app-global; the export
+            // services resolve filters through it, so they live at the same level.
+            ReportFilterStateService,
+            ReportExportCollectorService,
+            ReportPptxService,
+            ReportPdfService,
+            // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
+            // this route's chunk.
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BxYnpz7n.mjs').then((module) => module.default) }),
+        ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\">\n            <mat-icon>\n              {{ editMode ? 'lock' : 'open_with' }}\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$2.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$2.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i4$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i4$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage"], outputs: ["response"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode"], outputs: ["componentSettings", "reportChanged", "editDone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [
+                        // Session filter state is per-open-report-page, not app-global; the export
+                        // services resolve filters through it, so they live at the same level.
+                        ReportFilterStateService,
+                        ReportExportCollectorService,
+                        ReportPptxService,
+                        ReportPdfService,
+                        // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
+                        // this route's chunk.
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-BxYnpz7n.mjs').then((module) => module.default) }),
+                    ], imports: [
+                        FormsModule,
+                        FsAutocompleteChipsModule,
+                        FsFilterModule,
+                        FsMenuModule,
+                        FsAiChatComponent,
+                        MatIcon,
+                        ReportCanvasComponent,
+                    ], template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\">\n            <mat-icon>\n              {{ editMode ? 'lock' : 'open_with' }}\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\"\n        (editDone)=\"toggleEditMode()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _split: [{
+                type: ViewChild,
+                args: ['split', { static: true }]
+            }], _chatPanel: [{
+                type: ViewChild,
+                args: ['chatPanel', { static: true, read: ElementRef }]
+            }] } });
+
+/*
+ * Public API Surface of @firestitch/reports
+ *
+ * The AI-built report viewer/editor, its data gateway, session filter state and
+ * renderer components. The host app only needs ReportComponent (route it) —
+ * everything else is internal wiring. The AI chat is provided by @firestitch/ai.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FREQUENCY_OPTIONS as F, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, ReportData as b, ReportService as c, ReportFilterStateService as d };
+//# sourceMappingURL=firestitch-report-firestitch-report-Cnotycly.mjs.map