@firestitch/report 18.0.31 → 18.2.0

package/fesm2022/{firestitch-report-firestitch-report-BOErj039.mjs → firestitch-report-firestitch-report-CfSwIwzw.mjs}

@@ -1,32 +1,36 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, ViewChildren, signal, CUSTOM_ELEMENTS_SCHEMA, model, input, computed, viewChild, effect, output } from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Input, signal, DestroyRef, ViewChild, EventEmitter, ChangeDetectorRef, NgZone, ElementRef, Output, HostBinding, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, model, input, computed, viewChild, effect, output } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog, MatDialogClose } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
 import * as i4$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i2$2 from '@firestitch/autocomplete-chips';
+import * as i2$3 from '@firestitch/autocomplete-chips';
 import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
 import * as i2 from '@firestitch/filter';
 import { ItemType, FsFilterModule } from '@firestitch/filter';
-import * as i2$3 from '@firestitch/menu';
+import * as i2$1 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
 import { FsProcess } from '@firestitch/process';
 import { FsPrompt } from '@firestitch/prompt';
-import { map, shareReplay, filter, tap, switchMap, mergeMap, toArray, catchError, finalize, takeUntil, take } from 'rxjs/operators';
+import { map, shareReplay, filter, switchMap as switchMap$1, tap, mergeMap, toArray, catchError, finalize, takeUntil, 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$3 from '@angular/material/button';
+import * as i1$2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3$4 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';
-import * as i1$2 from '@firestitch/zoom-pan';
+import * as i5$1 from '@firestitch/message';
+import { FsMessage, FsMessageModule } from '@firestitch/message';
+import * as i3 from '@firestitch/zoom-pan';
 import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
+import { of, Subject, map as map$1, debounceTime, switchMap, forkJoin, from, EMPTY, BehaviorSubject } from 'rxjs';
 import { FsApi, StreamEventType } from '@firestitch/api';
 import * as i1$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { of, Subject, map as map$1, debounceTime, forkJoin, from, EMPTY, BehaviorSubject, switchMap as switchMap$1 } from 'rxjs';
 import { format, parseISO, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek, isValid } from 'date-fns';
 import { DatePipe } from '@angular/common';
 import * as i1 from '@firestitch/list';
@@ -36,15 +40,13 @@ import { MatInput } from '@angular/material/input';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i6 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i3$1 from '@firestitch/dialog';
+import * as i3$2 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i2$1 from '@firestitch/form';
+import * as i2$2 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
 import { FsLabelModule } from '@firestitch/label';
-import * as i3 from '@firestitch/mask';
+import * as i3$1 from '@firestitch/mask';
 import { FsMaskModule } from '@firestitch/mask';
-import * as i5$1 from '@firestitch/message';
-import { FsMessage, FsMessageModule } from '@firestitch/message';
 import * as i5 from '@firestitch/tabs';
 import { FsTabsModule } from '@firestitch/tabs';
 import { MatSelect, MatOption as MatOption$1 } from '@angular/material/select';
@@ -55,7 +57,7 @@ import { guid } from '@firestitch/common';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import * as i4 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i3$2 from '@firestitch/tree';
+import * as i3$3 from '@firestitch/tree';
 import { FsTreeComponent, TreeDragMode, TreeActionType, FsTreeModule } from '@firestitch/tree';
 import * as i1$4 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
@@ -149,6 +151,31 @@ class ReportData {
             ...config,
         });
     }
+    // Rename one page. An empty name is stored as null server-side, which puts
+    // the tab back on its positional "Page N" label.
+    updatePage(reportId, pageId, name, config = {}) {
+        return this._api.put(this._path(`${reportId}/pages/${pageId}`), { name }, {
+            key: 'page',
+            ...config,
+        });
+    }
+    // Delete a page and everything on it. Refused server-side for the last
+    // remaining page — a report with no canvas is a deleted report, not a page
+    // operation.
+    deletePage(reportId, pageId, config = {}) {
+        return this._api.delete(this._path(`${reportId}/pages/${pageId}`), {}, {
+            key: 'page',
+            ...config,
+        });
+    }
+    // Persist the tab order after a drag — the whole list, in its new order, so
+    // the sequence stays gapless without the server inferring the move.
+    savePagePositions(reportId, positions, config = {}) {
+        return this._api.put(this._path(`${reportId}/pages/positions`), { positions }, {
+            key: null,
+            ...config,
+        });
+    }
     // Component settings: any subset of { title, padding } — the human-facing
     // dialog edits; geometry (x/y/w/h/flowWidth) is persisted via savePositions
     // from the canvas instead.
@@ -158,6 +185,15 @@ class ReportData {
             ...config,
         });
     }
+    // Delete one component from the canvas, together with its filters and any
+    // filter group they leave empty. Soft server-side, but there is no restore
+    // anywhere in the UI, so the dialog's confirm presents it as permanent.
+    deleteComponent(reportId, componentId, config = {}) {
+        return this._api.delete(this._path(`${reportId}/components/${componentId}`), {}, {
+            key: 'component',
+            ...config,
+        });
+    }
     // Soft-delete: the report leaves the listing but keeps its pages and
     // components, so undelete() brings back the same document.
     delete(reportId, config = {}) {
@@ -230,6 +266,22 @@ class ReportData {
             ...config,
         });
     }
+    // The statement a component runs, for the SQL tab.
+    //
+    // Fetched rather than read off the component, because a DERIVED component has
+    // no stored SQL — it stores a document, and its statement only exists once
+    // the backend compiles that document. Compiled per request, for the one
+    // component being looked at, so opening a report never pays for it.
+    //
+    // `key: null` because the whole envelope is the answer here: a stale document
+    // comes back as { sql: null, error, errorType } and unwrapping one field
+    // would throw the diagnosis away.
+    componentSql(reportId, componentId, config = {}) {
+        return this._api.get(this._path(`${reportId}/components/${componentId}/sql`), {}, {
+            key: null,
+            ...config,
+        });
+    }
     // The component SQL's filterable output columns — drives the column picker
     // in the filter UI so a column name is never typed by hand.
     componentColumns(reportId, componentId, config = {}) {
@@ -1322,13 +1374,29 @@ class ComponentListComponent {
     groups;
     listComponent;
     listConfig;
-    columns = [];
+    // A plain list's columns are authored and fixed at init. A cross-tab's are
+    // the pivot dimension's VALUES, so they arrive with the rows and change
+    // whenever the filters do — which is why this is a signal rather than the
+    // one-shot read it used to be.
+    columns = signal([]);
+    // A cross-tab sorts only by its row-key column: every other header is a
+    // pivot value, and the server orders the long rows before pivoting, so a
+    // click on "Mar 2026" has nothing to order by.
+    pivoted = signal(false);
+    // A cut result is worse for a grid than for a list: the cut lands on the LONG
+    // rows before the reshape, so a pivot value living only in the tail vanishes
+    // as a whole COLUMN and straddled cells come back blank, indistinguishable
+    // from a real zero. The parent's truncation banner never fires for a list
+    // (it only renders what _load() fetched, which lists skip), so the warning
+    // belongs here.
+    truncated = signal(false);
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
     _destroyRef = inject(DestroyRef);
     ngOnInit() {
         const config = (this.component.config ?? {});
-        this.columns = config.columns ?? [];
+        this.pivoted.set(!!config.pivotBy?.column);
+        this.columns.set(config.columns ?? []);
         this._initListConfig(config);
         // Report-level filter changes that scope this component re-run the list.
         this._filterState.changesFor(this.component)
@@ -1438,14 +1506,52 @@ class ComponentListComponent {
         }
         return this._reportData
             .componentData(this.reportId, this.component.id, [...resolved.values()], state)
-            .pipe(map$1((data) => ({
-            data: data.rows ?? [],
-            paging: {
-                limit: data.paging?.pageSize ?? state.pageSize,
-                records: data.paging?.total ?? (data.rows?.length ?? 0),
-                page: data.paging?.page ?? state.page,
-            },
-        })));
+            .pipe(map$1((data) => {
+            // A cross-tab's headers come back with the rows: the row-key column
+            // first, then one per pivot value. Re-read them on every fetch, since
+            // a filter change can add or remove a column.
+            if (this.pivoted()) {
+                this.columns.set(this._pivotColumns(data));
+                this.truncated.set(!!data.truncated);
+            }
+            return {
+                data: data.rows ?? [],
+                paging: {
+                    limit: data.paging?.pageSize ?? state.pageSize,
+                    records: data.paging?.total ?? (data.rows?.length ?? 0),
+                    page: data.paging?.page ?? state.page,
+                },
+            };
+        }));
+    }
+    // A cross-tab's columns, built from the wire. The first is the row key and
+    // keeps its authored label; the rest are pivot VALUES used as headings. When
+    // the pivot axis is a time dimension the server sends the grain it bucketed
+    // at, so a period-start like "2026-01-01" is shown as "Jan 2026" — the same
+    // formatter the chart's x-axis uses, so a grid and a chart of the same query
+    // label their periods identically.
+    _pivotColumns(data) {
+        const config = (this.component.config ?? {});
+        const granularity = data.granularity;
+        const multiYear = this._spansMultipleYears(data.columns ?? []);
+        return (data.columns ?? []).map((column, index) => {
+            if (index === 0) {
+                return { column, label: config.rowBy?.label || column };
+            }
+            return {
+                column,
+                label: granularity ? formatPeriodLabel(column, granularity, multiYear) : column,
+            };
+        });
+    }
+    // Whether the period columns cross a year boundary, which decides if the
+    // formatter appends the year to each heading.
+    _spansMultipleYears(columns) {
+        const years = new Set(columns
+            .map((column) => /^(\d{4})-\d{2}-\d{2}/.exec(column))
+            .filter(Boolean)
+            .map((match) => match[1]));
+        return years.size > 1;
     }
     // The list's own FsFilter values, read back out of the fetch query by the
     // `f<filterId>` naming convention.
@@ -1482,14 +1588,14 @@ class ComponentListComponent {
         return values;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  @for (column of columns; track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"true\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-report-component-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         DatePipe,
                         FsListModule,
-                    ], template: "<fs-list [config]=\"listConfig\">\n  @for (column of columns; track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"true\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}\n"] }]
+                    ], template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"] }]
         }], propDecorators: { reportId: [{
                 type: Input
             }], component: [{
@@ -1965,6 +2071,10 @@ const PX_PER_INCH = 96;
 class ReportCanvasComponent {
     report;
     editMode = false;
+    // The page the host wants on screen, by page id (a deep link). Keyed on id
+    // rather than index so a link survives pages being reordered or deleted; an
+    // id that no longer resolves falls back to the first page.
+    pageId = null;
     // A component asked for its settings dialog — the page-level host opens it
     // (it owns MatDialog + the post-save reload).
     componentSettings = new EventEmitter();
@@ -1974,6 +2084,9 @@ class ReportCanvasComponent {
     // The viewer dismissed edit mode from the on-canvas badge — the host owns the
     // editMode flag, so it flips it off (mirrors the menu's "Done editing layout").
     editDone = new EventEmitter();
+    // The page on screen changed — the host reflects it in the URL so a refresh
+    // comes back to the same page. Carries the page id, never the index.
+    pageChanged = new EventEmitter();
     zoomPan;
     // The rendered components of the active page — only the canvas can reach the
     // one instance a settings save applies to.
@@ -1993,21 +2106,49 @@ class ReportCanvasComponent {
         clear: () => this._clearGuides(),
     };
     _reportData = inject(ReportData);
+    _prompt = inject(FsPrompt);
+    _message = inject(FsMessage);
     _cdRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
     _fitted = false;
     _previousPageCount = 0;
+    // The page id last announced through pageChanged, so a re-render that lands on
+    // the same page stays quiet — hosts reload on this and an unchanged page is
+    // not news.
+    _emittedPageId = null;
     ngOnChanges() {
         this.groups = new Map((this.report?.filterGroups ?? []).map((group) => [group.id, group]));
         const pageCount = this.report?.pages?.length ?? 0;
         // A page was just added (the host re-fetched the report) — land on it.
-        if (pageCount > this._previousPageCount && this._previousPageCount > 0) {
+        const pageAdded = pageCount > this._previousPageCount && this._previousPageCount > 0;
+        if (pageAdded) {
             this.activePageIndex = pageCount - 1;
         }
         this._previousPageCount = pageCount;
+        // Honour an incoming deep link, but never over a just-added page: adding a
+        // page is a deliberate act in this tab, while pageId is the stale value the
+        // host is still holding from the URL. An id that does not resolve is left
+        // alone rather than forced to the first page — the report may still be
+        // loading, and the clamp below is the real guard.
+        if (!pageAdded && this.pageId != null) {
+            const index = this.report?.pages?.findIndex((page) => page.id === this.pageId) ?? -1;
+            if (index > -1) {
+                this.activePageIndex = index;
+            }
+        }
         if (this.activePageIndex >= pageCount) {
             this.activePageIndex = 0;
         }
+        // Tell the host which page is open whenever that changes — including the
+        // FIRST time the report renders, not only when someone clicks a page.
+        // Hosts bind things to the open page (the report chat scopes its
+        // conversations to it), and without this they would sit on no page at all
+        // until the first manual page click.
+        const activePageId = this.activePage?.id ?? null;
+        if (activePageId !== this._emittedPageId) {
+            this._emittedPageId = activePageId;
+            this.pageChanged.emit(activePageId);
+        }
     }
     // Report heading size in px (config is points; the canvas renders at
     // 96px/in, so points × 96/72). Inherited by component titles via a CSS var.
@@ -2034,6 +2175,10 @@ class ReportCanvasComponent {
     selectPage(index) {
         this.activePageIndex = index;
         this.selectedComponentId = null;
+        // Kept in step with the ngOnChanges announcement so the two can't disagree
+        // about what the host was last told.
+        this._emittedPageId = this.activePage?.id ?? null;
+        this.pageChanged.emit(this._emittedPageId);
     }
     // Append a blank page; the host re-fetches the report and ngOnChanges lands
     // the view on the new (last) page.
@@ -2048,6 +2193,71 @@ class ReportCanvasComponent {
     pageLabel(page, index) {
         return page.name || `Page ${index + 1}`;
     }
+    // Rename from the tab's kebab. The page list is patched in place rather than
+    // re-fetching the report: nothing else on the canvas depends on a page's
+    // name, and a re-fetch would re-run every component's query to repaint a
+    // chip's label.
+    renamePage(page) {
+        this._prompt.input({
+            title: 'Edit Page Name',
+            label: 'Name',
+            default: page.name ?? '',
+            commitLabel: 'Save',
+            required: true,
+        })
+            .pipe(switchMap((name) => this._reportData
+            .updatePage(this.report.id, page.id, name)
+            .pipe(map$1(() => name))), takeUntilDestroyed(this._destroyRef))
+            .subscribe((name) => {
+            page.name = name;
+            this._message.success('Saved page name');
+            this._cdRef.markForCheck();
+        });
+    }
+    // Delete from the tab's kebab. The confirm names the page and says the
+    // components go with it — the server refuses the last page, and that refusal
+    // surfaces as the API error message rather than being second-guessed here.
+    deletePage(page) {
+        this._prompt.confirm({
+            title: 'Confirm',
+            template: `Are you sure you would like to delete "${this.pageLabel(page, this.report.pages.indexOf(page))}" and everything on it?`,
+        })
+            .pipe(switchMap(() => this._reportData.deletePage(this.report.id, page.id)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            const index = this.report.pages.indexOf(page);
+            this.report.pages.splice(index, 1);
+            // Land on the neighbour rather than snapping back to the first page —
+            // deleting page 4 of 6 should leave you looking at what is now page 4.
+            this.activePageIndex = Math.min(index, this.report.pages.length - 1);
+            this._previousPageCount = this.report.pages.length;
+            this.selectedComponentId = null;
+            // The id in the URL just stopped existing — replace it with the
+            // neighbour we landed on, or a refresh would 404 its way to page one.
+            this.pageChanged.emit(this.activePage?.id ?? null);
+            this._message.success('Deleted page');
+            this._cdRef.markForCheck();
+        });
+    }
+    // A tab was dragged to a new slot: reorder locally so the chips settle
+    // immediately, keep the viewer on the page they were looking at, and persist
+    // the whole sequence in one PUT.
+    onPageDropped(event) {
+        if (event.previousIndex === event.currentIndex) {
+            return;
+        }
+        const activePage = this.activePage;
+        moveItemInArray(this.report.pages, event.previousIndex, event.currentIndex);
+        const positions = this.report.pages.map((page, order) => {
+            page.order = order;
+            return { pageId: page.id, order };
+        });
+        this.activePageIndex = activePage
+            ? this.report.pages.indexOf(activePage)
+            : this.activePageIndex;
+        this._reportData.savePagePositions(this.report.id, positions)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
     // Hand presentation settings (title, padding) saved in the settings dialog to
     // the one component they belong to. Nothing here feeds the query, so that
     // component repaints and every other one on the page is left alone.
@@ -2265,27 +2475,33 @@ class ReportCanvasComponent {
         this._guides?.nativeElement?.replaceChildren();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", editDone: "editDone" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }, { propertyName: "_renderedComponents", predicate: ReportComponentComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <div class=\"page-tabs\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <button\n            type=\"button\"\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            {{ pageLabel(page, index) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs .page-tab{border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 14px;font-size:12px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab.add-page{display:inline-flex;align-items:center;gap:2px;padding-left:8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i1$2.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportCanvasComponent, isStandalone: true, selector: "app-report-canvas", inputs: { report: "report", editMode: "editMode", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", editDone: "editDone", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "zoomPan", first: true, predicate: FsZoomPanComponent, descendants: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }, { propertyName: "_guides", first: true, predicate: ["guides"], descendants: true }, { propertyName: "_renderedComponents", predicate: ReportComponentComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <!-- The chip is the drag handle AND the tab: clicking selects,\n               dragging reorders. The kebab lives inside it, so the whole\n               control stays one chip instead of growing a second button. -->\n          <div\n            cdkDrag\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n            <!-- The kebab opens the menu rather than starting a drag or\n                 switching pages, so it swallows its own click. -->\n            <span\n              class=\"page-tab-menu\"\n              [fsMenuTriggerFor]=\"pageMenu\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\">\n              <mat-icon>more_vert</mat-icon>\n            </span>\n          </div>\n          <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n               and a menu overlay anchored to a cloned trigger opens detached\n               from the real tab. -->\n          <fs-menu #pageMenu>\n            <ng-template\n              fs-menu-item\n              (click)=\"renamePage(page)\">\n              Edit name\n            </ng-template>\n            <ng-template\n              fs-menu-item\n              (click)=\"deletePage(page)\">\n              Delete\n            </ng-template>\n          </fs-menu>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "ngmodule", type: FsZoomPanModule }, { kind: "component", type: i3.FsZoomPanComponent, selector: "fs-zoom-pan", inputs: ["zoomMax", "zoomMin", "zoomScale", "zoomDefault", "zoomFactor", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-report-canvas', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DragDropModule,
                         MatButton,
                         MatIcon,
                         MatTooltip,
+                        FsMenuModule,
                         FsZoomPanModule,
                         ReportComponentComponent,
-                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <div class=\"page-tabs\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <button\n            type=\"button\"\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            {{ pageLabel(page, index) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs .page-tab{border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 14px;font-size:12px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab.add-page{display:inline-flex;align-items:center;gap:2px;padding-left:8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
+                    ], template: "<div class=\"canvas\">\n  <div\n    #viewport\n    class=\"page-viewport\"\n    (pointerdown)=\"onCanvasPointerDown()\">\n    <fs-zoom-pan\n      [zoomMin]=\"0.1\"\n      [zoomMax]=\"3\"\n      (zoomed)=\"onZoomed($event)\">\n      @if (activePage; as page) {\n        <div\n          class=\"page\"\n          [class.flow]=\"isFlow\"\n          [class.editing]=\"editMode\"\n          [style.width.px]=\"report.pageWidth * PX\"\n          [style.height.px]=\"report.pageHeight * PX\"\n          [style.padding.px]=\"isFlow ? flowPadding * PX : 0\"\n          [style.--canvas-zoom]=\"zoom\"\n          [style.--report-heading-size.px]=\"headingSizePx\">\n          @if (isFlow) {\n            @for (component of flowComponents; track component.id) {\n              <app-report-component\n                class=\"flow-item\"\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.width.%]=\"component.flowWidth\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (flowReorder)=\"onFlowReorder($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          } @else {\n            @for (component of page.components; track component.id) {\n              <app-report-component\n                [reportId]=\"report.id\"\n                [component]=\"component\"\n                [groups]=\"groups\"\n                [editMode]=\"editMode\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [selected]=\"component.id === selectedComponentId\"\n                [style.left.px]=\"component.x * PX\"\n                [style.top.px]=\"component.y * PX\"\n                [style.width.px]=\"component.w * PX\"\n                [style.height.px]=\"component.autoHeight ? null : component.h * PX\"\n                (selectComponent)=\"selectComponent($event)\"\n                (positionChanged)=\"onPositionChanged($event)\"\n                (openSettings)=\"componentSettings.emit($event)\">\n              </app-report-component>\n            }\n          }\n\n          <div\n            #guides\n            class=\"guides\">\n          </div>\n\n          @if (!page.components.length) {\n            <div class=\"page-empty\">\n              Ask the assistant to add a chart, list or KPI to this page.\n            </div>\n          }\n        </div>\n      }\n    </fs-zoom-pan>\n\n    @if (editMode) {\n      <button\n        mat-flat-button\n        type=\"button\"\n        color=\"primary\"\n        class=\"edit-done\"\n        matTooltip=\"Exit layout editing\"\n        (click)=\"editDone.emit()\">\n        <mat-icon>check</mat-icon>\n        Done editing\n      </button>\n    }\n  </div>\n\n  <div class=\"canvas-toolbar\">\n    <!-- Tabs are one horizontal drop list: dragging a chip reorders the pages.\n         The drop INDEX is computed along X (orientation), but the preview is\n         deliberately left unbounded on both axes \u2014 pinning it to the row with\n         cdkDragBoundary means the chip you are dragging covers the chips you\n         are dragging it past, and you cannot see where it is going to land. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @if ((report?.pages?.length ?? 0) > 1) {\n        @for (page of report.pages; track page.id; let index = $index) {\n          <!-- The chip is the drag handle AND the tab: clicking selects,\n               dragging reorders. The kebab lives inside it, so the whole\n               control stays one chip instead of growing a second button. -->\n          <div\n            cdkDrag\n            class=\"page-tab\"\n            [class.active]=\"index === activePageIndex\"\n            (click)=\"selectPage(index)\">\n            <span class=\"page-tab-label\">{{ pageLabel(page, index) }}</span>\n            <!-- The kebab opens the menu rather than starting a drag or\n                 switching pages, so it swallows its own click. -->\n            <span\n              class=\"page-tab-menu\"\n              [fsMenuTriggerFor]=\"pageMenu\"\n              (click)=\"$event.stopPropagation()\"\n              (mousedown)=\"$event.stopPropagation()\">\n              <mat-icon>more_vert</mat-icon>\n            </span>\n          </div>\n          <!-- Outside the chip: cdkDrag clones its host into the drag preview,\n               and a menu overlay anchored to a cloned trigger opens detached\n               from the real tab. -->\n          <fs-menu #pageMenu>\n            <ng-template\n              fs-menu-item\n              (click)=\"renamePage(page)\">\n              Edit name\n            </ng-template>\n            <ng-template\n              fs-menu-item\n              (click)=\"deletePage(page)\">\n              Delete\n            </ng-template>\n          </fs-menu>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"page-tab add-page\"\n        matTooltip=\"Add page\"\n        (click)=\"addPage()\">\n        <mat-icon>add</mat-icon>\n        Page\n      </button>\n    </div>\n\n    <div class=\"zoom-controls\">\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom out\"\n        (click)=\"zoomOut()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-label\"\n        matTooltip=\"Zoom to 100%\"\n        (click)=\"zoomActual()\">\n        {{ (zoom * 100).toFixed(0) }}%\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Zoom in\"\n        (click)=\"zoomIn()\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"zoom-button\"\n        matTooltip=\"Fit page\"\n        (click)=\"zoomFit()\">\n        <mat-icon>fit_screen</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;margin-top:10px}.canvas{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-toolbar .page-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-toolbar .page-tabs fs-menu{display:none}.canvas-toolbar .page-tabs .page-tab{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;cursor:pointer}.canvas-toolbar .page-tabs .page-tab.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.canvas-toolbar .page-tabs .page-tab .page-tab-label{white-space:nowrap}.canvas-toolbar .page-tabs .page-tab .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.canvas-toolbar .page-tabs .page-tab .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.canvas-toolbar .page-tabs .page-tab .page-tab-menu:hover{background:#0f172a14;opacity:1}.canvas-toolbar .page-tabs .page-tab.active .page-tab-menu:hover{background:#ffffff38}.canvas-toolbar .page-tabs .page-tab.add-page{gap:2px;padding:4px 14px 4px 8px;border-style:dashed;color:#52606d}.canvas-toolbar .page-tabs .page-tab.add-page mat-icon{font-size:16px;width:16px;height:16px}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder{background:transparent;border-style:dashed;border-color:#cbd2d9}.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-label,.canvas-toolbar .page-tabs .page-tab.cdk-drag-placeholder .page-tab-menu{visibility:hidden}.canvas-toolbar .page-tabs .cdk-drag-animating,.canvas-toolbar .page-tabs.cdk-drop-list-dragging .page-tab:not(.cdk-drag-placeholder){transition:transform .18s cubic-bezier(0,0,.2,1)}.canvas-toolbar .zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid #e4e7eb;border-radius:18px;background:#fff;padding:2px 6px}.canvas-toolbar .zoom-controls .zoom-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#52606d;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-button:hover{background:#f0f4f8}.canvas-toolbar .zoom-controls .zoom-button mat-icon{font-size:18px;width:18px;height:18px}.canvas-toolbar .zoom-controls .zoom-label{border:none;background:transparent;font-size:12px;color:#52606d;min-width:44px;cursor:pointer}.canvas-toolbar .zoom-controls .zoom-label:hover{color:#1f2933}.page-tab.cdk-drag-preview{display:inline-flex;align-items:center;box-sizing:border-box;border:1px solid #e4e7eb;border-radius:16px;background:#fff;padding:4px 6px 4px 14px;font-size:12px;line-height:16px;color:#52606d;box-shadow:0 3px 10px #0f172a3d}.page-tab.cdk-drag-preview.active{background:var(--brand-primary-color, #3b82f6);border-color:var(--brand-primary-color, #3b82f6);color:#fff}.page-tab.cdk-drag-preview .page-tab-label{white-space:nowrap}.page-tab.cdk-drag-preview .page-tab-menu{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;margin-left:2px;border-radius:50%;opacity:.75}.page-tab.cdk-drag-preview .page-tab-menu mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.page-viewport{position:relative;flex:1;min-height:420px;border:1px solid #e4e7eb;border-radius:8px;background:#eef1f5;overflow:hidden}.page-viewport fs-zoom-pan{width:100%;height:100%}.edit-done{position:absolute;top:12px;right:12px;z-index:40;border-radius:999px;box-shadow:0 2px 10px #0f172a2e}.page{position:relative;background:#fff;border-radius:2px;box-shadow:0 2px 12px #0f172a1f,0 0 0 1px #0f172a0a;box-sizing:border-box}.page.flow{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start}.page.editing{background-image:radial-gradient(circle,#d8dee6 1px,transparent 1px);background-size:24px 24px}.guides{position:absolute;inset:0;pointer-events:none;z-index:30}.guides ::ng-deep .guide{position:absolute;background:#2196f3}.guides ::ng-deep .guide.guide-v{top:0;bottom:0;width:calc(1.25px / var(--canvas-zoom, 1))}.guides ::ng-deep .guide.guide-h{left:0;right:0;height:calc(1.25px / var(--canvas-zoom, 1))}.page-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa5b1;font-size:14px;pointer-events:none}\n"] }]
         }], propDecorators: { report: [{
                 type: Input
             }], editMode: [{
                 type: Input
+            }], pageId: [{
+                type: Input
             }], componentSettings: [{
                 type: Output
             }], reportChanged: [{
                 type: Output
             }], editDone: [{
                 type: Output
+            }], pageChanged: [{
+                type: Output
             }], zoomPan: [{
                 type: ViewChild,
                 args: [FsZoomPanComponent]
@@ -2327,6 +2543,15 @@ class ComponentSettingsComponent {
     paddingBottom = DEFAULT_COMPONENT_PADDING;
     paddingLeft = DEFAULT_COMPONENT_PADDING;
     configJson = '';
+    // ---- SQL tab state ----
+    // The statement, once fetched. Null while it is in flight, and null when the
+    // component's document could not be compiled (sqlError then says why).
+    sql = null;
+    // True when the statement is a DERIVED baseline: no filters, UTC, the
+    // authored grain. The tab says so, because the numbers on screen come from
+    // this statement plus the viewer's own choices and the two can differ.
+    sqlBaseline = false;
+    sqlError = null;
     // ---- filter management state ----
     // One row per filterable column. The two booleans drive the toggles; we flip
     // them optimistically on click (so the UI never blinks while the request is
@@ -2346,6 +2571,8 @@ class ComponentSettingsComponent {
     _dialogRef = inject(MatDialogRef);
     _reportData = inject(ReportData);
     _message = inject(FsMessage);
+    _prompt = inject(FsPrompt);
+    _destroyRef = inject(DestroyRef);
     _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
         this.report = this._data.report;
@@ -2359,11 +2586,29 @@ class ComponentSettingsComponent {
         this.configJson = JSON.stringify(this.component.config ?? {}, null, 2);
         this._seedFilters(this.report, this.component.id);
         this._loadColumns();
+        this._loadSql();
     }
     // Human-friendly name for the inferred interface shown beside each column.
     typeLabel(type) {
         return this._typeLabels[type] ?? type;
     }
+    // Confirm and delete here, while the dialog is still open, then close with a
+    // `deleted` result for the page to act on — the same shape the report
+    // settings dialog uses for deleting a report.
+    //
+    // The confirm says it cannot be undone because, from the UI, it cannot: the
+    // row is soft-deleted server-side but nothing here restores a component.
+    delete() {
+        this._prompt.confirm({
+            title: 'Delete Component',
+            template: `Are you sure you would like to delete "${this.component.title || 'this component'}"? This cannot be undone.`,
+        })
+            .pipe(switchMap$1(() => this._reportData.deleteComponent(this.report.id, this.component.id)), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._message.success('Component deleted');
+            this._dialogRef.close({ deleted: true });
+        });
+    }
     save = () => {
         const settings = {
             title: this.title,
@@ -2463,6 +2708,32 @@ class ComponentSettingsComponent {
         this._filters = component?.filters ?? [];
         this._rebuildRows();
     }
+    // The statement the SQL tab shows. Fetched rather than read off the
+    // component: a derived component stores a document, not SQL, so its
+    // statement only exists once the backend compiles it.
+    //
+    // Loaded in ngOnInit beside the columns, NOT on tab activation. The tabs are
+    // not lazy (no matTabContent), and switching the tab-group's `[(selected)]`
+    // banana-box to a one-way binding plus (selectedChange) to get a hook would
+    // break it: FsTabsHeaderTabGroupDirective self-assigns `this.selected` before
+    // it emits, so the event is filtered out and the load would never fire. One
+    // small request when a dialog opens is not worth that risk.
+    _loadSql() {
+        this._reportData.componentSql(this.report.id, this.component.id)
+            .subscribe({
+            next: (preview) => {
+                this.sql = preview?.sql ?? null;
+                this.sqlBaseline = !!preview?.baseline;
+                this.sqlError = preview?.error ?? null;
+                this._cdRef.markForCheck();
+            },
+            error: (error) => {
+                this.sql = null;
+                this.sqlError = error?.error?.message ?? 'Could not read the component SQL';
+                this._cdRef.markForCheck();
+            },
+        });
+    }
     _loadColumns() {
         this._reportData.componentColumns(this.report.id, this.component.id)
             .subscribe({
@@ -2485,7 +2756,7 @@ class ComponentSettingsComponent {
             .replace(/\b\w/g, (character) => character.toUpperCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$1.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- Save | Delete | Cancel, the standard order. fs-form-dialog-actions\n           renders its own Save/Done BEFORE the projected content, which would\n           put Delete after Cancel, so `[save]=\"false\"` foots the row here and\n           all three buttons are projected in order. Save submits the Settings\n           tab; the other tabs persist as you touch them, so they get Done. -->\n      <fs-form-dialog-actions [save]=\"false\">\n        @if (selectedTab === 'settings') {\n          <button\n              mat-button\n              type=\"submit\"\n              color=\"primary\">\n            Save\n          </button>\n        } @else {\n          <button\n              mat-button\n              type=\"button\"\n              color=\"primary\"\n              [mat-dialog-close]=\"null\">\n            Done\n          </button>\n        }\n        <button\n            mat-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            class=\"cancel-button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentSettingsComponent, decorators: [{
             type: Component,
@@ -2500,13 +2771,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatDialogTitle,
                         MatDialogContent,
                         MatDialogActions,
+                        MatDialogClose,
                         MatFormField,
                         MatLabel,
                         MatSuffix,
+                        MatButton,
                         MatInput,
                         MatSlideToggle,
                         MatTooltip,
-                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ component.sql }}\n            </pre>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions\n        [save]=\"selectedTab === 'settings'\"\n        [done]=\"selectedTab !== 'settings'\">\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
+                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      {{ component.title || 'Component' }}\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Title\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"title\"\n                name=\"title\">\n            </mat-form-field>\n            <div class=\"subheading-2\">\n              Padding\n            </div>\n            <div class=\"geometry-row\">\n              <mat-form-field>\n                <mat-label>\n                  Top\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingTop\"\n                  name=\"paddingTop\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Right\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingRight\"\n                  name=\"paddingRight\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Bottom\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingBottom\"\n                  name=\"paddingBottom\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>\n                  Left\n                </mat-label>\n                <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"3\"\n                  [(ngModel)]=\"paddingLeft\"\n                  name=\"paddingLeft\"\n                  [fsFormMin]=\"0\">\n                <div matTextSuffix>\n                  in\n                </div>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"tab-body\">\n            @if (columnsError) {\n              <div class=\"filters-empty error\">\n                {{ columnsError }}\n              </div>\n            } @else if (rows.length) {\n              <!-- Every filterable column. Toggle where its control shows: in\n                   the report bar, on this component, both, or neither. The\n                   interface (date range vs value picker) follows the data. -->\n              <table class=\"filter-table\">\n                <thead>\n                  <tr>\n                    <th class=\"filter-col-name\">\n                      Filter\n                    </th>\n                    <th class=\"filter-col-type\">\n                      Type\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      Report bar\n                    </th>\n                    <th class=\"filter-col-toggle\">\n                      This component\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of rows; track row.column) {\n                    <tr>\n                      <td class=\"filter-col-name\">\n                        {{ row.label }}\n                      </td>\n                      <td class=\"filter-col-type\">\n                        {{ typeLabel(row.type) }}\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.report\"\n                          (ngModelChange)=\"setExposure(row, 'report', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show in the report bar\">\n                        </mat-slide-toggle>\n                      </td>\n                      <td class=\"filter-col-toggle\">\n                        <mat-slide-toggle\n                          [ngModel]=\"row.component\"\n                          (ngModelChange)=\"setExposure(row, 'component', $event)\"\n                          [ngModelOptions]=\"{ standalone: true }\"\n                          matTooltip=\"Show on this component\">\n                        </mat-slide-toggle>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no filterable columns yet \u2014 give it some SQL first.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"SQL\"\n            name=\"sql\">\n          <div class=\"tab-body\">\n            @if (sqlError) {\n              <div class=\"filters-empty error\">\n                {{ sqlError }}\n              </div>\n            } @else if (sql) {\n              @if (sqlBaseline) {\n                <!-- A derived component's statement is compiled from its\n                     document with no viewer state, so it is not byte-for-byte\n                     what produced the numbers on screen. Said here rather than\n                     left for the reader to discover. -->\n                <div class=\"filters-empty\">\n                  Compiled from this component's query \u2014 no filters applied, times in UTC.\n                </div>\n              }\n              <pre class=\"code-block\">{{ sql }}</pre>\n            } @else {\n              <div class=\"filters-empty\">\n                This component has no SQL yet.\n              </div>\n            }\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Config\"\n            name=\"config\">\n          <div class=\"tab-body\">\n            <pre class=\"code-block\">\n              {{ configJson }}\n            </pre>\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- Save | Delete | Cancel, the standard order. fs-form-dialog-actions\n           renders its own Save/Done BEFORE the projected content, which would\n           put Delete after Cancel, so `[save]=\"false\"` foots the row here and\n           all three buttons are projected in order. Save submits the Settings\n           tab; the other tabs persist as you touch them, so they get Done. -->\n      <fs-form-dialog-actions [save]=\"false\">\n        @if (selectedTab === 'settings') {\n          <button\n              mat-button\n              type=\"submit\"\n              color=\"primary\">\n            Save\n          </button>\n        } @else {\n          <button\n              mat-button\n              type=\"button\"\n              color=\"primary\"\n              [mat-dialog-close]=\"null\">\n            Done\n          </button>\n        }\n        <button\n            mat-button\n            type=\"button\"\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            class=\"cancel-button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}.geometry-row{display:flex;gap:8px}.geometry-row mat-form-field{flex:1}.filter-table{border-spacing:0;width:100%;border-collapse:collapse}.filter-table thead th{color:#8f8f8f;font-weight:400;font-size:85%;text-align:left;padding:8px 16px}.filter-table tbody tr{clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}.filter-table tbody td{border:none;background-color:#fafafa;padding:8px 16px;vertical-align:middle;text-align:left}.filter-table .filter-col-name{font-weight:600;color:#1f2933}.filter-table .filter-col-type{color:#7b8794;width:120px}.filter-table .filter-col-toggle,.filter-table th.filter-col-toggle{width:130px;text-align:center}.filters-empty{font-size:13px;color:#7b8794;padding:8px 0 4px}.filters-empty.error{color:#e15759}.code-block{margin:0;padding:10px 12px;background:#1f2933;color:#e4e7eb;border-radius:6px;font-family:JetBrains Mono,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}\n"] }]
         }] });
 
 // Self-contained timezone picker for the report settings dialog. The IANA zone
@@ -2545,7 +2818,7 @@ class TimezoneSelectComponent {
             : [this._browserTimezone];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimezoneSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimezoneSelectComponent, isStandalone: true, selector: "fs-ai-report-timezone-select", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", timezone: "timezone" }, outputs: { timezoneChange: "timezoneChange" }, ngImport: i0, template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimezoneSelectComponent, isStandalone: true, selector: "fs-ai-report-timezone-select", inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", timezone: "timezone" }, outputs: { timezoneChange: "timezoneChange" }, ngImport: i0, template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimezoneSelectComponent, decorators: [{
             type: Component,
@@ -2644,7 +2917,7 @@ class ReportSettingsComponent {
             title: 'Delete Report',
             template: `Delete "${this._data.report.name}"? This cannot be undone.`,
         })
-            .pipe(switchMap(() => this._reportData.delete(this._data.report.id)), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap$1(() => this._reportData.delete(this._data.report.id)), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this._message.success('Report deleted');
             this._dialogRef.close({ action: 'deleted' });
@@ -2777,7 +3050,7 @@ class ReportSettingsComponent {
         return Object.keys(normalized).length ? normalized : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\n              The page, typed in inches. Orientation is not asked for because it\n              is not an independent choice - a page wider than it is tall IS\n              landscape - so the two numbers say everything there is to say.\n            -->\n            <div class=\"fs-row.gap-sm.align-start\">\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Width\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageWidth\"\n                    name=\"pageWidth\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageHeight\"\n                    name=\"pageHeight\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n            </div>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$1.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$1.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$1.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i7.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "width"], outputs: ["change"] }, { 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: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportSettingsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\n              The page, typed in inches. Orientation is not asked for because it\n              is not an independent choice - a page wider than it is tall IS\n              landscape - so the two numbers say everything there is to say.\n            -->\n            <div class=\"fs-row.gap-sm.align-start\">\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Width\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageWidth\"\n                    name=\"pageWidth\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n              <mat-form-field class=\"fs-flex\">\n                <mat-label>\n                  Height\n                </mat-label>\n                <input\n                    matInput\n                    fsMaskNumber\n                    [scale]=\"1\"\n                    [(ngModel)]=\"pageHeight\"\n                    name=\"pageHeight\"\n                    [fsFormRequired]=\"true\"\n                    [fsFormMin]=\"pageDimensionMin\"\n                    [fsFormMax]=\"pageDimensionMax\">\n                <div matTextSuffix>\n                  inches\n                </div>\n              </mat-form-field>\n            </div>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Filters\"\n            name=\"filters\">\n          <div class=\"fs-column tab-body\">\n            @if (filterRows().length) {\n              @for (row of filterRows(); track row.group.id) {\n                @switch (row.group.type) {\n                  @case ('dateRange') {\n                    <div class=\"fs-row.gap-sm.align-center fs-flex\">\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default From {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.start\"\n                          [name]=\"'start' + row.group.id\">\n                      </mat-form-field>\n                      <mat-form-field class=\"fs-flex\">\n                        <mat-label>\n                          Default To {{ row.label }}\n                        </mat-label>\n                        <input\n                          matInput\n                          fsDatePicker\n                          [(ngModel)]=\"row.end\"\n                          [name]=\"'end' + row.group.id\">\n                      </mat-form-field>\n                    </div>\n                  }\n                  @case ('select') {\n                    <fs-autocomplete-chips\n                        class=\"fs-flex\"\n                        [label]=\"'Default ' + row.label\"\n                        [fetch]=\"row.fetch\"\n                        [(ngModel)]=\"row.values\"\n                        [name]=\"'values' + row.group.id\"\n                        [multiple]=\"true\"\n                        [fetchOnFocus]=\"true\">\n                      <ng-template\n                          fsAutocompleteChipsTemplate\n                          let-object=\"object\">\n                        {{ object.name }}\n                      </ng-template>\n                    </fs-autocomplete-chips>\n                  }\n                  @default {\n                    <mat-form-field class=\"fs-flex\">\n                      <mat-label>\n                        Default {{ row.label }}\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"row.value\"\n                        [name]=\"'value' + row.group.id\">\n                    </mat-form-field>\n                  }\n                }\n              }\n            } @else {\n              <fs-message-info>\n                This report has no report-level filters yet. Add a filter to a\n                component (its settings \u2192 Filters) and show it in the report bar,\n                then set its default here.\n              </fs-message-info>\n            }\n          </div>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <fs-form-dialog-actions>\n        <button\n            type=\"button\"\n            mat-button\n            color=\"warn\"\n            (click)=\"delete()\">\n          Delete\n        </button>\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>", styles: ["mat-form-field{width:100%}.tab-body{padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$2.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsMaskModule }, { kind: "directive", type: i3$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i7.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "width"], outputs: ["change"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.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$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TimezoneSelectComponent, selector: "fs-ai-report-timezone-select", inputs: ["placeholder", "required", "disabled", "timezone"], outputs: ["timezoneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportSettingsComponent, decorators: [{
             type: Component,
@@ -2968,7 +3241,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-CygLeElT.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-Id_HJuQO.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -3404,8 +3677,8 @@ class ReportExportService {
     // disagree with each other, and nothing on it would say so.
     _run(report, render) {
         return this._collector.collect(report)
-            .pipe(switchMap((collected) => this._gate(collected)
-            .pipe(switchMap((choice) => choice === RETRY
+            .pipe(switchMap$1((collected) => this._gate(collected)
+            .pipe(switchMap$1((choice) => choice === RETRY
             ? this._run(report, render)
             : from(render(collected))))));
     }
@@ -3551,7 +3824,7 @@ class ReportComponent {
             commitLabel: 'Create',
             required: true,
         })
-            .pipe(switchMap((name) => this._reportService.create(name)), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap$1((name) => this._reportService.create(name)), takeUntilDestroyed(this._destroyRef))
             .subscribe((report) => {
             this.selected = report;
             this._cdRef.markForCheck();
@@ -3611,6 +3884,15 @@ class ReportComponent {
         dialogRef.afterClosed()
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((result) => {
+            // The dialog confirms + performs the delete itself. The component is
+            // gone from the report, so reload rather than patching it out locally —
+            // its filters went with it, which the report bar has to be rebuilt for.
+            if (result?.deleted) {
+                if (this.selected) {
+                    this._loadReport(this.selected.id);
+                }
+                return;
+            }
             // The report's filter groups changed, so the report bar and the
             // on-component strips have to be rebuilt from a fresh report.
             if (filtersChanged) {
@@ -3815,8 +4097,8 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CygLeElT.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 });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-Id_HJuQO.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$3.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$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$3.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$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "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", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
             type: Component,
@@ -3830,7 +4112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
                         // this route's chunk.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CygLeElT.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-Id_HJuQO.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -3870,14 +4152,14 @@ class InstructionHistoryComponent {
             template: 'Make this version the current AI knowledge? The newer versions stay in the history.',
             commitLabel: 'Restore',
         })
-            .pipe(switchMap(() => this._reportData.restoreInstruction(version.id)), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap$1(() => this._reportData.restoreInstruction(version.id)), takeUntilDestroyed(this._destroyRef))
             .subscribe((instructions) => {
             this.versions.set(instructions.versions);
             this._message.success('Version restored');
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InstructionHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InstructionHistoryComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <fs-dialog-title>\n    AI Knowledge History\n  </fs-dialog-title>\n  <mat-dialog-content>\n    @if (versions().length) {\n      <div class=\"versions\">\n        @for (version of versions(); track version.id) {\n          <div class=\"version\">\n            <div class=\"version-header\">\n              <fs-date\n                  [date]=\"version.createDate\"\n                  format=\"date-time\">\n              </fs-date>\n              @if (version.accountName) {\n                <span class=\"author\">{{ version.accountName }}</span>\n              }\n              <span class=\"spacer\"></span>\n              @if (version.current) {\n                <fs-chip\n                    size=\"tiny\"\n                    [backgroundColor]=\"'#2e7d32'\"\n                    color=\"#ffffff\">\n                  Current\n                </fs-chip>\n              } @else {\n                <button\n                    type=\"button\"\n                    mat-stroked-button\n                    (click)=\"restore(version)\">\n                  Restore\n                </button>\n              }\n            </div>\n            <div class=\"version-preview\">\n              <fs-markdown-renderer [markdown]=\"version.content\"></fs-markdown-renderer>\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <fs-message-info>\n        No versions yet \u2014 every save of the AI Knowledge document lands here, and\n        any version can be restored.\n      </fs-message-info>\n    }\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        type=\"button\"\n        mat-button\n        color=\"primary\"\n        [mat-dialog-close]=\"null\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".version{border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:12px}.version+.version{margin-top:12px}.version .version-header{display:flex;align-items:center;gap:8px}.version .version-header .author{color:#0009}.version .version-header .spacer{flex:1}.version .version-preview{margin-top:8px;max-height:200px;overflow-y:auto;border-top:1px solid rgba(0,0,0,.08);padding-top:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "disabled", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$1.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "component", type: FsMarkdownRendererComponent, selector: "fs-markdown-renderer", inputs: ["config", "markdown"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageInfoComponent, selector: "fs-message-info" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InstructionHistoryComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <fs-dialog-title>\n    AI Knowledge History\n  </fs-dialog-title>\n  <mat-dialog-content>\n    @if (versions().length) {\n      <div class=\"versions\">\n        @for (version of versions(); track version.id) {\n          <div class=\"version\">\n            <div class=\"version-header\">\n              <fs-date\n                  [date]=\"version.createDate\"\n                  format=\"date-time\">\n              </fs-date>\n              @if (version.accountName) {\n                <span class=\"author\">{{ version.accountName }}</span>\n              }\n              <span class=\"spacer\"></span>\n              @if (version.current) {\n                <fs-chip\n                    size=\"tiny\"\n                    [backgroundColor]=\"'#2e7d32'\"\n                    color=\"#ffffff\">\n                  Current\n                </fs-chip>\n              } @else {\n                <button\n                    type=\"button\"\n                    mat-stroked-button\n                    (click)=\"restore(version)\">\n                  Restore\n                </button>\n              }\n            </div>\n            <div class=\"version-preview\">\n              <fs-markdown-renderer [markdown]=\"version.content\"></fs-markdown-renderer>\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <fs-message-info>\n        No versions yet \u2014 every save of the AI Knowledge document lands here, and\n        any version can be restored.\n      </fs-message-info>\n    }\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        type=\"button\"\n        mat-button\n        color=\"primary\"\n        [mat-dialog-close]=\"null\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".version{border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:12px}.version+.version{margin-top:12px}.version .version-header{display:flex;align-items:center;gap:8px}.version .version-header .author{color:#0009}.version .version-header .spacer{flex:1}.version .version-preview{margin-top:8px;max-height:200px;overflow-y:auto;border-top:1px solid rgba(0,0,0,.08);padding-top:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "disabled", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "component", type: FsMarkdownRendererComponent, selector: "fs-markdown-renderer", inputs: ["config", "markdown"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageInfoComponent, selector: "fs-message-info" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InstructionHistoryComponent, decorators: [{
             type: Component,
@@ -3907,7 +4189,7 @@ class AiKnowledgeComponent {
     content = model('');
     config = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiKnowledgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AiKnowledgeComponent, isStandalone: true, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { content: "contentChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    This document is given to the report AI on every chat message. Use it for\n    terminology, business rules and special cases the AI can't work out from the\n    data on its own \u2014 it takes effect immediately, no deploy needed.\n  </p>\n  <fs-markdown-editor\n      [ngModel]=\"content()\"\n      (ngModelChange)=\"content.set($event)\"\n      [config]=\"config()\"\n      name=\"content\">\n  </fs-markdown-editor>\n</div>\n", styles: [".tab-body{padding-top:16px}.hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}fs-markdown-editor{display:block;min-height:320px}\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: FsFormModule }, { kind: "directive", type: i2$1.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: FsMarkdownEditorComponent, selector: "fs-markdown-editor", inputs: ["config", "disabled"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AiKnowledgeComponent, isStandalone: true, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { content: "contentChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    This document is given to the report AI on every chat message. Use it for\n    terminology, business rules and special cases the AI can't work out from the\n    data on its own \u2014 it takes effect immediately, no deploy needed.\n  </p>\n  <fs-markdown-editor\n      [ngModel]=\"content()\"\n      (ngModelChange)=\"content.set($event)\"\n      [config]=\"config()\"\n      name=\"content\">\n  </fs-markdown-editor>\n</div>\n", styles: [".tab-body{padding-top:16px}.hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}fs-markdown-editor{display:block;min-height:320px}\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: FsFormModule }, { kind: "directive", type: i2$2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: FsMarkdownEditorComponent, selector: "fs-markdown-editor", inputs: ["config", "disabled"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiKnowledgeComponent, decorators: [{
             type: Component,
@@ -3930,7 +4212,7 @@ class GeneralComponent {
     min = input.required();
     max = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeneralComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeneralComponent, isStandalone: true, selector: "fs-ai-report-global-settings-general", inputs: { concurrency: { classPropertyName: "concurrency", publicName: "concurrency", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { concurrency: "concurrencyChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <mat-form-field>\n    <mat-label>Semantic build concurrency</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [ngModel]=\"concurrency()\"\n        (ngModelChange)=\"concurrency.set($event)\"\n        name=\"semanticBuildConcurrency\"\n        [fsFormRequired]=\"true\"\n        [fsFormInteger]=\"true\"\n        [fsFormMin]=\"min()\"\n        [fsFormMax]=\"max()\">\n    <mat-hint>\n      How many AI calls the semantic-database build runs at once ({{ min() }}\u2013{{ max() }}).\n      Higher is faster but more likely to hit the AI provider's rate limit. Default is 8.\n    </mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".tab-body{padding-top:16px}mat-form-field{display:block;max-width:340px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$1.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$1.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "directive", type: i2$1.FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: ["fsFormInteger", "fsFormIntegerMessage"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: GeneralComponent, isStandalone: true, selector: "fs-ai-report-global-settings-general", inputs: { concurrency: { classPropertyName: "concurrency", publicName: "concurrency", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { concurrency: "concurrencyChange" }, ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <mat-form-field>\n    <mat-label>Semantic build concurrency</mat-label>\n    <input\n        matInput\n        type=\"number\"\n        [ngModel]=\"concurrency()\"\n        (ngModelChange)=\"concurrency.set($event)\"\n        name=\"semanticBuildConcurrency\"\n        [fsFormRequired]=\"true\"\n        [fsFormInteger]=\"true\"\n        [fsFormMin]=\"min()\"\n        [fsFormMax]=\"max()\">\n    <mat-hint>\n      How many AI calls the semantic-database build runs at once ({{ min() }}\u2013{{ max() }}).\n      Higher is faster but more likely to hit the AI provider's rate limit. Default is 8.\n    </mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".tab-body{padding-top:16px}mat-form-field{display:block;max-width:340px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2$2.FsFormMinDirective, selector: "[fsFormMin]", inputs: ["fsFormMin", "fsFormMinMessage"] }, { kind: "directive", type: i2$2.FsFormMaxDirective, selector: "[fsFormMax]", inputs: ["fsFormMax", "fsFormMaxMessage"] }, { kind: "directive", type: i2$2.FsFormIntegerDirective, selector: "[fsFormInteger]", inputs: ["fsFormInteger", "fsFormIntegerMessage"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeneralComponent, decorators: [{
             type: Component,
@@ -4003,7 +4285,7 @@ class EntityFunctionsComponent {
         return rank === -1 ? EntityFunctionsComponent.KIND_ORDER.length : rank;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFunctionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EntityFunctionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <fs-dialog-title>\n    {{ entityKey }} \u2014 {{ sourceLabel }}\n  </fs-dialog-title>\n  <mat-dialog-content>\n    <div *fsSkeleton=\"entityFunctions()\">\n      @if (entityFunctions(); as fns) {\n        @if (functions().length) {\n          @if (fns.generatedAt) {\n            <div class=\"hint functions-generated\">\n              Discovered from {{ discoveredClass() }} &middot;\n              <fs-date\n                  [date]=\"fns.generatedAt\"\n                  format=\"date-time\">\n              </fs-date>\n            </div>\n          }\n          <div class=\"functions-list\">\n            @for (fn of functions(); track fn.class + '::' + fn.method) {\n              <div class=\"function-row\">\n                <div class=\"function-head\">\n                  <fs-chip\n                      size=\"tiny\"\n                      [backgroundColor]=\"kindColor(fn.kind)\"\n                      color=\"#ffffff\">\n                    {{ fn.kind }}\n                  </fs-chip>\n                  <code class=\"function-method\">{{ fn.method }}</code>\n                </div>\n                <div class=\"function-summary\">{{ fn.summary }}</div>\n                @if (fn.produces) {\n                  <div class=\"function-produces hint\">Produces: {{ fn.produces }}</div>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"hint\">\n            No functions cached for this entity yet \u2014 run a build to discover its code.\n          </div>\n        }\n      }\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        type=\"button\"\n        mat-button\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".hint{margin:0;color:#0009;font-size:13px;line-height:1.5}.functions-generated{margin-bottom:10px}.functions-list{display:flex;flex-direction:column}.functions-list .function-row{display:flex;flex-direction:column;gap:3px;padding:10px 0}.functions-list .function-row+.function-row{border-top:1px solid rgba(0,0,0,.08)}.functions-list .function-row .function-head{display:flex;align-items:center;gap:8px}.functions-list .function-row .function-method{font-family:monospace;font-size:13px;font-weight:600}.functions-list .function-row .function-summary{color:#000000bf}.functions-list .function-row .function-produces{padding-left:10px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "disabled", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$1.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EntityFunctionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <fs-dialog-title>\n    {{ entityKey }} \u2014 {{ sourceLabel }}\n  </fs-dialog-title>\n  <mat-dialog-content>\n    <div *fsSkeleton=\"entityFunctions()\">\n      @if (entityFunctions(); as fns) {\n        @if (functions().length) {\n          @if (fns.generatedAt) {\n            <div class=\"hint functions-generated\">\n              Discovered from {{ discoveredClass() }} &middot;\n              <fs-date\n                  [date]=\"fns.generatedAt\"\n                  format=\"date-time\">\n              </fs-date>\n            </div>\n          }\n          <div class=\"functions-list\">\n            @for (fn of functions(); track fn.class + '::' + fn.method) {\n              <div class=\"function-row\">\n                <div class=\"function-head\">\n                  <fs-chip\n                      size=\"tiny\"\n                      [backgroundColor]=\"kindColor(fn.kind)\"\n                      color=\"#ffffff\">\n                    {{ fn.kind }}\n                  </fs-chip>\n                  <code class=\"function-method\">{{ fn.method }}</code>\n                </div>\n                <div class=\"function-summary\">{{ fn.summary }}</div>\n                @if (fn.produces) {\n                  <div class=\"function-produces hint\">Produces: {{ fn.produces }}</div>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"hint\">\n            No functions cached for this entity yet \u2014 run a build to discover its code.\n          </div>\n        }\n      }\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        type=\"button\"\n        mat-button\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".hint{margin:0;color:#0009;font-size:13px;line-height:1.5}.functions-generated{margin-bottom:10px}.functions-list{display:flex;flex-direction:column}.functions-list .function-row{display:flex;flex-direction:column;gap:3px;padding:10px 0}.functions-list .function-row+.function-row{border-top:1px solid rgba(0,0,0,.08)}.functions-list .function-row .function-head{display:flex;align-items:center;gap:8px}.functions-list .function-row .function-method{font-family:monospace;font-size:13px;font-weight:600}.functions-list .function-row .function-summary{color:#000000bf}.functions-list .function-row .function-produces{padding-left:10px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "disabled", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFunctionsComponent, decorators: [{
             type: Component,
@@ -4183,7 +4465,7 @@ class SemanticDatabaseComponent {
             template: 'Stop the running build? The current semantic database stays in place until a build finishes.',
             commitLabel: 'Stop',
         })
-            .pipe(switchMap(() => this._reportData.semanticBuildStop()), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap$1(() => this._reportData.semanticBuildStop()), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this.building.set(false);
             this._message.success('Stopping the build…');
@@ -4444,7 +4726,7 @@ class GlobalSettingsComponent {
             data: { versions: this.instructions()?.versions ?? [] },
         })
             .afterClosed()
-            .pipe(switchMap(() => this._reportData.instructions()), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap$1(() => this._reportData.instructions()), takeUntilDestroyed(this._destroyRef))
             .subscribe((instructions) => {
             if (instructions.instructions?.id !== currentId) {
                 this._applyInstructions(instructions);
@@ -4471,7 +4753,7 @@ class GlobalSettingsComponent {
         this.concurrency.set(settings.semanticBuildConcurrency);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlobalSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GlobalSettingsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "semanticDatabase", first: true, predicate: SemanticDatabaseComponent, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$1.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$1.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$1.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: AiKnowledgeComponent, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: ["content", "config"], outputs: ["contentChange"] }, { kind: "component", type: GeneralComponent, selector: "fs-ai-report-global-settings-general", inputs: ["concurrency", "min", "max"], outputs: ["concurrencyChange"] }, { kind: "component", type: SemanticDatabaseComponent, selector: "fs-ai-report-global-settings-semantic-database" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GlobalSettingsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "semanticDatabase", first: true, predicate: SemanticDatabaseComponent, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: AiKnowledgeComponent, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: ["content", "config"], outputs: ["contentChange"] }, { kind: "component", type: GeneralComponent, selector: "fs-ai-report-global-settings-general", inputs: ["concurrency", "min", "max"], outputs: ["concurrencyChange"] }, { kind: "component", type: SemanticDatabaseComponent, selector: "fs-ai-report-global-settings-semantic-database" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlobalSettingsComponent, decorators: [{
             type: Component,
@@ -4569,7 +4851,7 @@ class FsAiReportsComponent {
             commitLabel: 'Create',
             required: true,
         })
-            .pipe(switchMap$1((name) => this._reportData.create(name)), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap((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 });
@@ -4805,7 +5087,7 @@ class FsAiReportsComponent {
             commitLabel: 'Create',
             required: true,
         })
-            .pipe(switchMap$1((name) => this._reportData.createFolder(name, parentReportFolderId)), takeUntilDestroyed(this._destroyRef))
+            .pipe(switchMap((name) => this._reportData.createFolder(name, parentReportFolderId)), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this._message.success('Created folder');
             this._load();
@@ -4824,7 +5106,7 @@ class FsAiReportsComponent {
             commitLabel: 'Save',
             required: true,
         })
-            .pipe(switchMap$1((name) => (folder
+            .pipe(switchMap((name) => (folder
             ? this._reportData.updateFolder(data.id, { name })
             : this._reportData.rename(data.id, name))), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
@@ -4847,7 +5129,7 @@ class FsAiReportsComponent {
                 ? `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
+            .pipe(switchMap(() => (folder
             ? this._reportData.deleteFolder(data.id)
             : this._reportData.delete(data.id))), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
@@ -4883,7 +5165,7 @@ class FsAiReportsComponent {
         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: "_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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsTreeModule }, { kind: "component", type: i3$2.FsTreeComponent, selector: "fs-tree", inputs: ["config"] }, { kind: "directive", type: i3$2.FsTreeNodeDirective, selector: "[fsTreeNode]", inputs: ["class"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.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 });
+    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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsTreeModule }, { kind: "component", type: i3$3.FsTreeComponent, selector: "fs-tree", inputs: ["config"] }, { kind: "directive", type: i3$3.FsTreeNodeDirective, selector: "[fsTreeNode]", inputs: ["class"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.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,
@@ -4904,14 +5186,52 @@ class FsAiReportComponent {
     reportId = input(null);
     // API base for the reports + chat endpoints; override to mount elsewhere.
     basePath = input('reports');
+    // The query param that carries the open page's id. Deep linking is on by
+    // default; a host that mounts several reports on one route, or wants no URL
+    // writes at all, sets this to null to turn it off.
+    pageQueryParam = input('page');
     // The report was deleted from its settings dialog — the host routes back to
     // the listing.
     deleted = output();
     // The report was renamed (settings, or the agent) — the host can refresh a
     // breadcrumb / document title.
     renamed = output();
+    // The viewer moved to another page. The URL is already updated by then —
+    // this is for hosts that track the open page for their own reasons.
+    pageChanged = output();
     report = null;
     editMode = false;
+    // The page the canvas should open on, read from the URL once per report.
+    // Cleared as soon as the canvas reports back, so a later in-app page change
+    // is never fought by a stale value.
+    pageId = null;
+    // The page the chat is bound to: the one on screen. A report conversation
+    // belongs to exactly one page, so this both scopes the conversation list and
+    // becomes the new conversation's page. A signal because it feeds
+    // [requestData] — changing it is what reloads the panel onto the new page's
+    // conversations. Null until the canvas reports which page it opened on, which
+    // keeps the chat from listing against a page guess.
+    chatPageId = signal(null);
+    // What the chat sends with every conversation call: the report, and the page
+    // it is bound to.
+    //
+    // reportPageId is OMITTED, not sent as null, while the open page is unknown.
+    // The backend reads a PRESENT reportPageId of 0/null as "the report's earlier,
+    // page-less conversations", so sending null before the canvas has reported in
+    // would ask for the wrong list — and, worse, would bind a conversation started
+    // in that window to no page at all.
+    //
+    // The chat is also held closed ([ready] in the template) until the page is
+    // known, so this partial context is never actually sent: on a fresh load the
+    // report has to arrive and the canvas has to render before any page exists,
+    // and a list fetched in that window would be the whole report's conversations
+    // — the unscoped list, shown and auto-selected before the real one lands.
+    chatRequestData = computed(() => {
+        const reportPageId = this.chatPageId();
+        return reportPageId === null
+            ? { reportId: this.reportId() }
+            : { reportId: this.reportId(), reportPageId };
+    });
     // The report-level filter toolbar (fs-filter). Rebuilt whenever the loaded
     // report (and thus its groups) changes.
     reportFilterConfig;
@@ -4921,6 +5241,8 @@ class FsAiReportComponent {
     // has to ask it.
     _canvas;
     _reportData = inject(ReportData);
+    _router = inject(Router);
+    _route = inject(ActivatedRoute);
     _filterState = inject(ReportFilterStateService);
     _exportService = inject(ReportExportService);
     _process = inject(FsProcess);
@@ -4938,6 +5260,13 @@ class FsAiReportComponent {
         effect(() => {
             const reportId = this.reportId();
             this.editMode = false;
+            // A new report's pages are not this report's pages — drop the binding
+            // until its canvas says which page it landed on.
+            this.chatPageId.set(null);
+            // Seed the open page from the URL for this report. Read per load rather
+            // than once at construction: the host may swap reports on the same route,
+            // and each arrival carries its own ?page=.
+            this.pageId = this._pageIdFromUrl();
             if (reportId != null) {
                 this._loadReport(reportId);
             }
@@ -4997,6 +5326,13 @@ class FsAiReportComponent {
         dialogRef.afterClosed()
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((result) => {
+            // The dialog confirms + performs the delete itself. The component is
+            // gone from the report, so reload rather than patching it out locally —
+            // its filters went with it, which the report bar has to be rebuilt for.
+            if (result?.deleted) {
+                this._loadReport(reportId);
+                return;
+            }
             // The report's filter groups changed, so the report bar and the
             // on-component strips have to be rebuilt from a fresh report.
             if (filtersChanged) {
@@ -5011,6 +5347,25 @@ class FsAiReportComponent {
             }
         });
     }
+    // The canvas moved to another page: reflect it in the URL so a refresh or a
+    // shared link comes back here. replaceUrl keeps paging out of the browser
+    // history — Back should leave the report, not walk every page visited.
+    onCanvasPageChanged(pageId) {
+        // The deep link has been consumed; from here the canvas owns the page.
+        this.pageId = null;
+        this.chatPageId.set(pageId);
+        this.pageChanged.emit(pageId);
+        const param = this.pageQueryParam();
+        if (!param) {
+            return;
+        }
+        this._router.navigate([], {
+            relativeTo: this._route,
+            queryParams: { [param]: pageId },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    }
     // The canvas changed the report's structure (added a page) — re-fetch so the
     // new page renders; the canvas lands the view on it.
     onCanvasReportChanged() {
@@ -5091,6 +5446,16 @@ class FsAiReportComponent {
         const clamped = Math.min(0.8, Math.max(0.2, ratio));
         this._chatPanel.nativeElement.style.flexBasis = `${clamped * 100}%`;
     }
+    // The page id sitting in the URL right now, or null when deep linking is off
+    // or the value is not a usable id.
+    _pageIdFromUrl() {
+        const param = this.pageQueryParam();
+        if (!param) {
+            return null;
+        }
+        const pageId = Number(this._route.snapshot.queryParamMap.get(param));
+        return Number.isFinite(pageId) && pageId > 0 ? pageId : null;
+    }
     _loadReport(reportId, emitRenamed = false) {
         this._reportData.get(reportId)
             .pipe(takeUntilDestroyed(this._destroyRef))
@@ -5172,7 +5537,7 @@ class FsAiReportComponent {
             : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FsAiReportComponent, isStandalone: true, selector: "fs-ai-report", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", renamed: "renamed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FsAiReportComponent, isStandalone: true, selector: "fs-ai-report", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, pageQueryParam: { classPropertyName: "pageQueryParam", publicName: "pageQueryParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", renamed: "renamed", pageChanged: "pageChanged" }, providers: [
             // Session filter state is per-open-report, not app-global; the export
             // services resolve filters through it, so they live at the same level.
             ReportFilterStateService,
@@ -5181,8 +5546,8 @@ class FsAiReportComponent {
             ReportPdfService,
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CygLeElT.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$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.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-Id_HJuQO.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\">\r\n\r\n  <div class=\"fs-ai-report__header fs-row.align-center\">\r\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\r\n\r\n    @if (report) {\r\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\r\n           reads its config once at init, so it's keyed on the filter\r\n           signature: when the report-level filter set changes the block is\r\n           recreated and re-reads the rebuilt config. -->\r\n      @if (reportHasFilters) {\r\n        @for (key of [reportFilterKey]; track key) {\r\n          <fs-filter\r\n              class=\"fs-ai-report__filters\"\r\n              [config]=\"reportFilterConfig\">\r\n          </fs-filter>\r\n        }\r\n      }\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\r\n          (click)=\"toggleEditMode()\">\r\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\r\n      </button>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Export\"\r\n          [fsMenuTriggerFor]=\"exportMenu\">\r\n        <mat-icon>download</mat-icon>\r\n      </button>\r\n      <fs-menu #exportMenu>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPowerpoint()\">\r\n          Export PowerPoint\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPdf()\">\r\n          Export PDF\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportData()\">\r\n          Export Raw Data\r\n        </ng-template>\r\n        @if ((report?.pages?.length ?? 0) > 1) {\r\n          <ng-template\r\n              fs-menu-item\r\n              (click)=\"exportData(true)\">\r\n            Export Raw Data (This Page)\r\n          </ng-template>\r\n        }\r\n      </fs-menu>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Report settings\"\r\n          (click)=\"reportSettings()\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n      #split\r\n      class=\"fs-ai-report__split fs-row.align-start\">\r\n    <fs-ai-chat\r\n        #chatPanel\r\n        class=\"chat\"\r\n        [basePath]=\"basePath()\"\r\n        [requestData]=\"chatRequestData()\"\r\n        [ready]=\"chatPageId() !== null\"\r\n        (response)=\"onChatResponse($event)\">\r\n    </fs-ai-chat>\r\n\r\n    <div\r\n        class=\"resizer\"\r\n        (pointerdown)=\"onResizeStart($event)\">\r\n    </div>\r\n\r\n    <div class=\"viewer fs-flex fs-column\">\r\n      @if (report) {\r\n        <app-report-canvas\r\n            [report]=\"report\"\r\n            [editMode]=\"editMode\"\r\n            [pageId]=\"pageId\"\r\n            (componentSettings)=\"componentSettings($event)\"\r\n            (reportChanged)=\"onCanvasReportChanged()\"\r\n            (pageChanged)=\"onCanvasPageChanged($event)\"\r\n            (editDone)=\"toggleEditMode()\">\r\n        </app-report-canvas>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.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", "pageId"], outputs: ["componentSettings", "reportChanged", "editDone", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
             type: Component,
@@ -5195,7 +5560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPdfService,
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CygLeElT.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-Id_HJuQO.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -5204,7 +5569,7 @@ 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        <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"] }]
+                    ], template: "<div class=\"fs-ai-report fs-column\">\r\n\r\n  <div class=\"fs-ai-report__header fs-row.align-center\">\r\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\r\n\r\n    @if (report) {\r\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\r\n           reads its config once at init, so it's keyed on the filter\r\n           signature: when the report-level filter set changes the block is\r\n           recreated and re-reads the rebuilt config. -->\r\n      @if (reportHasFilters) {\r\n        @for (key of [reportFilterKey]; track key) {\r\n          <fs-filter\r\n              class=\"fs-ai-report__filters\"\r\n              [config]=\"reportFilterConfig\">\r\n          </fs-filter>\r\n        }\r\n      }\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          [matTooltip]=\"editMode ? 'Done' : 'Edit layout'\"\r\n          (click)=\"toggleEditMode()\">\r\n        <mat-icon>{{ editMode ? 'lock' : 'open_with' }}</mat-icon>\r\n      </button>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Export\"\r\n          [fsMenuTriggerFor]=\"exportMenu\">\r\n        <mat-icon>download</mat-icon>\r\n      </button>\r\n      <fs-menu #exportMenu>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPowerpoint()\">\r\n          Export PowerPoint\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportPdf()\">\r\n          Export PDF\r\n        </ng-template>\r\n        <ng-template\r\n            fs-menu-item\r\n            (click)=\"exportData()\">\r\n          Export Raw Data\r\n        </ng-template>\r\n        @if ((report?.pages?.length ?? 0) > 1) {\r\n          <ng-template\r\n              fs-menu-item\r\n              (click)=\"exportData(true)\">\r\n            Export Raw Data (This Page)\r\n          </ng-template>\r\n        }\r\n      </fs-menu>\r\n\r\n      <button\r\n          mat-icon-button\r\n          type=\"button\"\r\n          matTooltip=\"Report settings\"\r\n          (click)=\"reportSettings()\">\r\n        <mat-icon>settings</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div\r\n      #split\r\n      class=\"fs-ai-report__split fs-row.align-start\">\r\n    <fs-ai-chat\r\n        #chatPanel\r\n        class=\"chat\"\r\n        [basePath]=\"basePath()\"\r\n        [requestData]=\"chatRequestData()\"\r\n        [ready]=\"chatPageId() !== null\"\r\n        (response)=\"onChatResponse($event)\">\r\n    </fs-ai-chat>\r\n\r\n    <div\r\n        class=\"resizer\"\r\n        (pointerdown)=\"onResizeStart($event)\">\r\n    </div>\r\n\r\n    <div class=\"viewer fs-flex fs-column\">\r\n      @if (report) {\r\n        <app-report-canvas\r\n            [report]=\"report\"\r\n            [editMode]=\"editMode\"\r\n            [pageId]=\"pageId\"\r\n            (componentSettings)=\"componentSettings($event)\"\r\n            (reportChanged)=\"onCanvasReportChanged()\"\r\n            (pageChanged)=\"onCanvasPageChanged($event)\"\r\n            (editDone)=\"toggleEditMode()\">\r\n        </app-report-canvas>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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 }]
@@ -5229,4 +5594,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, ReportNodeType as f, ReportState as g, ReportStates as h };
-//# sourceMappingURL=firestitch-report-firestitch-report-BOErj039.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-CfSwIwzw.mjs.map