@firestitch/report 18.0.18 → 18.0.20

package/fesm2022/{firestitch-report-firestitch-report-DwgbMhwr.mjs → firestitch-report-firestitch-report-D5cx4IJg.mjs}

@@ -13,12 +13,12 @@ import * as i2$3 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 { of, Subject, map as map$1, debounceTime, forkJoin, BehaviorSubject, from, switchMap as switchMap$1 } from 'rxjs';
 import { map, shareReplay, filter, tap, switchMap, catchError, finalize, take } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { FsAiChatComponent } from '@firestitch/ai';
-import * as i3$1 from '@angular/material/button';
+import * as i3$2 from '@angular/material/button';
 import { MatIconButton, MatButton, MatButtonModule } from '@angular/material/button';
 import * as i2$5 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
@@ -27,7 +27,7 @@ import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
 import { FsApi, StreamEventType } 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 { format, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek, parseISO, isValid } from 'date-fns';
 import { DatePipe } from '@angular/common';
 import * as i1 from '@firestitch/list';
 import { PaginationStrategy, FsListComponent, FsListModule } from '@firestitch/list';
@@ -51,12 +51,14 @@ import { FsDatePickerModule } from '@firestitch/datepicker';
 import { MatOption } from '@angular/material/core';
 import { guid } from '@firestitch/common';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
-import * as i2$4 from '@firestitch/date';
-import { FsDateModule } from '@firestitch/date';
 import * as i4$1 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
+import * as i3$1 from '@firestitch/tree';
+import { FsTreeComponent, TreeDragMode, TreeActionType, FsTreeModule } from '@firestitch/tree';
 import * as i1$4 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
+import * as i2$4 from '@firestitch/date';
+import { FsDateModule } from '@firestitch/date';
 import { FsMarkdownRendererComponent, FsMarkdownEditorComponent } from '@firestitch/markdown-editor';
 import * as i1$5 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -80,12 +82,49 @@ class ReportData {
             ...config,
         });
     }
-    create(name, config = {}) {
-        return this._api.post(this._path(), { name }, {
+    // Both halves of the listing — reports AND the folders they are filed into —
+    // from the one GET. No `key`, because the whole payload is the answer here;
+    // reports() keeps its 'reports' key for callers that only want the flat list.
+    tree(query = {}, config = {}) {
+        return this._api.get(this._path(), query, config);
+    }
+    create(name, reportFolderId = null, config = {}) {
+        return this._api.post(this._path(), { name, reportFolderId }, {
             key: 'report',
             ...config,
         });
     }
+    // File a report under a folder, or pass null to move it to the root. Sent
+    // explicitly (never omitted) so the backend can tell "move to root" from
+    // "leave the folder alone".
+    moveReport(reportId, reportFolderId, config = {}) {
+        return this._api.put(this._path(`${reportId}`), { reportFolderId }, {
+            key: 'report',
+            ...config,
+        });
+    }
+    createFolder(name, parentReportFolderId = null, config = {}) {
+        return this._api.post(this._path('folders'), { name, parentReportFolderId }, {
+            key: 'folder',
+            ...config,
+        });
+    }
+    // Rename and/or move a folder. Only the keys passed are acted on server-side,
+    // so a rename never disturbs the parent and a drag never disturbs the name.
+    updateFolder(reportFolderId, folder, config = {}) {
+        return this._api.put(this._path(`folders/${reportFolderId}`), folder, {
+            key: 'folder',
+            ...config,
+        });
+    }
+    // A real delete — the backend refuses while the folder still holds a
+    // sub-folder or an active report, so there is no undelete counterpart.
+    deleteFolder(reportFolderId, config = {}) {
+        return this._api.delete(this._path(`folders/${reportFolderId}`), {}, {
+            key: 'folder',
+            ...config,
+        });
+    }
     rename(reportId, name, config = {}) {
         return this._api.put(this._path(`${reportId}`), { name }, {
             key: 'report',
@@ -165,6 +204,17 @@ class ReportData {
             ...config,
         });
     }
+    // Exports EVERY component on the report — or on one page — server-side and
+    // resolves to a presigned URL for a zip of one CSV per component, foldered by
+    // page. `filters` carries the resolved values for every component together;
+    // each one picks out its own. Same keep-alive contract as exportComponent,
+    // over a longer run; consume through FsProcess.download.
+    exportReport(reportId, filters = [], pageId = null, config = {}) {
+        return this._api.post(this._path(`${reportId}/export`), { filters, ...(pageId ? { pageId } : {}) }, {
+            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`), {}, {
@@ -599,6 +649,17 @@ class ReportFilterStateService {
         }
         return resolved;
     }
+    // Every component's resolved values in one array — what a report-level export
+    // carries so each file in the archive is filtered exactly as the screen is.
+    // Filter ids are unique per component, so the backend picks each component's
+    // own out of the pile. A page id narrows it to that page.
+    resolveForReport(report, pageId = null) {
+        const pages = (report.pages ?? [])
+            .filter((page) => !pageId || page.id === pageId);
+        return pages
+            .flatMap((page) => (page.components ?? [])
+            .flatMap((component) => this.resolveForComponent(component)));
+    }
     // A group's authored default, mapped to a session value by type. Relative
     // date presets resolve against "now" each time the report opens, so a saved
     // "last 12 months" stays relative; a fixed range, select values and keyword
@@ -629,6 +690,21 @@ class ReportFilterStateService {
     _relativeRange(relative) {
         const now = new Date();
         switch (relative) {
+            // A calendar week, Sunday to Saturday, in whole days — not the rolling
+            // seven days `last7Days` gives, which never lines up with the week a
+            // partner has already been sent. `lastWeek` is the one a weekly report
+            // wants: it ends at endOfWeek rather than at `now`, because the week it
+            // names has closed. `thisWeek` follows every other preset here and runs
+            // up to now, so it is deliberately a part-finished week.
+            case 'thisWeek':
+                return { start: startOfWeek(now, { weekStartsOn: 0 }), end: now };
+            case 'lastWeek': {
+                const previous = subWeeks(now, 1);
+                return {
+                    start: startOfWeek(previous, { weekStartsOn: 0 }),
+                    end: endOfWeek(previous, { weekStartsOn: 0 }),
+                };
+            }
             case 'last7Days':
                 return { start: subDays(now, 7), end: now };
             case 'last30Days':
@@ -993,9 +1069,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 // 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) {
+// config's `format` (number | percent | currency) and `precision` mean the same
+// thing on screen, in PowerPoint and in PDF.
+// A bare `new Intl.NumberFormat()` defaults to maximumFractionDigits: 3, which
+// is why an unconfigured percentage reads 38.298%. When the measure names a
+// precision it is pinned as BOTH the minimum and the maximum, so a column of
+// rates lines up instead of each value showing however many decimals it happens
+// to need. Undefined leaves the locale default alone, so a report authored
+// before precision existed renders exactly as it did.
+function getFractionDigits(precision) {
+    return Number.isFinite(precision)
+        ? { minimumFractionDigits: precision, maximumFractionDigits: precision }
+        : {};
+}
+function formatMeasureValue(value, format, precision) {
     if (value === null || value === undefined || value === '') {
         return '—';
     }
@@ -1003,17 +1090,21 @@ function formatMeasureValue(value, format) {
     if (!Number.isFinite(numeric)) {
         return String(value);
     }
+    const fractionDigits = getFractionDigits(precision);
     switch (format) {
         case 'percent':
-            return `${new Intl.NumberFormat().format(numeric)}%`;
+            return `${new Intl.NumberFormat(undefined, fractionDigits).format(numeric)}%`;
         case 'currency':
             return new Intl.NumberFormat(undefined, {
                 style: 'currency',
                 currency: 'USD',
+                // Whole dollars unless the measure asks for decimals — cents were
+                // unrepresentable before, because this was hardcoded to 0.
                 maximumFractionDigits: 0,
+                ...fractionDigits,
             }).format(numeric);
         default:
-            return new Intl.NumberFormat().format(numeric);
+            return new Intl.NumberFormat(undefined, fractionDigits).format(numeric);
     }
 }
 
@@ -1033,7 +1124,7 @@ class ComponentKpiComponent {
             return;
         }
         const column = config.measure?.column ?? Object.keys(row)[0];
-        this.value = formatMeasureValue(row[column], config.measure?.format);
+        this.value = formatMeasureValue(row[column], config.measure?.format, config.measure?.precision);
     }
     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 });
@@ -2498,13 +2589,24 @@ const FREQUENCY_OPTIONS = [
     { value: 'quarter', name: 'Quarter' },
     { value: 'year', name: 'Annually' },
 ];
+var ReportNodeType;
+(function (ReportNodeType) {
+    ReportNodeType["Folder"] = "folder";
+    ReportNodeType["Report"] = "report";
+})(ReportNodeType || (ReportNodeType = {}));
 // Reports are soft-deletable: a deleted report leaves the listing but keeps its
 // pages and components, and the listing's "Show Deleted" mode restores it.
+// Folders have no equivalent — they are only deletable once empty, so they hard
+// delete and there is nothing to restore.
 var ReportState;
 (function (ReportState) {
     ReportState["Active"] = "active";
     ReportState["Deleted"] = "deleted";
 })(ReportState || (ReportState = {}));
+const ReportStates = [
+    { name: 'Active', value: ReportState.Active },
+    { name: 'Deleted', value: ReportState.Deleted },
+];
 
 // Rows fetched for a list component's export table — enough to fill a
 // slide/page table; the cap note covers the rest.
@@ -2526,8 +2628,10 @@ class ReportExportCollectorService {
             }
         });
         const all$ = requests.length ? forkJoin(requests) : of([]);
-        return all$
-            .pipe(map$1((collected) => {
+        // The summary rides alongside the component data rather than being built at
+        // the end, because naming a select filter's values is itself a request.
+        return forkJoin({ collected: all$, filterSummary: this._filterSummary(report) })
+            .pipe(map$1(({ collected, filterSummary }) => {
             const pages = report.pages.map((page) => ({ page, components: [] }));
             collected.forEach((item, index) => {
                 pages[slots[index].pageIndex].components.push(item);
@@ -2535,7 +2639,7 @@ class ReportExportCollectorService {
             return {
                 report,
                 pages,
-                filterSummary: this._filterSummary(report),
+                filterSummary,
             };
         }));
     }
@@ -2551,8 +2655,12 @@ class ReportExportCollectorService {
         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.
+    // "Report Period: Jun 12, 2025 – Jun 12, 2026", "Organization: Alnylam - AHP,
+    // Alnylam - PH1" — one line per filter group that has an active session value.
+    //
+    // A select group stores ids, so its line has to be named off the option list
+    // before it can be printed; a date or keyword group already holds its own
+    // display value and resolves synchronously.
     _filterSummary(report) {
         const lines = [];
         for (const group of report.filterGroups ?? []) {
@@ -2562,21 +2670,34 @@ class ReportExportCollectorService {
             }
             const label = group.label || 'Filter';
             if (value.start || value.end) {
-                lines.push(`${label}: ${this._date(value.start)} – ${this._date(value.end)}`);
+                lines.push(of(`${label}: ${this._date(value.start)} – ${this._date(value.end)}`));
             }
             else if (value.values?.length) {
-                lines.push(`${label}: ${value.values.map((item) => String(item)).join(', ')}`);
+                lines.push(this._selectLine(label, group, report.id, value.values));
             }
             else if (value.value?.trim()) {
-                lines.push(`${label}: "${value.value.trim()}"`);
+                lines.push(of(`${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}`);
+            lines.push(of(`Frequency: ${option?.name ?? frequency}`));
         }
-        return lines;
+        return lines.length ? forkJoin(lines) : of([]);
+    }
+    // One select group's line, with its stored ids resolved to the same names the
+    // on-screen chips show — a cover reading "Organization: 8774, 8777" tells the
+    // client nothing about what the report covers.
+    //
+    // Uses the report bar's own loader and resolver so the two can't drift, which
+    // also means a value whose entity was deleted keeps showing its raw id rather
+    // than dropping off the cover and silently understating the filter. A failed
+    // option fetch degrades the whole line to ids for the same reason: an export
+    // must never fail on a cosmetic lookup.
+    _selectLine(label, group, reportId, values) {
+        return resolveOptionValues(loadGroupOptions(group, this._reportData, reportId), values)
+            .pipe(map$1((resolved) => `${label}: ${resolved.map((item) => item.name).join(', ')}`), catchError(() => of(`${label}: ${values.map((item) => String(item)).join(', ')}`)));
     }
     _date(value) {
         if (!value) {
@@ -2599,7 +2720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // 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-CMOBB-Er.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-D4VLD05J.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -2738,7 +2859,7 @@ class ReportPdfService {
         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);
+        const value = formatMeasureValue(row[column], config.measure?.format, config.measure?.precision);
         doc.setFont('helvetica', 'bold');
         doc.setFontSize(26);
         doc.setTextColor('#1f2933');
@@ -2968,7 +3089,7 @@ class ReportPptxService {
         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);
+        const value = formatMeasureValue(row[column], config.measure?.format, config.measure?.precision);
         slide.addText([
             { text: value, options: { fontSize: 28, bold: true, color: '1F2933', breakLine: true } },
             { text: config.measure?.label ?? '', options: { fontSize: 10, color: '7B8794' } },
@@ -3073,6 +3194,9 @@ class ReportComponent {
     reportFilterConfig;
     _split;
     _chatPanel;
+    // Only the canvas knows which page is on screen, and a page-scoped export
+    // has to ask it.
+    _canvas;
     introMessage = {
         text: '',
     };
@@ -3205,6 +3329,19 @@ class ReportComponent {
         this._process.run('Exporting PDF', this._exportCollector.collect(report)
             .pipe(switchMap((collected) => from(this._pdfService.export(collected)))));
     }
+    // The raw data behind the whole report in one action: the server exports every
+    // component's full filtered dataset and zips one CSV per component, foldered
+    // by page. `thisPage` narrows it to the page the canvas is showing. Unlike the
+    // PDF/PowerPoint exports this is entirely server-side — nothing is collected
+    // in the browser, so it is not capped by what a slide can hold.
+    exportData(thisPage = false) {
+        const report = this.report;
+        if (!report) {
+            return;
+        }
+        const pageId = thisPage ? this._canvas?.activePage?.id ?? null : null;
+        this._process.download('Exporting data', this._reportData.exportReport(report.id, this._filterState.resolveForReport(report, pageId), pageId));
+    }
     // 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) {
@@ -3345,8 +3482,8 @@ class ReportComponent {
             ReportPdfService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CMOBB-Er.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              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\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: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$3.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 });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-D4VLD05J.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 }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: 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              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\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          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\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: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { 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,
@@ -3359,7 +3496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPdfService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
                         // this route's chunk.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CMOBB-Er.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-D4VLD05J.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -3368,13 +3505,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         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              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\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"] }]
+                    ], 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              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_2_edit\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          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\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 }]
+            }], _canvas: [{
+                type: ViewChild,
+                args: [ReportCanvasComponent]
             }] } });
 
 // The AI Knowledge document's version history (append-only), each version
@@ -3567,6 +3707,10 @@ class SemanticDatabaseComponent {
         K: 'Stopped',
         F: 'Failed',
     };
+    // The streamed frames that carry a line for the feed: progress, and the final
+    // frame the backend sends when a run ends badly. Without the error kind the
+    // feed stops on the last progress line and never says what went wrong.
+    static LOG_KINDS = ['log', 'error'];
     // A row that is still owed content says so; a built one says nothing. On a
     // finished build every stage is done on every row, so chipping them all was
     // noise that buried the one row that mattered.
@@ -3706,7 +3850,7 @@ class SemanticDatabaseComponent {
         // A hard stream/transport failure (the build couldn't even start)
         // finalizes here — completed$ won't fire in that case.
         tap({ error: (error) => this._finalizeBuild(error) }), filter((event) => event?.type === StreamEventType.Data
-            && event.data?.kind === 'log'
+            && SemanticDatabaseComponent.LOG_KINDS.includes(event.data?.kind)
             && typeof event.data.line === 'string'), map((event) => event.data.line));
         this._process
             .run('Semantic database build', target$)
@@ -3718,9 +3862,10 @@ class SemanticDatabaseComponent {
      * Wrap up one build run exactly once. On a hard stream error, surface the
      * actual server-side reason pulled off the broken stream — the generic
      * "could not run" line only when the failure carried no server text at all;
-     * otherwise refresh the status and announce how the build actually ended — a
-     * build that failed (e.g. the AI couldn't be reached) reports 'Failed' with
-     * a reason, and that must surface instead of the run silently doing nothing.
+     * otherwise refresh the status and announce how the build actually ended. A
+     * failed build always names its reason on the row (the backend records one for
+     * every way a run can die, fatals included), and that reason must surface
+     * instead of the run silently doing nothing.
      */
     _finalizeBuild(streamError) {
         if (this._buildFinalized) {
@@ -3732,7 +3877,7 @@ class SemanticDatabaseComponent {
             const detail = this._streamErrorDetail(streamError);
             this._message.error(detail
                 ? `The semantic database build failed — ${detail}`
-                : 'The semantic database build could not run — check the AI connection and try again.');
+                : 'The semantic database build could not run — the connection to the server was lost.');
             this._refreshStatus();
             return;
         }
@@ -3996,18 +4141,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            @if (db.status(); as buildStatus) {\n              <button\n                  type=\"button\"\n                  mat-button\n                  (click)=\"db.build()\">\n                {{ buildStatus.detail.generatedAt ? 'Rebuild' : 'Build' }}\n              </button>\n            }\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
-// The reports listing — an fs-list of reports. Rows are links built from a URL
-// pattern (a ':id' token → the report id; a leading '/' makes it absolute,
-// otherwise it's relative to this component's route). Create prompts for a
-// title, creates the report, then routes to it. The header gear opens the
-// global Report Settings dialog (AI knowledge document + semantic-database
-// build), which lives in this package. No routing is hard-coded here.
+// The reports listing — an fs-tree of folders and the reports filed into them.
+// Rows link out through a URL pattern (a ':id' token → the report id; a leading
+// '/' makes it absolute, otherwise it's relative to this component's route).
+// Create prompts for a title, creates the report, then routes to it. The gear
+// opens the global Report Settings dialog (AI knowledge document +
+// semantic-database build), which lives in this package. No routing is
+// hard-coded here.
+//
+// Folders nest; reports are always leaves — canDrop enforces it here, and the
+// backend enforces it structurally by keeping the tree in its own table. A
+// report in no folder is a root node, which is where every report sat before
+// folders existed, so nothing had to be migrated or bucketed as "uncategorized".
 //
 // Reports are soft-deletable: the row kebab deletes, "Show Deleted" flips the
-// list into deleted mode (the backend hides deleted reports otherwise), and in
-// that mode fs-list swaps Delete for Restore, which calls the undelete action
-// endpoint.
+// listing into deleted mode (the backend hides deleted reports otherwise), and
+// in that mode the kebab offers Restore instead. Folders do NOT take part in
+// that — a folder is only deletable once it is empty, so it hard deletes and has
+// nothing to restore. The upshot is that deleted mode keeps the folder structure
+// on screen with the deleted reports sitting where they belong, so restoring one
+// puts it back rather than dropping it at the root.
 class FsAiReportsComponent {
+    // How deep the tree opens on load. Folders are audience buckets, not a
+    // filesystem, so there is nothing worth hiding behind a closed chevron.
+    static EXPAND_LEVEL = 10;
     // API base for the reports endpoints; override to mount elsewhere.
     basePath = input('reports');
     // Where a row links to; ':id' is replaced with the report id. Default takes
@@ -4015,27 +4172,44 @@ class FsAiReportsComponent {
     openPattern = input(':id');
     // Where a freshly-created report routes to; same ':id' pattern rules.
     createPattern = input(':id');
-    list = null;
-    listConfig;
-    // Template-side handle on the enum, so the name cell can tell a deleted row
-    // (shown in Show Deleted mode) from a live one.
-    deletedState = ReportState.Deleted;
+    // Null until the first load resolves — that is what gates *fsSkeleton.
+    nodes = signal(null);
+    treeConfig;
+    filterConfig;
+    // Template-side handle on the enum, so a row can tell a folder from a report.
+    nodeType = ReportNodeType;
+    _tree = viewChild(FsTreeComponent);
     _reportData = inject(ReportData);
     _router = inject(Router);
     _route = inject(ActivatedRoute);
     _prompt = inject(FsPrompt);
+    _message = inject(FsMessage);
     _dialog = inject(MatDialog);
     _destroyRef = inject(DestroyRef);
+    // The filter bar's current query — carries `state` when Show Deleted is on.
+    _query = {};
     constructor() {
         effect(() => {
             this._reportData.basePath = this.basePath();
         });
-        this._initListConfig();
+    }
+    ngOnInit() {
+        // Set before the first fetch rather than waiting on the effect above, which
+        // does not run until after the initial change detection pass.
+        this._reportData.basePath = this.basePath();
+        this._initFilterConfig();
+        this._initTreeConfig();
+        this._load();
     }
     // routerLink commands for a report row (built from openPattern).
     openLink(report) {
         return this._patternCommands(this.openPattern(), report.id);
     }
+    // A deleted report can't be opened — the backend only assembles active ones —
+    // so in Show Deleted mode its name renders as plain text rather than a link.
+    isDeleted(report) {
+        return report?.state === ReportState.Deleted;
+    }
     // Prompt for a title, create the report, then route to it (createPattern).
     createReport() {
         this._prompt.input({
@@ -4044,27 +4218,12 @@ class FsAiReportsComponent {
             commitLabel: 'Create',
             required: true,
         })
-            .pipe(switchMap((name) => this._reportData.create(name)), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap$1((name) => this._reportData.create(name)), takeUntilDestroyed(this._destroyRef))
             .subscribe((report) => {
             const pattern = this.createPattern();
             this._router.navigate(this._patternCommands(pattern, report.id), pattern.startsWith('/') ? {} : { relativeTo: this._route });
         });
     }
-    // Turn a ':id' pattern into router commands. Relative unless it starts
-    // with '/', in which case the first segment carries the leading slash.
-    _patternCommands(pattern, id) {
-        const absolute = pattern.startsWith('/');
-        const segments = pattern.split('/')
-            .filter((segment) => segment.length > 0)
-            .map((segment) => (segment === ':id' ? id : segment));
-        if (!segments.length) {
-            return [id];
-        }
-        if (absolute) {
-            segments[0] = `/${segments[0]}`;
-        }
-        return segments;
-    }
     // The global Report Settings dialog: the AI knowledge document and the
     // semantic-database build. A running build streams into the FsProcess dock,
     // which survives the dialog closing.
@@ -4076,66 +4235,315 @@ class FsAiReportsComponent {
             autoFocus: false,
         });
     }
-    _initListConfig() {
-        this.listConfig = {
-            // The backend list is not paged yet; show the full set until it is.
-            paging: false,
+    _initFilterConfig() {
+        this.filterConfig = {
+            items: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+                {
+                    name: 'state',
+                    type: ItemType.Select,
+                    label: 'Status',
+                    multiple: true,
+                    values: () => ReportStates,
+                    isolate: { label: 'Show Deleted', value: ReportState.Deleted },
+                },
+            ],
             actions: [
                 {
-                    // Icon-only: the global Report Settings dialog.
+                    icon: 'unfold_more',
+                    tooltip: 'Expand all',
+                    primary: false,
+                    click: () => this._tree()?.expandAll(),
+                },
+                {
+                    icon: 'unfold_less',
+                    tooltip: 'Collapse all',
+                    primary: false,
+                    click: () => this._tree()?.collapseAll(),
+                },
+                {
                     icon: 'settings',
                     tooltip: 'Report settings',
                     primary: false,
                     click: () => this.openSettings(),
                 },
+                {
+                    label: 'New Folder',
+                    primary: false,
+                    click: () => this._createFolder(null),
+                },
                 {
                     label: 'Create',
                     primary: true,
                     click: () => this.createReport(),
                 },
             ],
-            rowActions: [
+            // The two items are answered in different places and both have to run.
+            // The keyword drives the tree's own search, which is the whole point of
+            // searching a tree — it reveals a match nested inside collapsed folders
+            // rather than only filtering what is already on screen. `state` is the
+            // Show Deleted toggle, and only the server can answer that.
+            change: (query) => {
+                const stateChanged = String(query?.state ?? '') !== String(this._query.state ?? '');
+                this._query = { ...query };
+                this._search(query?.keyword);
+                if (stateChanged) {
+                    this._load();
+                }
+            },
+        };
+    }
+    _initTreeConfig() {
+        this.treeConfig = {
+            data: [],
+            childrenName: 'children',
+            expandLevel: FsAiReportsComponent.EXPAND_LEVEL,
+            draggable: true,
+            // The whole row is the grip and the handle stays hidden; a press only
+            // becomes a drag once the pointer moves, so the kebab, the chevron and the
+            // report link all stay clickable.
+            dragMode: TreeDragMode.Node,
+            // canDrop is asked about the node being DRAGGED, so only `toParent`
+            // describes the destination — reading node.level/node.parent here would
+            // describe where it came from. A report can never be a parent because its
+            // type says so, and that single test is the whole "folders nest, reports
+            // are leaves" rule on this side.
+            canDrop: (node, fromParent, toParent) => {
+                return !toParent || toParent.data?.type === ReportNodeType.Folder;
+            },
+            changeReorder: (event) => this._move(event),
+            nodeClass: (node) => node.data?.type,
+            // Match on the name only. The library's default matcher stringifies the
+            // whole node, so it would hit ids, the literal type word, and everything
+            // else riding on the row.
+            filterItem: (node, query) => {
+                return String(node.data?.name ?? '')
+                    .toLowerCase()
+                    .includes(String(query ?? '').toLowerCase());
+            },
+            actions: [
                 {
-                    click: (report) => this._reportData.delete(report.id),
-                    remove: {
-                        title: 'Confirm',
-                        template: 'Are you sure you would like to delete this report?',
-                    },
-                    menu: true,
-                    label: 'Delete',
+                    type: TreeActionType.Menu,
+                    icon: 'more_vert',
+                    items: [
+                        {
+                            label: 'Rename',
+                            show: (node) => !this._isDeletedNode(node),
+                            click: (node) => this._rename(node),
+                        },
+                        {
+                            label: 'New Folder Inside',
+                            show: (node) => this._isFolderNode(node),
+                            click: (node) => this._createFolder(node.data?.id),
+                        },
+                        {
+                            label: 'Delete',
+                            show: (node) => !this._isDeletedNode(node),
+                            click: (node) => this._delete(node),
+                        },
+                        // Folders never reach this: they hard delete, so a deleted folder
+                        // does not exist to be restored.
+                        {
+                            label: 'Restore',
+                            show: (node) => this._isDeletedNode(node),
+                            click: (node) => this._restore(node),
+                        },
+                    ],
                 },
             ],
-            // `filter: true` makes fs-list render the Show Deleted toggle and send
-            // `query` with the fetch; in that mode it also swaps the row's Delete
-            // action for Restore.
-            restore: {
-                query: { state: ReportState.Deleted },
-                filter: true,
-                filterLabel: 'Show Deleted',
-                menuLabel: 'Restore',
-                reload: true,
-                click: (report) => this._reportData.undelete(report.id),
-            },
-            fetch: (query) => {
-                return this._reportData.reports(query)
-                    .pipe(map((reports) => ({ data: reports ?? [] })));
-            },
         };
     }
+    _isFolderNode(node) {
+        return node?.data?.type === ReportNodeType.Folder;
+    }
+    _isDeletedNode(node) {
+        return this.isDeleted(node?.data?.report);
+    }
+    // Drive the tree's built-in search: it collapses everything, hides every node,
+    // then unhides each match and walks its ancestors open, so a report several
+    // folders deep surfaces with its path expanded. Clearing does NOT undo that
+    // initial collapse, so the tree is re-opened here — otherwise the listing is
+    // left fully collapsed the moment somebody empties the search box.
+    _search(keyword) {
+        const tree = this._tree();
+        if (!tree) {
+            return;
+        }
+        if (keyword) {
+            tree.search(keyword);
+            return;
+        }
+        tree.clearSearch();
+        tree.expandAll();
+    }
+    _load() {
+        this._reportData.tree(this._query)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((tree) => {
+            const nodes = this._buildNodes(tree);
+            this.nodes.set(nodes);
+            // The tree reads `config` once, in its own ngOnInit. The first load
+            // lands before it exists, so the data has to arrive through the config;
+            // every later one has to go through the instance or nothing changes.
+            this.treeConfig = { ...this.treeConfig, data: nodes };
+            this._tree()?.setData(nodes);
+        });
+    }
+    // Flat API rows → the nested shape fs-tree renders. Folders come before
+    // reports at every level, each already name-ordered by the backend.
+    _buildNodes(tree) {
+        const folders = tree?.folders ?? [];
+        const reports = tree?.reports ?? [];
+        const build = (parentId) => {
+            const folderNodes = folders
+                .filter((folder) => (folder.parentReportFolderId ?? null) === parentId)
+                .map((folder) => ({
+                key: `f:${folder.id}`,
+                id: folder.id,
+                name: folder.name,
+                type: ReportNodeType.Folder,
+                children: build(folder.id),
+            }));
+            const reportNodes = reports
+                .filter((report) => (report.reportFolderId ?? null) === parentId)
+                .map((report) => ({
+                key: `r:${report.id}`,
+                id: report.id,
+                name: report.name,
+                type: ReportNodeType.Report,
+                children: [],
+                report,
+            }));
+            return [...folderNodes, ...reportNodes];
+        };
+        return build(null);
+    }
+    // A drop moved a node under a new parent, or out to the root. The tree has
+    // already moved it on screen, so both outcomes reload: a success to pick up
+    // the server's ordering, a failure to put the row back where it really is.
+    _move(event) {
+        const node = event.node?.data;
+        if (!node) {
+            return;
+        }
+        const parentReportFolderId = event.toParent?.data?.id ?? null;
+        if (event.toParent && !event.toParent.isExpanded()) {
+            event.toParent.expand();
+        }
+        const save$ = node.type === ReportNodeType.Folder
+            ? this._reportData.updateFolder(node.id, { parentReportFolderId })
+            : this._reportData.moveReport(node.id, parentReportFolderId);
+        save$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: () => {
+                this._message.success('Saved changes');
+                this._load();
+            },
+            error: () => this._load(),
+        });
+    }
+    _createFolder(parentReportFolderId) {
+        this._prompt.input({
+            title: 'New Folder',
+            label: 'Name',
+            commitLabel: 'Create',
+            required: true,
+        })
+            .pipe(switchMap$1((name) => this._reportData.createFolder(name, parentReportFolderId)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success('Created folder');
+            this._load();
+        });
+    }
+    _rename(node) {
+        const data = node?.data;
+        if (!data) {
+            return;
+        }
+        const folder = data.type === ReportNodeType.Folder;
+        this._prompt.input({
+            title: folder ? 'Rename Folder' : 'Rename Report',
+            label: 'Name',
+            default: data.name,
+            commitLabel: 'Save',
+            required: true,
+        })
+            .pipe(switchMap$1((name) => (folder
+            ? this._reportData.updateFolder(data.id, { name })
+            : this._reportData.rename(data.id, name))), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success('Saved changes');
+            this._load();
+        });
+    }
+    // Deleting a folder is refused server-side while it still holds a sub-folder
+    // or an active report, and the message says which — so the confirm here warns
+    // that a folder delete is permanent rather than trying to restate the rule.
+    _delete(node) {
+        const data = node?.data;
+        if (!data) {
+            return;
+        }
+        const folder = data.type === ReportNodeType.Folder;
+        this._prompt.confirm({
+            title: 'Confirm',
+            template: folder
+                ? `Are you sure you would like to delete the folder "${data.name}"? This cannot be undone.`
+                : 'Are you sure you would like to delete this report?',
+        })
+            .pipe(switchMap$1(() => (folder
+            ? this._reportData.deleteFolder(data.id)
+            : this._reportData.delete(data.id))), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success(folder ? 'Deleted folder' : 'Deleted report');
+            this._load();
+        });
+    }
+    _restore(node) {
+        const data = node?.data;
+        if (!data) {
+            return;
+        }
+        this._reportData.undelete(data.id)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success('Restored report');
+            this._load();
+        });
+    }
+    // Turn a ':id' pattern into router commands. Relative unless it starts
+    // with '/', in which case the first segment carries the leading slash.
+    _patternCommands(pattern, id) {
+        const absolute = pattern.startsWith('/');
+        const segments = pattern.split('/')
+            .filter((segment) => segment.length > 0)
+            .map((segment) => (segment === ':id' ? id : segment));
+        if (!segments.length) {
+            return [id];
+        }
+        if (absolute) {
+            segments[0] = `/${segments[0]}`;
+        }
+        return segments;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FsAiReportsComponent, isStandalone: true, selector: "fs-ai-reports", inputs: { basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, openPattern: { classPropertyName: "openPattern", publicName: "openPattern", isSignal: true, isRequired: false, transformFunction: null }, createPattern: { classPropertyName: "createPattern", publicName: "createPattern", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list\n    [config]=\"listConfig\"\n    #list>\n\n  <fs-list-column title=\"Name\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <!-- A deleted report can't be opened (the backend only assembles active\n           ones), so in Show Deleted mode the name is plain text \u2014 restore it\n           from the row menu first. -->\n      @if (row.state === deletedState) {\n        {{ row.name }}\n      } @else {\n        <a [routerLink]=\"openLink(row)\">{{ row.name }}</a>\n      }\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column title=\"Modified\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date [date]=\"row.modifyDate\"></fs-date>\n    </ng-template>\n  </fs-list-column>\n\n</fs-list>\n", styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { 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"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FsAiReportsComponent, isStandalone: true, selector: "fs-ai-reports", inputs: { basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, openPattern: { classPropertyName: "openPattern", publicName: "openPattern", isSignal: true, isRequired: false, transformFunction: null }, createPattern: { classPropertyName: "createPattern", publicName: "createPattern", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_tree", first: true, predicate: FsTreeComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<fs-filter [config]=\"filterConfig\"></fs-filter>\n\n<ng-container *fsSkeleton=\"nodes()\">\n  <fs-tree [config]=\"treeConfig\">\n    <ng-template\n        fsTreeNode\n        let-data=\"data\">\n      <div class=\"fs-row.gap-sm.align-center node-row\">\n        <mat-icon class=\"node-icon\">\n          {{ data.type === nodeType.Folder ? 'folder' : 'insert_chart_outlined' }}\n        </mat-icon>\n\n        @if (data.type === nodeType.Folder) {\n          <span class=\"node-name\">{{ data.name }}</span>\n        } @else if (isDeleted(data.report)) {\n          <!-- A deleted report can't be opened (the backend only assembles\n               active ones), so in Show Deleted mode the name is plain text \u2014\n               restore it from the row menu first. -->\n          <span class=\"node-name\">{{ data.name }}</span>\n        } @else {\n          <a\n              class=\"node-name\"\n              [routerLink]=\"openLink(data.report)\">\n            {{ data.name }}\n          </a>\n        }\n      </div>\n    </ng-template>\n  </fs-tree>\n\n  @if (!nodes().length) {\n    <p class=\"small tree-empty\">\n      No reports yet. Create one, or add a folder to group them.\n    </p>\n  }\n</ng-container>\n", styles: ["a{cursor:pointer}fs-tree .node>.container{flex:1;min-width:0}fs-tree .node>.container>.content{min-width:0}fs-tree .node>.container>button{margin-top:-5px}.node-row{min-width:0}.node-icon{font-size:18px;width:18px;height:18px;flex:none}.node-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-empty{margin-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsTreeModule }, { kind: "component", type: i3$1.FsTreeComponent, selector: "fs-tree", inputs: ["config"] }, { kind: "directive", type: i3$1.FsTreeNodeDirective, selector: "[fsTreeNode]", inputs: ["class"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-ai-reports', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsDateModule,
-                        FsListModule,
+                        FsFilterModule,
+                        FsSkeletonModule,
+                        FsTreeModule,
+                        MatIconModule,
                         RouterLink,
-                    ], template: "<fs-list\n    [config]=\"listConfig\"\n    #list>\n\n  <fs-list-column title=\"Name\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <!-- A deleted report can't be opened (the backend only assembles active\n           ones), so in Show Deleted mode the name is plain text \u2014 restore it\n           from the row menu first. -->\n      @if (row.state === deletedState) {\n        {{ row.name }}\n      } @else {\n        <a [routerLink]=\"openLink(row)\">{{ row.name }}</a>\n      }\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column title=\"Modified\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date [date]=\"row.modifyDate\"></fs-date>\n    </ng-template>\n  </fs-list-column>\n\n</fs-list>\n", styles: ["a{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent]
-            }] } });
+                    ], template: "<fs-filter [config]=\"filterConfig\"></fs-filter>\n\n<ng-container *fsSkeleton=\"nodes()\">\n  <fs-tree [config]=\"treeConfig\">\n    <ng-template\n        fsTreeNode\n        let-data=\"data\">\n      <div class=\"fs-row.gap-sm.align-center node-row\">\n        <mat-icon class=\"node-icon\">\n          {{ data.type === nodeType.Folder ? 'folder' : 'insert_chart_outlined' }}\n        </mat-icon>\n\n        @if (data.type === nodeType.Folder) {\n          <span class=\"node-name\">{{ data.name }}</span>\n        } @else if (isDeleted(data.report)) {\n          <!-- A deleted report can't be opened (the backend only assembles\n               active ones), so in Show Deleted mode the name is plain text \u2014\n               restore it from the row menu first. -->\n          <span class=\"node-name\">{{ data.name }}</span>\n        } @else {\n          <a\n              class=\"node-name\"\n              [routerLink]=\"openLink(data.report)\">\n            {{ data.name }}\n          </a>\n        }\n      </div>\n    </ng-template>\n  </fs-tree>\n\n  @if (!nodes().length) {\n    <p class=\"small tree-empty\">\n      No reports yet. Create one, or add a folder to group them.\n    </p>\n  }\n</ng-container>\n", styles: ["a{cursor:pointer}fs-tree .node>.container{flex:1;min-width:0}fs-tree .node>.container>.content{min-width:0}fs-tree .node>.container>button{margin-top:-5px}.node-row{min-width:0}.node-icon{font-size:18px;width:18px;height:18px;flex:none}.node-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-empty{margin-top:10px}\n"] }]
+        }], ctorParameters: () => [] });
 
 // 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).
@@ -4161,6 +4569,9 @@ class FsAiReportComponent {
     reportFilterConfig;
     _split;
     _chatPanel;
+    // Only the canvas knows which page is on screen, and a page-scoped export
+    // has to ask it.
+    _canvas;
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
     _exportCollector = inject(ReportExportCollectorService);
@@ -4264,6 +4675,19 @@ class FsAiReportComponent {
         this._process.run('Exporting PDF', this._exportCollector.collect(report)
             .pipe(switchMap((collected) => from(this._pdfService.export(collected)))));
     }
+    // The raw data behind the whole report in one action: the server exports every
+    // component's full filtered dataset and zips one CSV per component, foldered
+    // by page. `thisPage` narrows it to the page the canvas is showing. Unlike the
+    // PDF/PowerPoint exports this is entirely server-side — nothing is collected
+    // in the browser, so it is not capped by what a slide can hold.
+    exportData(thisPage = false) {
+        const report = this.report;
+        if (!report) {
+            return;
+        }
+        const pageId = thisPage ? this._canvas?.activePage?.id ?? null : null;
+        this._process.download('Exporting data', this._reportData.exportReport(report.id, this._filterState.resolveForReport(report, pageId), pageId));
+    }
     // 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) {
@@ -4389,8 +4813,8 @@ class FsAiReportComponent {
             ReportPptxService,
             ReportPdfService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CMOBB-Er.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 class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\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>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-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}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ 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: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage"], outputs: ["response"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode"], outputs: ["componentSettings", "reportChanged", "editDone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-D4VLD05J.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 }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\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>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-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}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ 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: i2$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: FsAiReportComponent, decorators: [{
             type: Component,
@@ -4402,7 +4826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPptxService,
                         ReportPdfService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CMOBB-Er.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-D4VLD05J.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -4411,13 +4835,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatIconModule,
                         MatTooltipModule,
                         ReportCanvasComponent,
-                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\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>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-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}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"{ reportId: reportId() }\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\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>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-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}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _split: [{
                 type: ViewChild,
                 args: ['split', { static: true }]
             }], _chatPanel: [{
                 type: ViewChild,
                 args: ['chatPanel', { static: true, read: ElementRef }]
+            }], _canvas: [{
+                type: ViewChild,
+                args: [ReportCanvasComponent]
             }] } });
 
 /*
@@ -4432,5 +4859,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FsAiReportsComponent as F, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, FREQUENCY_OPTIONS as f, ReportState as g };
-//# sourceMappingURL=firestitch-report-firestitch-report-DwgbMhwr.mjs.map
+export { FsAiReportsComponent as F, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, FREQUENCY_OPTIONS as f, ReportNodeType as g, ReportState as h, ReportStates as i };
+//# sourceMappingURL=firestitch-report-firestitch-report-D5cx4IJg.mjs.map