@firestitch/report 18.5.0 → 18.6.0

package/fesm2022/{firestitch-report-firestitch-report-Df1IXrEs.mjs → firestitch-report-firestitch-report-Bb65HEYB.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Input, signal, DestroyRef, ViewChild, input, output, computed, viewChild, ElementRef, effect, untracked, EventEmitter, ChangeDetectorRef, NgZone, Output, HostBinding, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, model } from '@angular/core';
+import { inject, Injectable, signal, Component, ChangeDetectionStrategy, Input, Pipe, DestroyRef, ViewChild, input, output, computed, viewChild, ElementRef, effect, untracked, EventEmitter, NgZone, Output, HostBinding, ViewChildren, CUSTOM_ELEMENTS_SCHEMA, model } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
 import * as i3$3 from '@angular/material/button';
@@ -17,22 +17,22 @@ 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, switchMap as switchMap$1, tap, mergeMap, toArray, catchError, finalize, takeUntil, take } from 'rxjs/operators';
+import { map, shareReplay, filter, switchMap as switchMap$1, tap as tap$1, mergeMap, toArray, catchError, finalize, takeUntil, take, auditTime } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
-import { FsAiChatComponent } from '@firestitch/ai';
+import { FsAiChatComponent, FsAiChatData } from '@firestitch/ai';
 import * as i1$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 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 { of, Subject, map as map$1, debounceTime, switchMap, tap, forkJoin, from, EMPTY, BehaviorSubject, merge } from 'rxjs';
 import { FsApi, StreamEventType } from '@firestitch/api';
 import * as i1$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { format, parseISO, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek, isValid } from 'date-fns';
-import { DatePipe } from '@angular/common';
+import { format, parseISO, isValid, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek } from 'date-fns';
+import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
 import * as i1 from '@firestitch/list';
 import { PaginationStrategy, FsListComponent, FsListModule } from '@firestitch/list';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -262,22 +262,35 @@ class ReportData {
             ...config,
         });
     }
-    // Exports the component's FULL filtered dataset to CSV server-side and
-    // resolves to a presigned download URL. The backend streams percentage
-    // progress while chunking; consume through FsProcess.download.
+    // Exports one component to CSV server-side: the file is what the screen
+    // shows (a chart or KPI as rendered, a list in full in the screen's order).
+    // The backend streams percentage progress while it writes.
+    //
+    // key: null on purpose, unlike the key: 'url' presigned-export pattern: the
+    // response also carries `notes`, the sentences saying how the file falls
+    // short of the full result, and the caller has to show them before it hands
+    // the url to FsProcess.download.
     exportComponent(reportId, componentId, filters = [], state = {}, config = {}) {
         return this._api.post(this._path(`${reportId}/components/${componentId}/export`), { filters, state }, {
-            key: 'url',
+            key: null,
             ...config,
         });
     }
     // Exports EVERY component on the report — or on one page — server-side and
     // resolves to a presigned URL for a zip of one CSV per component, foldered by
-    // page. `filters` carries the resolved values for every component together;
-    // each one picks out its own. Same keep-alive contract as exportComponent,
+    // page, plus an 'Export Notes.txt'. `filters` carries the resolved values for
+    // every component together; each one picks out its own. `frequency` is the
+    // report's group-by grain (the server re-buckets only time-series charts to
+    // it), and `filterSummary` is the filter bar as the viewer reads it, written
+    // verbatim into the notes file. Same keep-alive contract as exportComponent,
     // over a longer run; consume through FsProcess.download.
-    exportReport(reportId, filters = [], pageId = null, config = {}) {
-        return this._api.post(this._path(`${reportId}/export`), { filters, ...(pageId ? { pageId } : {}) }, {
+    exportReport(reportId, filters = [], pageId = null, frequency = null, filterSummary = [], config = {}) {
+        return this._api.post(this._path(`${reportId}/export`), {
+            filters,
+            ...(pageId ? { pageId } : {}),
+            ...(frequency ? { frequency } : {}),
+            filterSummary,
+        }, {
             key: 'url',
             ...config,
         });
@@ -540,21 +553,53 @@ function dateBoundLabel(value) {
     const date = parseISO(bound);
     return Number.isNaN(date.getTime()) ? String(value) : format(date, 'MMM d, yyyy');
 }
+// A stored yyyy-MM-dd boundary as a local Date for a date picker, or null.
+// parseISO reads a bare Y-M-D as LOCAL midnight, so the picker shows the day
+// that was stored, whatever the browser's zone.
+function dateFromBound(value) {
+    if (!value) {
+        return null;
+    }
+    const date = parseISO(value.slice(0, 10));
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+// A picked Date as a yyyy-MM-dd boundary for storage, or null. Uses the local
+// calendar day (format, not toISOString) so the boundary is the day that was
+// picked, regardless of the browser's zone.
+function dateToBound(value) {
+    return value instanceof Date && !Number.isNaN(value.getTime())
+        ? format(value, 'yyyy-MM-dd')
+        : null;
+}
+// A relative date-range preset key as a sentence-case label, derived from the
+// camelCase key itself ('last12Months' reads 'Last 12 months', 'thisWeek'
+// reads 'This week'), so no list of presets is mirrored here and a key the
+// server adds later still reads sensibly.
+function relativeLabel(relative) {
+    const words = relative
+        .replace(/([a-z])([A-Z0-9])/g, '$1 $2')
+        .replace(/(\d)([A-Z])/g, '$1 $2')
+        .toLowerCase();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
 // Maps a report filter GROUP to an fs-filter config item, and reads fs-filter
 // query values back into per-group FilterGroupValues. Shared by the report-bar
 // fs-filter and the per-component fs-filter so both render through the same
 // library and write into ReportFilterStateService identically. Items are named
 // `g<groupId>` so the query keys map straight back to the group.
-//
-// (Lists keep their own filters in FsList and name items `f<filterId>`; this is
-// the group-keyed path for charts/KPIs and the report bar.)
-// The query key fs-filter uses for a group's item(s).
-const itemName = (group) => `g${group.id}`;
+// The prefix of a group's item name, and of its key in the report URL.
+const GROUP_PARAM_PREFIX = 'g';
+// The query key fs-filter uses for a group's item(s), and the report URL's key
+// for the group's value (report-url-state.ts). One naming for both.
+function groupItemName(group) {
+    return `${GROUP_PARAM_PREFIX}${group.id}`;
+}
 // The query key for the report's group-by control. Fixed rather than derived
 // from an id because a report has exactly one — and it is NOT a filter group,
 // so it is read straight off the change query instead of through
-// groupValuesFromQuery. Client-side only: the grain travels to the server as
-// the data request's `state.frequency`.
+// groupValuesFromQuery. It is also the report URL's key for the grain
+// (report-url-state.ts). The grain travels to the server as the data
+// request's `state.frequency`.
 const GROUP_BY_ITEM = 'groupBy';
 // A select group's distinct options, as { name, value } pairs. The server sends
 // { value, label }: the value is what the filter matches on (an entity's stable
@@ -598,7 +643,7 @@ function matchOptions(options$, keyword) {
 // Build the fs-filter config item for a group, seeding its default from the
 // current session value so authored/relative defaults show selected on open.
 function filterItemForGroup(group, reportData, reportId, initial) {
-    const name = itemName(group);
+    const name = groupItemName(group);
     const label = group.label || group.filters?.[0]?.filterColumn || '';
     switch (group.type) {
         case 'dateRange':
@@ -701,7 +746,7 @@ function groupBySignature(report) {
 // ReportFilterStateService.setValue.
 function groupValuesFromQuery(query, groups) {
     return groups.map((group) => {
-        const name = itemName(group);
+        const name = groupItemName(group);
         if (group.type === 'dateRange') {
             const start = query[`${name}From`];
             const end = query[`${name}To`];
@@ -733,6 +778,305 @@ function selectQueryValues(raw) {
     return String(raw).split(',');
 }
 
+// Report weeks start on Monday. This is a rule, not a setting: the server's
+// weekly time buckets (ReportTimeBucket::getPeriodStart() at the Week grain)
+// and its relative date presets (ReportRelativeRangeEnum) both start the week
+// on Monday, so the viewer's thisWeek/lastWeek presets must too, or a weekly
+// chart's buckets would straddle the range its own filter names.
+const REPORT_WEEK_STARTS_ON = 1;
+
+// Measure-value formatting shared by the KPI renderer and the exports — the
+// config's `format` (number | percent | currency) and `precision` mean the same
+// thing on screen, in PowerPoint and in PDF.
+// percent takes a 0-1 ratio and shows it as a percentage: 0.3 reads 30%. With
+// no precision it shows at most one decimal (0.037 reads 3.7%); a named
+// precision counts the decimals of the percentage, not of the ratio, so
+// precision 1 shows 0.3 as 30.0%.
+//
+// When the measure names a precision it is pinned as BOTH the minimum and the
+// maximum, so a column of rates lines up instead of each value showing however
+// many decimals it happens to need. Undefined leaves each format's own default
+// alone.
+function getFractionDigits(precision) {
+    return Number.isFinite(precision)
+        ? { minimumFractionDigits: precision, maximumFractionDigits: precision }
+        : {};
+}
+function formatMeasureValue(value, format, precision) {
+    if (value === null || value === undefined || value === '') {
+        return '—';
+    }
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+        return String(value);
+    }
+    const fractionDigits = getFractionDigits(precision);
+    switch (format) {
+        case 'percent':
+            return new Intl.NumberFormat(undefined, {
+                style: 'percent',
+                maximumFractionDigits: 1,
+                ...fractionDigits,
+            }).format(numeric);
+        case 'currency':
+            return new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: 'USD',
+                // Whole dollars unless the measure asks for decimals — cents were
+                // unrepresentable before, because this was hardcoded to 0.
+                maximumFractionDigits: 0,
+                ...fractionDigits,
+            }).format(numeric);
+        default:
+            return new Intl.NumberFormat(undefined, fractionDigits).format(numeric);
+    }
+}
+// The axis peak at which a native chart's value axis gains thousands
+// separators. From here up the ticks are whole numbers in practice; below it
+// neither the screen nor PowerPoint's 'General' shows a separator.
+const AXIS_SEPARATOR_THRESHOLD = 1000;
+// PowerPoint's number format for a native chart's value axis, matching what the
+// on-screen axis prints by default: thousands separators with each tick's own
+// decimals. Excel has no "General with separators", so an axis reaching 1,000
+// (where ticks are whole numbers) gets '#,##0', and a smaller range keeps
+// 'General' so fractional ticks (0.25, 0.5) are not rounded away.
+//
+// The peak counts a missing value as 0. A stacked chart's peak is its tallest
+// stack: the largest sum, per category, of every series' absolute value.
+function chartAxisFormatCode(series, stacked) {
+    const magnitudes = series.map((values) => values.map((value) => Math.abs(value ?? 0)));
+    const peak = stacked
+        ? Math.max(0, ...(magnitudes[0] ?? []).map((_, index) => magnitudes
+            .reduce((sum, values) => sum + (values[index] ?? 0), 0)))
+        : Math.max(0, ...magnitudes.flat());
+    return peak >= AXIS_SEPARATOR_THRESHOLD ? '#,##0' : 'General';
+}
+// The zone every date in a report is read in. The server resolves it (the
+// report's own zone, else the application's default reporting zone) and sends
+// it as `effectiveTimezone`; the browser's zone is only the fallback for a
+// server too old to send the field. This is the one place that fallback lives,
+// so every date the viewer renders or resolves agrees with every other.
+function resolveReportTimezone(report) {
+    return report.effectiveTimezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const DATE_TIME_PATTERN = /^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2})(\.\d+)?$/;
+// A report row's date cell as a calendar day in the report's zone.
+//
+// Report rows are raw database strings, not serialized models, so their shape
+// is the wire contract: a DATE column arrives as 'YYYY-MM-DD' and a
+// date-and-time column as 'YYYY-MM-DD HH:MM:SS' in UTC. Reading that shape
+// here does not re-derive a server rule; it only stops the browser guessing.
+// - A calendar day is never shifted: parseISO reads it as local midnight, so
+//   the day printed is the day stored, whatever the zone.
+// - An instant is pinned to UTC with an explicit 'Z', then shown as the day it
+//   fell on in the report's zone, the same day the filters and time buckets use.
+// - Anything else is shown as it came, and so is a value that has the shape
+//   but names no real day (a zero date '0000-00-00', or '2026-02-30'): one
+//   bad cell must not throw out of a pipe or abort an export.
+function formatReportDate(value, timezone) {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+    const text = String(value);
+    if (DATE_ONLY_PATTERN.test(text)) {
+        const day = parseISO(text);
+        return isValid(day) ? format(day, 'MMM d, yyyy') : text;
+    }
+    const dateTime = DATE_TIME_PATTERN.exec(text);
+    if (!dateTime) {
+        return text;
+    }
+    const instant = parseISO(`${dateTime[1]}T${dateTime[2]}Z`);
+    if (!isValid(instant)) {
+        return text;
+    }
+    // An unknown zone makes date-fns-tz throw; UTC still names a real day.
+    try {
+        return formatInTimeZone(instant, timezone, 'MMM d, yyyy');
+    }
+    catch {
+        return formatInTimeZone(instant, 'UTC', 'MMM d, yyyy');
+    }
+}
+// A short, human label for a zone: its city plus the current abbreviation,
+// e.g. 'America/New_York' reads 'New York (EDT)'. UTC stays 'UTC', and an
+// unknown zone is shown as its id. An 'Etc/' zone names no city, and its POSIX
+// sign is the reverse of the offset ('Etc/GMT+5' is GMT-5), so it reads as the
+// abbreviation alone: 'Etc/UTC' is 'UTC', 'Etc/GMT+5' is 'GMT-5'.
+function getTimezoneLabel(timezone) {
+    if (timezone === 'UTC') {
+        return timezone;
+    }
+    const segments = timezone.split('/');
+    try {
+        const abbreviation = formatInTimeZone(new Date(), timezone, 'zzz');
+        return segments[0] === 'Etc'
+            ? abbreviation
+            : `${segments[segments.length - 1].replace(/_/g, ' ')} (${abbreviation})`;
+    }
+    catch {
+        return timezone;
+    }
+}
+// "Now" as a Date whose local fields read the wall clock in the given zone, so
+// date-fns calendar arithmetic (startOfWeek, startOfMonth, ...) and
+// dateBoundString() land on the zone's calendar day rather than the browser's.
+// An unknown zone falls back to the browser's clock.
+function getZonedNow(timezone) {
+    const now = new Date();
+    try {
+        const zoned = toZonedTime(now, timezone);
+        return Number.isNaN(zoned.getTime()) ? now : zoned;
+    }
+    catch {
+        return now;
+    }
+}
+
+// The report viewer's state in its URL: a pure codec, with no knowledge of a
+// loaded report. ReportFilterStateService decides WHAT is carried (only values
+// that differ from the authored defaults) and checks what is read back against
+// the report; this file only turns values into query params and back.
+//
+//   ?page=7&groupBy=week&g12=last30Days&g15=3,5&g16=2026-01-01..&s31=-create_date
+//
+// - g<groupId>: one key per filter group. A dateRange is its relative preset
+//   name when it carries one, else 'YYYY-MM-DD..YYYY-MM-DD' (either side may be
+//   empty); a select is its values joined by ','; a keyword is its text. An
+//   empty value is an explicit clear of a group that has a default.
+// - s<componentId>: a list's sort column, '-' prefixed when descending.
+// - groupBy: the group-by grain (GROUP_BY_ITEM).
+// The page key is the host's (FsAiReportComponent.pageQueryParam) and is
+// written beside these, never by this codec.
+// The prefix of a list's sort key.
+const LIST_SORT_PARAM_PREFIX = 's';
+// Between the two days of an encoded fixed date range.
+const DATE_RANGE_SEPARATOR = '..';
+// A key this codec owns: a group value or a list sort. Any such key the
+// snapshot no longer carries is removed from the URL.
+const OWNED_PARAM = new RegExp(`^[${GROUP_PARAM_PREFIX}${LIST_SORT_PARAM_PREFIX}]\\d+$`);
+const DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+// The viewer-state params of a URL as raw strings. Keys this codec does not
+// own are ignored.
+function readReportUrlParams(params) {
+    const groups = new Map();
+    const listSorts = new Map();
+    for (const key of params.keys) {
+        if (!OWNED_PARAM.test(key)) {
+            continue;
+        }
+        const id = Number(key.slice(1));
+        const raw = params.get(key) ?? '';
+        if (key.startsWith(GROUP_PARAM_PREFIX)) {
+            groups.set(id, raw);
+        }
+        else {
+            listSorts.set(id, raw);
+        }
+    }
+    return { groups, listSorts, groupBy: params.get(GROUP_BY_ITEM) };
+}
+// A group value read back from its URL param. null is an explicit clear (an
+// empty param). undefined means the param is unusable for a group of this type
+// (an unknown preset name, a malformed day, a wrong shape) and is ignored.
+// `resolveRelative` turns a preset name into today's range for it, or null for
+// a name it does not know.
+function decodeFilterValue(type, raw, resolveRelative) {
+    if (raw === '') {
+        return null;
+    }
+    switch (type) {
+        case 'dateRange':
+            return raw.includes(DATE_RANGE_SEPARATOR)
+                ? decodeFixedRange(raw)
+                : decodePreset(raw, resolveRelative);
+        case 'select': {
+            const values = raw.split(',').filter((value) => value !== '');
+            return values.length ? { values } : undefined;
+        }
+        case 'keyword':
+            return raw.trim() ? { value: raw } : undefined;
+        default:
+            return undefined;
+    }
+}
+// A group value as its URL param. The shape says how: a preset name, then a
+// date range, then select values, then keyword text. null (a cleared group)
+// is the empty param.
+function encodeFilterValue(value) {
+    if (!value) {
+        return '';
+    }
+    if (value.preset) {
+        return value.preset;
+    }
+    if (value.start || value.end) {
+        return [dateBoundString(value.start) ?? '', dateBoundString(value.end) ?? '']
+            .join(DATE_RANGE_SEPARATOR);
+    }
+    if (value.values) {
+        return value.values.map((item) => String(item)).join(',');
+    }
+    return value.value ?? '';
+}
+function encodeSort(sort) {
+    return `${sort.direction === 'desc' ? '-' : ''}${sort.column}`;
+}
+// A list sort read back from its URL param, or null when it names no column.
+// Whether the column is one the list can sort by is the caller's check.
+function decodeSort(raw) {
+    const descending = raw.startsWith('-');
+    const column = descending ? raw.slice(1) : raw;
+    return column
+        ? { column, direction: descending ? 'desc' : 'asc' }
+        : null;
+}
+// The query params that make the URL carry `snapshot`: every snapshot key is
+// set, and each owned key (or the grain) that `current` carries but the
+// snapshot does not is set to null, which removes it under the router's
+// 'merge' handling. Keys this codec does not own are left alone.
+function buildReportUrlParams(snapshot, current) {
+    const params = {};
+    for (const key of current.keys) {
+        if (OWNED_PARAM.test(key) || key === GROUP_BY_ITEM) {
+            params[key] = null;
+        }
+    }
+    snapshot.groups.forEach((value, groupId) => {
+        params[groupItemName({ id: groupId })] = encodeFilterValue(value);
+    });
+    snapshot.listSorts.forEach((sort, componentId) => {
+        params[`${LIST_SORT_PARAM_PREFIX}${componentId}`] = encodeSort(sort);
+    });
+    if (snapshot.frequency) {
+        params[GROUP_BY_ITEM] = snapshot.frequency;
+    }
+    return params;
+}
+// 'YYYY-MM-DD..YYYY-MM-DD', either side optional but not both. Each side must
+// be a real calendar day.
+function decodeFixedRange(raw) {
+    const sides = raw.split(DATE_RANGE_SEPARATOR);
+    if (sides.length !== 2 || (!sides[0] && !sides[1])) {
+        return undefined;
+    }
+    const [start, end] = sides.map((side) => side ? decodeDay(side) : null);
+    if (start === undefined || end === undefined) {
+        return undefined;
+    }
+    return { start, end };
+}
+// One side of a fixed range as a local Date, or undefined when it is not a
+// real Y-M-D day.
+function decodeDay(side) {
+    return DAY_PATTERN.test(side) ? (dateFromBound(side) ?? undefined) : undefined;
+}
+function decodePreset(name, resolveRelative) {
+    const range = resolveRelative(name);
+    return range ? { start: range.start, end: range.end, preset: name } : undefined;
+}
+
 // Whether two stored filter-group defaults are the same. Compared on the fields a
 // default can actually carry, so key order in the payload can't read as a change.
 function sameDefault(a, b) {
@@ -746,6 +1090,18 @@ function sameDefault(a, b) {
         && (a.values ?? []).length === (b.values ?? []).length
         && (a.values ?? []).every((value, index) => value === (b.values ?? [])[index]);
 }
+// Whether two list sorts order the rows the same way. No direction reads as
+// ascending, the way the list applies it.
+function sameSort(a, b) {
+    return !!b
+        && a.column === b.column
+        && (a.direction ?? 'asc') === (b.direction ?? 'asc');
+}
+// Whether two date-range values cover the same calendar days.
+function sameDays(a, b) {
+    return dateBoundString(a.start) === dateBoundString(b.start)
+        && dateBoundString(a.end) === dateBoundString(b.end);
+}
 // A stable signature for a group's stored default. The report toolbar keys its
 // fs-filter on this, because fs-filter reads its config once at init — without a
 // key change it keeps rendering the values it was created with even after the
@@ -763,72 +1119,107 @@ function defaultSignature(group) {
         (groupDefault.values ?? []).join(','),
     ].join('~');
 }
-// Session filter state for the open report. Filter VALUES are never persisted
-// — this service holds them per filter GROUP (the propagation unit), resolves
-// them into per-component member-filter values for each data request, and
-// notifies the components whose groups changed so only they refetch.
+// Viewer filter state for the open report. Filter VALUES are never saved to
+// the report — this service holds them per filter GROUP (the propagation unit),
+// resolves them into per-component member-filter values for each data request,
+// and notifies the components whose groups changed so only they refetch.
+//
+// It is also the one source of the viewer state the report URL carries (group
+// values, the group-by grain, list sorts): urlSnapshot() says what differs from
+// the authored defaults, init() restores it, and urlChanges() tells the host's
+// single URL writer when to write.
 //
-// Also session-scoped: per-filter enable/disable toggles from a component's
-// filter menu (the `enabled` column is the authored default; a viewer's toggle
-// shouldn't write to the report).
+// Session-only, never in the URL: per-filter enable/disable toggles from a
+// component's filter menu (the `enabled` column is the authored default; a
+// viewer's toggle shouldn't write to the report).
 class ReportFilterStateService {
+    // The open report's effective zone (resolveReportTimezone). Relative presets
+    // resolve against today in it, and date cells render in it.
+    timezone = signal('UTC');
     _values = new Map();
     _groups = new Map();
     _sessionDisabled = new Set();
-    // The report's group-by control: a single session-wide bucket override for all
+    // Groups that have a default the viewer cleared. Without this a reload of the
+    // report (a chat edit, a dialog) would find no value for the group and seed
+    // its default straight back. A change to the stored default releases it.
+    _cleared = new Set();
+    // The report's group-by control: a single report-wide bucket override for all
     // time-series charts. Unset = each chart uses its authored granularity. Never
-    // persisted (it dies with this report view), and carried in the data request's
+    // saved to the report (the URL carries it), and carried in the data request's
     // `state`, so it propagates through to the PDF/PowerPoint exports too. Named
     // for the `frequency` wire key it travels under, not for the control's label.
     _frequency = null;
     _frequencyChanged$ = new Subject();
+    // Each list's viewer-chosen sort, by component id. Held here rather than only
+    // in the list's FsList so it survives the list being recreated (a page switch,
+    // a reload after an edit) and so every consumer of viewer state reads one place.
+    _listSorts = new Map();
     // Emits the group id that changed; components listen filtered to their own
     // group ids. null = everything changed (re-init).
     _changed$ = new Subject();
+    // Fires whenever anything the URL carries may have changed.
+    _urlChanged$ = new Subject();
     // Seed groups + their defaults when a report loads. Existing session values
     // for still-existing groups survive a structure re-fetch (a chat edit
-    // shouldn't reset the viewer's filters) — UNLESS the group's stored default
-    // itself changed, which only happens when an operator saved a new default in
-    // report settings. That is an explicit instruction to re-seed, so it wins over
-    // the surviving session value; without it the bar keeps showing whatever it was
-    // first seeded with until a full page reload.
-    init(report) {
+    // shouldn't reset the viewer's filters), and so does a group the viewer
+    // cleared — UNLESS the group's stored default itself changed, which only
+    // happens when an operator saved a new default in report settings or the
+    // agent set one. That is an explicit instruction to re-seed, so it wins over
+    // the surviving session value; without it the bar keeps showing whatever it
+    // was first seeded with until a full page reload.
+    //
+    // A change of the report's zone moves "today", so a value still carrying its
+    // group default's preset name is resolved again in the new zone. A value the
+    // viewer picked, or one carrying another preset name, is kept as it is.
+    //
+    // `restore` is the viewer state read from the URL. The host passes it only on
+    // the first load of a report; a reload after a chat or dialog edit passes
+    // null, so the in-memory state wins. Params that name a group, list or column
+    // the report no longer has, or that do not decode, are ignored.
+    init(report, restore = null) {
+        const previousTimezone = this.timezone();
+        // Set first: the defaults seeded below resolve their relative presets in it.
+        this.timezone.set(resolveReportTimezone(report));
+        const timezoneChanged = previousTimezone !== this.timezone();
         const previousGroups = this._groups;
         this._groups = new Map();
-        const validIds = new Set();
         for (const group of report.filterGroups ?? []) {
             this._groups.set(group.id, group);
-            validIds.add(group.id);
-            const defaultChanged = !sameDefault(previousGroups.get(group.id)?.config?.default ?? null, group.config?.default ?? null);
-            if (!this._values.has(group.id) || defaultChanged) {
-                const defaultValue = this._defaultValue(group);
-                if (defaultValue) {
-                    this._values.set(group.id, defaultValue);
-                }
-                else if (defaultChanged) {
-                    // The default was cleared, so the value it seeded goes with it.
-                    this._values.delete(group.id);
-                }
-            }
+            this._seed(group, previousGroups.get(group.id) ?? null, timezoneChanged);
         }
-        for (const groupId of [...this._values.keys()]) {
-            if (!validIds.has(groupId)) {
-                this._values.delete(groupId);
-            }
+        if (restore) {
+            this._restore(report, restore);
         }
+        this._prune(report);
         this._changed$.next(null);
+        this._urlChanged$.next();
     }
     value(groupId) {
         return this._values.get(groupId);
     }
+    // A bar's value for a group. A date range keeps the stored preset name only
+    // while its days are still the stored days: the bars re-set every group they
+    // show whenever any one of them changes, and an untouched rolling range must
+    // keep its name rather than turn into two fixed dates. Any other range, a
+    // picker shortcut included, is stored as the fixed dates it shows.
     setValue(groupId, value) {
         if (value === null) {
             this._values.delete(groupId);
+            if (this._groups.get(groupId)?.config?.default) {
+                this._cleared.add(groupId);
+            }
         }
         else {
-            this._values.set(groupId, value);
+            this._values.set(groupId, this._withPreset(this._values.get(groupId), value));
+            this._cleared.delete(groupId);
         }
         this._changed$.next(groupId);
+        this._urlChanged$.next();
+    }
+    // A relative preset name as today's range in the report's zone, or null for
+    // a name it does not know. The URL codec decodes preset names through this.
+    resolveRelative(name) {
+        return this._relativeRange(name);
     }
     // The active group-by grain, or null when the viewer hasn't chosen one.
     frequency() {
@@ -837,6 +1228,7 @@ class ReportFilterStateService {
     setFrequency(frequency) {
         this._frequency = frequency;
         this._frequencyChanged$.next();
+        this._urlChanged$.next();
     }
     // Fires whenever the group-by grain changes — every time-series chart listens
     // so it refetches and re-buckets (the override isn't scoped to any filter
@@ -844,6 +1236,54 @@ class ReportFilterStateService {
     frequencyChanges() {
         return this._frequencyChanged$.asObservable();
     }
+    // The sort the viewer last fetched a list with, or null when it hasn't sorted
+    // (the list then falls back to its authored sort).
+    listSort(componentId) {
+        return this._listSorts.get(componentId) ?? null;
+    }
+    // Records a list's sort. Deliberately emits no change: the list sets this from
+    // the fetch that already ran with that sort, so a notification would only make
+    // it refetch the same rows. Only the URL hears about it.
+    setListSort(componentId, sort) {
+        if (sort) {
+            this._listSorts.set(componentId, sort);
+        }
+        else {
+            this._listSorts.delete(componentId);
+        }
+        this._urlChanged$.next();
+    }
+    // Fires whenever the viewer state the URL carries may have changed: a group
+    // value, the grain, a list sort, or a (re)load of the report.
+    urlChanges() {
+        return this._urlChanged$.asObservable();
+    }
+    // The viewer state the URL should carry for `report`: only what differs from
+    // the authored defaults, so an untouched report has a bare URL and keeps
+    // following its defaults when they change. A group the viewer cleared is
+    // null. A date range is compared on its days against its default resolved
+    // today, so a value that is the default under another preset name (thisYear
+    // against a yearToDate default) is still the default.
+    urlSnapshot(report) {
+        const groups = new Map();
+        for (const group of this._groups.values()) {
+            const value = this._values.get(group.id);
+            if (this._cleared.has(group.id)) {
+                groups.set(group.id, null);
+            }
+            else if (value && !this._isDefault(group, value)) {
+                groups.set(group.id, value);
+            }
+        }
+        const listSorts = new Map();
+        for (const component of this._listComponents(report)) {
+            const sort = this._listSorts.get(component.id);
+            if (sort && !sameSort(sort, component.config?.sort ?? null)) {
+                listSorts.set(component.id, sort);
+            }
+        }
+        return { groups, listSorts, frequency: this._frequency };
+    }
     isFilterDisabled(filterId) {
         return this._sessionDisabled.has(filterId);
     }
@@ -873,28 +1313,28 @@ class ReportFilterStateService {
                 continue;
             }
             const value = this._values.get(filter.filterGroupId);
-            if (!value) {
-                continue;
-            }
-            const entry = { filterId: filter.id };
-            if (value.start) {
-                entry.start = dateBoundString(value.start);
-            }
-            if (value.end) {
-                entry.end = dateBoundString(value.end);
-            }
-            if (value.values?.length) {
-                entry.values = value.values;
-            }
-            if (value.value?.trim()) {
-                entry.value = value.value.trim();
-            }
-            if (entry.start || entry.end || entry.values || entry.value) {
-                resolved.push(entry);
+            const fields = value ? this._resolvedFields(value) : null;
+            if (fields) {
+                resolved.push({ filterId: filter.id, ...fields });
             }
         }
         return resolved;
     }
+    // What the viewer has set, one entry per filter group, for the report chat:
+    // the agent reads it to know what is on screen. Group order, not the order
+    // the values were set in, so the same state always reads the same. A group
+    // with nothing in it is left out, and a saved default counts until the
+    // viewer changes it. Per-filter toggles are a component's own business, so
+    // they are not part of it.
+    viewerFilters() {
+        return [...this._values.entries()]
+            .sort(([a], [b]) => a - b)
+            .map(([groupId, value]) => {
+            const fields = this._resolvedFields(value);
+            return fields ? { groupId, ...fields } : null;
+        })
+            .filter((entry) => entry !== null);
+    }
     // Every component's resolved values in one array — what a report-level export
     // carries so each file in the archive is filtered exactly as the screen is.
     // Filter ids are unique per component, so the backend picks each component's
@@ -906,10 +1346,148 @@ class ReportFilterStateService {
             .flatMap((page) => (page.components ?? [])
             .flatMap((component) => this.resolveForComponent(component)));
     }
+    // A group value as the fields a request carries: date bounds as calendar
+    // days, select values when any are picked, keyword text trimmed. Null when
+    // all of them are empty. The preset name is URL state only, so it is left
+    // behind.
+    _resolvedFields(value) {
+        const fields = {};
+        if (value.start) {
+            fields.start = dateBoundString(value.start);
+        }
+        if (value.end) {
+            fields.end = dateBoundString(value.end);
+        }
+        if (value.values?.length) {
+            fields.values = value.values;
+        }
+        if (value.value?.trim()) {
+            fields.value = value.value.trim();
+        }
+        return fields.start || fields.end || fields.values || fields.value
+            ? fields
+            : null;
+    }
+    // Seeds one group on (re)load; see init(). `previous` is the group as the
+    // last load had it, or null when it is new.
+    _seed(group, previous, timezoneChanged) {
+        const defaultChanged = !sameDefault(previous?.config?.default ?? null, group.config?.default ?? null);
+        if (defaultChanged) {
+            this._cleared.delete(group.id);
+        }
+        if (this._cleared.has(group.id)) {
+            return;
+        }
+        const value = this._values.get(group.id);
+        const presetToResolve = timezoneChanged
+            && !!value?.preset
+            && value.preset === group.config?.default?.relative;
+        if (value && !defaultChanged && !presetToResolve) {
+            return;
+        }
+        const defaultValue = this._defaultValue(group);
+        if (defaultValue) {
+            this._values.set(group.id, defaultValue);
+        }
+        else if (defaultChanged) {
+            // The default was cleared, so the value it seeded goes with it.
+            this._values.delete(group.id);
+        }
+    }
+    // Applies the viewer state read from the URL on top of the seeded defaults.
+    _restore(report, restore) {
+        restore.groups.forEach((raw, groupId) => {
+            const group = this._groups.get(groupId);
+            const value = group
+                ? decodeFilterValue(group.type, raw, (name) => this.resolveRelative(name))
+                : undefined;
+            if (value === null) {
+                this._values.delete(groupId);
+                if (group?.config?.default) {
+                    this._cleared.add(groupId);
+                }
+            }
+            else if (value) {
+                this._values.set(groupId, value);
+                this._cleared.delete(groupId);
+            }
+        });
+        const lists = new Map(this._listComponents(report).map((component) => [component.id, component]));
+        restore.listSorts.forEach((raw, componentId) => {
+            const component = lists.get(componentId);
+            const sort = decodeSort(raw);
+            if (component && sort && this._sortableColumns(component).includes(sort.column)) {
+                this._listSorts.set(componentId, sort);
+            }
+        });
+        // The URL is the whole truth on a first load: no grain in it means the
+        // authored ones. The host still drops a grain the report does not offer.
+        this._frequency = GRANULARITY_OPTIONS
+            .find((option) => option.value === restore.groupBy)?.value ?? null;
+    }
+    // Drops state kept for groups and lists the report no longer has.
+    _prune(report) {
+        for (const groupId of [...this._values.keys(), ...this._cleared]) {
+            if (!this._groups.has(groupId)) {
+                this._values.delete(groupId);
+                this._cleared.delete(groupId);
+            }
+        }
+        const listIds = new Set(this._listComponents(report).map((component) => component.id));
+        for (const componentId of [...this._listSorts.keys()]) {
+            if (!listIds.has(componentId)) {
+                this._listSorts.delete(componentId);
+            }
+        }
+    }
+    // The value a bar sets, keeping the stored preset name while the days are
+    // still the stored days (see setValue).
+    _withPreset(stored, value) {
+        const fixed = { ...value };
+        delete fixed.preset;
+        return stored?.preset && sameDays(stored, fixed)
+            ? { ...fixed, preset: stored.preset }
+            : fixed;
+    }
+    // Whether a value is the group's authored default, by type: a date range on
+    // its days (the default resolved today), a select on its values in any
+    // order, a keyword on its text.
+    _isDefault(group, value) {
+        const defaultValue = this._defaultValue(group);
+        if (!defaultValue) {
+            return false;
+        }
+        switch (group.type) {
+            case 'dateRange':
+                return sameDays(value, defaultValue);
+            case 'select': {
+                const values = (value.values ?? []).map(String).sort();
+                const defaults = (defaultValue.values ?? []).map(String).sort();
+                return values.length === defaults.length
+                    && values.every((item, index) => item === defaults[index]);
+            }
+            default:
+                return (value.value ?? '').trim() === (defaultValue.value ?? '').trim();
+        }
+    }
+    _listComponents(report) {
+        return (report.pages ?? [])
+            .flatMap((page) => page.components ?? [])
+            .filter((component) => component.type === 'list');
+    }
+    // The columns a list can be sorted by: every authored column, or a
+    // cross-tab's row column only (its pivot columns come and go with the data).
+    _sortableColumns(component) {
+        const config = component.config;
+        if (config?.pivotBy?.column) {
+            return config.rowBy?.column ? [config.rowBy.column] : [];
+        }
+        return (config?.columns ?? []).map((column) => column.column);
+    }
     // A group's authored default, mapped to a session value by type. Relative
     // date presets resolve against "now" each time the report opens, so a saved
-    // "last 12 months" stays relative; a fixed range, select values and keyword
-    // text seed verbatim.
+    // "last 12 months" stays relative and carries its preset name; a fixed
+    // range, select values and keyword text seed verbatim.
     _defaultValue(group) {
         const groupDefault = group.config?.default;
         if (!groupDefault) {
@@ -917,7 +1495,7 @@ class ReportFilterStateService {
         }
         if (groupDefault.relative) {
             const range = this._relativeRange(groupDefault.relative);
-            return range ? { start: range.start, end: range.end } : null;
+            return range ? { start: range.start, end: range.end, preset: groupDefault.relative } : null;
         }
         if (groupDefault.start || groupDefault.end) {
             return {
@@ -933,22 +1511,28 @@ class ReportFilterStateService {
         }
         return null;
     }
+    // A relative preset as a calendar-day range. "Today" is the day in the
+    // report's effective zone, not the browser's, so every viewer seeds the same
+    // range. The server twin is ReportRelativeRangeEnum (framework/Report/Enum),
+    // and ReportRelativeRangeEnumTest pins the table both sides must produce.
     _relativeRange(relative) {
-        const now = new Date();
+        const now = getZonedNow(this.timezone());
         switch (relative) {
-            // A calendar week, Sunday to Saturday, in whole days — not the rolling
+            // A calendar week, Monday to Sunday (REPORT_WEEK_STARTS_ON, the same week
+            // the server's weekly buckets use), in whole days — not the rolling
             // seven days `last7Days` gives, which never lines up with the week a
             // partner has already been sent. `lastWeek` is the one a weekly report
-            // wants: it ends at endOfWeek rather than at `now`, because the week it
-            // names has closed. `thisWeek` follows every other preset here and runs
-            // up to now, so it is deliberately a part-finished week.
+            // wants: it ends on the previous week's Sunday rather than at `now`,
+            // because the week it names has closed. `thisWeek` follows every other
+            // preset here and runs up to now, so it is deliberately a part-finished
+            // week (on a Sunday it is the whole Monday-to-Sunday week).
             case 'thisWeek':
-                return { start: startOfWeek(now, { weekStartsOn: 0 }), end: now };
+                return { start: startOfWeek(now, { weekStartsOn: REPORT_WEEK_STARTS_ON }), end: now };
             case 'lastWeek': {
                 const previous = subWeeks(now, 1);
                 return {
-                    start: startOfWeek(previous, { weekStartsOn: 0 }),
-                    end: endOfWeek(previous, { weekStartsOn: 0 }),
+                    start: startOfWeek(previous, { weekStartsOn: REPORT_WEEK_STARTS_ON }),
+                    end: endOfWeek(previous, { weekStartsOn: REPORT_WEEK_STARTS_ON }),
                 };
             }
             case 'last7Days':
@@ -979,46 +1563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
-// Measure-value formatting shared by the KPI renderer and the exports — the
-// config's `format` (number | percent | currency) and `precision` mean the same
-// thing on screen, in PowerPoint and in PDF.
-// A bare `new Intl.NumberFormat()` defaults to maximumFractionDigits: 3, which
-// is why an unconfigured percentage reads 38.298%. When the measure names a
-// precision it is pinned as BOTH the minimum and the maximum, so a column of
-// rates lines up instead of each value showing however many decimals it happens
-// to need. Undefined leaves the locale default alone, so a report authored
-// before precision existed renders exactly as it did.
-function getFractionDigits(precision) {
-    return Number.isFinite(precision)
-        ? { minimumFractionDigits: precision, maximumFractionDigits: precision }
-        : {};
-}
-function formatMeasureValue(value, format, precision) {
-    if (value === null || value === undefined || value === '') {
-        return '—';
-    }
-    const numeric = Number(value);
-    if (!Number.isFinite(numeric)) {
-        return String(value);
-    }
-    const fractionDigits = getFractionDigits(precision);
-    switch (format) {
-        case 'percent':
-            return `${new Intl.NumberFormat(undefined, fractionDigits).format(numeric)}%`;
-        case 'currency':
-            return new Intl.NumberFormat(undefined, {
-                style: 'currency',
-                currency: 'USD',
-                // Whole dollars unless the measure asks for decimals — cents were
-                // unrepresentable before, because this was hardcoded to 0.
-                maximumFractionDigits: 0,
-                ...fractionDigits,
-            }).format(numeric);
-        default:
-            return new Intl.NumberFormat(undefined, fractionDigits).format(numeric);
-    }
-}
-
 // Text blocks — shared by the canvas and both exports, so a block reads the
 // same on screen, in the deck and in the PDF.
 //
@@ -1258,13 +1802,37 @@ const REPORT_WATERFALL_COLORS = {
     total: REPORT_CHART_COLORS[9],
 };
 
+// The report charts' typeface and axis-label size. The ECharts theme draws with
+// them, and the option builder measures axis labels with them, so the room it
+// leaves around the labels matches what is drawn.
+const REPORT_CHART_FONT_FAMILY = 'Roboto, "Helvetica Neue", sans-serif';
+const REPORT_AXIS_LABEL_FONT_SIZE = 11;
+
+// Room for the category axis's title. ECharts 5's containLabel keeps the TICK
+// labels inside the grid but not the axis name, so without this a vertical
+// chart's title runs off the bottom edge or under a bottom legend.
+const AXIS_NAME_ROOM = 20;
+// ECharts' own default gap between the axis line and its tick labels.
+const AXIS_LABEL_MARGIN = 8;
+// Clearance between the longest tick label and a horizontal chart's rotated
+// title, so the two never touch.
+const AXIS_NAME_CLEARANCE = 6;
+// A horizontal chart's category labels are cut short with an ellipsis past
+// this width (the tooltip still shows them in full), so one long label cannot
+// squeeze the plot away.
+const CATEGORY_LABEL_MAX_WIDTH = 160;
+const LABEL_ELLIPSIS = '…';
+// The font the theme draws axis labels in, as a canvas font string. Labels are
+// measured in it the way ECharts measures them for containLabel, so a
+// horizontal chart's title lands exactly beyond the widest label.
+const AXIS_LABEL_FONT = `${REPORT_AXIS_LABEL_FONT_SIZE}px ${REPORT_CHART_FONT_FAMILY}`;
 // colorBy applies only to single-dimension bar charts, and only when splitBy
 // isn't already driving multiple series: it colors each bar by its category and
 // shows a legend (one series per category, overlapped to full width).
 //
 // It is the DEFAULT for a categorical bar chart rather than something the config
-// has to ask for. A bar chart whose x-axis is a category — provinces, statuses,
-// clinics — is comparing those categories to each other, and one flat color with
+// has to ask for. A bar chart whose x-axis is a category — regions, statuses,
+// stores — is comparing those categories to each other, and one flat color with
 // no legend is the wrong reading of it in essentially every case. Requiring
 // colorBy to opt in meant every such chart rendered monochrome unless whoever
 // wrote the config remembered an optional property, which is a default set the
@@ -1399,11 +1967,11 @@ function buildAxisOption(component, data, chartType) {
     // a combo each type stacks only with its own kind, so a line of a rate never
     // sits on top of the bars' total.
     const series = extracted.series.map((extractedSeries, index) => buildSeries(extractedSeries.name, extractedSeries.values, types[index], config.stacked ? (combo ? `total-${types[index]}` : 'total') : undefined, colorBy && index === 0, combo));
-    const categoryAxis = categoryAxisOption(config, data, extracted.categories);
+    const categoryAxis = categoryAxisOption(config, data, extracted.categories, horizontal);
     const valueAxis = { type: 'value' };
     const legendPosition = resolveLegendPosition(config, series.length, colorBy);
     return {
-        grid: axisGrid(legendPosition),
+        grid: axisGrid(legendPosition, categoryTitleSide(config, horizontal)),
         legend: legendOption(legendPosition),
         // colorBy charts overlap N mostly-null series, so an axis tooltip would list
         // every category; an item tooltip shows just the hovered bar.
@@ -1415,28 +1983,111 @@ function buildAxisOption(component, data, chartType) {
 }
 // The category axis of an axis chart or a waterfall: the categories in row
 // order, labeled as periods when the rows were bucketed by time.
-function categoryAxisOption(config, data, categories) {
+//
+// Horizontal bars read top-down: ECharts draws category 0 at the bottom, so the
+// axis is inverted to put the first row (the largest of a top-N, a waterfall's
+// first step) at the top. The rotated title sits just beyond the longest label
+// rather than at a fixed gap that would put it on top of the labels.
+function categoryAxisOption(config, data, categories, horizontal) {
     const granularity = bucketGranularity(data);
-    return {
+    const periodLabel = periodAxisLabel(granularity, categories);
+    const axis = {
         type: 'category',
         data: categories,
+        inverse: horizontal,
         name: config.xAxis?.label,
         nameLocation: 'middle',
-        nameGap: granularity && spansMultipleYears(categories) ? 40 : 28,
-        ...periodAxisLabel(granularity, categories),
     };
+    if (!horizontal) {
+        return {
+            ...axis,
+            nameGap: granularity && spansMultipleYears(categories) ? 40 : 28,
+            ...periodLabel,
+        };
+    }
+    // A period label ('May', 'Q2') is always short, so only a plain category is
+    // cut short. The labels are cut here rather than by ECharts' own truncation,
+    // so the title's gap is measured on exactly the text the axis draws.
+    const shown = granularity
+        ? null
+        : new Map(categories.map((category) => [category, truncateAxisLabel(category)]));
+    const labels = shown ? [...shown.values()] : displayedCategoryLabels(categories, granularity);
+    return {
+        ...axis,
+        nameGap: widestAxisLabel(labels) + AXIS_LABEL_MARGIN + AXIS_NAME_CLEARANCE,
+        ...(shown ? { axisLabel: { formatter: (value) => shown.get(value) ?? value } } : periodLabel),
+    };
+}
+// The category axis's title side, or null when the axis has no title to make
+// room for.
+function categoryTitleSide(config, horizontal) {
+    if (!config.xAxis?.label) {
+        return null;
+    }
+    return horizontal ? 'left' : 'bottom';
+}
+// The tick labels as the axis shows them: a bucket's primary period label
+// ('May', 'Q2'), otherwise the category itself. The year a multi-year axis
+// prints under a period is left out, as it is never the wider line.
+function displayedCategoryLabels(categories, granularity) {
+    return granularity
+        ? categories.map((category) => periodLabelParts(category, granularity)?.primary ?? category)
+        : categories;
+}
+// The pixel width of the widest label. A label that breaks over several lines
+// is as wide as its longest line.
+function widestAxisLabel(labels) {
+    return labels.reduce((widest, label) => label.split('\n').reduce((lineWidest, line) => Math.max(lineWidest, axisLabelWidth(line)), widest), 0);
+}
+// A category label cut to CATEGORY_LABEL_MAX_WIDTH, line by line: the longest
+// start of each line that still fits with the ellipsis after it.
+function truncateAxisLabel(label) {
+    return label.split('\n').map((line) => {
+        if (axisLabelWidth(line) <= CATEGORY_LABEL_MAX_WIDTH) {
+            return line;
+        }
+        // Code points, so an emoji or other surrogate pair is never split.
+        const characters = Array.from(line);
+        const cut = (length) => `${characters.slice(0, length).join('').trimEnd()}${LABEL_ELLIPSIS}`;
+        let fits = 0;
+        let tooLong = characters.length;
+        while (tooLong - fits > 1) {
+            const length = Math.floor((fits + tooLong) / 2);
+            if (axisLabelWidth(cut(length)) <= CATEGORY_LABEL_MAX_WIDTH) {
+                fits = length;
+            }
+            else {
+                tooLong = length;
+            }
+        }
+        return cut(fits);
+    }).join('\n');
+}
+// One line's width in the axis-label font, measured on a canvas the way
+// ECharts measures it for containLabel. Outside a browser there is no canvas
+// to measure with, so the line counts as zero width.
+let axisLabelContext = null;
+function axisLabelWidth(line) {
+    if (!axisLabelContext && typeof document !== 'undefined') {
+        axisLabelContext = document.createElement('canvas').getContext('2d');
+    }
+    if (!axisLabelContext) {
+        return 0;
+    }
+    axisLabelContext.font = AXIS_LABEL_FONT;
+    return axisLabelContext.measureText(line).width;
 }
 function buildWaterfallOption(component, data) {
     const config = component.config;
     const waterfall = extractWaterfall(component, data);
-    const categoryAxis = categoryAxisOption(config, data, waterfall.steps.map((step) => step.category));
-    const valueAxis = { type: 'value' };
     const horizontal = config.orientation === 'horizontal';
+    const categoryAxis = categoryAxisOption(config, data, waterfall.steps.map((step) => step.category), horizontal);
+    const valueAxis = { type: 'value' };
     // One visible series, so the legend is hidden unless the config pins it.
     const legendPosition = resolveLegendPosition(config, 1);
     const granularity = bucketGranularity(data);
     return {
-        grid: axisGrid(legendPosition),
+        grid: axisGrid(legendPosition, categoryTitleSide(config, horizontal)),
         legend: { ...legendOption(legendPosition), data: [waterfall.name] },
         // Per bar: the invisible base is silent, so only a step answers the hover.
         tooltip: {
@@ -1524,9 +2175,23 @@ function legendOption(position) {
             return { ...base, top: 0 };
     }
 }
-// Reserve plot-edge room on whichever side the legend occupies so it never
-// overlaps the bars/lines; containLabel already accounts for the axis labels.
-function axisGrid(position) {
+// The plot's grid: room on the legend's side so it never overlaps the
+// bars/lines, plus room for the category axis's title on its side, which
+// containLabel does not reserve (it covers the tick labels only).
+function axisGrid(position, titleSide) {
+    const grid = legendGrid(position);
+    switch (titleSide) {
+        case 'bottom':
+            return { ...grid, bottom: grid.bottom + AXIS_NAME_ROOM };
+        case 'left':
+            return { ...grid, left: grid.left + AXIS_NAME_ROOM };
+        default:
+            return grid;
+    }
+}
+// Plot-edge room on whichever side the legend occupies; containLabel keeps the
+// tick labels inside what is left.
+function legendGrid(position) {
     const base = { left: 8, right: 16, top: 8, bottom: 8, containLabel: true };
     switch (position) {
         case 'bottom':
@@ -1769,15 +2434,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-// A list component: FsList + FsFilter rendered from the component's config and
-// its report_filters rows. The component's own filter bar carries its filters
-// whose group renders at the component level; report-level groups apply
-// through the shared filter-state service and merge into every request.
+// A report row's date cell as the calendar day in the report's zone. Use it in
+// place of Angular's DatePipe, which reads a 'YYYY-MM-DD HH:MM:SS' value as the
+// browser's local wall time instead of the UTC instant it is.
+class ReportDatePipe {
+    transform(value, timezone) {
+        return formatReportDate(value, timezone);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ReportDatePipe, isStandalone: true, name: "fsReportDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fsReportDate',
+                    standalone: true,
+                }]
+        }] });
+
+// A list component: an FsList rendered from the component's config. It has no
+// filter bar of its own: its filters are group-keyed like every other
+// component's, so component-level groups render in the component header strip
+// (ReportComponentComponent) and report-level groups in the report bar, and
+// every request takes its values from the shared filter-state service.
 // Paging and sorting are pushed into the SQL wrap server-side.
 class ComponentListComponent {
     reportId;
     component;
-    groups;
     listComponent;
     listConfig;
     // A plain list's columns are authored and fixed at init. A cross-tab's are
@@ -1796,6 +2479,10 @@ class ComponentListComponent {
     // (it only renders what _load() fetched, which lists skip), so the warning
     // belongs here.
     truncated = signal(false);
+    // The report's effective zone, which date cells render in. Injected right
+    // here rather than read off _filterState, which is declared further down and
+    // is still undefined while this initializer runs.
+    timezone = inject(ReportFilterStateService).timezone;
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
     _destroyRef = inject(DestroyRef);
@@ -1804,23 +2491,28 @@ class ComponentListComponent {
         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.
+        // A change to any group this list's filters belong to (from the report bar
+        // or the component header strip) re-runs the list.
         this._filterState.changesFor(this.component)
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this.listComponent?.reload());
     }
     _initListConfig(config) {
+        // The viewer's last sort wins over the authored one, so a list recreated
+        // in the same session (page switch, reload after an edit) keeps it.
+        const sort = this._filterState.listSort(this.component.id) ?? config.sort;
         this.listConfig = {
             // Inside a report component the list is a clean data pane — no status
             // bar, no reload button (filter changes already refetch).
             status: false,
             reload: false,
-            // Never touch the URL or persist filter/paging state — report filtering
-            // is session-only.
+            // FsList never touches the URL or persists sort/paging state. The sort
+            // reaches the URL through ReportFilterStateService (setListSort), and
+            // paging stays out of it.
             queryParam: false,
             persist: false,
-            sort: config.sort
-                ? { value: config.sort.column, direction: config.sort.direction ?? 'asc' }
+            sort: sort
+                ? { value: sort.column, direction: sort.direction ?? 'asc' }
                 : undefined,
             // Load-more: the list keeps a fixed, scrollable height and appends the
             // next page in place instead of swapping pages. The button is pinned to
@@ -1841,50 +2533,9 @@ class ComponentListComponent {
                 label: 'Load more',
                 buttonType: 'stroked',
             },
-            filters: this._ownFilters().map((filter) => this._filterItem(filter)),
             fetch: (query) => this._fetch(query),
         };
     }
-    // The filters this list renders in its own bar: its report_filters whose
-    // group is component-level. Report-level groups render in the report bar.
-    _ownFilters() {
-        return (this.component.filters ?? [])
-            .filter((filter) => {
-            const group = this.groups?.get(filter.filterGroupId);
-            return filter.enabled && (!group || group.level === 'component' || group.level === 'both');
-        });
-    }
-    _filterItem(filter) {
-        const group = this.groups?.get(filter.filterGroupId);
-        const name = `f${filter.id}`;
-        const label = filter.label || group?.label || filter.filterColumn;
-        switch (group?.type) {
-            case 'dateRange':
-                return {
-                    name,
-                    type: ItemType.DateRange,
-                    label: [`${label} From`, `${label} To`],
-                };
-            case 'select':
-                return {
-                    name,
-                    type: ItemType.AutoCompleteChips,
-                    label,
-                    // The server sends { value, label }: the filter matches on the value
-                    // (an entity's stable id) while the viewer reads the label.
-                    values: () => this._reportData.filterOptions(this.reportId, filter.id)
-                        .pipe(map$1((options) => (options ?? [])
-                        .map((option) => ({ name: option.label, value: option.value })))),
-                };
-            case 'keyword':
-            default:
-                return {
-                    name,
-                    type: ItemType.Keyword,
-                    label,
-                };
-        }
-    }
     _fetch(query) {
         // Many/load-more sends `offset` + `limit` (not `page`); derive the page so
         // the server-side wrap keeps working unchanged. Page strategy still sends
@@ -1901,17 +2552,12 @@ class ComponentListComponent {
             const [column, direction] = order.split(',');
             state.sort = { column, direction: direction === 'desc' ? 'desc' : 'asc' };
         }
-        // Report-level values from the shared session state, merged with this
-        // list's own filter-bar values (own values win per filter).
-        const resolved = new Map();
-        for (const value of this._filterState.resolveForComponent(this.component)) {
-            resolved.set(value.filterId, value);
-        }
-        for (const value of this._barValues(query)) {
-            resolved.set(value.filterId, value);
-        }
+        this._filterState.setListSort(this.component.id, state.sort ?? null);
+        // One source for filter values, the same one charts, KPIs and the exports
+        // read, so the list is filtered exactly as its header strip shows.
+        const filters = this._filterState.resolveForComponent(this.component);
         return this._reportData
-            .componentData(this.reportId, this.component.id, [...resolved.values()], state)
+            .componentData(this.reportId, this.component.id, filters, state)
             .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
@@ -1959,54 +2605,18 @@ class ComponentListComponent {
             .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.
-    _barValues(query) {
-        const values = [];
-        for (const filter of this._ownFilters()) {
-            const group = this.groups?.get(filter.filterGroupId);
-            const name = `f${filter.id}`;
-            if (group?.type === 'dateRange') {
-                const from = dateBoundString(query[`${name}From`]);
-                const to = dateBoundString(query[`${name}To`]);
-                if (from || to) {
-                    values.push({ filterId: filter.id, start: from, end: to });
-                }
-            }
-            else if (group?.type === 'select') {
-                // fs-filter joins a multi-select into one "a,b" string; split it back
-                // so each value binds separately (else `col IN ('a,b')` matches nothing).
-                const selected = query[name];
-                const selectedValues = Array.isArray(selected)
-                    ? selected
-                    : (selected ? String(selected).split(',') : []);
-                if (selectedValues.length) {
-                    values.push({ filterId: filter.id, values: selectedValues });
-                }
-            }
-            else {
-                const keyword = String(query[name] ?? '').trim();
-                if (keyword) {
-                    values.push({ filterId: filter.id, value: keyword });
-                }
-            }
-        }
-        return values;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "@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 });
+    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" }, 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] | fsReportDate: timezone() }}\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: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }, { kind: "pipe", type: ReportDatePipe, name: "fsReportDate" }], 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: "@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"] }]
+                        ReportDatePipe,
+                    ], 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] | fsReportDate: timezone() }}\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: [{
-                type: Input
-            }], groups: [{
+            }], component: [{
                 type: Input
             }], listComponent: [{
                 type: ViewChild,
@@ -2248,20 +2858,22 @@ class ReportComponentComponent {
     }
     // The component's header IS an fs-filter: heading template = its title (and
     // the drag handle), actions = the Settings / filter-toggles / Export menu,
-    // items = its component-level filter groups (none for lists — they filter
-    // through FsList). Rebuilt when a filter toggle changes which groups show.
-    filterConfig;
-    data = null;
-    loading = false;
-    error = null;
+    // items = its component-level filter groups, for every component type, lists
+    // included. Rebuilt when a filter toggle changes which groups show,
+    // and when the settings dialog changes the title or padding: setting it
+    // repaints the header and body.
+    filterConfig = signal(null);
+    data = signal(null);
+    loading = signal(false);
+    error = signal(null);
     _refresh$ = new Subject();
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
     _process = inject(FsProcess);
+    _message = inject(FsMessage);
     _prompt = inject(FsPrompt);
     _lastPress = 0;
     _destroyRef = inject(DestroyRef);
-    _cdRef = inject(ChangeDetectorRef);
     _zone = inject(NgZone);
     _host = inject(ElementRef);
     ngOnInit() {
@@ -2342,7 +2954,7 @@ class ReportComponentComponent {
             .subscribe(() => this.removed.emit(this.component.id));
     }
     get truncated() {
-        return !!this.data?.truncated;
+        return !!this.data()?.truncated;
     }
     // Content padding (inches → px at 96/in; the canvas zoom scales the page as
     // a whole). Each edge defaults to 1/8".
@@ -2354,10 +2966,10 @@ class ReportComponentComponent {
     // The component-level filter groups that should render as an inline control
     // strip on THIS component: a group is included when it's level=component and
     // has an enabled, session-on filter here. Report-level groups live in the
-    // top bar instead; lists render their own filters through FsList, so they
-    // never use this strip.
+    // top bar instead. Lists use this strip like charts do: a value set here is
+    // the group's value, so it reaches every component in the group.
     get componentFilterGroups() {
-        if (this.component.type === 'list' || !this.groups) {
+        if (!this.groups) {
             return [];
         }
         const groupIds = new Set();
@@ -2378,17 +2990,36 @@ class ReportComponentComponent {
     // Presentation settings saved from the settings dialog. Title and padding are
     // not part of the query, so the data already fetched still stands — this only
     // repaints. The header config is rebuilt because `filterKey` changes with the
-    // title and recreates the fs-filter block around it. The chart follows its box
-    // on its own (ngx-echarts observes the host), so nothing is told to resize.
+    // title and recreates the fs-filter block around it; setting the config signal
+    // is also what repaints the new padding. The chart follows its box on its own
+    // (ngx-echarts observes the host), so nothing is told to resize.
     applySettings(settings) {
         this.component.title = settings.title;
         this.component.config = { ...this.component.config, padding: settings.padding };
         this._buildFilterConfig();
-        this._cdRef.markForCheck();
     }
+    // The CSV is what the screen shows, so it carries the same interaction state
+    // the screen fetched with: the group-by grain for a time-series chart and the
+    // viewer's header sort for a list. A note the server returns (the file was
+    // cut) is shown before the download starts, so a short file never passes for
+    // the whole result.
     exportCsv() {
         const filters = this._filterState.resolveForComponent(this.component);
-        this._process.download(`Exporting ${this.component.title ?? 'component'}`, this._reportData.exportComponent(this.reportId, this.component.id, filters));
+        const state = {};
+        // A deliberate mirror of the server's ReportQueryRunner::_isTimeSeriesChart,
+        // which is canonical and drops the grain for every other component. Kept so
+        // a product pinned to an older framework does not re-bucket a non-time chart.
+        if (this._isTimeSeries && this._filterState.frequency()) {
+            state.frequency = this._filterState.frequency();
+        }
+        const sort = this.component.type === 'list'
+            ? this._filterState.listSort(this.component.id)
+            : null;
+        if (sort) {
+            state.sort = sort;
+        }
+        this._process.download(`Exporting ${this.component.title ?? 'component'}`, this._reportData.exportComponent(this.reportId, this.component.id, filters, state)
+            .pipe(tap(({ notes }) => notes?.length && this._message.warning(notes.join(' '))), map$1(({ url }) => url)));
     }
     // Any interaction inside a component must never start a canvas pan (the
     // zoom-pan host listens for mousedown/touchstart at the container level).
@@ -2478,9 +3109,10 @@ class ReportComponentComponent {
     // top-right in the template, so its button height no longer drives the header
     // row's height (which would otherwise inflate the heading by ~40px).
     _buildFilterConfig() {
-        this.filterConfig = {
-            // Never touch the URL or persist filter state — component filters are
-            // session-only, owned by ReportFilterStateService.
+        this.filterConfig.set({
+            // fs-filter never touches the URL or persists filter state. The values
+            // are owned by ReportFilterStateService, which feeds the report view's
+            // one URL writer (report-url-state.ts).
             queryParam: false,
             persist: false,
             items: this.componentFilterGroups.map((group) => filterItemForGroup(group, this._reportData, this.reportId, this._filterState.value(group.id))),
@@ -2489,7 +3121,7 @@ class ReportComponentComponent {
                     this._filterState.setValue(groupId, value);
                 }
             },
-        };
+        });
     }
     // Flow: only the east handle resizes (width %). Height is always auto in flow
     // (the box fits its content), so there's no south handle here.
@@ -2557,7 +3189,6 @@ class ReportComponentComponent {
                 this._zone.run(() => {
                     this.snapper?.clear();
                     onEnd();
-                    this._cdRef.markForCheck();
                 });
             };
             handle.addEventListener('pointermove', move);
@@ -2581,7 +3212,8 @@ class ReportComponentComponent {
         });
     }
     // A chart on a time x-axis — the only component the report's group-by control
-    // applies to.
+    // applies to. The server owns this rule (ReportQueryRunner::_isTimeSeriesChart);
+    // this is its documented browser-side mirror, for products on an older framework.
     get _isTimeSeries() {
         return this.component.type === 'chart' && this.component.config?.xAxis?.kind === 'time';
     }
@@ -2631,9 +3263,8 @@ class ReportComponentComponent {
     }
     // ----- data ----------------------------------------------------------------
     _load() {
-        this.loading = true;
-        this.error = null;
-        this._cdRef.markForCheck();
+        this.loading.set(true);
+        this.error.set(null);
         const filters = this._filterState.resolveForComponent(this.component);
         // Time-series charts carry the group-by grain (if the viewer picked one) so
         // the backend re-buckets; everything else sends no interaction state here.
@@ -2644,19 +3275,17 @@ class ReportComponentComponent {
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe({
             next: (data) => {
-                this.data = data;
-                this.loading = false;
-                this._cdRef.markForCheck();
+                this.data.set(data);
+                this.loading.set(false);
             },
             error: (error) => {
-                this.loading = false;
-                this.error = error?.error?.message ?? error?.message ?? 'Failed to load data';
-                this._cdRef.markForCheck();
+                this.loading.set(false);
+                this.error.set(error?.error?.message ?? error?.message ?? 'Failed to load data');
             },
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: false, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, snapper: { classPropertyName: "snapper", publicName: "snapper", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", flowReorder: "flowReorder", openSettings: "openSettings", removed: "removed" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          {{ component.title }}\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [matMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n  }\n  <mat-menu #menu=\"matMenu\">\n    @if (isText) {\n      <button mat-menu-item (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    } @else {\n      <button mat-menu-item (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </button>\n      <button mat-menu-item (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </button>\n    }\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\n    } @else if (loading) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error) {\n      <div class=\"component-state error\">\n        {{ error }}\n      </div>\n    } @else if (!data?.rows?.length) {\n      <div class=\"component-state\">\n        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\n    @for (handle of resizeHandles; track handle) {\n      <div\n        class=\"handle handle-{{ handle }}\"\n        (mousedown)=\"stopCanvasPan($event)\"\n        (pointerdown)=\"onResizeStart($event, handle)\">\n      </div>\n    }\n  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component", "groups"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing"], outputs: ["saved", "editEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ReportComponentComponent, isStandalone: true, selector: "app-report-component", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: false, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: false, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: false, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: false, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: false, isRequired: false, transformFunction: null }, snapper: { classPropertyName: "snapper", publicName: "snapper", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", flowReorder: "flowReorder", openSettings: "openSettings", removed: "removed" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          {{ component.title }}\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [matMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n  }\n  <mat-menu #menu=\"matMenu\">\n    @if (isText) {\n      <button mat-menu-item (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    } @else {\n      <button mat-menu-item (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </button>\n      <button mat-menu-item (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </button>\n    }\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-list>\n    } @else if (loading()) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\n    @for (handle of resizeHandles; track handle) {\n      <div\n        class=\"handle handle-{{ handle }}\"\n        (mousedown)=\"stopCanvasPan($event)\"\n        (pointerdown)=\"onResizeStart($event, handle)\">\n      </div>\n    }\n  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"] }, { kind: "component", type: ComponentListComponent, selector: "app-report-component-list", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentTextComponent, selector: "app-report-component-text", inputs: ["html", "tokens", "editing"], outputs: ["saved", "editEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, decorators: [{
             type: Component,
@@ -2670,7 +3299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ComponentKpiComponent,
                         ComponentListComponent,
                         ComponentTextComponent,
-                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filters.\n       Lists carry no items here \u2014 they filter through FsList. fs-filter reads\n       its config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          {{ component.title }}\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [matMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n  }\n  <mat-menu #menu=\"matMenu\">\n    @if (isText) {\n      <button mat-menu-item (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    } @else {\n      <button mat-menu-item (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </button>\n      <button mat-menu-item (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </button>\n    }\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\"\n        [groups]=\"groups\">\n      </app-report-component-list>\n    } @else if (loading) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error) {\n      <div class=\"component-state error\">\n        {{ error }}\n      </div>\n    } @else if (!data?.rows?.length) {\n      <div class=\"component-state\">\n        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\n    @for (handle of resizeHandles; track handle) {\n      <div\n        class=\"handle handle-{{ handle }}\"\n        (mousedown)=\"stopCanvasPan($event)\"\n        (pointerdown)=\"onResizeStart($event, handle)\">\n      </div>\n    }\n  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
+                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [style.padding]=\"bodyPadding\"\n    (pointerdown)=\"onComponentPointerDown($event)\"\n    (mousedown)=\"stopCanvasPan($event)\"\n    (touchstart)=\"stopCanvasPan($event)\">\n  <!-- The header is an fs-filter: heading template = title (and the edit-mode\n       drag handle), actions = the menu, items = component-level filter groups,\n       the same strip for every type (lists included). fs-filter reads its\n       config once, so the block is keyed on the component-filter set to be\n       recreated when it changes. -->\n  <!-- A text block has no title bar \u2014 it IS its words, like a text box on a\n       slide \u2014 so it gets neither the header nor the data actions. -->\n  @for (key of isText ? [] : [filterKey]; track key) {\n    <fs-filter\n        class=\"component-filter\"\n        [config]=\"filterConfig()\">\n      <ng-template fsFilterHeading>\n        <div\n            class=\"component-title\"\n            (pointerdown)=\"onDragStart($event)\">\n          {{ component.title }}\n          @if (truncated) {\n            <mat-icon\n                class=\"truncated-icon\"\n                matTooltip=\"Showing a truncated result \u2014 refine the filters to see everything.\">\n              warning_amber\n            </mat-icon>\n          }\n        </div>\n      </ng-template>\n    </fs-filter>\n  }\n  <!-- The actions menu is floated top-right (absolute) rather than living in\n       fs-filter's actions slot, so its ~40px button height no longer drives the\n       header row's height. It overlays the box corner; the heading reserves\n       right padding so a long title ellipsises before it. -->\n  @if (!isText || (editMode && !textEditing())) {\n    <button\n        mat-icon-button\n        class=\"component-menu\"\n        [matMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n  }\n  <mat-menu #menu=\"matMenu\">\n    @if (isText) {\n      <button mat-menu-item (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    } @else {\n      <button mat-menu-item (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </button>\n      <button mat-menu-item (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </button>\n    }\n  </mat-menu>\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      <app-report-component-list\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-list>\n    } @else if (loading()) {\n      <div class=\"component-state\">\n        <div class=\"loading-shimmer\"></div>\n      </div>\n    } @else if (error()) {\n      <div class=\"component-state error\">\n        {{ error() }}\n      </div>\n    } @else if (!data()?.rows?.length) {\n      <div class=\"component-state\">\n        No data\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\">\n      </app-report-component-chart>\n    }\n    <!-- In edit mode a transparent veil over the body makes the WHOLE\n         component draggable (industry standard: you grab the object, not just\n         its title bar) and keeps inner widgets from swallowing the gesture. -->\n    @if (editMode && !textEditing()) {\n      <div\n        class=\"drag-veil\"\n        (pointerdown)=\"onDragStart($event)\">\n      </div>\n    }\n  </div>\n</div>\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\n  @if (layout === 'freeform') {\n    @for (handle of resizeHandles; track handle) {\n      <div\n        class=\"handle handle-{{ handle }}\"\n        (mousedown)=\"stopCanvasPan($event)\"\n        (pointerdown)=\"onResizeStart($event, handle)\">\n      </div>\n    }\n  } @else {\n    <!-- Flow height is always auto (the box fits its content), so only the\n         east handle (width %) is offered here. -->\n    <div\n      class=\"handle handle-e\"\n      matTooltip=\"Width (% of page)\"\n      (mousedown)=\"stopCanvasPan($event)\"\n      (pointerdown)=\"onResizeStart($event, 'e')\">\n    </div>\n  }\n}", styles: [":host{position:absolute;display:flex;flex-direction:column;font-size:10px;--mdc-outlined-button-container-height: 30px;--mdc-outlined-button-label-text-size: 10px;--mat-outlined-button-horizontal-padding: 15px;--mdc-text-button-container-height: 30px;--mdc-text-button-label-text-size: 10px;--mat-text-button-horizontal-padding: 15px;--mat-button-outlined-container-height: 30px;--mat-button-outlined-label-text-size: 10px;--mat-button-outlined-horizontal-padding: 15px;--mat-button-text-container-height: 30px;--mat-button-text-label-text-size: 10px;--mat-button-text-horizontal-padding: 15px}:host.flow-item{position:relative;left:auto;top:auto}:host.flow-dragging{z-index:40;opacity:.7;pointer-events:none}.component-box{position:relative;width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e7eb;border-radius:6px;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;cursor:default}.component-box.editing .component-title{cursor:grab}.component-box.editing .component-title:active{cursor:grabbing}.component-box.editing:hover{border-color:#9db3c8;box-shadow:0 2px 8px #0f172a14}.component-box.selected{border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color),0 4px 14px #2196f32e}.component-box.text{background:transparent;border-color:transparent;border-radius:0;overflow:visible}.component-box.text.editing{border-style:dashed;border-color:#cbd2d9}.component-box.text.editing:hover{box-shadow:none}.component-box.text.selected{border-style:solid;border-color:var(--brand-primary-color);box-shadow:0 0 0 1px var(--brand-primary-color)}:host ::ng-deep .component-filter .filter-bar-container{align-items:center!important}.component-filter{flex:0 0 auto;display:block;padding:0 0 4px}.component-filter .component-title{display:flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;padding-right:40px;font-size:var(--report-heading-size);font-weight:600;color:#1f2933;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-filter .component-title .truncated-icon{font-size:16px;width:16px;height:16px;color:#f59e0b}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}:host(.height-auto) .component-state{min-height:120px}.drag-veil{position:absolute;inset:0;cursor:grab;touch-action:none}.drag-veil:active{cursor:grabbing}.component-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#7b8794;padding:8px;text-align:center}.component-state.error{color:#e15759}.loading-shimmer{width:70%;height:60%;border-radius:6px;background:linear-gradient(100deg,#f0f4f8 40%,#e4ebf2,#f0f4f8 60%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}@keyframes shimmer{to{background-position-x:-200%}}.handle{position:absolute;width:14px;height:14px;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:20;transform:scale(calc(1 / var(--canvas-zoom, 1)))}.handle:before{content:\"\";width:8px;height:8px;background:#fff;border:1.5px solid var(--brand-primary-color);border-radius:2px;box-shadow:0 1px 2px #0f172a33}.handle-nw{left:-7px;top:-7px;cursor:nwse-resize}.handle-n{left:calc(50% - 7px);top:-7px;cursor:ns-resize}.handle-ne{right:-7px;top:-7px;cursor:nesw-resize}.handle-e{right:-7px;top:calc(50% - 7px);cursor:ew-resize}.handle-se{right:-7px;bottom:-7px;cursor:nwse-resize}.handle-s{left:calc(50% - 7px);bottom:-7px;cursor:ns-resize}.handle-sw{left:-7px;bottom:-7px;cursor:nesw-resize}.handle-w{left:-7px;top:calc(50% - 7px);cursor:ew-resize}\n"] }]
         }], propDecorators: { reportId: [{
                 type: Input
             }], component: [{
@@ -2709,7 +3338,8 @@ const PX_PER_INCH = 96;
 // The fixed-size page canvas — the PowerPoint model. Pages are tabs (only the
 // ACTIVE page's components exist → only they fetch); the page is a
 // pageWidth×pageHeight INCHES sheet rendered at 96px/in inside fs-zoom-pan
-// (wheel zoom, background drag pan, toolbar buttons).
+// (Ctrl/Cmd + wheel or pinch to zoom, background drag pan, toolbar buttons; a
+// plain wheel scrolls the list under the pointer).
 //
 // Freeform layout: components are absolutely positioned; dragging gets smart
 // alignment guides (edges + centers of siblings and the page) with snapping.
@@ -2746,12 +3376,18 @@ class ReportCanvasComponent {
     _guides;
     PX = PX_PER_INCH;
     flowPadding = FLOW_PADDING;
-    activePageIndex = 0;
-    zoom = 1;
+    // The report's pages as the canvas draws them. This is the host's own
+    // `report.pages` array, patched in place (a rename, a delete, a reorder) so
+    // the host's exports and page links see the change too. Because the array
+    // and its pages keep their identity across a patch, the signal notifies on
+    // every set rather than only when the reference changes.
+    pages = signal([], { equal: () => false });
+    activePageIndex = signal(0);
+    zoom = signal(1);
     // Editing the header and footer (the master layer) rather than the page.
     masterMode = signal(false);
     groups = new Map();
-    selectedComponentId = null;
+    selectedComponentId = signal(null);
     // The snapper handed to every component (stable identity for OnPush).
     snapper = {
         snapMove: (component, x, y) => this._snapMove(component, x, y),
@@ -2761,7 +3397,6 @@ class ReportCanvasComponent {
     _reportData = inject(ReportData);
     _prompt = inject(FsPrompt);
     _message = inject(FsMessage);
-    _cdRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
     _fitted = false;
     _tokens = null;
@@ -2777,11 +3412,12 @@ class ReportCanvasComponent {
             this.masterMode.set(false);
         }
         this.groups = new Map((this.report?.filterGroups ?? []).map((group) => [group.id, group]));
-        const pageCount = this.report?.pages?.length ?? 0;
+        this.pages.set(this.report?.pages ?? []);
+        const pageCount = this.pages().length;
         // A page was just added (the host re-fetched the report) — land on it.
         const pageAdded = pageCount > this._previousPageCount && this._previousPageCount > 0;
         if (pageAdded) {
-            this.activePageIndex = pageCount - 1;
+            this.activePageIndex.set(pageCount - 1);
         }
         this._previousPageCount = pageCount;
         // Honour an incoming deep link, but never over a just-added page: adding a
@@ -2790,13 +3426,13 @@ class ReportCanvasComponent {
         // 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;
+            const index = this.pages().findIndex((page) => page.id === this.pageId);
             if (index > -1) {
-                this.activePageIndex = index;
+                this.activePageIndex.set(index);
             }
         }
-        if (this.activePageIndex >= pageCount) {
-            this.activePageIndex = 0;
+        if (this.activePageIndex() >= pageCount) {
+            this.activePageIndex.set(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.
@@ -2824,7 +3460,7 @@ class ReportCanvasComponent {
         return this.report?.layout === 'flow';
     }
     get activePage() {
-        return this.report?.pages?.[this.activePageIndex] ?? null;
+        return this.pages()[this.activePageIndex()] ?? null;
     }
     // The header/footer bands, in inches (0 = no band).
     get bands() {
@@ -2852,8 +3488,8 @@ class ReportCanvasComponent {
     // of them repaint its html on every change-detection pass.
     get tokens() {
         const page = this.activePage;
-        const pageNumber = this.activePageIndex + 1;
-        const pageName = page ? this.pageLabel(page, this.activePageIndex) : '';
+        const pageNumber = this.activePageIndex() + 1;
+        const pageName = page ? this.pageLabel(page, this.activePageIndex()) : '';
         const reportName = this.report?.name ?? '';
         const tokens = this._tokens;
         if (tokens?.pageNumber !== pageNumber || tokens.pageName !== pageName || tokens.reportName !== reportName) {
@@ -2863,7 +3499,7 @@ class ReportCanvasComponent {
     }
     toggleMasterMode() {
         this.masterMode.update((value) => !value);
-        this.selectedComponentId = null;
+        this.selectedComponentId.set(null);
     }
     // Drop a text block where it will be found: into the footer (or header) band
     // while editing the header and footer, below the header band on a page. The
@@ -2901,9 +3537,9 @@ class ReportCanvasComponent {
                 components.splice(index, 1);
             }
         }
-        this.selectedComponentId = null;
+        this.selectedComponentId.set(null);
+        this.pages.set(this.pages());
         this._message.success('Deleted text');
-        this._cdRef.markForCheck();
     }
     // Show or hide the header and footer on one page, from its tab's kebab.
     toggleMasterHidden(page) {
@@ -2912,8 +3548,8 @@ class ReportCanvasComponent {
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             page.masterHidden = masterHidden;
+            this.pages.set(this.pages());
             this._message.success(masterHidden ? 'Header & footer hidden on this page' : 'Header & footer shown on this page');
-            this._cdRef.markForCheck();
         });
     }
     // Flow render order (the assembler already sorts, but a local reorder
@@ -2922,8 +3558,8 @@ class ReportCanvasComponent {
         return [...(this.activePage?.components ?? [])].sort((a, b) => a.order - b.order);
     }
     selectPage(index) {
-        this.activePageIndex = index;
-        this.selectedComponentId = null;
+        this.activePageIndex.set(index);
+        this.selectedComponentId.set(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;
@@ -2959,8 +3595,8 @@ class ReportCanvasComponent {
             .pipe(map$1(() => name))), takeUntilDestroyed(this._destroyRef))
             .subscribe((name) => {
             page.name = name;
+            this.pages.set(this.pages());
             this._message.success('Saved page name');
-            this._cdRef.markForCheck();
         });
     }
     // Delete from the tab's kebab. The confirm names the page and says the
@@ -2969,22 +3605,23 @@ class ReportCanvasComponent {
     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?`,
+            template: `Are you sure you would like to delete "${this.pageLabel(page, this.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);
+            const pages = this.pages();
+            const index = pages.indexOf(page);
+            pages.splice(index, 1);
+            this.pages.set(pages);
             // 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;
+            this.activePageIndex.set(Math.min(index, pages.length - 1));
+            this._previousPageCount = pages.length;
+            this.selectedComponentId.set(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
@@ -2995,14 +3632,16 @@ class ReportCanvasComponent {
             return;
         }
         const activePage = this.activePage;
-        moveItemInArray(this.report.pages, event.previousIndex, event.currentIndex);
-        const positions = this.report.pages.map((page, order) => {
+        const pages = this.pages();
+        moveItemInArray(pages, event.previousIndex, event.currentIndex);
+        this.pages.set(pages);
+        const positions = pages.map((page, order) => {
             page.order = order;
             return { pageId: page.id, order };
         });
-        this.activePageIndex = activePage
-            ? this.report.pages.indexOf(activePage)
-            : this.activePageIndex;
+        if (activePage) {
+            this.activePageIndex.set(pages.indexOf(activePage));
+        }
         this._reportData.savePagePositions(this.report.id, positions)
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe();
@@ -3016,19 +3655,17 @@ class ReportCanvasComponent {
             ?.applySettings(settings);
     }
     selectComponent(componentId) {
-        this.selectedComponentId = componentId;
-        this._cdRef.markForCheck();
+        this.selectedComponentId.set(componentId);
     }
     onCanvasPointerDown() {
         // Background click (pan start) deselects.
-        if (this.selectedComponentId !== null) {
+        if (this.selectedComponentId() !== null) {
             this.selectComponent(null);
         }
     }
     // ----- zoom toolbar ---------------------------------------------------------
     onZoomed(scale) {
-        this.zoom = scale;
-        this._cdRef.markForCheck();
+        this.zoom.set(scale);
     }
     zoomIn() {
         this.zoomPan?.zoomIn();
@@ -3075,7 +3712,7 @@ class ReportCanvasComponent {
             component.order = order;
             return { componentId: component.id, order };
         });
-        this._cdRef.markForCheck();
+        this.pages.set(this.pages());
         this._reportData.savePositions(this.report.id, positions)
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe();
@@ -3098,7 +3735,7 @@ class ReportCanvasComponent {
     // ----- smart guides ---------------------------------------------------------
     // Pixel feel of the snap, converted to inches at the current zoom.
     get _snapThreshold() {
-        return 8 / (PX_PER_INCH * Math.max(0.1, this.zoom));
+        return 8 / (PX_PER_INCH * Math.max(0.1, this.zoom()));
     }
     _snapMove(component, x, y) {
         const { vertical, horizontal } = this._candidates(component);
@@ -3237,7 +3874,7 @@ 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", pageId: "pageId" }, outputs: { componentSettings: "componentSettings", reportChanged: "reportChanged", 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          [class.master-editing]=\"isMasterEditing\"\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          <!-- The header and footer: the master's components, always freeform,\n               drawn under the page's own. Out of the flow (absolute), so a flow\n               page's rows are laid out as if it were not there. -->\n          @if (isMasterShown && masterComponents.length) {\n            <div\n              class=\"master-layer\"\n              [class.editable]=\"isMasterEditing\">\n              @for (component of masterComponents; track component.id) {\n                <app-report-component\n                  [reportId]=\"report.id\"\n                  [component]=\"component\"\n                  [groups]=\"groups\"\n                  [editMode]=\"isMasterEditing\"\n                  [layout]=\"'freeform'\"\n                  [zoom]=\"zoom\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"tokens\"\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                  (removed)=\"onComponentRemoved($event)\"\n                  (openSettings)=\"componentSettings.emit($event)\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [style.height.px]=\"bands.headerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [style.height.px]=\"bands.footerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                }\n              </div>\n            }\n          }\n\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]=\"isPageEditing\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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]=\"isPageEditing\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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 && !masterMode()) {\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  </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         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\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)=\"toggleMasterHidden(page)\">\n            {{ page.masterHidden ? 'Show header & footer' : 'Hide header & footer' }}\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\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%}.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}.page.master-editing>app-report-component{opacity:.35;pointer-events:none}.master-layer{position:absolute;inset:0;pointer-events:none}.master-layer.editable{z-index:10}.master-layer.editable app-report-component{pointer-events:auto}.band{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:#2196f30a;border-color:#2196f373;border-style:dashed;border-width:0}.band.band-header{top:0;border-bottom-width:calc(1px / var(--canvas-zoom, 1))}.band.band-footer{bottom:0;border-top-width:calc(1px / var(--canvas-zoom, 1))}.band .band-label{position:absolute;top:calc(10px / var(--canvas-zoom, 1));left:calc(10px / var(--canvas-zoom, 1));transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left;color:#2196f3cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.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$3.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$3.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: 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", "tokens"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings", "removed"] }], 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", 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      wheel=\"modifier\"\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          [class.master-editing]=\"isMasterEditing\"\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          <!-- The header and footer: the master's components, always freeform,\n               drawn under the page's own. Out of the flow (absolute), so a flow\n               page's rows are laid out as if it were not there. -->\n          @if (isMasterShown && masterComponents.length) {\n            <div\n              class=\"master-layer\"\n              [class.editable]=\"isMasterEditing\">\n              @for (component of masterComponents; track component.id) {\n                <app-report-component\n                  [reportId]=\"report.id\"\n                  [component]=\"component\"\n                  [groups]=\"groups\"\n                  [editMode]=\"isMasterEditing\"\n                  [layout]=\"'freeform'\"\n                  [zoom]=\"zoom()\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"tokens\"\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                  (removed)=\"onComponentRemoved($event)\"\n                  (openSettings)=\"componentSettings.emit($event)\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [style.height.px]=\"bands.headerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [style.height.px]=\"bands.footerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                }\n              </div>\n            }\n          }\n\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]=\"isPageEditing\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom()\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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]=\"isPageEditing\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom()\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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 && !masterMode()) {\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  </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         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of 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)=\"toggleMasterHidden(page)\">\n            {{ page.masterHidden ? 'Show header & footer' : 'Hide header & footer' }}\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\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 (Ctrl/Cmd + scroll)\"\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 (Ctrl/Cmd + scroll)\"\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%}.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}.page.master-editing>app-report-component{opacity:.35;pointer-events:none}.master-layer{position:absolute;inset:0;pointer-events:none}.master-layer.editable{z-index:10}.master-layer.editable app-report-component{pointer-events:auto}.band{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:#2196f30a;border-color:#2196f373;border-style:dashed;border-width:0}.band.band-header{top:0;border-bottom-width:calc(1px / var(--canvas-zoom, 1))}.band.band-footer{bottom:0;border-top-width:calc(1px / var(--canvas-zoom, 1))}.band .band-label{position:absolute;top:calc(10px / var(--canvas-zoom, 1));left:calc(10px / var(--canvas-zoom, 1));transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left;color:#2196f3cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.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$3.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$3.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: 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", "zoomFit", "fitMode", "fitPosition", "fitPadding", "fitMaxScale", "wheel", "top", "left"], outputs: ["moved", "zoomed"] }, { kind: "component", type: ReportComponentComponent, selector: "app-report-component", inputs: ["reportId", "component", "groups", "editMode", "layout", "zoom", "snapper", "selected", "tokens"], outputs: ["selectComponent", "positionChanged", "flowReorder", "openSettings", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportCanvasComponent, decorators: [{
             type: Component,
@@ -3248,7 +3885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         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          [class.master-editing]=\"isMasterEditing\"\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          <!-- The header and footer: the master's components, always freeform,\n               drawn under the page's own. Out of the flow (absolute), so a flow\n               page's rows are laid out as if it were not there. -->\n          @if (isMasterShown && masterComponents.length) {\n            <div\n              class=\"master-layer\"\n              [class.editable]=\"isMasterEditing\">\n              @for (component of masterComponents; track component.id) {\n                <app-report-component\n                  [reportId]=\"report.id\"\n                  [component]=\"component\"\n                  [groups]=\"groups\"\n                  [editMode]=\"isMasterEditing\"\n                  [layout]=\"'freeform'\"\n                  [zoom]=\"zoom\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"tokens\"\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                  (removed)=\"onComponentRemoved($event)\"\n                  (openSettings)=\"componentSettings.emit($event)\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [style.height.px]=\"bands.headerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [style.height.px]=\"bands.footerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                }\n              </div>\n            }\n          }\n\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]=\"isPageEditing\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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]=\"isPageEditing\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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 && !masterMode()) {\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  </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         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\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)=\"toggleMasterHidden(page)\">\n            {{ page.masterHidden ? 'Show header & footer' : 'Hide header & footer' }}\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\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%}.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}.page.master-editing>app-report-component{opacity:.35;pointer-events:none}.master-layer{position:absolute;inset:0;pointer-events:none}.master-layer.editable{z-index:10}.master-layer.editable app-report-component{pointer-events:auto}.band{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:#2196f30a;border-color:#2196f373;border-style:dashed;border-width:0}.band.band-header{top:0;border-bottom-width:calc(1px / var(--canvas-zoom, 1))}.band.band-footer{bottom:0;border-top-width:calc(1px / var(--canvas-zoom, 1))}.band .band-label{position:absolute;top:calc(10px / var(--canvas-zoom, 1));left:calc(10px / var(--canvas-zoom, 1));transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left;color:#2196f3cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.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      wheel=\"modifier\"\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          [class.master-editing]=\"isMasterEditing\"\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          <!-- The header and footer: the master's components, always freeform,\n               drawn under the page's own. Out of the flow (absolute), so a flow\n               page's rows are laid out as if it were not there. -->\n          @if (isMasterShown && masterComponents.length) {\n            <div\n              class=\"master-layer\"\n              [class.editable]=\"isMasterEditing\">\n              @for (component of masterComponents; track component.id) {\n                <app-report-component\n                  [reportId]=\"report.id\"\n                  [component]=\"component\"\n                  [groups]=\"groups\"\n                  [editMode]=\"isMasterEditing\"\n                  [layout]=\"'freeform'\"\n                  [zoom]=\"zoom()\"\n                  [snapper]=\"snapper\"\n                  [tokens]=\"tokens\"\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                  (removed)=\"onComponentRemoved($event)\"\n                  (openSettings)=\"componentSettings.emit($event)\">\n                </app-report-component>\n              }\n            </div>\n          }\n\n          <!-- The header and footer bands, as guides while editing. -->\n          @if (editMode) {\n            @if (bands.headerHeight) {\n              <div\n                class=\"band band-header\"\n                [style.height.px]=\"bands.headerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Header</span>\n                }\n              </div>\n            }\n            @if (bands.footerHeight) {\n              <div\n                class=\"band band-footer\"\n                [style.height.px]=\"bands.footerHeight * PX\">\n                @if (isMasterEditing) {\n                  <span class=\"band-label small\">Footer</span>\n                }\n              </div>\n            }\n          }\n\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]=\"isPageEditing\"\n                [layout]=\"'flow'\"\n                [zoom]=\"zoom()\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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]=\"isPageEditing\"\n                [layout]=\"'freeform'\"\n                [zoom]=\"zoom()\"\n                [snapper]=\"snapper\"\n                [tokens]=\"tokens\"\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                (removed)=\"onComponentRemoved($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 && !masterMode()) {\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  </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         Every page gets a chip, including a lone one: the chip is what tells\n         you which page you are on, and a report that hid it left you unable to\n         tell page 1 of 1 from a page that failed to load. Deleting the last\n         page is refused server-side, so the kebab is safe to expose here. -->\n    <div\n      class=\"page-tabs\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"onPageDropped($event)\">\n      @for (page of 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)=\"toggleMasterHidden(page)\">\n            {{ page.masterHidden ? 'Show header & footer' : 'Hide header & footer' }}\n          </ng-template>\n          <ng-template\n            fs-menu-item\n            (click)=\"deletePage(page)\">\n            Delete\n          </ng-template>\n        </fs-menu>\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 (Ctrl/Cmd + scroll)\"\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 (Ctrl/Cmd + scroll)\"\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%}.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}.page.master-editing>app-report-component{opacity:.35;pointer-events:none}.master-layer{position:absolute;inset:0;pointer-events:none}.master-layer.editable{z-index:10}.master-layer.editable app-report-component{pointer-events:auto}.band{position:absolute;left:0;right:0;z-index:5;pointer-events:none;background:#2196f30a;border-color:#2196f373;border-style:dashed;border-width:0}.band.band-header{top:0;border-bottom-width:calc(1px / var(--canvas-zoom, 1))}.band.band-footer{bottom:0;border-top-width:calc(1px / var(--canvas-zoom, 1))}.band .band-label{position:absolute;top:calc(10px / var(--canvas-zoom, 1));left:calc(10px / var(--canvas-zoom, 1));transform:scale(calc(1 / var(--canvas-zoom, 1)));transform-origin:top left;color:#2196f3cc;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.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: [{
@@ -3305,18 +3942,22 @@ class ComponentSettingsComponent {
     // ---- 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;
+    sql = signal(null);
+    // True when the statement is a DERIVED baseline: no filters, the authored
+    // grain, times in the report's effective zone. 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 = signal(false);
+    // The zone the statement was compiled in: the report's effective zone, sent
+    // with the SQL. A server too old to send it compiled in UTC.
+    sqlTimezone = signal('UTC');
+    sqlError = signal(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
     // in flight) and reconcile from the server on reload.
-    rows = [];
-    columnsError = null;
+    rows = signal([]);
+    columnsError = signal(null);
     // The raw inputs the rows are built from.
     _filterableColumns = [];
     _filters = [];
@@ -3332,7 +3973,6 @@ class ComponentSettingsComponent {
     _message = inject(FsMessage);
     _prompt = inject(FsPrompt);
     _destroyRef = inject(DestroyRef);
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
         this.report = this._data.report;
         this.component = this._data.component;
@@ -3379,7 +4019,7 @@ class ComponentSettingsComponent {
             },
         };
         return this._reportData.updateComponent(this.report.id, this.component.id, { ...settings })
-            .pipe(tap(() => {
+            .pipe(tap$1(() => {
             this._message.success('Component saved');
             this._dialogRef.close({ settings });
         }));
@@ -3429,7 +4069,7 @@ class ComponentSettingsComponent {
     // Build the row view-model from the loaded columns + filters/groups. Each
     // row's toggles reflect where its filter group is currently exposed.
     _rebuildRows() {
-        this.rows = this._filterableColumns.map((column) => {
+        this.rows.set(this._filterableColumns.map((column) => {
             const filter = this._filters.find((candidate) => candidate.filterColumn === column.column);
             const level = filter ? this._groupsById.get(filter.filterGroupId)?.level : undefined;
             return {
@@ -3441,7 +4081,7 @@ class ComponentSettingsComponent {
                 report: level === 'report' || level === 'both',
                 component: level === 'component' || level === 'both',
             };
-        });
+        }));
     }
     // After any filter mutation: re-fetch the report so the dialog's filter list
     // (and the parent canvas, on close) reflect the new groups/levels.
@@ -3451,7 +4091,6 @@ class ComponentSettingsComponent {
             .subscribe((report) => {
             this.report = report;
             this._seedFilters(report, this.component.id);
-            this._cdRef.markForCheck();
         });
     }
     _mutationError(error) {
@@ -3481,15 +4120,14 @@ class ComponentSettingsComponent {
         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();
+                this.sql.set(preview?.sql ?? null);
+                this.sqlBaseline.set(!!preview?.baseline);
+                this.sqlTimezone.set(preview?.timezone || 'UTC');
+                this.sqlError.set(preview?.error ?? null);
             },
             error: (error) => {
-                this.sql = null;
-                this.sqlError = error?.error?.message ?? 'Could not read the component SQL';
-                this._cdRef.markForCheck();
+                this.sql.set(null);
+                this.sqlError.set(error?.error?.message ?? 'Could not read the component SQL');
             },
         });
     }
@@ -3499,11 +4137,9 @@ class ComponentSettingsComponent {
             next: (columns) => {
                 this._filterableColumns = columns ?? [];
                 this._rebuildRows();
-                this._cdRef.markForCheck();
             },
             error: (error) => {
-                this.columnsError = error?.error?.message ?? 'Could not read the component columns';
-                this._cdRef.markForCheck();
+                this.columnsError.set(error?.error?.message ?? 'Could not read the component columns');
             },
         });
     }
@@ -3515,7 +4151,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            @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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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 });
+    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 {{ sqlTimezone() }}.\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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,
@@ -3538,46 +4174,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         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            @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"] }]
+                    ], 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 {{ sqlTimezone() }}.\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
 // list comes from the browser (Intl.supportedValuesOf), so the package carries no
-// dependency on any app timezone API. Defaults an empty value to the viewer's zone.
+// dependency on any app timezone API. It shows the zone it is given and never
+// picks one itself: the dialog always seeds the zone the report uses, and that
+// zone is listed even when the browser's list lacks it (some browsers leave
+// 'UTC' out).
 class TimezoneSelectComponent {
     placeholder = 'Timezone';
     required = false;
     disabled = false;
     timezoneChange = new EventEmitter();
     set timezone(value) {
-        if (value && value !== this._timezone) {
-            this._timezone = value;
-            this.timezoneChange.emit(this.timezone);
+        if (value && value !== this._timezone()) {
+            this._timezone.set(value);
+            this.timezoneChange.emit(value);
         }
     }
     get timezone() {
-        return this._timezone;
+        return this._timezone();
     }
     guid = guid();
-    timezones = [];
-    _browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    _timezone = null;
-    ngOnInit() {
-        this.timezones = this._supportedTimezones();
-        if (!this.timezone) {
-            this.timezone = this._browserTimezone;
-        }
-    }
-    // The browser's IANA zone list where available; fall back to at least the
-    // viewer's own zone so the control is never empty.
-    _supportedTimezones() {
+    timezones = computed(() => this._supportedTimezones(this._timezone()));
+    _timezone = signal('');
+    // The browser's IANA zone list where available, with the current value
+    // prepended when the list lacks it, so the select always shows the zone the
+    // report uses.
+    _supportedTimezones(current) {
         const intl = Intl;
-        return typeof intl.supportedValuesOf === 'function'
+        const zones = typeof intl.supportedValuesOf === 'function'
             ? intl.supportedValuesOf('timeZone')
-            : [this._browserTimezone];
+            : [];
+        return current && !zones.includes(current)
+            ? [current, ...zones]
+            : zones;
     }
     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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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 });
+    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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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,
@@ -3588,7 +4224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatOption,
                         FormsModule,
                         FsFormModule,
-                    ], template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones; track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"] }]
+                    ], template: "<mat-form-field class=\"full-width\">\n  <mat-label>{{placeholder}}</mat-label>\n  <mat-select\n    [(ngModel)]=\"timezone\"\n    [fsFormRequired]=\"required\"\n    [disabled]=\"disabled\"\n    name=\"timezone_select_{{ guid }}\">\n    @for (item of timezones(); track item) {\n      <mat-option [value]=\"item\">{{ item }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n", styles: [".full-width{width:100%}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], required: [{
@@ -3601,27 +4237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-// Date-range defaults are stored as calendar-day strings (yyyy-MM-dd, no time,
-// no timezone) so the backend never shifts them; the date picker works in Date
-// objects. These two convert between the two forms — the only translation the
-// Filters tab needs for a fixed date range.
-// A stored yyyy-MM-dd boundary as a local Date for the picker, or null.
-function dateFromBound(value) {
-    if (!value) {
-        return null;
-    }
-    const date = parseISO(value.slice(0, 10));
-    return isNaN(date.getTime()) ? null : date;
-}
-// A picked Date as a yyyy-MM-dd boundary for storage, or null. Uses the local
-// calendar day (format, not toISOString) so the boundary is the day the admin
-// picked, regardless of timezone.
-function dateToBound(value) {
-    return value instanceof Date && !isNaN(value.getTime())
-        ? format(value, 'yyyy-MM-dd')
-        : null;
-}
-
 // Report settings, in three tabs:
 //   Settings — name + page setup (size in inches, header/footer band depths,
 //   layout mode).
@@ -3652,12 +4267,15 @@ class ReportSettingsComponent {
     footerHeight = 0;
     headerFooterMax = HEADER_FOOTER_MAX;
     layout = 'freeform';
-    // Empty until the report has one; app-timezone-select then defaults it to the
-    // viewer's browser zone (which Save persists, making the report's zone explicit).
+    // Seeded with the zone the report actually uses: its own stored zone, else
+    // the application default the server resolved (effectiveTimezone). Save sends
+    // it only when it differs from that effective zone, so opening and saving a
+    // report that follows the default never pins it to a zone.
     timezone = '';
     headingSize = DEFAULT_HEADING_SIZE;
     // The report-level filters and their editable default values (Filters tab).
     filterRows = signal([]);
+    relativeLabel = relativeLabel;
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
     _reportData = inject(ReportData);
@@ -3672,7 +4290,7 @@ class ReportSettingsComponent {
         this.headerHeight = report.config?.headerFooter?.headerHeight ?? 0;
         this.footerHeight = report.config?.headerFooter?.footerHeight ?? 0;
         this.layout = report.layout ?? 'freeform';
-        this.timezone = report.timezone ?? '';
+        this.timezone = report.timezone ?? report.effectiveTimezone ?? '';
         this.headingSize = report.config?.styles?.heading?.size ?? DEFAULT_HEADING_SIZE;
         this._buildFilterRows(report);
     }
@@ -3700,7 +4318,7 @@ class ReportSettingsComponent {
             pageWidth: this._pageDimension(this.pageWidth),
             pageHeight: this._pageDimension(this.pageHeight),
             layout: this.layout,
-            timezone: this.timezone,
+            ...this._timezoneSetting(),
             styles: { heading: { size: this.headingSize } },
             headerFooter: {
                 headerHeight: this._pageDimension(this.headerHeight) || 0,
@@ -3713,11 +4331,17 @@ class ReportSettingsComponent {
             default: this._rowDefault(row),
         }));
         return forkJoin([settings$, ...defaults$])
-            .pipe(tap(() => {
+            .pipe(tap$1(() => {
             this._message.success('Report settings saved');
             this._dialogRef.close({ action: 'saved' });
         }));
     };
+    // Drop the row's stored rolling preset (Clear). A new row object rather than
+    // a mutation, so the signal sees the change; the @for tracks group.id, so
+    // the row's bindings survive the swap.
+    clearRelative(row) {
+        this.filterRows.update((rows) => rows.map((item) => (item === row ? { ...item, relative: null } : item)));
+    }
     // The page dimension as a real number for the wire. fsMaskNumber hands back
     // the unmasked string it built with a fixed '.' radix (which is the whole
     // point of the mask - a native number input paints the viewer's locale
@@ -3727,6 +4351,16 @@ class ReportSettingsComponent {
     _pageDimension(value) {
         return typeof value === 'number' ? value : parseFloat(value);
     }
+    // The zone for the settings PUT, sent only when it moves the report off the
+    // zone it already uses, so an untouched dialog never pins a report that
+    // follows the application default. A server too old to send
+    // effectiveTimezone gets the zone every time, as it always did.
+    _timezoneSetting() {
+        const effectiveTimezone = this._data.report.effectiveTimezone;
+        return effectiveTimezone === undefined || this.timezone !== effectiveTimezone
+            ? { timezone: this.timezone }
+            : {};
+    }
     // Build one editable row per report-level filter group (level report or both),
     // in bar order, seeding each draft from the group's stored default.
     _buildFilterRows(report) {
@@ -3744,6 +4378,7 @@ class ReportSettingsComponent {
                 label: group.label || group.filters?.[0]?.filterColumn || 'Filter',
                 start: dateFromBound(groupDefault?.start),
                 end: dateFromBound(groupDefault?.end),
+                relative: groupDefault?.relative ?? null,
                 // Named below, once the option list carrying their labels is in.
                 values: [],
                 value: groupDefault?.value ?? '',
@@ -3772,13 +4407,18 @@ class ReportSettingsComponent {
         });
     }
     // The draft default normalized to the wire shape for this row's type, or null
-    // when empty (which clears the stored default).
+    // when empty (which clears the stored default). A date range is the picked
+    // dates when there are any, else the carried rolling preset, never both: the
+    // server refuses a relative preset combined with dates.
     _rowDefault(row) {
         switch (row.group.type) {
             case 'dateRange': {
                 const start = dateToBound(row.start);
                 const end = dateToBound(row.end);
-                return (start || end) ? { start: start ?? undefined, end: end ?? undefined } : null;
+                if (start || end) {
+                    return { start: start ?? undefined, end: end ?? undefined };
+                }
+                return row.relative ? { relative: row.relative } : null;
             }
             case 'select':
                 return row.values.length ? { values: row.values.map((option) => option.value) } : null;
@@ -3796,8 +4436,9 @@ class ReportSettingsComponent {
         const after = JSON.stringify(this._normalize(this._rowDefault(row)));
         return before !== after;
     }
-    // A stable comparison form: drop relative (not authored here) and undefined
-    // keys so a no-op edit doesn't read as a change.
+    // A stable comparison form: empty and undefined keys are dropped so a no-op
+    // edit doesn't read as a change. relative is compared like the rest: the row
+    // carries it, so an untouched rolling default reads as unchanged.
     _normalize(value) {
         if (!value) {
             return null;
@@ -3821,7 +4462,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            <!--\n              How deep the header and footer bands are. Their content is edited\n              on the canvas (Edit layout \u2192 Header & footer); these reserve the\n              space for it, and 0 means no band.\n            -->\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Header height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"headerHeight\"\n                  name=\"headerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Footer height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"footerHeight\"\n                  name=\"footerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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 });
+    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            <!--\n              How deep the header and footer bands are. Their content is edited\n              on the canvas (Edit layout \u2192 Header & footer); these reserve the\n              space for it, and 0 means no band.\n            -->\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Header height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"headerHeight\"\n                  name=\"headerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Footer height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"footerHeight\"\n                  name=\"footerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\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                    <!-- A stored rolling preset cannot be authored here, only\n                         kept, replaced by picking dates, or cleared. type=\"button\"\n                         keeps Clear from submitting the form. -->\n                    @if (row.relative && !row.start && !row.end) {\n                      <div class=\"fs-row.gap-sm.align-center\">\n                        <mat-hint class=\"fs-flex\">\n                          Rolling default: {{ relativeLabel(row.relative) }}. Pick dates to replace it.\n                        </mat-hint>\n                        <button\n                            mat-button\n                            type=\"button\"\n                            (click)=\"clearRelative(row)\">\n                          Clear\n                        </button>\n                      </div>\n                    }\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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,
@@ -3847,12 +4488,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatSelect,
                         MatOption$1,
                         TimezoneSelectComponent,
-                    ], template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Report Settings\n    </h1>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"Settings\"\n            name=\"settings\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                [fsFormRequired]=\"true\">\n            </mat-form-field>\n            <!--\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            <!--\n              How deep the header and footer bands are. Their content is edited\n              on the canvas (Edit layout \u2192 Header & footer); these reserve the\n              space for it, and 0 means no band.\n            -->\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Header height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"headerHeight\"\n                  name=\"headerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Footer height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"footerHeight\"\n                  name=\"footerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\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"] }]
+                    ], 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            <!--\n              How deep the header and footer bands are. Their content is edited\n              on the canvas (Edit layout \u2192 Header & footer); these reserve the\n              space for it, and 0 means no band.\n            -->\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Header height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"headerHeight\"\n                  name=\"headerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field class=\"full-width\">\n              <mat-label>\n                Footer height\n              </mat-label>\n              <input\n                  matInput\n                  fsMaskNumber\n                  [scale]=\"2\"\n                  [(ngModel)]=\"footerHeight\"\n                  name=\"footerHeight\"\n                  [fsFormMin]=\"0\"\n                  [fsFormMax]=\"headerFooterMax\">\n              <div matTextSuffix>\n                inches\n              </div>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Layout\n              </mat-label>\n              <mat-select\n                  [(ngModel)]=\"layout\"\n                  name=\"layout\">\n                <mat-option value=\"freeform\">\n                  Freeform \u2014 position components anywhere on the page\n                </mat-option>\n                <mat-option value=\"flow\">\n                  Flow \u2014 components flow into rows by width %\n                </mat-option>\n              </mat-select>\n              <mat-hint>\n                Freeform is like PowerPoint; Flow is like a responsive dashboard.\n              </mat-hint>\n            </mat-form-field>\n            <fs-ai-report-timezone-select [(timezone)]=\"timezone\"></fs-ai-report-timezone-select>\n          </div>\n        </mat-tab>\n        <mat-tab\n            label=\"Styles\"\n            name=\"styles\">\n          <div class=\"fs-column tab-body\">\n            <mat-form-field>\n              <mat-label>\n                Heading Size\n              </mat-label>\n              <input\n                matInput\n                type=\"number\"\n                step=\"1\"\n                min=\"6\"\n                max=\"96\"\n                [(ngModel)]=\"headingSize\"\n                name=\"headingSize\"\n                [fsFormMin]=\"6\"\n                [fsFormMax]=\"96\">\n              <span matTextSuffix>\n                pt\n              </span>\n              <mat-hint>\n                Applies to component titles. Points map 1:1 to PDF and PowerPoint.\n              </mat-hint>\n            </mat-form-field>\n          </div>\n        </mat-tab>\n        <mat-tab\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                    <!-- A stored rolling preset cannot be authored here, only\n                         kept, replaced by picking dates, or cleared. type=\"button\"\n                         keeps Clear from submitting the form. -->\n                    @if (row.relative && !row.start && !row.end) {\n                      <div class=\"fs-row.gap-sm.align-center\">\n                        <mat-hint class=\"fs-flex\">\n                          Rolling default: {{ relativeLabel(row.relative) }}. Pick dates to replace it.\n                        </mat-hint>\n                        <button\n                            mat-button\n                            type=\"button\"\n                            (click)=\"clearRelative(row)\">\n                          Clear\n                        </button>\n                      </div>\n                    }\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"] }]
         }] });
 
-// Rows fetched for a list component's export table — enough to fill a
-// slide/page table; the cap note covers the rest.
-const LIST_EXPORT_ROWS = 100;
 // How many tile queries an export runs at once.
 //
 // Not a politeness setting — it is the difference between a deck and a broken
@@ -3879,6 +4517,55 @@ function emptyLabel(item) {
 function isFailed(item) {
     return !item.data && item.component.type !== 'text';
 }
+// The lines under the report's name on the PDF title page and the title slide:
+// the export date, the active filters, then what the numbers are measured in.
+// The date is today in the report's zone, the same day its filters resolve
+// "today" to.
+function coverLines(collected) {
+    return [
+        format(getZonedNow(resolveReportTimezone(collected.report)), 'MMMM d, yyyy'),
+        ...collected.filterSummary,
+        ...collected.contextLines,
+    ];
+}
+// An exported list cell, reading like the on-screen cell: the SQL already
+// carries the formatting, so the value goes out verbatim. A date column is the
+// one value the browser renders, and it renders through the same function as
+// the screen, in the report's zone.
+function exportCell(value, columnFormat, timezone) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return columnFormat === 'date' ? formatReportDate(value, timezone) : String(value);
+}
+// The columns an exported list table draws. A cross-tab's columns arrive with
+// its rows (the row key first, then one per pivot value), since only the
+// result knows the pivot values; a plain list draws its configured columns,
+// else every column the query returned.
+function listColumns(component, data) {
+    const config = (component.config ?? {});
+    if (!config.pivotBy?.column && config.columns?.length) {
+        return config.columns;
+    }
+    return data.columns.map((column) => ({ column }));
+}
+// The heading over each column of listColumns(). A cross-tab's first column
+// is headed by rowBy.label, else its column name, and every other heading is
+// the raw pivot value; a plain list's columns keep their configured labels.
+function listHeadings(component, data) {
+    const config = (component.config ?? {});
+    if (config.pivotBy?.column) {
+        return data.columns.map((column, index) => (index === 0 ? config.rowBy?.label || column : column));
+    }
+    return listColumns(component, data).map((column) => column.label || column.column);
+}
+// The last row of an exported list table that stops short of its result: how
+// many rows the file leaves out and where the whole set can be had. Each
+// format fetches its own number of rows (PDF_LIST_ROWS, PPTX_LIST_ROWS), and
+// both name what is left with this one sentence.
+function moreRowsNotice(remaining) {
+    return `… ${remaining} more row(s) — use the component's CSV export for the full dataset`;
+}
 // The pages of a collected report that have at least one tile whose query
 // failed — what the export gate names to the user, and what makes "some of this
 // file is missing" a fact the caller can act on rather than a thing they notice
@@ -3901,7 +4588,9 @@ function failedPageNames(collected) {
 class ReportExportCollectorService {
     _reportData = inject(ReportData);
     _filterState = inject(ReportFilterStateService);
-    collect(report) {
+    // listRows is how many rows each list fetches: the renderer's own cap, since
+    // a PDF table continues onto extra pages and a slide table cannot.
+    collect(report, listRows) {
         const slots = [];
         report.pages.forEach((page, pageIndex) => {
             for (const component of page.components) {
@@ -3917,12 +4606,12 @@ class ReportExportCollectorService {
         // happened to finish first.
         const all$ = slots.length
             ? from(slots.map((slot, index) => ({ slot, index })))
-                .pipe(mergeMap(({ slot, index }) => this._componentData(report, slot.component)
+                .pipe(mergeMap(({ slot, index }) => this._componentData(report, slot.component, listRows)
                 .pipe(map$1((item) => ({ item, index }))), EXPORT_CONCURRENCY), toArray())
             : of([]);
         // The summary rides alongside the component data rather than being built at
         // the end, because naming a select filter's values is itself a request.
-        return forkJoin({ collected: all$, filterSummary: this._filterSummary(report) })
+        return forkJoin({ collected: all$, filterSummary: this.getFilterSummary(report) })
             .pipe(map$1(({ collected, filterSummary }) => {
             const pages = report.pages.map((page) => ({ page, components: [] }));
             [...collected]
@@ -3934,34 +4623,19 @@ class ReportExportCollectorService {
                 report,
                 pages,
                 filterSummary,
+                contextLines: this._contextLines(report),
             };
         }));
     }
-    _componentData(report, component) {
-        if (component.type === 'text') {
-            return of({ component, data: null });
-        }
-        const filters = this._filterState.resolveForComponent(component);
-        // A time-series chart carries the viewer's group-by grain so the export
-        // re-buckets exactly as the screen does; lists carry their export paging.
-        const frequency = this._filterState.frequency();
-        const isTimeSeries = component.type === 'chart' && component.config?.xAxis?.kind === 'time';
-        const state = component.type === 'list'
-            ? { page: 1, pageSize: LIST_EXPORT_ROWS }
-            : (isTimeSeries && frequency ? { frequency } : {});
-        // handlers: false keeps the app's global error dialog out of this. A failed
-        // tile is reported once, by the export gate, naming the pages it cost —
-        // never as ten stacked modals carrying the database's own wording.
-        return this._reportData.componentData(report.id, component.id, filters, state, true, { handlers: false })
-            .pipe(map$1((data) => ({ component, data })), catchError(() => of({ component, data: null })));
-    }
-    // "Report Period: Jun 12, 2025 – Jun 12, 2026", "Organization: Alnylam - AHP,
-    // Alnylam - PH1" — one line per filter group that has an active session value.
+    // "Report Period: Jun 12, 2025 – Jun 12, 2026", "Region: North, East" — one
+    // line per filter group that has an active session value, then the group-by
+    // line. The filter bar as the viewer reads it: the PDF and PowerPoint covers
+    // print it, and the report zip export sends it for its notes file.
     //
     // A select group stores ids, so its line has to be named off the option list
     // before it can be printed; a date or keyword group already holds its own
     // display value and resolves synchronously.
-    _filterSummary(report) {
+    getFilterSummary(report) {
         const lines = [];
         for (const group of report.filterGroups ?? []) {
             const value = this._filterState.value(group.id);
@@ -3990,6 +4664,35 @@ class ReportExportCollectorService {
         }
         return lines.length ? forkJoin(lines) : of([]);
     }
+    _componentData(report, component, listRows) {
+        if (component.type === 'text') {
+            return of({ component, data: null });
+        }
+        const filters = this._filterState.resolveForComponent(component);
+        // A time-series chart carries the viewer's group-by grain so the export
+        // re-buckets exactly as the screen does; lists carry their export paging
+        // and the viewer's header sort, so the table reads in the screen's order.
+        //
+        // The time-series check deliberately mirrors the server's canonical
+        // ReportQueryRunner::_isTimeSeriesChart, so a product pinned to an older
+        // framework does not re-bucket a non-time chart.
+        const frequency = this._filterState.frequency();
+        const isTimeSeries = component.type === 'chart' && component.config?.xAxis?.kind === 'time';
+        const state = component.type === 'list'
+            ? { page: 1, pageSize: listRows, sort: this._filterState.listSort(component.id) ?? undefined }
+            : (isTimeSeries && frequency ? { frequency } : {});
+        // handlers: false keeps the app's global error dialog out of this. A failed
+        // tile is reported once, by the export gate, naming the pages it cost —
+        // never as ten stacked modals carrying the database's own wording.
+        return this._reportData.componentData(report.id, component.id, filters, state, true, { handlers: false })
+            .pipe(map$1((data) => ({ component, data })), catchError(() => of({ component, data: null })));
+    }
+    // The zone the server resolved, as its IANA id. Only the server's value is
+    // printed: the browser's zone (resolveReportTimezone's fallback for an older
+    // server) is not what the numbers were measured in.
+    _contextLines(report) {
+        return report.effectiveTimezone ? [`Timezone: ${report.effectiveTimezone}`] : [];
+    }
     // One select group's line, with its stored ids resolved to the same names the
     // on-screen chips show — a cover reading "Organization: 8774, 8777" tells the
     // client nothing about what the report covers.
@@ -4022,7 +4725,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-CtKYuRcT.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-B9nl9XKM.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -4051,8 +4754,19 @@ async function renderChartImage(component, data, width, height, pixelRatio = 3)
 const PT = 72;
 // Component title strip height, points.
 const TITLE_H$1 = 18;
-// Approximate table row height, points — drives the rows-that-fit cap.
-const TABLE_ROW_H$1 = 16;
+// Rows fetched for a list's PDF table. A table that outgrows its box
+// continues onto pages of its own, so this is how far it may run: about 12-15
+// continuation pages on a letter page, and a tenth of the server's 5000-row
+// ceiling. A longer result ends in a moreRowsNotice() row.
+const PDF_LIST_ROWS = 500;
+// How far a continuation table sits inside the header and footer bands,
+// points. A page with no band (or with the master hidden) keeps
+// NO_BAND_MARGIN from that edge instead.
+const CONTINUATION_GAP = 0.25 * PT;
+const NO_BAND_MARGIN = 0.5 * PT;
+const NO_BANDS = { headerHeight: 0, footerHeight: 0 };
+// The last row of a list box whose rows carry on past it.
+const CONTINUED_NOTICE = 'Continued on the following pages';
 // A text line's height as a multiple of its largest font size — the canvas
 // stylesheet's line-height, so a block wraps and stacks the same way.
 const TEXT_LINE_HEIGHT = 1.25;
@@ -4065,40 +4779,74 @@ const LIST_INDENT = 16;
 // Charts are rendered through an offscreen ECharts instance at 3× pixel
 // ratio — pixel-identical to the screen, crisp at print size — and tables are
 // drawn with jspdf-autotable. Both libraries load lazily into their own chunks.
+//
+// A list table is fitted to its box by laying it out first, never by a
+// row-height estimate, so it cannot spill past the box. The rows that do not
+// fit continue on pages of their own after the report page, under the same
+// header/footer and with the same column widths, up to PDF_LIST_ROWS; a
+// longer result ends in a row pointing to the component's CSV export.
 class ReportPdfService {
     async export(collected) {
+        const context = await this._context(collected.report);
+        this._titlePage(context.doc, collected, context.pageW, context.pageH);
+        // The physical page number {{page.number}} prints: report pages and
+        // their continuation pages alike, the title page not counted.
+        let pageNumber = 0;
+        for (const [index, collectedPage] of collected.pages.entries()) {
+            const overflows = [];
+            pageNumber += 1;
+            await this._renderPage(context, collectedPage, index, pageNumber, overflows);
+            // Each continuation appends its pages at the end of the document, so
+            // two lists that overflowed on one page follow it back to back.
+            for (const overflow of overflows) {
+                pageNumber = this._renderContinuation(context, collectedPage.page, index, pageNumber, overflow);
+            }
+        }
+        context.doc.save(`${this._slug(collected.report.name)}.pdf`);
+    }
+    async _context(report) {
         const { jsPDF } = await import('jspdf');
         const autoTable = (await import('jspdf-autotable')).default;
-        const report = collected.report;
         const pageW = report.pageWidth * PT;
         const pageH = report.pageHeight * PT;
-        const doc = new jsPDF({
-            orientation: pageW >= pageH ? 'landscape' : 'portrait',
-            unit: 'pt',
-            format: [pageW, pageH],
-        });
-        this._titlePage(doc, collected, pageW, pageH);
-        for (const [index, collectedPage] of collected.pages.entries()) {
-            doc.addPage([pageW, pageH], pageW >= pageH ? 'landscape' : 'portrait');
-            const geometry = pageGeometry(report, collectedPage.page);
-            const tokens = this._tokens(report, collectedPage.page, index);
-            // The header and footer first, under the page's own components.
-            if (!collectedPage.page.masterHidden) {
-                for (const component of report.master?.components ?? []) {
-                    this._renderText(doc, component, component, tokens);
-                }
+        const orientation = pageW >= pageH ? 'landscape' : 'portrait';
+        return {
+            doc: new jsPDF({ orientation, unit: 'pt', format: [pageW, pageH] }),
+            autoTable,
+            jsPDF,
+            report,
+            timezone: resolveReportTimezone(report),
+            pageW,
+            pageH,
+            orientation,
+        };
+    }
+    // One report page: the header and footer first, under the page's own
+    // components. A list that outgrows its box leaves its remaining rows in
+    // overflows.
+    async _renderPage(context, collectedPage, index, pageNumber, overflows) {
+        const { doc, report } = context;
+        const geometry = pageGeometry(report, collectedPage.page);
+        const tokens = this._tokens(report, collectedPage.page, index, pageNumber);
+        doc.addPage([context.pageW, context.pageH], context.orientation);
+        this._renderMaster(context, collectedPage.page, tokens);
+        for (const item of collectedPage.components) {
+            const box = geometry.get(item.component.id);
+            if (item.component.type === 'text') {
+                this._renderText(doc, item.component, box ?? item.component, tokens);
             }
-            for (const item of collectedPage.components) {
-                const box = geometry.get(item.component.id);
-                if (item.component.type === 'text') {
-                    this._renderText(doc, item.component, box ?? item.component, tokens);
-                }
-                else {
-                    await this._renderComponent(doc, autoTable, item, box);
-                }
+            else {
+                await this._renderComponent(context, item, overflows, box);
             }
         }
-        doc.save(`${this._slug(report.name)}.pdf`);
+    }
+    _renderMaster(context, page, tokens) {
+        if (page.masterHidden) {
+            return;
+        }
+        for (const component of context.report.master?.components ?? []) {
+            this._renderText(context.doc, component, component, tokens);
+        }
     }
     _titlePage(doc, collected, pageW, pageH) {
         doc.setFont('helvetica', 'bold');
@@ -4108,11 +4856,7 @@ class ReportPdfService {
         doc.setFont('helvetica', 'normal');
         doc.setFontSize(11);
         doc.setTextColor('#52606d');
-        const lines = [
-            format(new Date(), 'MMMM d, yyyy'),
-            ...collected.filterSummary,
-        ];
-        doc.text(lines, 40, pageH * 0.35 + 26);
+        doc.text(coverLines(collected), 40, pageH * 0.35 + 26);
     }
     // A text block, laid out by hand: jsPDF draws strings, not rich text, so each
     // paragraph's runs are broken into words, wrapped to the block's width and
@@ -4237,16 +4981,19 @@ class ReportPdfService {
                 return 0;
         }
     }
-    // What a text block's tokens fill with on this page: the page's position
-    // among the report's pages — the title page is not a report page.
-    _tokens(report, page, index) {
+    // What a text block's tokens fill with on this page. The number is the
+    // physical page among the report's pages, continuation pages included — the
+    // title page is not a report page. The name stays the report page's, so a
+    // continuation page is named for the page its table started on.
+    _tokens(report, page, index, pageNumber) {
         return {
-            pageNumber: index + 1,
+            pageNumber,
             pageName: page.name || `Page ${index + 1}`,
             reportName: report.name,
         };
     }
-    async _renderComponent(doc, autoTable, item, geometry) {
+    async _renderComponent(context, item, overflows, geometry) {
+        const { doc } = context;
         const component = item.component;
         // Geometry arrives in inches (flow layout pre-resolved); the PDF draws in
         // points.
@@ -4256,18 +5003,12 @@ class ReportPdfService {
         const w = inches.w * PT;
         const h = inches.h * PT;
         if (component.title) {
-            doc.setFont('helvetica', 'bold');
-            doc.setFontSize(9);
-            doc.setTextColor('#1f2933');
-            doc.text(component.title, x, y + 10, { maxWidth: w });
+            this._componentTitle(doc, component.title, x, y, w);
         }
         const bodyY = y + TITLE_H$1;
         const bodyH = Math.max(20, h - TITLE_H$1);
         if (!item.data || !item.data.rows?.length) {
-            doc.setFont('helvetica', 'italic');
-            doc.setFontSize(9);
-            doc.setTextColor('#7b8794');
-            doc.text(emptyLabel(item), x + w / 2, bodyY + bodyH / 2, { align: 'center' });
+            this._boxNote(doc, emptyLabel(item), x, bodyY, w, bodyH);
             return;
         }
         switch (component.type) {
@@ -4277,36 +5018,173 @@ class ReportPdfService {
                 break;
             }
             case 'list':
-                this._renderTable(doc, autoTable, component, item.data, x, bodyY, w, bodyH);
+                this._renderTable(context, component, item.data, x, bodyY, w, bodyH, overflows);
                 break;
             case 'kpi':
                 this._renderKpi(doc, component, item.data, x, bodyY, w, bodyH);
                 break;
         }
     }
-    _renderTable(doc, autoTable, component, data, x, y, w, h) {
-        const config = component.config;
-        const columns = config.columns?.length
-            ? config.columns
-            : data.columns.map((column) => ({ column, label: column }));
-        const cap = Math.max(2, Math.floor(h / TABLE_ROW_H$1) - 1);
-        const rows = data.rows.slice(0, cap);
-        const remaining = (data.paging?.total ?? data.rows.length) - rows.length;
-        const body = rows.map((row) => columns.map((column) => this._cell(row[column.column], column.format)));
-        if (remaining > 0) {
-            body.push([`… ${remaining} more row(s) — use the component's CSV export for the full dataset`]);
+    // The bold strip over a component, and over each of its continuation pages.
+    _componentTitle(doc, title, x, y, w) {
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(9);
+        doc.setTextColor('#1f2933');
+        doc.text(title, x, y + 10, { maxWidth: w });
+    }
+    // An italic grey line centered in a component's body, for a body that holds
+    // something other than its content.
+    _boxNote(doc, text, x, y, w, h) {
+        doc.setFont('helvetica', 'italic');
+        doc.setFontSize(9);
+        doc.setTextColor('#7b8794');
+        doc.text(text, x + w / 2, y + h / 2, { align: 'center' });
+    }
+    // A list's on-page table. All of its fetched rows are laid out once to learn
+    // how many the box holds; when they do not all fit, the box's last row says
+    // the table continues and the rest go to overflows for continuation pages.
+    // A box too short for even the head carries the notice as a line instead.
+    // Points throughout.
+    _renderTable(context, component, data, x, y, w, h, overflows) {
+        const head = listHeadings(component, data);
+        const cells = this._tableCells(component, data, context.timezone);
+        const omitted = Math.max(0, (data.paging?.total ?? cells.length) - cells.length);
+        const bottom = context.pageH - (y + h);
+        const { fit, columnStyles } = this._measure(context, head, cells, x, y, w, bottom);
+        if (fit === cells.length && omitted === 0) {
+            this._drawTable(context, this._tableOptions(context, head, cells, x, y, w, bottom, columnStyles));
+            return;
+        }
+        // The notice takes the place of the last row that fit, so that row moves
+        // to the continuation. omitted > 0 means a full PDF_LIST_ROWS fetch, which
+        // never fits one box, so the CSV notice always lands on a continuation
+        // page.
+        const kept = Math.max(0, fit - 1);
+        overflows.push({ component, head, rows: cells.slice(kept), omitted, x, w, columnStyles });
+        if (fit >= 1) {
+            const body = [...cells.slice(0, kept), this._noticeRow(CONTINUED_NOTICE, head.length, true)];
+            this._drawTable(context, this._tableOptions(context, head, body, x, y, w, bottom, columnStyles));
+        }
+        else {
+            this._boxNote(context.doc, CONTINUED_NOTICE, x, y, w, h);
         }
-        autoTable(doc, {
-            head: [columns.map((column) => column.label || column.column)],
+    }
+    // Each fetched row as the strings its table cells print.
+    _tableCells(component, data, timezone) {
+        const columns = listColumns(component, data);
+        return data.rows.map((row) => columns.map((column) => exportCell(row[column.column], column.format, timezone)));
+    }
+    // The autoTable options every list table shares: the dry run, the on-page
+    // draw and the continuation pages, so the three lay a table out alike. The
+    // font is named rather than inherited, since the doc carries whatever the
+    // last text drawn left set. bottom is the margin under the table, points.
+    _tableOptions(context, head, body, x, startY, w, bottom, columnStyles) {
+        return {
+            theme: 'grid',
+            head: [head],
             body,
-            startY: y,
-            margin: { left: x },
+            startY,
+            margin: { left: x, right: context.pageW - x - w, bottom },
             tableWidth: w,
-            styles: { fontSize: 8, cellPadding: 3, textColor: '#1f2933' },
+            rowPageBreak: 'avoid',
+            styles: { font: 'helvetica', fontStyle: 'normal', fontSize: 8, cellPadding: 3, textColor: '#1f2933' },
             headStyles: { fillColor: '#4e79a7', textColor: '#ffffff', fontStyle: 'bold' },
             alternateRowStyles: { fillColor: '#f5f7fa' },
-            theme: 'grid',
+            ...(columnStyles ? { columnStyles } : {}),
+        };
+    }
+    // A notice as a table row: one italic grey cell spanning every column. A
+    // single-line notice is ellipsized at the box's width and keeps the data
+    // cells' font size and padding, so it is never taller than the data row
+    // whose place it takes.
+    _noticeRow(text, span, singleLine) {
+        return [{
+                content: text,
+                colSpan: span,
+                styles: { fontStyle: 'italic', textColor: '#7b8794', ...(singleLine ? { overflow: 'ellipsize' } : {}) },
+            }];
+    }
+    // Lays every fetched row out once on a scratch document of the same page
+    // size, with the options the real draw uses, and reads back how many body
+    // rows the box's page holds (fit) and the column widths autoTable chose.
+    // fit 0 means even the head did not fit: autoTable moved to a new page
+    // before drawing. The real document is untouched.
+    _measure(context, head, cells, x, y, w, bottom) {
+        const scratch = new context.jsPDF({
+            unit: 'pt',
+            format: [context.pageW, context.pageH],
+            orientation: context.orientation,
+        });
+        let fit = 0;
+        context.autoTable(scratch, {
+            ...this._tableOptions(context, head, cells, x, y, w, bottom),
+            didDrawCell: (hook) => {
+                if (hook.section === 'body' && scratch.getCurrentPageInfo().pageNumber === 1) {
+                    fit = Math.max(fit, hook.row.index + 1);
+                }
+            },
         });
+        const columns = scratch.lastAutoTable.columns;
+        const columnStyles = {};
+        columns.forEach((column, index) => {
+            columnStyles[index] = { cellWidth: column.width };
+        });
+        // A row taller than a whole page is split rather than moved, so a last
+        // row that started on the first page can still have run past it.
+        if (fit === cells.length && scratch.getNumberOfPages() > 1) {
+            fit -= 1;
+        }
+        return { fit, columnStyles };
+    }
+    // Draws an on-page table, then removes any page the draw added. That should
+    // never happen: the measured fit, the identical column widths and a
+    // single-line notice keep the table inside its box. The check exists so a
+    // stray page can never catch the report page's remaining components.
+    _drawTable(context, options) {
+        const { doc } = context;
+        const page = doc.getCurrentPageInfo().pageNumber;
+        const pages = doc.getNumberOfPages();
+        context.autoTable(doc, options);
+        while (doc.getNumberOfPages() > pages) {
+            doc.deletePage(doc.getNumberOfPages());
+        }
+        doc.setPage(page);
+    }
+    // The rows of one list that did not fit its box, on pages appended after
+    // the report page, each with the page's header and footer, the table's
+    // title and its head again. The table sits CONTINUATION_GAP inside the
+    // bands. Returns the physical page counter after these pages.
+    _renderContinuation(context, page, index, pageNumber, overflow) {
+        const { doc, report } = context;
+        const bands = page.masterHidden ? NO_BANDS : report.config?.headerFooter ?? NO_BANDS;
+        const top = this._continuationMargin(bands.headerHeight);
+        const bottom = this._continuationMargin(bands.footerHeight);
+        const { x, w } = overflow;
+        const body = overflow.omitted > 0
+            ? [...overflow.rows, this._noticeRow(moreRowsNotice(overflow.omitted), overflow.head.length, false)]
+            : overflow.rows;
+        let counter = pageNumber;
+        doc.addPage([context.pageW, context.pageH], context.orientation);
+        context.autoTable(doc, {
+            ...this._tableOptions(context, overflow.head, body, x, top + TITLE_H$1, w, bottom, overflow.columnStyles),
+            margin: { top: top + TITLE_H$1, bottom, left: x, right: context.pageW - x - w },
+            showHead: 'everyPage',
+            // Fires on every page the table draws on, the first included.
+            willDrawPage: () => {
+                counter += 1;
+                this._renderMaster(context, page, this._tokens(report, page, index, counter));
+                this._componentTitle(doc, this._continuedTitle(overflow.component), x, top, w);
+            },
+        });
+        return counter;
+    }
+    // The margin a continuation table keeps from one edge: inside the band when
+    // the page has one.
+    _continuationMargin(band) {
+        return band ? band * PT + CONTINUATION_GAP : NO_BAND_MARGIN;
+    }
+    _continuedTitle(component) {
+        return component.title ? `${component.title} (continued)` : 'Continued';
     }
     _renderKpi(doc, component, data, x, y, w, h) {
         const config = component.config;
@@ -4324,20 +5202,6 @@ class ReportPdfService {
             doc.text(config.measure.label, x + w / 2, y + h / 2 + 16, { align: 'center' });
         }
     }
-    // The exported cell must read like the on-screen cell: the SQL already
-    // carries the formatting, so the value goes out verbatim. A raw date is the
-    // one value the client renders (the column stays a RAW timestamp for the
-    // report timezone), and it is rendered here too.
-    _cell(value, columnFormat) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (columnFormat === 'date') {
-            const date = new Date(String(value));
-            return Number.isNaN(date.getTime()) ? String(value) : format(date, 'MMM d, yyyy');
-        }
-        return String(value);
-    }
     _slug(name) {
         return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
     }
@@ -4351,7 +5215,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // Component title strip height on the slide, inches.
 const TITLE_H = 0.28;
 // Approximate table row height, inches — drives the rows-that-fit cap.
-const TABLE_ROW_H = 0.26;
+const SLIDE_ROW_H = 0.26;
+// Rows fetched for a list's slide table. A slide table never continues onto
+// another slide, so this only has to cover the rows a box can show; the
+// moreRowsNotice() row names the rest.
+const PPTX_LIST_ROWS = 100;
 // Our legend positions mapped to pptxgenjs's single-letter legendPos codes.
 // 'hidden' has no slot — showLegend is turned off instead — so it falls back
 // to top.
@@ -4369,6 +5237,10 @@ const WATERFALL_SERIES_NAMES = {
     fall: 'Decrease',
     total: 'Total',
 };
+// A null is a period with no value. The screen breaks the line there, and
+// pptxgenjs's default ('span') would draw straight across it. The setting is
+// chart-level, so a combo's every type inherits it through the chart options.
+const BLANKS_AS_GAPS = { displayBlanksAs: 'gap' };
 // Builds the PowerPoint deck client-side with pptxgenjs. Charts are NATIVE
 // editable PowerPoint charts (slide.addChart writes real chart XML with an
 // embedded data workbook — "Edit Data" works), never images. The page IS the
@@ -4386,6 +5258,7 @@ class ReportPptxService {
         pptx.layout = 'REPORT';
         pptx.title = report.name;
         this._titleSlide(pptx, collected, pageW, pageH);
+        const timezone = resolveReportTimezone(report);
         collected.pages.forEach((collectedPage, index) => {
             const slide = pptx.addSlide();
             const geometry = pageGeometry(report, collectedPage.page);
@@ -4403,7 +5276,7 @@ class ReportPptxService {
                     this._renderText(slide, item.component, box ?? item.component, tokens);
                 }
                 else {
-                    this._renderComponent(pptx, slide, item, box);
+                    this._renderComponent(pptx, slide, item, timezone, box);
                 }
             }
         });
@@ -4415,10 +5288,7 @@ class ReportPptxService {
             x: 0.5, y: pageH * 0.3, w: pageW - 1, h: 0.8,
             fontSize: 30, bold: true, color: '1F2933',
         });
-        const lines = [
-            format(new Date(), 'MMMM d, yyyy'),
-            ...collected.filterSummary,
-        ];
+        const lines = coverLines(collected);
         slide.addText(lines.join('\n'), {
             x: 0.5, y: pageH * 0.3 + 0.9, w: pageW - 1, h: Math.max(0.4, lines.length * 0.25),
             fontSize: 12, color: '52606D',
@@ -4480,7 +5350,7 @@ class ReportPptxService {
             reportName: report.name,
         };
     }
-    _renderComponent(pptx, slide, item, geometry) {
+    _renderComponent(pptx, slide, item, timezone, geometry) {
         const component = item.component;
         // Geometry is in inches — PowerPoint's native unit (flow layout arrives
         // pre-resolved into rows by pageGeometry).
@@ -4505,7 +5375,7 @@ class ReportPptxService {
                 this._renderChart(pptx, slide, component, item.data, x, bodyY, w, bodyH);
                 break;
             case 'list':
-                this._renderTable(slide, component, item.data, x, bodyY, w, bodyH);
+                this._renderTable(slide, component, item.data, timezone, x, bodyY, w, bodyH);
                 break;
             case 'kpi':
                 this._renderKpi(slide, component, item.data, x, bodyY, w, bodyH);
@@ -4539,19 +5409,27 @@ class ReportPptxService {
             ? [{
                     name: config.measures?.[0]?.label ?? config.colorBy?.label ?? '',
                     labels,
-                    values: extracted.categories.map((_, index) => extracted.series[index]?.values[index] ?? 0),
+                    values: extracted.categories.map((_, index) => extracted.series[index]?.values[index] ?? null),
                 }]
             : (pie ? extracted.series.slice(0, 1) : extracted.series)
                 .map((series) => ({
                 name: series.name,
                 labels,
-                values: series.values.map((value) => value ?? 0),
+                // A pie keeps the 0 the screen's pie uses; an axis chart keeps its
+                // null so the point is a gap.
+                values: pie ? series.values.map((value) => value ?? 0) : series.values,
             }));
         // A single-series colorBy chart can't carry a per-category legend in a native
         // PowerPoint bar chart; the category axis labels identify each bar instead.
         const legendPosition = colorBy
             ? 'hidden'
             : resolveLegendPosition(config, extracted.series.length);
+        // The type each chartData entry is drawn as. A pie is one entry of its own
+        // type; colorBy collapsed its series into one, drawn as the lone measure's.
+        const seriesDataTypes = pie
+            ? [chartType]
+            : seriesTypes(extracted, chartType).slice(0, colorBy ? 1 : undefined);
+        const dataTypes = seriesDataTypes.length ? seriesDataTypes : [chartType];
         const options = {
             x, y, w, h,
             chartColors: REPORT_CHART_COLORS,
@@ -4562,14 +5440,28 @@ class ReportPptxService {
             barGrouping: config.stacked ? 'stacked' : 'clustered',
             holeSize: chartType === 'donut' ? 55 : undefined,
             ...this._axisTextOptions(config, pie),
+            ...BLANKS_AS_GAPS,
+            // A pie has no axes. A combo's types inherit these from the chart level.
+            ...(pie ? {} : {
+                valAxisLabelFormatCode: chartAxisFormatCode(chartData.map((entry) => entry.values), !!config.stacked),
+                ...this._categoryOrderOptions(config, dataTypes),
+            }),
             dataBorder: { pt: 0, color: 'FFFFFF' },
         };
-        // The type each chartData entry is drawn as. A pie is one entry of its own
-        // type; colorBy collapsed its series into one, drawn as the lone measure's.
-        const dataTypes = pie
-            ? [chartType]
-            : seriesTypes(extracted, chartType).slice(0, colorBy ? 1 : undefined);
-        this._addChart(slide, typeMap, dataTypes.length ? dataTypes : [chartType], chartData, options);
+        this._addChart(slide, typeMap, dataTypes, chartData, options);
+    }
+    // A horizontal bar chart reads top-down, first category at the top, as it
+    // does on screen. PowerPoint draws category 0 next to the value axis, at the
+    // bottom, so the category axis is reversed ('maxMin'); the value axis then
+    // crosses at the last category ('max'), which now sits at the bottom, and
+    // 'nextTo' keeps its labels on that line (pptxgenjs's default for a bar
+    // direction, 'low', would follow the first category to the top). Only an
+    // all-bar chart: a line or area is never drawn sideways.
+    _categoryOrderOptions(config, types) {
+        if (config.orientation !== 'horizontal' || types.some((type) => type !== 'bar')) {
+            return {};
+        }
+        return { catAxisOrientation: 'maxMin', catAxisCrossesAt: 'max', valAxisLabelPos: 'nextTo' };
     }
     // One native chart when every entry is drawn as the same type. A combo is
     // pptxgenjs's multi-type chart: one entry per type, all on the same category
@@ -4609,6 +5501,11 @@ class ReportPptxService {
             barDir: config.orientation === 'horizontal' ? 'bar' : 'col',
             barGrouping: 'stacked',
             ...this._axisTextOptions(config, false),
+            ...BLANKS_AS_GAPS,
+            // The axis spans the running total, so its peak is the furthest a step
+            // ends from zero; the pieces it is cut into never stack past that.
+            valAxisLabelFormatCode: chartAxisFormatCode([waterfall.steps.map((step) => step.start + (step.change ?? 0))], false),
+            ...this._categoryOrderOptions(config, ['bar']),
             // A running total can go below zero, where the category axis crosses;
             // its labels stay at the plot's edge instead of across the bars.
             catAxisLabelPos: 'low',
@@ -4663,25 +5560,22 @@ class ReportPptxService {
             valAxisTitleFontSize: 10,
         };
     }
-    _renderTable(slide, component, data, x, y, w, h) {
-        const config = component.config;
-        const columns = config.columns?.length
-            ? config.columns
-            : data.columns.map((column) => ({ column, label: column }));
-        const cap = Math.max(2, Math.floor(h / TABLE_ROW_H) - 1);
+    _renderTable(slide, component, data, timezone, x, y, w, h) {
+        const columns = listColumns(component, data);
+        const cap = Math.max(2, Math.floor(h / SLIDE_ROW_H) - 1);
         const rows = data.rows.slice(0, cap);
         const remaining = (data.paging?.total ?? data.rows.length) - rows.length;
-        const header = columns.map((column) => ({
-            text: column.label || column.column,
+        const header = listHeadings(component, data).map((heading) => ({
+            text: heading,
             options: { bold: true, color: 'FFFFFF', fill: { color: '4E79A7' } },
         }));
         const body = rows.map((row) => columns.map((column) => ({
-            text: this._cell(row[column.column], column.format),
+            text: exportCell(row[column.column], column.format, timezone),
             options: {},
         })));
         if (remaining > 0) {
             body.push([{
-                    text: `… ${remaining} more row(s) — use the component's CSV export for the full dataset`,
+                    text: moreRowsNotice(remaining),
                     options: { colspan: columns.length, italic: true, color: '7B8794' },
                 }]);
         }
@@ -4691,7 +5585,7 @@ class ReportPptxService {
             color: '1F2933',
             border: { type: 'solid', pt: 0.5, color: 'E4E7EB' },
             autoPage: false,
-            rowH: TABLE_ROW_H,
+            rowH: SLIDE_ROW_H,
             valign: 'middle',
         });
     }
@@ -4709,20 +5603,6 @@ class ReportPptxService {
             valign: 'middle',
         });
     }
-    // The exported cell must read like the on-screen cell: the SQL already
-    // carries the formatting, so the value goes out verbatim. A raw date is the
-    // one value the client renders (the column stays a RAW timestamp for the
-    // report timezone), and it is rendered here too.
-    _cell(value, columnFormat) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (columnFormat === 'date') {
-            const date = new Date(String(value));
-            return Number.isNaN(date.getTime()) ? String(value) : format(date, 'MMM d, yyyy');
-        }
-        return String(value);
-    }
     _slug(name) {
         return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
     }
@@ -4755,20 +5635,23 @@ class ReportExportService {
     _pptxService = inject(ReportPptxService);
     _prompt = inject(FsPrompt);
     pdf(report) {
-        return this._run(report, (collected) => this._pdfService.export(collected));
+        return this._run(report, PDF_LIST_ROWS, (collected) => this._pdfService.export(collected));
     }
     powerpoint(report) {
-        return this._run(report, (collected) => this._pptxService.export(collected));
+        return this._run(report, PPTX_LIST_ROWS, (collected) => this._pptxService.export(collected));
     }
     // Retry re-collects the WHOLE report, not just the tiles that failed. Every
     // number in one file has to have been true at one moment: refetching four
     // tiles and keeping nine from three minutes ago produces a deck whose pages
     // disagree with each other, and nothing on it would say so.
-    _run(report, render) {
-        return this._collector.collect(report)
+    //
+    // listRows is the format's own list cap, carried into the retry so a second
+    // attempt fetches what the first did.
+    _run(report, listRows, render) {
+        return this._collector.collect(report, listRows)
             .pipe(switchMap$1((collected) => this._gate(collected)
             .pipe(switchMap$1((choice) => choice === RETRY
-            ? this._run(report, render)
+            ? this._run(report, listRows, render)
             : from(render(collected))))));
     }
     // Resolves to DOWNLOAD when the export is whole (or the user accepted an
@@ -4813,7 +5696,7 @@ class ReportService {
     }
     load() {
         return this._reportData.reports()
-            .pipe(tap((reports) => this._reports$.next(reports ?? [])));
+            .pipe(tap$1((reports) => this._reports$.next(reports ?? [])));
     }
     // Filters the cached list locally — what the autocomplete's [fetch] calls.
     filter(keyword) {
@@ -4826,20 +5709,20 @@ class ReportService {
     }
     create(name) {
         return this._reportData.create(name)
-            .pipe(tap((report) => {
+            .pipe(tap$1((report) => {
             this._reports$.next([...this._reports$.getValue(), report]);
         }));
     }
     rename(reportId, name) {
         return this._reportData.rename(reportId, name)
-            .pipe(tap((report) => {
+            .pipe(tap$1((report) => {
             this._reports$.next(this._reports$.getValue()
                 .map((existing) => (existing.id === report.id ? report : existing)));
         }));
     }
     delete(reportId) {
         return this._reportData.delete(reportId)
-            .pipe(tap(() => {
+            .pipe(tap$1(() => {
             this._reports$.next(this._reports$.getValue().filter((report) => report.id !== reportId));
         }), map(() => undefined));
     }
@@ -4859,15 +5742,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // turn via [requestData].
 class ReportComponent {
     // The single report the viewer and chat are focused on.
-    selected = null;
-    report = null;
-    loadingReports = true;
-    editMode = false;
+    selected = signal(null);
+    report = signal(null);
+    loadingReports = signal(true);
+    editMode = signal(false);
     // The report toolbar IS an fs-filter: the picker rides in its heading
     // template, the menu becomes its actions, and report-level filter groups
     // become its items. Rebuilt whenever the loaded report (and thus its groups)
     // changes; the menu's show-guards keep working while no report is selected.
-    reportFilterConfig;
+    reportFilterConfig = signal(null);
     _split;
     _chatPanel;
     // Only the canvas knows which page is on screen, and a page-scoped export
@@ -4880,18 +5763,17 @@ class ReportComponent {
     _reportService = inject(ReportService);
     _filterState = inject(ReportFilterStateService);
     _exportService = inject(ReportExportService);
+    _collector = inject(ReportExportCollectorService);
     _process = inject(FsProcess);
     _prompt = inject(FsPrompt);
     _dialog = inject(MatDialog);
     _destroyRef = inject(DestroyRef);
-    _cdRef = inject(ChangeDetectorRef);
     _zone = inject(NgZone);
     constructor() {
         this._buildReportConfig();
         this._reportService.load()
             .pipe(finalize(() => {
-            this.loadingReports = false;
-            this._cdRef.markForCheck();
+            this.loadingReports.set(false);
         }), takeUntilDestroyed(this._destroyRef))
             .subscribe({ error: () => undefined });
     }
@@ -4899,8 +5781,8 @@ class ReportComponent {
         return this._reportService.filter(keyword);
     };
     reportChange(report) {
-        this.report = null;
-        this.editMode = false;
+        this.report.set(null);
+        this.editMode.set(false);
         this._buildReportConfig();
         if (report) {
             this._loadReport(report.id);
@@ -4915,13 +5797,12 @@ class ReportComponent {
         })
             .pipe(switchMap$1((name) => this._reportService.create(name)), takeUntilDestroyed(this._destroyRef))
             .subscribe((report) => {
-            this.selected = report;
-            this._cdRef.markForCheck();
+            this.selected.set(report);
             this._loadReport(report.id);
         });
     }
     toggleEditMode() {
-        this.editMode = !this.editMode;
+        this.editMode.update((editMode) => !editMode);
     }
     // The edit tools live in this toolbar, but the canvas owns what they act on
     // (the active page, the header/footer bands, which layer is live).
@@ -4938,11 +5819,11 @@ class ReportComponent {
     // list and structure both reload on save (a layout switch re-renders the
     // whole canvas).
     reportSettings() {
-        if (!this.report) {
+        if (!this.report()) {
             return;
         }
         this._dialog.open(ReportSettingsComponent, {
-            data: { report: this.report },
+            data: { report: this.report() },
             width: '460px',
         })
             .afterClosed()
@@ -4951,26 +5832,25 @@ class ReportComponent {
             // The dialog confirms + performs the delete itself; we just react to
             // what it reports back.
             if (result?.action === 'deleted') {
-                this.selected = null;
-                this.report = null;
+                this.selected.set(null);
+                this.report.set(null);
                 this._buildReportConfig();
-                this._cdRef.markForCheck();
                 return;
             }
-            if (result?.action === 'saved' && this.selected) {
-                this._loadReport(this.selected.id);
-                this._refreshReportName(this.selected.id);
+            if (result?.action === 'saved' && this.selected()) {
+                this._loadReport(this.selected().id);
+                this._refreshReportName(this.selected().id);
             }
         });
     }
     // Component settings — title, exact geometry, and the diagnostic views
     // (SQL, config, filter wiring).
     componentSettings(component) {
-        if (!this.report) {
+        if (!this.report()) {
             return;
         }
         const dialogRef = this._dialog.open(ComponentSettingsComponent, {
-            data: { report: this.report, component },
+            data: { report: this.report(), component },
             width: '640px',
         });
         // Filter add/remove/level changes persist immediately inside the dialog (no
@@ -4988,16 +5868,16 @@ class ReportComponent {
             // 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);
+                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) {
-                if (this.selected) {
-                    this._loadReport(this.selected.id);
+                if (this.selected()) {
+                    this._loadReport(this.selected().id);
                 }
                 return;
             }
@@ -5012,8 +5892,8 @@ class ReportComponent {
     // The canvas changed the report's structure (added a page) — re-fetch so the
     // new page renders; the canvas lands the view on it.
     onCanvasReportChanged() {
-        if (this.selected) {
-            this._loadReport(this.selected.id);
+        if (this.selected()) {
+            this._loadReport(this.selected().id);
         }
     }
     // Export the report to PowerPoint, entirely client-side: every component's
@@ -5021,32 +5901,37 @@ class ReportComponent {
     // the visible one), then pptxgenjs builds a deck of NATIVE editable charts —
     // page = slide, positions 1:1. The dock shows progress until the file saves.
     exportPowerpoint() {
-        if (!this.report) {
+        if (!this.report()) {
             return;
         }
-        this._process.run('Exporting PowerPoint', this._exportService.powerpoint(this.report));
+        this._process.run('Exporting PowerPoint', this._exportService.powerpoint(this.report()));
     }
     // Export to PDF, entirely client-side: same collection pass, charts rendered
     // through an offscreen ECharts instance at 3× pixel ratio (pixel-identical
     // to the screen), tables via jspdf-autotable — page = PDF page.
     exportPdf() {
-        if (!this.report) {
+        if (!this.report()) {
             return;
         }
-        this._process.run('Exporting PDF', this._exportService.pdf(this.report));
+        this._process.run('Exporting PDF', this._exportService.pdf(this.report()));
     }
-    // The raw data behind the whole report in one action: the server exports every
-    // component's full filtered dataset and zips one CSV per component, foldered
-    // by page. `thisPage` narrows it to the page the canvas is showing. Unlike the
-    // PDF/PowerPoint exports this is entirely server-side — nothing is collected
-    // in the browser, so it is not capped by what a slide can hold.
+    // The whole report as files in one action: the server writes one CSV per
+    // component, each what the screen shows (a chart or KPI as drawn, at the
+    // viewer's group-by grain; a list in full), and zips them foldered by page
+    // with an Export Notes.txt that records the filters as the bar reads them.
+    // Lists use their saved default sort; a header click is carried only by a
+    // component's own CSV export. `thisPage` narrows it to the page the canvas is
+    // showing. Unlike the PDF/PowerPoint exports the files are written
+    // server-side, so they are not capped by what a slide can hold.
     exportData(thisPage = false) {
-        const report = this.report;
+        const report = this.report();
         if (!report) {
             return;
         }
         const pageId = thisPage ? this._canvas?.activePage?.id ?? null : null;
-        this._process.download('Exporting data', this._reportData.exportReport(report.id, this._filterState.resolveForReport(report, pageId), pageId));
+        const filters = this._filterState.resolveForReport(report, pageId);
+        this._process.download('Exporting data', this._collector.getFilterSummary(report)
+            .pipe(switchMap$1((lines) => this._reportData.exportReport(report.id, filters, pageId, this._filterState.frequency(), lines))));
     }
     // React to each chat turn (fs-chat handles the request + persistence); we
     // only care about the report side effects this context's backend flags.
@@ -5054,12 +5939,12 @@ class ReportComponent {
         // The agent changed the report's structure — re-fetch it. Session filter
         // values survive (the filter-state service keeps values for groups that
         // still exist).
-        if (response.reportChanged && this.selected) {
-            this._loadReport(this.selected.id);
+        if (response.reportChanged && this.selected()) {
+            this._loadReport(this.selected().id);
         }
         // A rename changes nothing structural — refresh the picker chip label.
-        if (response.reportRenamed && this.selected) {
-            this._refreshReportName(this.selected.id);
+        if (response.reportRenamed && this.selected()) {
+            this._refreshReportName(this.selected().id);
         }
     }
     // Drag the divider between the chat and canvas panes (pointer-capture loop
@@ -5096,16 +5981,17 @@ class ReportComponent {
         this._reportData.get(reportId)
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((report) => {
-            this.report = report;
+            this.report.set(report);
+            // No URL state in this view: nothing is restored from the URL and
+            // nothing listens to urlChanges(), so its filters stay session-only.
             this._filterState.init(report);
             this._buildReportConfig();
-            this._cdRef.markForCheck();
         });
     }
     // Report-level filter groups in their saved order — the ones that render in
     // the toolbar (component-level groups render on their components).
     _reportGroups() {
-        return (this.report?.filterGroups ?? [])
+        return (this.report()?.filterGroups ?? [])
             .filter((group) => group.level === 'report' || group.level === 'both')
             .sort((a, b) => a.order - b.order);
     }
@@ -5123,7 +6009,7 @@ class ReportComponent {
             // The stored default is part of the signature: saving a new default in report
             // settings rebuilds the config, but without a key change fs-filter keeps
             // rendering the values it was created with until a full page reload.
-            groupBySignature(this.report),
+            groupBySignature(this.report()),
             ...this._reportGroups().map((group) => `${group.id}:${group.level}:${group.label}:${defaultSignature(group)}`),
         ].join('|');
     }
@@ -5132,10 +6018,10 @@ class ReportComponent {
     // the picker, not here. Only built/used once a report is loaded (the template
     // gates it on `report`).
     _buildReportConfig() {
-        const reportId = this.report?.id ?? null;
+        const reportId = this.report()?.id ?? null;
         // Drop a grain the control no longer offers — the agent can narrow the list
         // mid-session, and an override the viewer can't see is worse than none.
-        if (this.report && !isGranularityOffered(this.report, this._filterState.frequency())) {
+        if (this.report() && !isGranularityOffered(this.report(), this._filterState.frequency())) {
             this._filterState.setFrequency(null);
         }
         const items = reportId
@@ -5149,7 +6035,7 @@ class ReportComponent {
         if (groupByItem) {
             items.unshift(groupByItem);
         }
-        this.reportFilterConfig = {
+        this.reportFilterConfig.set({
             // Never touch the URL or persist filter state — report filters are
             // session-only, owned by ReportFilterStateService.
             queryParam: false,
@@ -5162,14 +6048,14 @@ class ReportComponent {
                 // Not a filter group — the grain is read straight off the query.
                 this._filterState.setFrequency(query?.[GROUP_BY_ITEM] || null);
             },
-        };
+        });
     }
     // The report's group-by control as an fs-filter item, or null when the report
     // has none to show. Seeded from the session state so the grain the viewer
     // picked survives the report being re-fetched after a chat edit.
     _groupByItem() {
-        return this.report
-            ? groupByFilterItem(this.report, this._filterState.frequency())
+        return this.report()
+            ? groupByFilterItem(this.report(), this._filterState.frequency())
             : null;
     }
     _refreshReportName(reportId) {
@@ -5178,11 +6064,10 @@ class ReportComponent {
             .subscribe((reports) => {
             const renamed = reports.find((report) => report.id === reportId);
             if (renamed) {
-                this.selected = renamed;
-                if (this.report) {
-                    this.report = { ...this.report, name: renamed.name };
+                this.selected.set(renamed);
+                if (this.report()) {
+                    this.report.set({ ...this.report(), name: renamed.name });
                 }
-                this._cdRef.markForCheck();
             }
         });
     }
@@ -5197,8 +6082,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-CtKYuRcT.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 && editMode) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\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_customize\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      </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%}.master-toggle.active{background:#eceff3}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: 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: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B9nl9XKM.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() && editMode()) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\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_customize\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      </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%}.master-toggle.active{background:#eceff3}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: 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: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
             type: Component,
@@ -5212,7 +6097,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-CtKYuRcT.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B9nl9XKM.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -5223,7 +6108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatIcon,
                         MatTooltip,
                         ReportCanvasComponent,
-                    ], template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report && editMode) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\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_customize\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      </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%}.master-toggle.active{background:#eceff3}\n"] }]
+                    ], template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected()?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports()\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report() && editMode()) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\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_customize\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      </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%}.master-toggle.active{background:#eceff3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _split: [{
                 type: ViewChild,
                 args: ['split', { static: true }]
@@ -5590,7 +6475,7 @@ class SemanticDatabaseComponent {
             .pipe(
         // A hard stream/transport failure (the build couldn't even start)
         // finalizes here — completed$ won't fire in that case.
-        tap({ error: (error) => this._finalizeBuild(error) }), filter((event) => event?.type === StreamEventType.Data
+        tap$1({ error: (error) => this._finalizeBuild(error) }), filter((event) => event?.type === StreamEventType.Data
             && SemanticDatabaseComponent.LOG_KINDS.includes(event.data?.kind)
             && typeof event.data.line === 'string'), map((event) => event.data.line));
         this._process
@@ -5729,7 +6614,7 @@ class SemanticDatabaseComponent {
     // quietly, so the tab settles and callers never see the error.
     _loadStatus() {
         return this._reportData.semanticBuildStatus()
-            .pipe(tap((status) => {
+            .pipe(tap$1((status) => {
             this.statusError.set(false);
             this.status.set(status);
         }), catchError(() => {
@@ -5816,13 +6701,13 @@ class GlobalSettingsComponent {
     save = () => {
         if (this.selectedTab === 'general') {
             return this._reportData.saveSettings({ semanticBuildConcurrency: this.concurrency() })
-                .pipe(tap((settings) => {
+                .pipe(tap$1((settings) => {
                 this._applySettings(settings);
                 this._message.success('Settings saved');
             }));
         }
         return this._reportData.saveInstructions(this.content())
-            .pipe(tap((instructions) => {
+            .pipe(tap$1((instructions) => {
             this._message.success('AI knowledge saved');
             this._dialogRef.close(instructions);
         }));
@@ -6398,9 +7283,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], 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\n          class=\"fs-row.gap-sm.align-center node-row\"\n          [class.deleted]=\"data.deleted\">\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 || data.deleted) {\n          <!-- A deleted report can't be opened (the backend only assembles\n               live ones, and one under a deleted folder is not on the live\n               listing), 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\n        <!-- Only on the row somebody deleted. Everything under a deleted\n             folder is muted with it, but was not deleted itself. -->\n        @if (data.stateDeleted) {\n          <fs-chip size=\"tiny\">Deleted</fs-chip>\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-row.deleted{opacity:.55}.node-icon{font-size:18px;width:18px;height:18px;flex:none}.node-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-empty{margin-top:10px}\n"] }]
         }], ctorParameters: () => [] });
 
+// The report view's chat gateway: the stock one, plus fields read at the
+// moment each turn is sent and merged into that turn's body only. The chat's
+// requestData can't carry them, because it is also the key of the conversation
+// list, and a change there reloads the list and drops the open conversation.
+//
+// It relies on FsAiChatData.chatStream(basePath, body, config) being the one
+// path a turn takes. Nothing else is overridden, so the conversation list and
+// the create never see these fields. It stands in for a per-turn input on
+// fs-ai-chat itself, and can be removed when @firestitch/ai ships one.
+class ReportAiChatData extends FsAiChatData {
+    // Set by the host view. A function, so it is read at send time.
+    turnData = () => ({});
+    chatStream(basePath, body, config = {}) {
+        return super.chatStream(basePath, { ...body, ...this.turnData() }, config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportAiChatData, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportAiChatData });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportAiChatData, decorators: [{
+            type: Injectable
+        }] });
+
 // A single report: the AI chat on the left, the report canvas on the right,
 // under an H2 title + settings gear. The host supplies [reportId] (from its
-// route) and switches reports by navigating — this component never picks one.
+// route) and switches reports through its own routes — this component never
+// picks one.
 class FsAiReportComponent {
     // The report this view is focused on — supplied by the host from the route.
     reportId = input(null);
@@ -6410,21 +7318,35 @@ class FsAiReportComponent {
     // 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');
+    // Whether the viewer's filters, group-by grain and list sorts live in the URL
+    // (g<groupId>, groupBy, s<componentId>; see report-url-state.ts), so a
+    // refresh or a shared link opens the report as it was seen. On by default; a
+    // host that mounts several reports on one route, or uses query keys shaped
+    // like g<n> or s<n> itself, turns it off.
+    urlState = input(true);
     // 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.
+    // The viewer moved to another page. This view writes the URL itself (right
+    // after this fires) — this is for hosts that track the open page for their
+    // own reasons.
     pageChanged = output();
-    report = null;
-    editMode = false;
+    report = signal(null);
+    editMode = signal(false);
+    // The toolbar's zone indicator ('New York (EDT)'): the zone every date in
+    // this report is filtered and grouped in. Empty when the server is too old
+    // to send the effective zone, and the indicator is not shown.
+    timezoneLabel = computed(() => {
+        const effectiveTimezone = this.report()?.effectiveTimezone;
+        return effectiveTimezone ? getTimezoneLabel(effectiveTimezone) : '';
+    });
     // 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;
+    pageId = signal(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
@@ -6454,23 +7376,61 @@ class FsAiReportComponent {
     });
     // The report-level filter toolbar (fs-filter). Rebuilt whenever the loaded
     // report (and thus its groups) changes.
-    reportFilterConfig;
+    reportFilterConfig = signal(null);
+    // Gates the toolbar fs-filter so it isn't rendered when there is nothing to
+    // put in it — no report-level filters and no group-by control.
+    reportHasFilters = computed(() => {
+        return this._reportGroups().length > 0 || !!this._groupByItem();
+    });
+    // fs-filter reads its config only once (at init). The template keys the
+    // toolbar fs-filter on this signature so it's recreated (and re-reads the
+    // rebuilt config) whenever the report-level filter set changes.
+    reportFilterKey = computed(() => {
+        return [
+            // The stored default is part of the signature: saving a new default in report
+            // settings rebuilds the config, but without a key change fs-filter keeps
+            // rendering the values it was created with until a full page reload.
+            groupBySignature(this.report()),
+            ...this._reportGroups().map((group) => `${group.id}:${group.level}:${group.label}:${defaultSignature(group)}`),
+        ].join('|');
+    });
     _split;
     _chatPanel;
     // Only the canvas knows which page is on screen, and a page-scoped export
     // has to ask it.
     _canvas;
     _reportData = inject(ReportData);
+    _reportAiChatData = inject(ReportAiChatData);
     _router = inject(Router);
     _route = inject(ActivatedRoute);
     _filterState = inject(ReportFilterStateService);
     _exportService = inject(ReportExportService);
+    _collector = inject(ReportExportCollectorService);
     _process = inject(FsProcess);
     _dialog = inject(MatDialog);
     _destroyRef = inject(DestroyRef);
-    _cdRef = inject(ChangeDetectorRef);
     _zone = inject(NgZone);
+    // The report whose URL state has been read. The URL is read only on a
+    // report's first load; a reload after a chat or dialog edit keeps the state
+    // in memory, which is newer than anything the URL holds.
+    _restoredReportId = null;
+    // Whether the canvas has reported the open page for this report. Until it
+    // has, the page param in the URL is the deep link still being honored, and
+    // the URL writer leaves it alone.
+    _pageReported = false;
+    // The canvas moved to another page. Merged into the single URL writer.
+    _pageWrite$ = new Subject();
     constructor() {
+        // Each chat turn carries what the viewer has on screen. Only the function
+        // is set here; it is called when a turn is sent.
+        this._reportAiChatData.turnData = () => ({ viewerState: this._chatViewerState() });
+        // The ONE writer of this view's query params. Page moves and viewer-state
+        // changes both funnel here, and auditTime(0) folds a burst (a bar re-sets
+        // every group it shows) into a single write. Every write carries the whole
+        // state, so a write that supersedes another loses nothing.
+        merge(this._filterState.urlChanges(), this._pageWrite$)
+            .pipe(auditTime(0), tap$1(() => this._writeUrl()), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
         // Point the shared data gateway at the configured base first (before any
         // load below reads it).
         effect(() => {
@@ -6479,27 +7439,32 @@ class FsAiReportComponent {
         // (Re)load whenever the host switches the report id.
         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);
-            }
-            else {
-                this.report = null;
-                this._buildReportConfig();
-                this._cdRef.markForCheck();
-            }
+            const pageId = this._pageIdFromUrl();
+            // Only the report id and the page param re-run this. The view state below
+            // is written here and read by the config build, so it stays untracked.
+            untracked(() => {
+                this.editMode.set(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);
+                this.pageId.set(pageId);
+                this._pageReported = false;
+                if (reportId != null) {
+                    this._loadReport(reportId);
+                }
+                else {
+                    this.report.set(null);
+                    this._buildReportConfig();
+                }
+            });
         });
         this._buildReportConfig();
     }
     toggleEditMode() {
-        this.editMode = !this.editMode;
+        this.editMode.update((editMode) => !editMode);
     }
     // The edit tools live in this toolbar, but the canvas owns what they act on
     // (the active page, the header/footer bands, which layer is live).
@@ -6515,12 +7480,13 @@ class FsAiReportComponent {
     // Report settings — name, page size, orientation, layout mode, delete. The
     // dialog performs the delete itself; we react to what it reports back.
     reportSettings() {
-        if (!this.report) {
+        const report = this.report();
+        if (!report) {
             return;
         }
-        const reportId = this.report.id;
+        const reportId = report.id;
         this._dialog.open(ReportSettingsComponent, {
-            data: { report: this.report },
+            data: { report },
             width: '460px',
         })
             .afterClosed()
@@ -6538,12 +7504,13 @@ class FsAiReportComponent {
     // Component settings — title, exact geometry, and the diagnostic views
     // (SQL, config, filter wiring).
     componentSettings(component) {
-        if (!this.report) {
+        const report = this.report();
+        if (!report) {
             return;
         }
-        const reportId = this.report.id;
+        const reportId = report.id;
         const dialogRef = this._dialog.open(ComponentSettingsComponent, {
-            data: { report: this.report, component },
+            data: { report, component },
             width: '640px',
         });
         // Filter add/remove/level changes persist immediately inside the dialog (no
@@ -6579,58 +7546,57 @@ 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.
+    // shared link comes back here (the write itself is _writeUrl's).
     onCanvasPageChanged(pageId) {
         // The deep link has been consumed; from here the canvas owns the page.
-        this.pageId = null;
+        this.pageId.set(null);
         this.chatPageId.set(pageId);
+        this._pageReported = true;
         this.pageChanged.emit(pageId);
-        const param = this.pageQueryParam();
-        if (!param) {
-            return;
-        }
-        this._router.navigate([], {
-            relativeTo: this._route,
-            queryParams: { [param]: pageId },
-            queryParamsHandling: 'merge',
-            replaceUrl: true,
-        });
+        this._pageWrite$.next();
     }
     // The canvas changed the report's structure (added a page) — re-fetch so the
     // new page renders; the canvas lands the view on it.
     onCanvasReportChanged() {
-        if (this.report) {
-            this._loadReport(this.report.id);
+        const report = this.report();
+        if (report) {
+            this._loadReport(report.id);
         }
     }
     // Export the report to PowerPoint, entirely client-side (native editable
     // charts; page = slide). The dock shows progress until the file saves.
     exportPowerpoint() {
-        if (!this.report) {
+        const report = this.report();
+        if (!report) {
             return;
         }
-        this._process.run('Exporting PowerPoint', this._exportService.powerpoint(this.report));
+        this._process.run('Exporting PowerPoint', this._exportService.powerpoint(report));
     }
     // Export to PDF, entirely client-side (offscreen ECharts at 3×; page = PDF page).
     exportPdf() {
-        if (!this.report) {
+        const report = this.report();
+        if (!report) {
             return;
         }
-        this._process.run('Exporting PDF', this._exportService.pdf(this.report));
+        this._process.run('Exporting PDF', this._exportService.pdf(report));
     }
-    // The raw data behind the whole report in one action: the server exports every
-    // component's full filtered dataset and zips one CSV per component, foldered
-    // by page. `thisPage` narrows it to the page the canvas is showing. Unlike the
-    // PDF/PowerPoint exports this is entirely server-side — nothing is collected
-    // in the browser, so it is not capped by what a slide can hold.
+    // The whole report as files in one action: the server writes one CSV per
+    // component, each what the screen shows (a chart or KPI as drawn, at the
+    // viewer's group-by grain; a list in full), and zips them foldered by page
+    // with an Export Notes.txt that records the filters as the bar reads them.
+    // Lists use their saved default sort; a header click is carried only by a
+    // component's own CSV export. `thisPage` narrows it to the page the canvas is
+    // showing. Unlike the PDF/PowerPoint exports the files are written
+    // server-side, so they are not capped by what a slide can hold.
     exportData(thisPage = false) {
-        const report = this.report;
+        const report = this.report();
         if (!report) {
             return;
         }
         const pageId = thisPage ? this._canvas?.activePage?.id ?? null : null;
-        this._process.download('Exporting data', this._reportData.exportReport(report.id, this._filterState.resolveForReport(report, pageId), pageId));
+        const filters = this._filterState.resolveForReport(report, pageId);
+        this._process.download('Exporting data', this._collector.getFilterSummary(report)
+            .pipe(switchMap$1((lines) => this._reportData.exportReport(report.id, filters, pageId, this._filterState.frequency(), lines))));
     }
     // React to each chat turn (fs-chat handles the request + persistence); we
     // only care about the report side effects this context's backend flags.
@@ -6668,6 +7634,16 @@ class FsAiReportComponent {
             handle.addEventListener('pointercancel', end);
         });
     }
+    // What the viewer has on screen as a chat turn sends it. The canvas
+    // selection counts only in edit mode: it is drawn only then, and it is kept
+    // (not cleared) when edit mode is left.
+    _chatViewerState() {
+        return {
+            granularity: this._filterState.frequency(),
+            selectedComponentId: this.editMode() ? this._canvas?.selectedComponentId() ?? null : null,
+            filters: this._filterState.viewerFilters(),
+        };
+    }
     _resizeTo(clientX) {
         const rect = this._split.nativeElement.getBoundingClientRect();
         if (rect.width === 0) {
@@ -6687,50 +7663,67 @@ class FsAiReportComponent {
         const pageId = Number(this._route.snapshot.queryParamMap.get(param));
         return Number.isFinite(pageId) && pageId > 0 ? pageId : null;
     }
+    // Writes the open page and the viewer state into the URL in one go. Only
+    // the keys this view owns are touched ('merge'), and replaceUrl keeps the
+    // writes out of the browser history: Back leaves the report rather than
+    // walking every page and filter visited.
+    _writeUrl() {
+        const report = this.report();
+        // A report still on screen while the host's next one loads must not write
+        // its state over the new report's URL.
+        if (!report || report.id !== this.reportId()) {
+            return;
+        }
+        const queryParams = this.urlState()
+            ? buildReportUrlParams(this._filterState.urlSnapshot(report), this._route.snapshot.queryParamMap)
+            : {};
+        const pageParam = this.pageQueryParam();
+        if (pageParam && this._pageReported) {
+            queryParams[pageParam] = this.chatPageId();
+        }
+        if (!Object.keys(queryParams).length) {
+            return;
+        }
+        this._router.navigate([], {
+            relativeTo: this._route,
+            queryParams,
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    }
     _loadReport(reportId, emitRenamed = false) {
         this._reportData.get(reportId)
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((report) => {
-            this.report = report;
-            this._filterState.init(report);
+            // The URL is read once per report, on its first load; every later load
+            // keeps the state in memory.
+            const restore = this.urlState() && reportId !== this._restoredReportId
+                ? readReportUrlParams(this._route.snapshot.queryParamMap)
+                : null;
+            this._restoredReportId = reportId;
+            this.report.set(report);
+            this._filterState.init(report, restore);
             this._buildReportConfig();
             if (emitRenamed) {
                 this.renamed.emit(report);
             }
-            this._cdRef.markForCheck();
         });
     }
     // Report-level filter groups in their saved order — the ones that render in
     // the toolbar (component-level groups render on their components).
     _reportGroups() {
-        return (this.report?.filterGroups ?? [])
+        return (this.report()?.filterGroups ?? [])
             .filter((group) => group.level === 'report' || group.level === 'both')
             .sort((a, b) => a.order - b.order);
     }
-    // Gates the toolbar fs-filter so it isn't rendered when there is nothing to
-    // put in it — no report-level filters and no group-by control.
-    get reportHasFilters() {
-        return this._reportGroups().length > 0 || !!this._groupByItem();
-    }
-    // fs-filter reads its config only once (at init). The template keys the
-    // toolbar fs-filter on this signature so it's recreated (and re-reads the
-    // rebuilt config) whenever the report-level filter set changes.
-    get reportFilterKey() {
-        return [
-            // The stored default is part of the signature: saving a new default in report
-            // settings rebuilds the config, but without a key change fs-filter keeps
-            // rendering the values it was created with until a full page reload.
-            groupBySignature(this.report),
-            ...this._reportGroups().map((group) => `${group.id}:${group.level}:${group.label}:${defaultSignature(group)}`),
-        ].join('|');
-    }
     // (Re)build the toolbar fs-filter config — the report-level filter items and
     // then the group-by control.
     _buildReportConfig() {
-        const reportId = this.report?.id ?? null;
+        const report = this.report();
+        const reportId = report?.id ?? null;
         // Drop a grain the control no longer offers — the agent can narrow the list
         // mid-session, and an override the viewer can't see is worse than none.
-        if (this.report && !isGranularityOffered(this.report, this._filterState.frequency())) {
+        if (report && !isGranularityOffered(report, this._filterState.frequency())) {
             this._filterState.setFrequency(null);
         }
         const items = reportId
@@ -6744,9 +7737,11 @@ class FsAiReportComponent {
         if (groupByItem) {
             items.unshift(groupByItem);
         }
-        this.reportFilterConfig = {
-            // Never touch the URL or persist filter state — report filters are
-            // session-only, owned by ReportFilterStateService.
+        this.reportFilterConfig.set({
+            // fs-filter never touches the URL or persists filter state: its keys are
+            // not namespaced, it writes outside the router, and it would freeze a
+            // rolling range as two dates. ReportFilterStateService owns the values,
+            // and _writeUrl is the one writer of the URL.
             queryParam: false,
             persist: false,
             items,
@@ -6757,18 +7752,19 @@ class FsAiReportComponent {
                 // Not a filter group — the grain is read straight off the query.
                 this._filterState.setFrequency(query?.[GROUP_BY_ITEM] || null);
             },
-        };
+        });
     }
     // The report's group-by control as an fs-filter item, or null when the report
     // has none to show. Seeded from the session state so the grain the viewer
     // picked survives the report being re-fetched after a chat edit.
     _groupByItem() {
-        return this.report
-            ? groupByFilterItem(this.report, this._filterState.frequency())
+        const report = this.report();
+        return report
+            ? groupByFilterItem(report, this._filterState.frequency())
             : 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 }, pageQueryParam: { classPropertyName: "pageQueryParam", publicName: "pageQueryParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", renamed: "renamed", pageChanged: "pageChanged" }, 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 }, urlState: { classPropertyName: "urlState", publicName: "urlState", 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,
@@ -6776,9 +7772,13 @@ class FsAiReportComponent {
             ReportPptxService,
             ReportPdfService,
             ReportExportService,
+            // fs-ai-chat sits in this template, so it resolves its gateway here: the
+            // report one, which adds the viewer's state to each turn it sends.
+            ReportAiChatData,
+            { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CtKYuRcT.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      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode\"\n          [matTooltip]=\"editMode ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</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]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\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            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\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__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.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$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B9nl9XKM.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      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- The zone every date in this report is filtered and grouped in, the\n           same for every viewer. Shown only when the server sends it; a click\n           opens Report settings, where it is changed. -->\n      @if (report()?.effectiveTimezone; as effectiveTimezone) {\n        <button\n            mat-button\n            type=\"button\"\n            class=\"fs-ai-report__timezone\"\n            [matTooltip]=\"'Dates are filtered and grouped in ' + effectiveTimezone + ' for everyone. Change it in Report settings.'\"\n            (click)=\"reportSettings()\">\n          <mat-icon>schedule</mat-icon>\n          {{ timezoneLabel() }}\n        </button>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</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]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\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            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\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__timezone{color:var(--fs-color-text-muted, rgba(0, 0, 0, .54));white-space:nowrap;flex:0 0 auto}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.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$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
             type: Component,
@@ -6790,8 +7790,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPptxService,
                         ReportPdfService,
                         ReportExportService,
+                        // fs-ai-chat sits in this template, so it resolves its gateway here: the
+                        // report one, which adds the viewer's state to each turn it sends.
+                        ReportAiChatData,
+                        { provide: FsAiChatData, useExisting: ReportAiChatData },
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CtKYuRcT.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B9nl9XKM.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -6800,7 +7804,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      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode\"\n          [matTooltip]=\"editMode ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</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]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\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            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\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__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report()?.name }}</h2>\n\n    @if (report()) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters()) {\n        @for (key of [reportFilterKey()]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig()\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode()) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- The zone every date in this report is filtered and grouped in, the\n           same for every viewer. Shown only when the server sends it; a click\n           opens Report settings, where it is changed. -->\n      @if (report()?.effectiveTimezone; as effectiveTimezone) {\n        <button\n            mat-button\n            type=\"button\"\n            class=\"fs-ai-report__timezone\"\n            [matTooltip]=\"'Dates are filtered and grouped in ' + effectiveTimezone + ' for everyone. Change it in Report settings.'\"\n            (click)=\"reportSettings()\">\n          <mat-icon>schedule</mat-icon>\n          {{ timezoneLabel() }}\n        </button>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode()\"\n          [matTooltip]=\"editMode() ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</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]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\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            [pageId]=\"pageId()\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\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__timezone{color:var(--fs-color-text-muted, rgba(0, 0, 0, .54));white-space:nowrap;flex:0 0 auto}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.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 }]
@@ -6824,5 +7828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
-//# sourceMappingURL=firestitch-report-firestitch-report-Df1IXrEs.mjs.map
+export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, REPORT_CHART_FONT_FAMILY as a, REPORT_AXIS_LABEL_FONT_SIZE as b, ReportComponent as c, FsAiReportComponent as d, ReportData as e, ReportService as f, ReportFilterStateService as g, ReportNodeType as h, ReportState as i };
+//# sourceMappingURL=firestitch-report-firestitch-report-Bb65HEYB.mjs.map