@firestitch/report 18.11.1 → 18.13.0

package/fesm2022/{firestitch-report-firestitch-report-CJW0lLdW.mjs → firestitch-report-firestitch-report-DbdLxQSE.mjs}

@@ -27,14 +27,16 @@ import * as i6$1 from '@firestitch/message';
 import { FsMessage, FsMessageModule } from '@firestitch/message';
 import * as i3$1 from '@firestitch/zoom-pan';
 import { FsZoomPanComponent, FsZoomPanModule } from '@firestitch/zoom-pan';
-import { of, forkJoin, Subject, defer, merge, map as map$1, switchMap as switchMap$1, timer, catchError as catchError$1, filter as filter$1, tap as tap$1, distinctUntilChanged, mergeMap, from, debounceTime, throwError, EMPTY, BehaviorSubject } from 'rxjs';
-import { FsApi, DisplayApiError, StreamEventType } from '@firestitch/api';
+import { of, forkJoin, Subject, defer, merge, map as map$1, switchMap as switchMap$1, timer, catchError as catchError$1, filter as filter$1, mergeMap, EMPTY, concatWith, throwError, tap as tap$1, distinctUntilChanged, from, debounceTime, BehaviorSubject } from 'rxjs';
+import { FsApi, RequestMethod, StreamEventType, DisplayApiError } from '@firestitch/api';
+import { GridFieldType, GridGranularity, canonicalGridLayout, convertDateFilter, GridFormat, GridUnits, FsGridComponent, FsGridCellDirective, GridRowKind, readGridTable } from '@firestitch/grid';
 import { parseISO, isValid, addDays, min, max, startOfDay, isLastDayOfMonth, endOfMonth, addMonths, addYears, addQuarters, addWeeks, formatISO, format, startOfYear, startOfQuarter, startOfMonth, subMonths, subDays, subWeeks, startOfWeek, endOfWeek } from 'date-fns';
 import { toZonedTime } from 'date-fns-tz';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i3 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
+import { HttpErrorResponse, HttpContext } from '@angular/common/http';
 import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i1 from '@firestitch/list';
 import { FsListComponent, PaginationStrategy, FsListModule } from '@firestitch/list';
@@ -55,7 +57,6 @@ import * as i3$2 from '@firestitch/mask';
 import { FsMaskModule } from '@firestitch/mask';
 import * as i6 from '@firestitch/tabs';
 import { FsTabsModule } from '@firestitch/tabs';
-import { HttpContext } from '@angular/common/http';
 import * as i9 from '@firestitch/datepicker';
 import { FsDatePickerModule, FS_DATEPICKER_CONFIG_DEFAULT, FS_DATEPICKER_CONFIG } from '@firestitch/datepicker';
 import * as i4 from '@firestitch/skeleton';
@@ -337,6 +338,17 @@ class ReportData {
             ...config,
         });
     }
+    // One grid tile's read (ReportGridSource): the same route as componentData,
+    // its body's `grid` the grid's request. The answer streams as
+    // newline-delimited JSON, one event per line: {report} first, then
+    // {grid: part} for each part of the read, a heartbeat {at} between
+    // statements, and the envelope with the read's summary last. The body's
+    // filters and state narrow the rows as they narrow any tile's; the grid's
+    // own column filters travel inside grid.layout. `isExport` is
+    // componentData's.
+    componentGrid(reportId, componentId, filters, state, grid, isExport = false, config = {}) {
+        return this._api.stream(RequestMethod.Post, this._path(`${reportId}/components/${componentId}/data`), { filters, state, export: isExport, grid }, config);
+    }
     // The numbers of a page's values — or the master's, for the header and
     // footer — in one request: a row per value that page reads, shown by some
     // text or read by a formula it shows (ReportPageValue). `filters` carries
@@ -380,8 +392,8 @@ class ReportData {
     // resolves to a presigned URL for a zip of one CSV per component, foldered by
     // 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 `filterLines` is the filter bar as the viewer reads it
+    // report's group-by grain (the server re-buckets only the tiles that follow
+    // it: time-series charts and tables over a time axis), and `filterLines` is the filter bar as the viewer reads it
     // (exportLines), which the notes file writes. Their text goes as
     // filterSummary too, for a server that does not read filterLines; the
     // lines are left out when there are none. `states` is each tile's own
@@ -4448,6 +4460,19 @@ function crumbLabel(step, locale, full) {
     return formatPeriodLabel(String(step.value), step.level, false, locale, full ? ReportChartDateLabel.Long : ReportChartDateLabel.Short);
 }
 
+// Whether a component is a chart on a time x-axis.
+function isTimeSeriesChart(component) {
+    return component.type === 'chart' && component.config?.xAxis?.kind === 'time';
+}
+// Whether the report's group-by grain applies to a tile: the server names the
+// field it re-buckets (followsGroupBy) on a time-series chart and on a table
+// over a time axis, and drops the grain for every other tile. A server that
+// predates tables following the group-by names none, and there a chart on a
+// time x-axis is the only tile that follows it.
+function followsGroupBy(component) {
+    return !!component.followsGroupBy || isTimeSeriesChart(component);
+}
+
 // A date-range boundary as the picked LOCAL calendar day (no time, no tz).
 // Date-range filters are calendar-day semantics, so the boundary must carry
 // only Y-M-D — never a timezone-bearing instant the backend would shift.
@@ -4784,11 +4809,12 @@ function listSearchItem(value) {
         default: value ?? undefined,
     };
 }
-// Whether the report has a chart the group-by control can re-bucket. A time
-// x-axis is the whole qualification: the control changes the grain of that
-// axis, and a category axis has no grain to change.
-function hasTimeSeriesChart(report) {
-    return (report?.pages ?? []).some((page) => (page.components ?? []).some((component) => component.type === 'chart' && component.config?.xAxis?.kind === 'time'));
+// Whether the report has a tile the group-by control can re-bucket: a chart
+// on a time x-axis or a table over a time axis (followsGroupBy). A time axis
+// is the whole qualification: the control changes its grain, and a category
+// axis has no grain to change.
+function hasGroupByTile(report) {
+    return (report?.pages ?? []).some((page) => (page.components ?? []).some(followsGroupBy));
 }
 // The grains the report's group-by control offers, named for the viewer. WHICH
 // of them comes from the report; how they read comes from GRANULARITY_OPTIONS.
@@ -4819,7 +4845,7 @@ function groupByFilterItem(report, initial) {
     // Only an EXPLICIT false hides the control. An absent block means a report
     // served by a build that predates the control being stored, and every one of
     // those had one — the backend resolves it the same way (ReportGroupBy).
-    if (groupBy?.enabled === false || !hasTimeSeriesChart(report)) {
+    if (groupBy?.enabled === false || !hasGroupByTile(report)) {
         return null;
     }
     const values = groupByOptions(report);
@@ -4939,10 +4965,10 @@ function selectQueryValues(raw) {
 // read of the data. The list is positive, so a type added later (or one this
 // viewer does not know) is never taken for a tile. The server's twin is
 // ReportComponentModel::isTile().
-const TILE_TYPES = ['chart', 'list', 'kpi'];
-// Whether a component is a tile: a chart, a list or a KPI. Only a tile is
-// drawn as one, fetched, exported as a file or counted among a filter group's
-// tiles; every loop over a report's tiles reads this.
+const TILE_TYPES = ['chart', 'list', 'grid', 'kpi'];
+// Whether a component is a tile: a chart, a list, a grid or a KPI. Only a
+// tile is drawn as one, fetched, exported as a file or counted among a filter
+// group's tiles; every loop over a report's tiles reads this.
 function isTile(component) {
     return !!component && TILE_TYPES.includes(component.type);
 }
@@ -5129,6 +5155,10 @@ const MATCH_ANY_LINE = 'Filters in the report bar: match any';
 const MATCH_ALL_CHIP = 'Match: all filters';
 // A group's label when it has none.
 const UNLABELED_GROUP = 'Filter';
+// How many picks a column filter's line names before 'and N more'.
+const GRID_FILTER_NAMED = 10;
+// What a blank key reads as in a column filter's line.
+const GRID_BLANK_KEY = '(blank)';
 // The label of the group-by line when the report names no control.
 const GROUP_BY_LABEL = 'Group By';
 // One filter group's value as text ('Region: West, East'), or null when the
@@ -5347,6 +5377,68 @@ function pageName(report, pageId) {
     }
     return report.pages[index].name || `Page ${index + 1}`;
 }
+// One column filter of a table as a file prints it: 'Region: East, West',
+// 'Exclude Region: North (rows with no Region are kept)', 'Customer: contains
+// "smith"', 'Amount: 10 to 50 (both included)', 'Ordered: Jan 2026 to Mar
+// 2026'. A key reads as its option's label, a blank key as (blank), known
+// from the null key itself; past GRID_FILTER_NAMED picks the rest are
+// counted. An exclude says what happens to the rows with no value: kept,
+// unless a blank key is among the keys left out. Null for a filter that
+// holds nothing.
+function gridFilterLineText(label, filter, field, locale) {
+    const exclude = !!filter.exclude;
+    const blanks = (excluded) => (exclude ? ` (rows with no ${label} ${excluded ? 'are left out' : 'are kept'})` : '');
+    const line = (text, excluded = false) => `${exclude ? 'Exclude ' : ''}${label}: ${text}${blanks(excluded)}`;
+    if (filter.keys?.length) {
+        const names = filter.keys.slice(0, GRID_FILTER_NAMED).map((key) => gridKeyName(key, field));
+        const more = filter.keys.length - names.length;
+        return line(`${names.join(', ')}${more > 0 ? ` and ${more} more` : ''}`, filter.keys.some((key) => key === null));
+    }
+    const contains = (filter.contains ?? '').trim();
+    if (contains) {
+        return `${label}: ${exclude ? 'doesn\'t contain' : 'contains'} "${contains}"${blanks(false)}`;
+    }
+    const isDate = field?.type === GridFieldType.Date;
+    const write = (end) => (isDate
+        ? gridDateText(String(end), filter.granularity ?? field?.granularities?.[0], locale)
+        : formatPlainNumber(Number(end), locale));
+    const has = (end) => end !== undefined && end !== null && end !== '';
+    if (has(filter.from) && has(filter.to)) {
+        return line(`${write(filter.from)} to ${write(filter.to)}${exclude || isDate ? '' : ' (both included)'}`);
+    }
+    if (has(filter.from)) {
+        return line(`${write(filter.from)} ${isDate ? 'or later' : 'or more'}`);
+    }
+    return has(filter.to) ? line(`${write(filter.to)} ${isDate ? 'or earlier' : 'or less'}`) : null;
+}
+// A key as a column filter's line names it: its option's label, else itself.
+function gridKeyName(key, field) {
+    if (key === null) {
+        return GRID_BLANK_KEY;
+    }
+    return field?.options?.find((option) => option.key !== null && String(option.key) === String(key))?.label ?? String(key);
+}
+// A date end at the grain the filter reads: 'Jan 2026', 'Q1 2026', '2026',
+// else the day.
+function gridDateText(value, granularity, locale) {
+    const match = /^(\d{4})-(\d{2})/.exec(value);
+    if (!match) {
+        return value;
+    }
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    switch (granularity) {
+        case GridGranularity.Year:
+            return String(year);
+        case GridGranularity.Quarter:
+            return `Q${Math.ceil(month / 3)} ${year}`;
+        case GridGranularity.Month:
+            return new Intl.DateTimeFormat(locale, { month: 'short', year: 'numeric', timeZone: 'UTC' })
+                .format(new Date(Date.UTC(year, month - 1, 1)));
+        default:
+            return dateBoundLabel(value, locale) ?? value;
+    }
+}
 
 // Filters inside text blocks: what each {{filter.<id>}} token reads as. The
 // value is the viewer's current one for the group, the one the filter bar
@@ -5524,18 +5616,10 @@ const PAGE_DIMENSION_MAX = 50;
 // ReportHeaderFooter::MAX_HEIGHT on the server, which clamps.
 const HEADER_FOOTER_MAX = 3;
 
-// Whether a component is a chart on a time x-axis: the only component the
-// report's group-by grain applies to. 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.
-function isTimeSeriesChart(component) {
-    return component.type === 'chart' && component.config?.xAxis?.kind === 'time';
-}
 // The interaction state one tile's data request carries, read off a snapshot
-// of the screen (the state service's snapshot()): the group-by grain
-// for a time-series chart, a list's sort, search and hidden columns, a
-// chart's drill path, and, while the groups match 'any', the groups that
+// of the screen (the state service's snapshot()): the group-by grain for a
+// tile that follows it (followsGroupBy), a list's sort, search and hidden
+// columns, a chart's drill path, and, while the groups match 'any', the groups that
 // combine (matchAnyGroupIds). The tile on screen, its CSV, the PDF and
 // PowerPoint collector and the zip all build their state here, so a file
 // always holds what the screen shows. A list's paging is the caller's. Never
@@ -5549,7 +5633,7 @@ function tileDataState(report, component, snapshot) {
         return state;
     }
     const tile = snapshot.tiles?.[component.id];
-    if (isTimeSeriesChart(component) && isChartGranularity(snapshot.groupBy)) {
+    if (followsGroupBy(component) && isChartGranularity(snapshot.groupBy)) {
         state.frequency = snapshot.groupBy;
     }
     if (component.type === 'list') {
@@ -5574,15 +5658,17 @@ function tileDataState(report, component, snapshot) {
 }
 // Each tile's state for the zip export (tileDataState), by component id: the
 // tiles of every page, or of `pageId` alone. The zip holds no header or
-// footer tile. A tile with nothing to send is left out, so an untouched report
-// sends no states at all.
-function zipExportStates(report, snapshot, pageId = null) {
+// footer tile. A table adds the layout the viewer put it in (`gridLayout`,
+// null while it shows its stored one). A tile with nothing to send is left
+// out, so an untouched report sends no states at all.
+function zipExportStates(report, snapshot, pageId = null, gridLayout = () => null) {
     const states = {};
     (report.pages ?? [])
         .filter((page) => !pageId || page.id === pageId)
         .flatMap((page) => page.components ?? [])
         .forEach((component) => {
-        const state = tileDataState(report, component, snapshot);
+        const layout = component.type === 'grid' ? gridLayout(component) : null;
+        const state = { ...tileDataState(report, component, snapshot), ...(layout ? { layout } : {}) };
         if (Object.keys(state).length) {
             states[component.id] = state;
         }
@@ -5954,6 +6040,72 @@ function listPriorAlias(outputs, alias, output) {
         : null;
 }
 
+// A table tile's layouts: the one its config authors, the canonical key two
+// layouts are compared by, and a viewer's layout moved onto a new authored one.
+const NO_LAYOUT = {};
+// The report's grains by the grid's name for each.
+const GRID_GRANULARITIES = {
+    day: GridGranularity.Day,
+    week: GridGranularity.Week,
+    month: GridGranularity.Month,
+    quarter: GridGranularity.Quarter,
+    year: GridGranularity.Year,
+};
+// The layout a table tile's config authors, or none.
+function authoredGridLayout(component) {
+    return component.config?.layout ?? NO_LAYOUT;
+}
+// A layout's canonical key: two layouts that draw the same table have the
+// same key, whatever order or defaults they were written with.
+function gridLayoutKey(layout) {
+    return JSON.stringify(canonicalGridLayout(layout));
+}
+// A viewer's layout moved onto the layout authored now, `base` being the key
+// of the authored layout they started from: the new authored layout, with the
+// viewer's own filters and sort (what `base` did not have) kept on the fields
+// it still places. A field the viewer filters takes their filters in place of
+// the authored ones, and a sort they changed replaces the authored sort.
+function rebasedGridLayout(session, base, authored) {
+    const started = JSON.parse(base);
+    const viewer = canonicalGridLayout(session);
+    const placed = new Set([
+        ...(authored.rows ?? []),
+        ...(authored.columns ?? []),
+        ...(authored.values ?? []),
+        ...(authored.details ?? []),
+    ].map((placement) => placement.field));
+    const startedFilters = new Set((started.filters ?? []).map((filter) => JSON.stringify(filter)));
+    const filters = (viewer.filters ?? [])
+        .filter((filter) => placed.has(filter.field) && !startedFilters.has(JSON.stringify(filter)));
+    const filtered = new Set(filters.map((filter) => filter.field));
+    const sorted = JSON.stringify(viewer.sort ?? []) !== JSON.stringify(started.sort ?? []);
+    const sort = (viewer.sort ?? []).filter((term) => placed.has(term.field));
+    return canonicalGridLayout({
+        ...authored,
+        filters: [...(authored.filters ?? []).filter((filter) => !filtered.has(filter.field)), ...filters],
+        sort: sorted && sort.length ? sort : authored.sort,
+    });
+}
+// A table's layout once the grain `field` reads at moves to `granularity` (the
+// report's group-by changed): its column filter on `field` converts to the
+// same days at the new grain when its edges line up, and is taken out
+// otherwise (convertDateFilter), so the read never sends a filter the field no
+// longer offers. `cleared` names the filter taken out and the grain the table
+// now groups by, as fs-grid's status line reads it. A layout with no filter on
+// the field, or one already at the grain, comes back as it is.
+function grainedGridLayout(layout, field, granularity) {
+    const grain = GRID_GRANULARITIES[granularity];
+    const filter = (layout.filters ?? []).find((item) => item.field === field);
+    if (!filter || (filter.granularity ?? GridGranularity.Day) === grain) {
+        return { layout, cleared: null };
+    }
+    const converted = convertDateFilter(filter, grain);
+    const filters = (layout.filters ?? [])
+        .map((item) => (item === filter ? converted : item))
+        .filter((item) => !!item);
+    return { layout: { ...layout, filters }, cleared: converted ? null : { field, granularity: grain } };
+}
+
 // 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) {
@@ -6054,11 +6206,11 @@ function emptyTemporaryState() {
 //
 // It is the one place the viewer's state lives while the report is open: the
 // group values, the group-by grain, the match, list sorts, searches and hidden
-// columns, the page and each chart's drill path. None of it is ever written to
-// the browser URL. It outlives a page switch (the canvas changes the page, not
-// this service) and goes with the report view: a reload starts a new service,
-// which opens on the report's authored defaults. changes() fires on every
-// change of it.
+// columns, the page, each chart's drill path and each table's layout. None of
+// it is ever written to the browser URL. It outlives a page switch (the canvas
+// changes the page, not this service) and goes with the report view: a reload
+// starts a new service, which opens on the report's authored defaults.
+// changes() fires on every change of it.
 //
 // The durable part reads as one document: snapshot() writes it, and
 // differsFromDefaults says whether the screen still shows the report's
@@ -6068,7 +6220,8 @@ function emptyTemporaryState() {
 //
 // Session-only, never in the snapshot: 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).
+// viewer's toggle shouldn't write to the report), and each table's layout,
+// which fs-grid sends with the table's own reads.
 class ReportFilterStateService {
     // The open report's effective zone (resolveReportTimezone). Relative presets
     // resolve against today in it, and date cells render in it.
@@ -6114,9 +6267,11 @@ class ReportFilterStateService {
     // Whether the screen differs from the report's authored defaults
     // (stateDiffers): what the report bar's 'Clear filters' shows for. A switch
     // of page does not count, and the temporary state never does.
+    // A table tile in a layout of the viewer's own counts too; it stays out of
+    // the snapshot, so no saved filter or link carries it.
     differsFromDefaults = computed(() => {
         this._revision();
-        return stateDiffers(this.authoredConfig(), this.snapshot());
+        return this._gridLayouts().size > 0 || stateDiffers(this.authoredConfig(), this.snapshot());
     });
     _values = new Map();
     _groups = new Map();
@@ -6126,7 +6281,8 @@ class ReportFilterStateService {
     // 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
+    // the tiles that follow it (followsGroupBy). Unset = each one uses its
+    // authored granularity. Never
     // saved to the report, 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.
@@ -6181,6 +6337,21 @@ class ReportFilterStateService {
     _drills = signal(new Map());
     // Emits the id of the chart whose drill path changed.
     _drillChanged$ = new Subject();
+    // The layout a viewer put each table tile in, by component id, while it
+    // differs from the tile's authored layout, with the authored layout it was
+    // changed from (ReportGridSessionLayout.base). A table showing its authored
+    // layout has no entry, and only a table has one.
+    _gridLayouts = signal(new Map());
+    // The groups a viewer left open in each table tile, by component id, so a
+    // tile drawn again (a page switch) opens them. Session only: no Clear
+    // resets them, differsFromDefaults never reads them, and fs-grid drops
+    // them itself once the row levels change.
+    _gridExpansions = signal(new Map());
+    // By table tile, the column filter a group-by change took out of it and
+    // the grain the table now groups by (_grainGridLayouts()), for fs-grid's
+    // status line. fs-grid hides it once the field is filtered again; a Clear
+    // drops it.
+    _gridClearedFilters = signal(new Map());
     // The temporary layer: kept apart from everything above, so snapshot()
     // and differsFromDefaults never read it.
     _temporary = signal(emptyTemporaryState());
@@ -6247,14 +6418,18 @@ class ReportFilterStateService {
     frequency() {
         return this._frequency;
     }
+    // Each table that follows the group-by has its filter on the group-by's
+    // field moved to the new grain first (_grainGridLayouts()), so a table on
+    // screen reads once, with both.
     setFrequency(frequency) {
         this._frequency = frequency;
+        this._grainGridLayouts();
         this._frequencyChanged$.next();
         this._stateChanged$.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
-    // group, so changesFor() can't carry it).
+    // Fires whenever the group-by grain changes — every tile that follows it
+    // listens so it refetches and re-buckets (the override isn't scoped to any
+    // filter group, so changesFor() can't carry it).
     frequencyChanges() {
         return this._frequencyChanged$.asObservable();
     }
@@ -6487,6 +6662,48 @@ class ReportFilterStateService {
         this._stateChanged$.next();
         return true;
     }
+    // The layout a table tile is on screen in: the viewer's own while they
+    // changed it from the layout authored now, else the authored one. It reads
+    // a signal, so a tile that shows it redraws when either moves.
+    gridLayout(component) {
+        return this.gridSessionLayout(component) ?? authoredGridLayout(component);
+    }
+    // The viewer's own layout of a table tile while it differs from the layout
+    // authored now, else null: the tile shows its stored layout. The chat
+    // sends it as the tile's layout.
+    gridSessionLayout(component) {
+        const session = this._gridLayouts().get(component.id);
+        return session?.base === gridLayoutKey(authoredGridLayout(component))
+            ? session.layout
+            : null;
+    }
+    // Records the layout a viewer put a table tile in (a re-pivot, a sort, a
+    // column filter). One that draws the authored layout clears the entry, so
+    // the tile reads as stored again. fs-grid reads the change itself, so only
+    // changes() hears about it, and only on a real change.
+    setGridLayout(component, layout) {
+        if (this._putGridLayout(component, layout)) {
+            this._stateChanged$.next();
+        }
+    }
+    // The column filter a group-by change took out of a table tile, or null
+    // (_gridClearedFilters).
+    gridClearedFilter(component) {
+        return this._gridClearedFilters().get(component.id) ?? null;
+    }
+    // The groups a viewer left open in a table tile, or undefined: the tile
+    // opens as its layout says.
+    gridExpansion(component) {
+        return this._gridExpansions().get(component.id);
+    }
+    // Records the groups open in a table tile, as fs-grid writes them out. It
+    // changes no read, so nothing hears about it.
+    setGridExpansion(component, expansion) {
+        if (component.type !== 'grid' || !expansion || this._gridExpansions().get(component.id) === expansion) {
+            return;
+        }
+        this._gridExpansions.set(new Map(this._gridExpansions()).set(component.id, expansion));
+    }
     // The durable state on screen as one document: the page, every group the
     // report has (null when it holds nothing, a cleared default included), the
     // match, the grain, and each tile's sort, search, hidden columns and drill
@@ -6850,6 +7067,57 @@ class ReportFilterStateService {
         this._listSearches.clear();
         this.listHidden.set(new Map());
         this._drills.set(new Map());
+        this._gridLayouts.set(new Map());
+        this._gridClearedFilters.set(new Map());
+    }
+    // setGridLayout() without the change event; true when the layout changed.
+    _putGridLayout(component, layout) {
+        const base = gridLayoutKey(authoredGridLayout(component));
+        const key = gridLayoutKey(layout);
+        const current = this._gridLayouts().get(component.id);
+        const unchanged = key === base
+            ? !current
+            : current?.base === base && gridLayoutKey(current.layout) === key;
+        if (component.type !== 'grid' || unchanged) {
+            return false;
+        }
+        const next = new Map(this._gridLayouts());
+        if (key === base) {
+            next.delete(component.id);
+        }
+        else {
+            next.set(component.id, { layout, base });
+        }
+        this._gridLayouts.set(next);
+        return true;
+    }
+    // Every table that follows the group-by (followsGroupBy), its column filter
+    // on the group-by's field moved to the grain it now reads at: the viewer's
+    // pick, else the table's own (grainedGridLayout()). Tables on other pages
+    // move too, so their files, the chat and their next paint read the moved
+    // filter. A filter taken out is noted on its tile (gridClearedFilter()); a
+    // note already there names the new grain, unless the field is filtered
+    // again, which ends it.
+    _grainGridLayouts() {
+        const cleared = new Map(this._gridClearedFilters());
+        this._tiles().forEach((component) => {
+            const groupBy = component.type === 'grid' ? component.followsGroupBy : null;
+            const granularity = this._frequency ?? groupBy?.granularity;
+            if (!groupBy || !granularity) {
+                return;
+            }
+            const grained = grainedGridLayout(this.gridLayout(component), groupBy.field, granularity);
+            const filtered = (grained.layout.filters ?? []).some((filter) => filter.field === groupBy.field);
+            const note = grained.cleared ?? (filtered ? null : cleared.get(component.id));
+            if (note) {
+                cleared.set(component.id, { ...note, granularity: GRID_GRANULARITIES[granularity] });
+            }
+            else {
+                cleared.delete(component.id);
+            }
+            this._putGridLayout(component, grained.layout);
+        });
+        this._gridClearedFilters.set(cleared);
     }
     // One chart's drill path; an empty path is the chart's top.
     _setDrillPath(componentId, path) {
@@ -6862,8 +7130,8 @@ class ReportFilterStateService {
         }
         this._drills.set(next);
     }
-    // After resetToDefaults(): every bar and tile repaints, and the
-    // time-series charts refetch when the grain moved.
+    // After resetToDefaults(): every bar and tile repaints, and the tiles that
+    // follow the group-by refetch when the grain moved.
     _notifyReset(frequency) {
         this._stateVersion.update((version) => version + 1);
         this._changed$.next(null);
@@ -6883,20 +7151,55 @@ class ReportFilterStateService {
         return this._tiles()
             .some((component) => component.id === componentId && component.type === 'chart');
     }
-    // Keeps the page and drill state to what the report (re)loaded by init()
-    // still has: drill paths on charts it still has, the page while it has it.
-    // On another report it starts again: match 'all', no drill and nothing
-    // temporary.
+    // Drops each table layout and expansion whose tile is gone or is no table
+    // any more. A layout whose tile is now authored otherwise (an edit, the
+    // agent's) moves onto the new authored layout, keeping the viewer's filters
+    // and sort terms on fields it still places (rebasedGridLayout), so the tile
+    // shows both changes; one that then draws the authored layout is dropped.
+    _pruneGridLayouts() {
+        const grids = new Map(this._tiles()
+            .filter((component) => component.type === 'grid')
+            .map((component) => [component.id, component]));
+        const kept = new Map();
+        this._gridLayouts().forEach((session, componentId) => {
+            const component = grids.get(componentId);
+            if (!component) {
+                return;
+            }
+            const authored = authoredGridLayout(component);
+            const base = gridLayoutKey(authored);
+            const layout = session.base === base ? session.layout : rebasedGridLayout(session.layout, session.base, authored);
+            if (gridLayoutKey(layout) !== base) {
+                kept.set(componentId, { layout, base });
+            }
+        });
+        this._gridLayouts.set(kept);
+        this._gridExpansions.set(new Map([...this._gridExpansions()]
+            .filter(([componentId]) => grids.has(componentId))));
+        this._gridClearedFilters.set(new Map([...this._gridClearedFilters()]
+            .filter(([componentId]) => grids.has(componentId))));
+    }
+    // Keeps the page, drill and table state to what the report (re)loaded by
+    // init() still has: drill paths on charts it still has, the page while it
+    // has it, and each table's layout and open groups while it is still a table
+    // (_pruneGridLayouts). On another report it starts again: match 'all', no
+    // drill, every table as authored and closed, and nothing temporary.
     _prunePageState(report) {
         if (this._report()?.id !== report.id) {
             this._match.set('all');
             this._pageId.set(null);
             this._drills.set(new Map());
+            this._gridLayouts.set(new Map());
+            this._gridExpansions.set(new Map());
+            this._gridClearedFilters.set(new Map());
             this._temporary.set(emptyTemporaryState());
         }
         this._report.set(report);
         this._drills.set(new Map([...this._drills()]
             .filter(([componentId]) => this._isChart(componentId))));
+        this._pruneGridLayouts();
+        // A table the report now authors otherwise reads at the grain on screen.
+        this._grainGridLayouts();
         if (this._pageId() && !(report.pages ?? []).some((page) => page.id === this._pageId())) {
             this._pageId.set(null);
         }
@@ -8066,6 +8369,340 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options() ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartLegendSelectChanged)=\"onLegendSelectChanged($event)\">\n</div>\n<app-report-component-note [data]=\"data()\"></app-report-component-note>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.chart-host{flex:1 1 0;width:100%;min-height:0}\n"] }]
         }] });
 
+// What a failed read says when the server gave no message of its own.
+const READ_FAILED = 'Failed to load data';
+// A stream that ended before its summary was cut off on the way: the parts
+// it brought may be short, so the read counts as failed.
+const STREAM_CUT = 'The table\'s answer was cut off. Try again.';
+// One grid tile's rows, read through the report: fs-grid asks, and each ask
+// is one componentGrid request. The params (ReportGridParams) are mapped onto
+// the request body's own names: the report filters go to `filters`, the 'any'
+// groups and the grain to `state`.
+//
+// The answer streams. Its report line is held in `report`, so output cells
+// format and the note strip fills from the first paint; each grid line is
+// passed on as one part, its output fields described as today's header
+// tooltip describes them (outputColumnNote); the envelope's summary is the
+// last part. A stream that ends without its summary is a failure.
+//
+// Every failure reaches the grid as an Error carrying the server's message:
+// a streamed request shows no error dialog of its own, so the grid's error
+// state is where it is read.
+class ReportGridSource {
+    _reportData;
+    _reportId;
+    _componentId;
+    // The report line of the latest read, null until one arrives.
+    report = signal(null);
+    _isExport;
+    _locale;
+    constructor(_reportData, _reportId, _componentId, options = {}) {
+        this._reportData = _reportData;
+        this._reportId = _reportId;
+        this._componentId = _componentId;
+        this._isExport = options.isExport ?? false;
+        this._locale = options.locale ?? (() => REPORT_FALLBACK_LOCALE);
+    }
+    read(request, params) {
+        return defer(() => {
+            let summary = null;
+            return this._stream$(request, params)
+                .pipe(mergeMap((event) => {
+                if (event.type === StreamEventType.Complete) {
+                    summary = envelopeSummary(event) ?? summary;
+                    return EMPTY;
+                }
+                return this._part$(event.data);
+            }), concatWith(defer(() => (summary ? of(summary) : throwError(() => new Error(STREAM_CUT))))), catchError$1((error) => throwError(() => readError(error))));
+        });
+    }
+    _stream$(request, params) {
+        return this._reportData.componentGrid(this._reportId, this._componentId, params.filters ?? [], requestState(params), request, this._isExport);
+    }
+    // One data line: the report line is held, a grid line is passed on as a
+    // part, and every other line is skipped.
+    _part$(data) {
+        const line = data;
+        if (line?.report) {
+            this.report.set(line.report);
+            return EMPTY;
+        }
+        return line?.grid ? of(this._described(line.grid)) : EMPTY;
+    }
+    // A part whose fields say what each output holds, as today's header
+    // tooltip says it. A field the report says nothing of keeps its own.
+    _described(part) {
+        if (!part.fields?.length) {
+            return part;
+        }
+        const report = this.report();
+        const locale = this._locale();
+        return {
+            ...part,
+            fields: part.fields.map((field) => {
+                const note = outputColumnNote(field.name, report, locale);
+                return note ? { ...field, description: note } : field;
+            }),
+        };
+    }
+}
+// The tile state the data request carries for a grid: the 'any' groups and
+// the grain, each only when set.
+function requestState(params) {
+    return {
+        ...(params.matchAnyGroupIds?.length ? { matchAnyGroupIds: [...params.matchAnyGroupIds] } : {}),
+        ...(params.frequency ? { frequency: params.frequency } : {}),
+    };
+}
+// The read's summary from the envelope that closes the stream
+// ({data: {data: {grid}}, code}), or null for the bare end-of-response event.
+function envelopeSummary(event) {
+    return event.data?.data?.data?.grid ?? null;
+}
+// Any failure as an Error: the server's message when it sent one.
+function readError(error) {
+    if (error instanceof HttpErrorResponse) {
+        const message = error.error?.message;
+        return new Error(typeof message === 'string' && message ? message : READ_FAILED);
+    }
+    return error instanceof Error ? error : new Error(READ_FAILED);
+}
+
+// A detail cell of an output field (a prior, a change, a % change, a rank)
+// as a list writes it: a change reads its prior beside it on the line, so a
+// missing baseline reads '—' and a zero one 'n/a', and the cell's title says
+// why, as the list's hover does. A value it holds keeps the grid's own text
+// (its placement's format); a rank change is written whole, since a new rank
+// reads apart from an unranked line. Every other cell is the grid's text,
+// with no title.
+class ReportGridCellPipe {
+    // The cell's raw value, its field, its line's record (absent on a group or
+    // total row) and the grid's own text, from the fsGridCell context.
+    transform(value, field, record, text, report, format) {
+        const name = field?.name ?? '';
+        const output = record ? report?.outputs?.[name] : null;
+        if (!output || !record) {
+            return { text, title: null };
+        }
+        const priorAlias = output.role === 'change' || output.role === 'percent_change'
+            ? laneOutputAlias(report?.outputs, name, 'prior')
+            : null;
+        const formatted = formatOutputValue(value, output, null, format, {
+            ...(priorAlias ? { prior: record[priorAlias] } : {}),
+            floor: report?.comparison?.floor ?? null,
+            empty: '',
+        });
+        const isMissing = value === null || value === undefined || value === '';
+        return { text: isMissing || output.kind === 'rank' ? formatted.text : text, title: formatted.title };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportGridCellPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ReportGridCellPipe, isStandalone: true, name: "fsReportGridCell" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportGridCellPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fsReportGridCell',
+                    standalone: true,
+                }]
+        }] });
+
+const VALUE_FORMATS = {
+    [GridFormat.Number]: ReportValueFormat.Number,
+    [GridFormat.Percent]: ReportValueFormat.Percent,
+    [GridFormat.Currency]: ReportValueFormat.Currency,
+};
+const NUMBER_UNITS = {
+    [GridUnits.None]: ReportNumberUnits.None,
+    [GridUnits.Thousands]: ReportNumberUnits.Thousands,
+    [GridUnits.Millions]: ReportNumberUnits.Millions,
+    [GridUnits.Auto]: ReportNumberUnits.Auto,
+};
+// What an abbreviated number's suffix multiplies it by, when a viewer types one.
+const UNIT_SUFFIXES = { k: 1e3, m: 1e6 };
+const YES = 'Yes';
+const NO = 'No';
+// A grid tile's formatter: every value written as the report writes it on
+// a list today. An output number reads through formatOutputValue with what
+// the report line says the output holds (a change is signed, a missing prior
+// reads as the list's dash); a plain number through formatNumber; a date in
+// the report's locale, an instant in its zone. The placement's format,
+// precision and units win over the field's.
+function reportGridFormatter(context) {
+    return {
+        format: (value, field, placement) => formatGridValue(context, value, field, placement),
+        toNumber: (text, field, placement) => readGridNumber(context, text, field, placement),
+    };
+}
+function formatGridValue(context, value, field, placement) {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+    switch (field.type) {
+        case GridFieldType.Number:
+            return formatGridNumber(context, value, field, placement);
+        case GridFieldType.Date:
+        case GridFieldType.Datetime:
+            return formatReportDate(value, context.timezone, context.format.locale);
+        case GridFieldType.Boolean:
+            return value ? YES : NO;
+        default:
+            return optionLabel(value, field) ?? String(value);
+    }
+}
+function formatGridNumber(context, value, field, placement) {
+    const spec = numberSpec(field, placement);
+    const output = isAggregate(placement) ? null : context.report?.outputs?.[field.name];
+    return output
+        ? formatOutputValue(value, output, spec, context.format).text
+        : formatNumber(value, spec, context.format);
+}
+// The format, precision and units a number is written with: the placement's,
+// else the field's.
+function numberSpec(field, placement) {
+    const placed = placement;
+    const format = placed?.format ?? field.format;
+    const precision = placed?.precision ?? field.precision;
+    const units = placed?.units ?? field.units;
+    return {
+        ...(format ? { format: VALUE_FORMATS[format] } : {}),
+        ...(typeof precision === 'number' ? { precision } : {}),
+        ...(units ? { units: NUMBER_UNITS[units] } : {}),
+    };
+}
+// A value placement is an aggregate of the field, not the output itself.
+function isAggregate(placement) {
+    return !!placement?.aggregation;
+}
+function optionLabel(value, field) {
+    return field.options?.find((option) => option.key === value)?.label ?? null;
+}
+// A number a viewer typed, read in the report's locale: its grouping dropped,
+// its decimal mark read, a K or M suffix multiplied out, and a percent of a
+// ratio-percent report read back to its ratio. null when it is no number.
+function readGridNumber(context, text, field, placement) {
+    const decimal = decimalMark(context.format.locale);
+    const trimmed = text.trim().toLowerCase();
+    const multiplier = UNIT_SUFFIXES[trimmed.slice(-1)] ?? 1;
+    const digits = trimmed
+        .split(decimal).map((part) => part.replace(/[^0-9-]/g, '')).join('.');
+    const number = digits && digits !== '-' && digits !== '.' ? Number(digits) * multiplier : NaN;
+    if (!Number.isFinite(number)) {
+        return null;
+    }
+    const isPercent = (placement?.format ?? field.format) === GridFormat.Percent;
+    return isPercent && context.format.ratioPercent ? number / 100 : number;
+}
+function decimalMark(locale) {
+    return numberFormat(locale, {}).formatToParts(1.5).find((part) => part.type === 'decimal')?.value ?? '.';
+}
+
+// A grid tile: fs-grid over the tile's rows, read through ReportGridSource.
+//
+// - The params (the report filters the tile resolves to and the 'any'
+//   groups) are seeded before the first render, so no read goes out without
+//   them. After that a change to one of the tile's filter groups settles for
+//   TILE_REFRESH_DEBOUNCE_MS, so a sweep of changes costs one read; one sent
+//   under an older state version is dropped.
+// - The layout on screen is the state service's (gridLayout): the viewer's
+//   own while they changed it from the layout authored now, else the
+//   authored one. It outlives a page switch, and the chat reads it. So do
+//   the groups the viewer left open (gridExpansion), which a Clear leaves.
+// - A state version move (Clear filters, a saved filter) skips the wait; the
+//   reset has put the authored layout back in the same tick, so it costs one
+//   read.
+// - A table that follows the report's group-by (followsGroupBy) sends its
+//   grain, and reads again at once when it changes. The state service has
+//   moved its filter on the group-by's field to the new grain by then, or
+//   taken it out (clearedFilter, which the status line names), so one read
+//   goes out and nothing paints unfiltered.
+// - fs-grid compares the layout and params by value: a cloned value never
+//   reads again.
+// - An output's detail cell is drawn by fsReportGridCell, so a change tells
+//   a missing prior from a zero one and says why on hover, as a list does.
+class ComponentGridComponent {
+    reportId = input.required();
+    component = input.required();
+    params = signal(null);
+    controls = computed(() => this.component().config?.controls ?? {});
+    source = computed(() => new ReportGridSource(this._reportData, this.reportId(), this._componentId(), {
+        locale: () => this._filterState.formatContext().locale,
+    }));
+    layout = computed(() => this._filterState.gridLayout(this.component()));
+    clearedFilter = computed(() => this._filterState.gridClearedFilter(this.component()));
+    // Read once: fs-grid owns the open groups from then on and writes them out.
+    expansion = signal(undefined);
+    noteData = computed(() => this.source().report());
+    formatContext = computed(() => this._filterState.formatContext());
+    formatter = computed(() => reportGridFormatter({
+        format: this._filterState.formatContext(),
+        timezone: this._filterState.timezone(),
+        report: this.source().report(),
+    }));
+    _componentId = computed(() => this.component().id);
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    _destroyRef = inject(DestroyRef);
+    // The state version the params on screen were read under.
+    _paramsVersion = 0;
+    ngOnInit() {
+        this.expansion.set(this._filterState.gridExpansion(this.component()));
+        this._init();
+    }
+    setLayout(layout) {
+        this._filterState.setGridLayout(this.component(), layout);
+    }
+    setExpansion(expansion) {
+        this._filterState.setGridExpansion(this.component(), expansion);
+    }
+    _init() {
+        this._paramsVersion = this._filterState.stateVersion();
+        this.params.set(this._readParams());
+        this._filterState.changesFor(this.component())
+            .pipe(switchMap$1(() => this._settled$()), tap$1(() => this._applyParams()), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+        if (followsGroupBy(this.component())) {
+            this._filterState.frequencyChanges()
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => this._applyParams());
+        }
+    }
+    // A change, once it has settled: at once when the state version moved,
+    // else after the debounce; dropped when the version moves while it waits,
+    // since that move brings its own change.
+    _settled$() {
+        const version = this._filterState.stateVersion();
+        const moved = version !== this._paramsVersion;
+        return (moved ? of(0) : timer(TILE_REFRESH_DEBOUNCE_MS))
+            .pipe(filter$1(() => this._filterState.stateVersion() === version), map$1(() => undefined));
+    }
+    _applyParams() {
+        this._paramsVersion = this._filterState.stateVersion();
+        this.params.set(this._readParams());
+    }
+    // The tile's report filters, 'any' groups and group-by grain as they stand
+    // (tileState()).
+    _readParams() {
+        const component = this.component();
+        const { matchAnyGroupIds, frequency } = this._filterState.tileState(component);
+        return {
+            filters: this._filterState.resolveForComponent(component),
+            ...(matchAnyGroupIds?.length ? { matchAnyGroupIds } : {}),
+            ...(frequency ? { frequency } : {}),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentGridComponent, isStandalone: true, selector: "app-report-component-grid", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: true, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- The comparison and window note strip above the table, from the report\n     line of the latest read; the windows' descriptions and notes go in each\n     column's \"About this column\" instead. -->\n<div class=\"fs-column grid-pane\">\n  <app-report-component-note\n    [data]=\"noteData()\"\n    [windowNotes]=\"false\">\n  </app-report-component-note>\n  <!-- The params are seeded before the first render, so the grid's first read\n       carries the tile's report filters. -->\n  @if (params(); as params) {\n    <fs-grid\n      class=\"fs-flex\"\n      [source]=\"source()\"\n      [layout]=\"layout()\"\n      [expansion]=\"expansion()\"\n      [clearedFilter]=\"clearedFilter()\"\n      (expansionChange)=\"setExpansion($event)\"\n      [params]=\"params\"\n      [controls]=\"controls()\"\n      [formatter]=\"formatter()\"\n      (layoutChange)=\"setLayout($event)\">\n      <ng-template fsGridCell let-value let-field=\"field\" let-record=\"record\" let-text=\"text\">\n        @if (value | fsReportGridCell: field : record : text : noteData() : formatContext(); as shown) {\n          <span [attr.title]=\"shown.title\">{{ shown.text }}</span>\n        }\n      </ng-template>\n    </fs-grid>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-pane{height:100%;min-height:0}fs-grid{min-height:0}\n"], dependencies: [{ kind: "component", type: FsGridComponent, selector: "fs-grid", inputs: ["source", "layout", "controls", "params", "expansion", "panel", "editorOpen", "formatter", "clearedFilter"], outputs: ["layoutChange", "expansionChange", "panelChange", "editorOpenChange"] }, { kind: "directive", type: FsGridCellDirective, selector: "[fsGridCell]" }, { kind: "component", type: ComponentNoteComponent, selector: "app-report-component-note", inputs: ["data", "windows", "windowDescriptions", "windowNotes"] }, { kind: "pipe", type: ReportGridCellPipe, name: "fsReportGridCell" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsGridComponent,
+                        FsGridCellDirective,
+                        ComponentNoteComponent,
+                        ReportGridCellPipe,
+                    ], template: "<!-- The comparison and window note strip above the table, from the report\n     line of the latest read; the windows' descriptions and notes go in each\n     column's \"About this column\" instead. -->\n<div class=\"fs-column grid-pane\">\n  <app-report-component-note\n    [data]=\"noteData()\"\n    [windowNotes]=\"false\">\n  </app-report-component-note>\n  <!-- The params are seeded before the first render, so the grid's first read\n       carries the tile's report filters. -->\n  @if (params(); as params) {\n    <fs-grid\n      class=\"fs-flex\"\n      [source]=\"source()\"\n      [layout]=\"layout()\"\n      [expansion]=\"expansion()\"\n      [clearedFilter]=\"clearedFilter()\"\n      (expansionChange)=\"setExpansion($event)\"\n      [params]=\"params\"\n      [controls]=\"controls()\"\n      [formatter]=\"formatter()\"\n      (layoutChange)=\"setLayout($event)\">\n      <ng-template fsGridCell let-value let-field=\"field\" let-record=\"record\" let-text=\"text\">\n        @if (value | fsReportGridCell: field : record : text : noteData() : formatContext(); as shown) {\n          <span [attr.title]=\"shown.title\">{{ shown.text }}</span>\n        }\n      </ng-template>\n    </fs-grid>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.grid-pane{height:100%;min-height:0}fs-grid{min-height:0}\n"] }]
+        }] });
+
 // A KPI's trend over its last periods: a line that stretches to the card's
 // width, broken where a period has no value, with the last point marked
 // (hollow while its period is still running). The markers are drawn over the
@@ -9585,7 +10222,7 @@ class ComponentTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-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: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentTextComponent, isStandalone: true, selector: "app-report-component-text", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: true, transformFunction: null }, editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, shownElsewhere: { classPropertyName: "shownElsewhere", publicName: "shownElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", editEnded: "editEnded", valueSettings: "valueSettings" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style.--text-size": "typeScale.body", "style.--text-h1-size": "typeScale.h1", "style.--text-h2-size": "typeScale.h2", "style.--text-h3-size": "typeScale.h3", "style.--text-color": "typeScale.color", "style.--text-table-border": "tableLook.border", "style.--text-table-padding": "tableLook.padding", "style.--text-table-margin": "tableLook.margin" } }, viewQueries: [{ propertyName: "_editor", first: true, predicate: FsHtmlEditorComponent, descendants: true, isSignal: true }, { propertyName: "_valuePopoverAnchor", first: true, predicate: ["valuePopoverAnchor"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (editing()) {\n  <!-- Floating fs-html-editor: no frame, Froala's inline toolbar pops up over\n       the text. pointerdown stays here so a press in the text never starts a\n       drag of the block or a pan of the canvas. -->\n  <fs-html-editor\n      class=\"text-content editing\"\n      [config]=\"editorConfig\"\n      [(ngModel)]=\"draft\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\">\n  </fs-html-editor>\n\n  <!-- One notice at a time: an edit stopped because it would have removed\n       values, an edit that left values no text reads, or a refused command.\n       mousedown keeps the editor's focus and selection, so Undo reaches it. -->\n  @if (notice(); as current) {\n    <div\n        class=\"value-notice fs-row.gap-sm\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.preventDefault()\">\n      @switch (current.kind) {\n        @case ('blocked') {\n          @if (current.block.removeSelection) {\n            <span>\n              This selection includes {{ current.block.count }} {{ current.block.count === 1 ? 'value' : 'values' }}.\n            </span>\n            <button\n                mat-button\n                color=\"primary\"\n                type=\"button\"\n                (click)=\"removeBlockedSelection()\">\n              Remove text and {{ current.block.count === 1 ? 'value' : current.block.count + ' values' }}\n            </button>\n          } @else {\n            <span>To take a value out, select it, then press Delete.</span>\n          }\n        }\n        @case ('unused') {\n          <span>{{ current.count }} {{ current.count === 1 ? 'value' : 'values' }} moved to Not used</span>\n          <button\n              mat-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"undoValuesUnused()\">\n            Undo\n          </button>\n        }\n        @case ('message') {\n          <span>{{ current.text }}</span>\n        }\n      }\n      <button\n          mat-button\n          type=\"button\"\n          (click)=\"dismissNotice()\">\n        Dismiss\n      </button>\n    </div>\n  }\n} @else {\n  <div\n      class=\"text-content\"\n      [innerHTML]=\"displayHtml()\">\n  </div>\n}\n\n<!-- A clicked value chip's popover: an fs-popover on an invisible anchor laid\n     over the chip (the chip itself belongs to the editor). Outside the editing\n     block, so a popover still open when editing ends closes the usual way. -->\n<span\n    #valuePopoverAnchor\n    class=\"value-popover-anchor\"\n    aria-hidden=\"true\"\n    fsPopover\n    trigger=\"click\"\n    wrapperClass=\"value-popover-wrapper\"\n    [template]=\"valuePopoverTemplate\"\n    [indication]=\"false\"\n    [maxWidth]=\"320\"\n    [style.left.px]=\"valuePopover()?.left\"\n    [style.top.px]=\"valuePopover()?.top\"\n    [style.width.px]=\"valuePopover()?.width\"\n    [style.height.px]=\"valuePopover()?.height\">\n</span>\n<ng-template\n    #valuePopoverTemplate\n    let-popover=\"popover\">\n  <!-- What the value is, and its settings (where it can also be deleted); a\n       chip naming no value on the page has no settings. -->\n  <div class=\"value-popover fs-row\">\n    <div class=\"fs-flex\">\n      <div class=\"value-popover-name\">{{ valuePopoverValue()?.name ?? valuePopover()?.key }}</div>\n      @if (!valuePopoverValue()) {\n        <div class=\"small\">Not a value on this page</div>\n      }\n    </div>\n    @if (valuePopoverValue()) {\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"value-popover-settings\"\n          matTooltip=\"Settings\"\n          (click)=\"openValueSettings(popover)\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;height:100%}.text-content{display:block;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:var(--text-size);line-height:1.25;color:var(--text-color);word-wrap:break-word;letter-spacing:normal;word-spacing:normal;font-weight:400;font-style:normal;text-transform:none;white-space:normal}.text-content ::ng-deep p,.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3,.text-content ::ng-deep ul,.text-content ::ng-deep ol{margin:0}.text-content ::ng-deep h1{font-size:var(--text-h1-size)}.text-content ::ng-deep h2{font-size:var(--text-h2-size)}.text-content ::ng-deep h3{font-size:var(--text-h3-size)}.text-content ::ng-deep h1,.text-content ::ng-deep h2,.text-content ::ng-deep h3{font-weight:700;line-height:1.2}.text-content ::ng-deep ul,.text-content ::ng-deep ol{padding-left:1.4em}.text-content ::ng-deep p:empty:before{content:\"\\200b\"}.text-content ::ng-deep a{color:inherit}.text-content ::ng-deep table{border-collapse:collapse;margin:var(--text-table-margin) 0}.text-content ::ng-deep th,.text-content ::ng-deep td{border:var(--text-table-border);padding:var(--text-table-padding);vertical-align:middle;text-align:left}.text-content ::ng-deep th{text-align:center;font-weight:700}.text-content.editing{overflow:auto;cursor:text}.text-content.editing ::ng-deep [data-embed-key],.text-content.editing ::ng-deep [data-embed-field]{padding:0 2px;border-radius:3px;background-color:#4e79a729;-webkit-user-select:all;user-select:all}.text-content.editing ::ng-deep [data-embed-key]{cursor:pointer}.text-content.editing ::ng-deep [data-embed-key]:hover{background-color:#4e79a747}.text-content.editing ::ng-deep [data-embed-missing]{background-color:#e1575924;outline:1px dashed rgba(225,87,89,.7)}.text-content.editing ::ng-deep th,.text-content.editing ::ng-deep tfoot td{background-color:transparent}.text-content.editing ::ng-deep .fr-table-selector{display:none}.text-content.editing ::ng-deep .fr-table-selection-hover{outline:none}.value-popover-anchor{position:absolute;pointer-events:none}::ng-deep .value-popover-wrapper .popover-content{padding:15px!important}.value-popover{gap:15px}.value-popover-name{font-weight:600}.value-popover-settings{--mdc-icon-button-state-layer-size: 24px;width:24px;height:24px;padding:0}.value-notice{position:absolute;top:100%;left:0;z-index:2;margin-top:4px;padding:2px 4px 2px 10px;border:1px solid #d9dee3;border-radius:4px;background:#fff;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}\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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-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: FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "directive", type: FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "maxHeight", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled", "panel"], outputs: ["closed"], exportAs: ["fsPopover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentTextComponent, decorators: [{
             type: Component,
@@ -9617,6 +10254,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
 const MIN_W = 0.6; // inches
 const MIN_H = 0.4; // inches
+// The tiles that read their own rows: a list through FsList paging, a grid
+// through fs-grid's source. This component loads every other tile's data.
+const SELF_READING_TYPES = ['list', 'grid'];
 // Two presses on a text block this close together open its editor. Detected
 // here rather than with a dblclick listener because the drag loop claims the
 // pointer on every press, and a browser is not obliged to deliver dblclick
@@ -9629,7 +10269,8 @@ const DOUBLE_PRESS_MS = 400;
 // snapper); everything works at any zoom (pixel deltas ÷ zoom·96 → inches).
 //
 // Charts and KPIs fetch their own data here; lists fetch inside
-// ComponentListComponent through FsList paging.
+// ComponentListComponent through FsList paging, and grids inside
+// ComponentGridComponent through fs-grid's source.
 class ReportComponentComponent {
     reportId;
     component;
@@ -9757,9 +10398,10 @@ class ReportComponentComponent {
         if (!this.isText) {
             this._rebuildHeaderOnNewState();
         }
-        // Lists fetch through FsList; text has nothing to fetch, and a value is
-        // never drawn (it reads inside text).
-        if (this.component.type !== 'list' && !this.isText && isDrawn(this.component)) {
+        // Lists fetch through FsList and grids through fs-grid's source (each
+        // reads its own rows); text has nothing to fetch, and a value is never
+        // drawn (it reads inside text).
+        if (!SELF_READING_TYPES.includes(this.component.type) && !this.isText && isDrawn(this.component)) {
             // One load stream (tileLoads): the first load at once, then one per
             // settled sweep of changes, each cancelling the one in flight, and an
             // answer sent before a reset is dropped.
@@ -9769,9 +10411,9 @@ class ReportComponentComponent {
             this._filterState.changesFor(this.component)
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => this._refresh$.next());
-            // A group-by change re-buckets every time-series chart; it isn't scoped
-            // to a filter group, so it rides its own stream.
-            if (this._isTimeSeries) {
+            // A group-by change re-buckets every tile that follows it; it isn't
+            // scoped to a filter group, so it rides its own stream.
+            if (followsGroupBy(this.component)) {
                 this._filterState.frequencyChanges()
                     .pipe(takeUntilDestroyed(this._destroyRef))
                     .subscribe(() => {
@@ -9961,17 +10603,18 @@ class ReportComponentComponent {
         }
     }
     // The CSV is what the screen shows, so it carries the tile's interaction
-    // state (tileDataState): the group-by grain for a time-series chart, a
+    // state (tileDataState): the group-by grain for a tile that follows it, a
     // chart's drill path, the viewer's header sort, search and hidden columns
     // for a list (a searched list exports only the rows the search leaves, and
     // the hidden columns stay out of the file), and the groups that match
-    // 'any'; and its title as the header reads it (shownTitle), which the
-    // server names the file after. 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.
+    // 'any'; a table's layout as the viewer changed it; and its title as the
+    // header reads it (shownTitle), which the server names the file after. 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);
-        const state = this._filterState.tileState(this.component);
+        const layout = this.component.type === 'grid' ? this._filterState.gridSessionLayout(this.component) : null;
+        const state = { ...this._filterState.tileState(this.component), ...(layout ? { layout } : {}) };
         const title = this.shownTitle;
         this._process.download(`Exporting ${title || 'component'}`, this._reportData.exportComponent(this.reportId, this.component.id, filters, state, title)
             .pipe(tap$1(({ notes }) => notes?.length && this._message.warning(notes.join(' '))), map$1(({ url }) => url)));
@@ -10224,11 +10867,6 @@ class ReportComponentComponent {
             h: this.component.h,
         });
     }
-    // A chart on a time x-axis — the only component the report's group-by control
-    // applies to (isTimeSeriesChart, the browser-side mirror of the server's rule).
-    get _isTimeSeries() {
-        return isTimeSeriesChart(this.component);
-    }
     // Auto height (box fits its content) vs fixed (use `h` exactly). Derived from
     // type, server-side: KPI tiles are auto; charts and lists are fixed — charts
     // fit the box and never overflow, lists scroll inside it.
@@ -10275,9 +10913,9 @@ class ReportComponentComponent {
         this.error.set(null);
         const filters = this._filterState.resolveForComponent(this.component);
         // The tile's interaction state, the one its CSV and every export carry
-        // (tileDataState): a time-series chart's grain (when the viewer picked
-        // one) so the backend re-buckets, a chart's drill path, and the groups
-        // that match 'any'.
+        // (tileDataState): the grain of a tile that follows the group-by (when
+        // the viewer picked one) so the backend re-buckets, a chart's drill
+        // path, and the groups that match 'any'.
         const state = this._filterState.tileState(this.component);
         return this._reportData.componentData(this.reportId, this.component.id, filters, state);
     }
@@ -10335,7 +10973,7 @@ class ReportComponentComponent {
         openAtPoint(anchor, click.pointer, this.zoom, () => this.markMenu?.openMenu(null));
     }
     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 }, 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 }, valueKeysElsewhere: { classPropertyName: "valueKeysElsewhere", publicName: "valueKeysElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", openSettings: "openSettings", removed: "removed", valueSettings: "valueSettings", textSaved: "textSaved", valuesRemoved: "valuesRemoved" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "_text", first: true, predicate: ComponentTextComponent, descendants: true, isSignal: true }, { propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }, { propertyName: "markMenu", first: true, predicate: ["markMenu"], descendants: true }, { propertyName: "markAnchor", first: true, predicate: ["markAnchor"], 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    [class.refreshing]=\"refreshing()\"\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. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\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          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\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        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></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        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\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  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\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}", 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}.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 .drill-crumb{pointer-events:none}.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-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}: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}.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: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i1$2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data", "legendSelected", "actions"], outputs: ["legendSelectedChange", "markClick", "markMiss"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"], outputs: ["markClick"] }, { 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", "shownElsewhere"], outputs: ["saved", "editEnded", "valueSettings"] }], 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 }, 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 }, valueKeysElsewhere: { classPropertyName: "valueKeysElsewhere", publicName: "valueKeysElsewhere", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectComponent: "selectComponent", positionChanged: "positionChanged", openSettings: "openSettings", removed: "removed", valueSettings: "valueSettings", textSaved: "textSaved", valuesRemoved: "valuesRemoved" }, host: { properties: { "class.height-auto": "this.heightAuto" } }, viewQueries: [{ propertyName: "_text", first: true, predicate: ComponentTextComponent, descendants: true, isSignal: true }, { propertyName: "chartComponent", first: true, predicate: ComponentChartComponent, descendants: true }, { propertyName: "markMenu", first: true, predicate: ["markMenu"], descendants: true }, { propertyName: "markAnchor", first: true, predicate: ["markAnchor"], 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    [class.refreshing]=\"refreshing()\"\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. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\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          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\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        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></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        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\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  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\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}", 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}.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 .drill-crumb{pointer-events:none}.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-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}: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}.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: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i1$2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i1$2.FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: ComponentChartComponent, selector: "app-report-component-chart", inputs: ["component", "data", "legendSelected", "actions"], outputs: ["legendSelectedChange", "markClick", "markMiss"] }, { kind: "component", type: ComponentGridComponent, selector: "app-report-component-grid", inputs: ["reportId", "component"] }, { kind: "component", type: ComponentKpiComponent, selector: "app-report-component-kpi", inputs: ["component", "data"], outputs: ["markClick"] }, { 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", "shownElsewhere"], outputs: ["saved", "editEnded", "valueSettings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponentComponent, decorators: [{
             type: Component,
@@ -10347,10 +10985,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FsFilterModule,
                         FsMenuModule,
                         ComponentChartComponent,
+                        ComponentGridComponent,
                         ComponentKpiComponent,
                         ComponentListComponent,
                         ComponentTextComponent,
-                    ], template: "<div\n    class=\"component-box\"\n    [class.editing]=\"editMode\"\n    [class.text]=\"isText\"\n    [class.selected]=\"selected\"\n    [class.refreshing]=\"refreshing()\"\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. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\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          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\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        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></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        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\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  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\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}", 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}.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 .drill-crumb{pointer-events:none}.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-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}: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}.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    [class.refreshing]=\"refreshing()\"\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. The title shows its tokens filled, and a\n       filter change repaints it in place (shownTitle). -->\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          <!-- While the chart is drilled the title leads its breadcrumb:\n               'Title \u203A 2026 \u203A Q3', the title as the viewer reads it\n               (shownTitle). The title goes back to the top and each\n               crumb to the period it names; the last is where the chart is.\n               A long path is cut at its left end, so the crumbs nearest the\n               chart stay in view. While the layout is edited the crumbs are\n               plain text (the stylesheet; drillTo does nothing then). -->\n          @if (drillCrumbs().length) {\n            <span class=\"drill-path\">\n              <span dir=\"ltr\">\n                <a\n                    class=\"drill-crumb\"\n                    tabindex=\"0\"\n                    (click)=\"drillTo(0)\"\n                    (keydown.enter)=\"drillTo(0)\">\n                  {{ shownTitle }}\n                </a>\n                @for (label of drillCrumbs(); track $index; let last = $last) {\n                  <span class=\"drill-separator\">{{ drillSeparator }}</span>\n                  @if (last) {\n                    <span>{{ label }}</span>\n                  } @else {\n                    <a\n                        class=\"drill-crumb\"\n                        tabindex=\"0\"\n                        (click)=\"drillTo($index + 1)\"\n                        (keydown.enter)=\"drillTo($index + 1)\">\n                      {{ label }}\n                    </a>\n                  }\n                }\n              </span>\n            </span>\n          } @else {\n            {{ shownTitle }}\n          }\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        [fsMenuTriggerFor]=\"menu\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (mousedown)=\"stopCanvasPan($event)\">\n      <mat-icon>more_vert</mat-icon>\n    </button>\n    <!-- Beside its trigger, inside the same block: an fs-menu that finds no\n         trigger of its own draws one. -->\n    <fs-menu #menu>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"editText()\">\n        <mat-icon>edit</mat-icon>\n        <span>Edit text</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!isText\"\n          (click)=\"deleteText()\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillUp()\">\n        <mat-icon>arrow_upward</mat-icon>\n        <span>Drill up</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!drillCrumbs().length || editMode\"\n          (click)=\"drillTo(0)\">\n        <mat-icon>vertical_align_top</mat-icon>\n        <span>Back to top</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"settings()\">\n        <mat-icon>tune</mat-icon>\n        <span>Settings</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"isText\"\n          (click)=\"exportCsv()\">\n        <mat-icon>download</mat-icon>\n        <span>Export CSV</span>\n      </ng-template>\n      <ng-template\n          fs-menu-item\n          [hidden]=\"!hidesColumns\"\n          (click)=\"chooseColumns()\">\n        <mat-icon>view_column</mat-icon>\n        <span>Columns</span>\n      </ng-template>\n    </fs-menu>\n  }\n  <div class=\"component-body\">\n    @if (isText) {\n      <app-report-component-text\n        [html]=\"textHtml() ?? component.config?.html ?? ''\"\n        [tokens]=\"tokens()\"\n        [editing]=\"textEditing()\"\n        [shownElsewhere]=\"shownElsewhere\"\n        (saved)=\"onTextSaved($event)\"\n        (editEnded)=\"textEditing.set(false)\"\n        (valueSettings)=\"valueSettings.emit($event)\">\n      </app-report-component-text>\n    } @else if (component.type === 'list') {\n      @for (key of [listResetKey()]; track key) {\n        <app-report-component-list\n          [reportId]=\"reportId\"\n          [component]=\"component\">\n        </app-report-component-list>\n      }\n    } @else if (component.type === 'grid') {\n      <app-report-component-grid\n        [reportId]=\"reportId\"\n        [component]=\"component\">\n      </app-report-component-grid>\n    } @else if (loading()) {\n      <!-- Holds the tile's height for the spinner on the first load. -->\n      <div class=\"component-state\"></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        {{ emptyMessage() }}\n      </div>\n    } @else if (component.type === 'kpi') {\n      <app-report-component-kpi\n        [component]=\"component\"\n        [data]=\"data()\"\n        (markClick)=\"onMarkClick($event)\">\n      </app-report-component-kpi>\n    } @else {\n      <app-report-component-chart\n        [component]=\"component\"\n        [data]=\"data()\"\n        [actions]=\"tileActions()\"\n        [(legendSelected)]=\"legendSelected\"\n        (markClick)=\"onMarkClick($event)\"\n        (markMiss)=\"onMarkMiss()\">\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  <!-- A load: a spinner centred on the whole tile. On a refetch the body and\n       the menu are dimmed under it (.refreshing); the title is not. -->\n  @if (loading() || refreshing()) {\n    <mat-progress-spinner\n      class=\"load-spinner\"\n      aria-label=\"Loading data\"\n      mode=\"indeterminate\"\n      [diameter]=\"15\">\n    </mat-progress-spinner>\n  }\n</div>\n<!-- The mark menu, for a click whose mark offers two or more actions. It\n     opens at the click: its trigger is a zero-size anchor that\n     anchor-at-point.ts moves there first. -->\n@if (!isText && !editMode) {\n  <span\n    #markAnchor\n    [style.position]=\"'absolute'\"\n    [fsMenuTriggerFor]=\"markMenu\">\n  </span>\n  <fs-menu #markMenu>\n    @for (action of markMenuActions(); track action) {\n      <ng-template\n          fs-menu-item\n          (click)=\"runMarkAction(action)\">\n        {{ markActionLabels[action] }}\n      </ng-template>\n    }\n  </fs-menu>\n}\n<!-- Handles live OUTSIDE the clipped box so they straddle its edges. -->\n@if (editMode && selected) {\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}", 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}.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 .drill-crumb{pointer-events:none}.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-filter .component-title .drill-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.component-filter .component-title .drill-crumb{color:inherit;cursor:pointer;text-decoration:none}.component-filter .component-title .drill-crumb:hover,.component-filter .component-title .drill-crumb:focus-visible{text-decoration:underline}.component-filter .component-title .drill-separator{opacity:.6}.component-menu{position:absolute;top:2px;right:2px;z-index:30}.component-body{flex:1 1 auto;min-height:0;position:relative}.component-box.refreshing .component-body,.component-box.refreshing .component-menu{opacity:.35;transition:opacity .15s ease}.load-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(calc(1 / var(--canvas-zoom, 1)));z-index:25;pointer-events:none}: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}.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: [{
@@ -12696,6 +13335,52 @@ function nameInputId(groupId) {
     return `filterName${groupId}`;
 }
 
+// A table tile as the PDF and the deck draw it: the printed table
+// readGridTable() reads (GridTable) as heading rows, body rows and a total
+// row of plain cells, and the lines its notes add. Pure, so both renderers
+// draw one table one way.
+// The most pivot columns a file draws, from the first.
+const GRID_EXPORT_COLUMNS = 60;
+// The table's heading, body and total row as cells. A group's label carries
+// its row count after it, as the screen writes it.
+function gridExportTable(table) {
+    const numeric = table.columns.map((column) => column.numeric);
+    const head = Array.from({ length: Math.max(1, table.headingRows) }, (_, row) => table.headings
+        .filter((heading) => heading.row === row)
+        .sort((a, b) => a.column - b.column)
+        .map((heading) => exportCell$1(headingText(heading), true, 0, heading.numeric, heading.columnSpan, heading.rowSpan)));
+    const line = (row) => row.cells.map((cell, index) => {
+        const isLabel = index === 0 && table.groupColumn;
+        return exportCell$1(isLabel && row.count ? `${cell.text} (${row.count})` : cell.text, row.kind !== GridRowKind.Detail || !!table.columns[index]?.emphasis, isLabel ? row.depth : 0, numeric[index] ?? false);
+    });
+    return {
+        head,
+        body: table.rows.map(line),
+        foot: table.totalRow ? line(table.totalRow) : null,
+        numeric,
+        moreRows: table.moreRows,
+    };
+}
+// The lines a table adds under its box: the screen's notes, the pivot
+// columns it leaves out, and each column filter of the layout it was read in.
+function gridExportNotes(table, layout, locale) {
+    const fields = new Map(table.fields.map((field) => [field.name, field]));
+    const filters = (layout.filters ?? [])
+        .map((filter) => gridFilterLineText(fields.get(filter.field)?.label ?? filter.field, filter, fields.get(filter.field), locale))
+        .filter((text) => !!text);
+    return [
+        ...table.notes,
+        ...(table.shownColumns < table.columnCount ? [`Showing the first ${table.shownColumns} of ${table.columnCount} columns`] : []),
+        ...filters,
+    ];
+}
+function headingText(heading) {
+    return heading.hint ? `${heading.label} (${heading.hint})` : heading.label;
+}
+function exportCell$1(text, bold, indent, numeric, colSpan = 1, rowSpan = 1) {
+    return { text, colSpan, rowSpan, bold, indent, numeric };
+}
+
 // How far a KPI card's rows shrink to fit a short tile. A tile shorter still
 // lets the card run past its foot rather than print it unreadably small.
 const KPI_EXPORT_MIN_SCALE = 0.5;
@@ -12736,8 +13421,11 @@ function emptyLabel(item) {
 // the matching rows: 'Orders (matching "north")'. An untitled one reads
 // 'Matching "north"'. '' when there is nothing to print. Shared by the PDF
 // and the deck, continuation pages included.
-function exportTitle(component, tokens, search, crumbs) {
+function exportTitle(component, tokens, search, crumbs, filtered = false) {
     const title = crumbedTitle(fillTitleTokens(component.title, tokens), crumbs ?? []);
+    if (filtered) {
+        return title ? `${title} (filtered)` : 'Filtered';
+    }
     if (!search) {
         return title;
     }
@@ -12869,7 +13557,16 @@ function exportWindowsLine(item, timezone, locale) {
 // descriptions are in, since a file has no tooltip or header to carry them.
 // Empty when the data has none of the keys.
 function exportNoteLines(item, timezone, locale) {
-    return componentNoteLines(item.data, { locale, timezone }, { windows: false, windowDescriptions: true });
+    return [
+        ...componentNoteLines(item.data, { locale, timezone }, { windows: false, windowDescriptions: true }),
+        ...(item.tableNotes ?? []),
+    ];
+}
+// Whether a tile has nothing to draw: no rows, or a table with no line.
+function isEmptyTile(item) {
+    return item.table
+        ? !item.table.rows.length && !item.table.totalRow
+        : !item.data?.rows?.length;
 }
 // Whether a KPI card has more to draw than its value and label. Without, both
 // exports draw the tile exactly as they always have.
@@ -13062,7 +13759,10 @@ class ReportExportCollectorService {
             filters: Object.fromEntries(tiles.map((tile) => [tile.id, this._filterState.resolveForComponent(tile)])),
             valueFilters: Object.fromEntries(values
                 .map((value) => [value.id, this._filterState.resolveForComponent(value)])),
-            states: Object.fromEntries(tiles.map((tile) => [tile.id, tileDataState(report, tile, state)])),
+            states: Object.fromEntries(tiles.map((tile) => [tile.id, this._tileState(report, tile, state)])),
+            gridExpansions: Object.fromEntries(tiles
+                .map((tile) => [tile.id, this._filterState.gridExpansion(tile)])
+                .filter(([, expansion]) => !!expansion)),
             frequency: this._filterState.frequency(),
             features: offeredViewerFeatures(report.viewerFeatures),
             formatContext: this._filterState.formatContext(),
@@ -13146,10 +13846,14 @@ class ReportExportCollectorService {
             return of({ component, data: null, hiddenColumns: [] });
         }
         const filters = snapshot.filters[component.id] ?? [];
+        if (component.type === 'grid') {
+            return this._gridTable(report, component, filters, snapshot.states[component.id] ?? {}, listRows, snapshot);
+        }
         // The tile's own state, the one its screen and its CSV carry
-        // (tileDataState): a time-series chart re-buckets at the viewer's grain
-        // and keeps its drill path, a list reads in the screen's order and holds
-        // the screen's rows. A list adds its export paging.
+        // (tileDataState): a tile that follows the group-by re-buckets at the
+        // viewer's grain, a time-series chart keeps its drill path, a list reads
+        // in the screen's order and holds the screen's rows. A list adds its
+        // export paging.
         const tileState = snapshot.states[component.id] ?? {};
         const state = component.type === 'list'
             ? { ...tileState, page: 1, pageSize: listRows }
@@ -13164,6 +13868,47 @@ class ReportExportCollectorService {
         return this._reportData.componentData(report.id, component.id, filters, state, true, { handlers: false })
             .pipe(map$1((data) => this._collected(component, data, state.search, hiddenColumns, snapshot)), catchError(() => of({ component, data: null, hiddenColumns })));
     }
+    // A tile's state as an export reads it: tileDataState, and for a table the
+    // layout the viewer put it in, absent while it shows its stored one.
+    _tileState(report, tile, state) {
+        const layout = tile.type === 'grid' ? this._filterState.gridSessionLayout(tile) : null;
+        return { ...tileDataState(report, tile, state), ...(layout ? { layout } : {}) };
+    }
+    // A table tile as the screen draws it, read apart from the screen through
+    // an export source (readGridTable()): in the viewer's layout with the
+    // groups they left open, at most `rows` lines and GRID_EXPORT_COLUMNS
+    // pivot columns, each value written by the screen's formatter once the
+    // read's report line is in. That line stands in as its data, so the title,
+    // the subtitle and the notes read it as a list's. A failed read is a
+    // failed tile.
+    _gridTable(report, component, filters, state, rows, snapshot) {
+        const locale = snapshot.formatContext.locale;
+        const source = new ReportGridSource(this._reportData, report.id, component.id, { isExport: true, locale: () => locale });
+        const screen = () => reportGridFormatter({
+            format: snapshot.formatContext,
+            timezone: this._filterState.timezone(),
+            report: source.report(),
+        });
+        const formatter = {
+            format: (value, field, placement) => screen().format(value, field, placement),
+            toNumber: (text, field, placement) => screen().toNumber(text, field, placement),
+        };
+        const layout = state.layout ?? authoredGridLayout(component);
+        const params = {
+            filters,
+            ...(state.matchAnyGroupIds?.length ? { matchAnyGroupIds: state.matchAnyGroupIds } : {}),
+            ...(state.frequency ? { frequency: state.frequency } : {}),
+        };
+        return readGridTable(source, layout, params, snapshot.gridExpansions?.[component.id], { rows, columns: GRID_EXPORT_COLUMNS }, formatter)
+            .pipe(map$1((table) => ({
+            component,
+            data: { ...(source.report() ?? {}), columns: [], rows: [] },
+            hiddenColumns: [],
+            table,
+            tableNotes: gridExportNotes(table, layout, locale),
+            ...((layout.filters ?? []).length ? { filtered: true } : {}),
+        })), catchError(() => of({ component, data: null, hiddenColumns: [] })));
+    }
     // One tile's answer as the renderers take it. A search the server could
     // not apply (searchNote: the list has no text column) narrowed nothing, so
     // the item does not carry it. A drilled chart carries the breadcrumb of the
@@ -13308,7 +14053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // in the report's format context, as on screen.
 async function renderChartImage(component, data, width, height, context, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-B0RWUjR8.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-EecIloKo.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -13628,6 +14373,8 @@ const LIST_INDENT = 16;
 // What the export's overflow gate says the PDF does with a text block that does
 // not fit its box.
 const PDF_OVERFLOW_NOTE = 'The PDF cuts it off at the bottom of its box.';
+// How far a table's group label steps in per level, points.
+const GRID_INDENT$1 = 8;
 // Builds the PDF client-side with jspdf. The report's unit is inches and PDFs
 // are points at exactly 72/inch, so each report page becomes one PDF page of
 // the exact physical size and components land at their precise positions.
@@ -14069,7 +14816,7 @@ class ReportPdfService {
         const y = component.y * PT;
         const w = component.w * PT;
         const h = component.h * PT;
-        const title = exportTitle(component, tokens, item.search, item.crumbs);
+        const title = exportTitle(component, tokens, item.search, item.crumbs, item.filtered);
         if (title) {
             this._componentTitle(doc, title, x, y, w);
         }
@@ -14090,7 +14837,7 @@ class ReportPdfService {
         kept.forEach((line, index) => {
             this._smallLine(doc, this._pdfText(line), x, bodyY + bodyH + index * NOTE_LINE_H$1, w, 'left', 'italic');
         });
-        if (!item.data || !item.data.rows?.length) {
+        if (!item.data || isEmptyTile(item)) {
             this._boxNote(doc, emptyLabel(item), x, bodyY, w, bodyH);
             return;
         }
@@ -14101,6 +14848,7 @@ class ReportPdfService {
                 break;
             }
             case 'list':
+            case 'grid':
                 this._renderTable(context, item, x, bodyY, w, bodyH, overflows);
                 break;
             case 'kpi':
@@ -14153,12 +14901,8 @@ class ReportPdfService {
     // A totals row closes the table once: in the box when every row fits it,
     // else after the last continuation row. Points throughout.
     _renderTable(context, item, x, y, w, h, overflows) {
-        const { component, search, hiddenColumns } = item;
-        const data = item.data;
-        const head = listHeadings(component, data, context.formatContext.locale, hiddenColumns)
-            .map((heading) => this._pdfText(heading));
-        const { cells, numeric, foot } = this._tableCells(context, component, data, hiddenColumns);
-        const omitted = Math.max(0, (data.paging?.total ?? cells.length) - cells.length);
+        const { component, search, filtered } = item;
+        const { head, cells, numeric, foot, omitted } = item.table ? this._gridCells(item) : this._listCells(context, item);
         const bottom = context.pageH - (y + h);
         const { fit, columnStyles } = this._measure(context, head, cells, numeric, foot, x, y, w, bottom);
         if (fit === cells.length && omitted === 0) {
@@ -14171,16 +14915,46 @@ class ReportPdfService {
         // page.
         const kept = Math.max(0, fit - 1);
         overflows.push({
-            component, search, crumbs: item.crumbs, head, numeric, rows: cells.slice(kept), omitted, foot, x, w, columnStyles,
+            component, search, crumbs: item.crumbs, filtered, head, numeric, rows: cells.slice(kept), omitted, foot, x, w, columnStyles,
         });
         if (fit >= 1) {
-            const body = [...cells.slice(0, kept), this._noticeRow(CONTINUED_NOTICE, head.length, true)];
+            const body = [...cells.slice(0, kept), this._noticeRow(CONTINUED_NOTICE, numeric.length, true)];
             this._drawTable(context, this._tableOptions(context, head, numeric, body, x, y, w, bottom, columnStyles));
         }
         else {
             this._boxNote(context.doc, CONTINUED_NOTICE, x, y, w, h);
         }
     }
+    // A list's heading, rows, totals row and the rows past its fetch.
+    _listCells(context, item) {
+        const { component, hiddenColumns } = item;
+        const data = item.data;
+        const head = [listHeadings(component, data, context.formatContext.locale, hiddenColumns).map((heading) => this._pdfText(heading))];
+        const { cells, numeric, foot } = this._tableCells(context, component, data, hiddenColumns);
+        return { head, cells, numeric, foot, omitted: Math.max(0, (data.paging?.total ?? cells.length) - cells.length) };
+    }
+    // A table tile's heading rows (spanned as the screen's header), its lines
+    // (groups and totals bold, a group's label stepped in by its depth) and its
+    // total row, as gridExportTable() lays them out, and the lines past its cap.
+    _gridCells(item) {
+        const table = gridExportTable(item.table);
+        const cell = (exported) => ({
+            content: this._pdfText(exported.text),
+            colSpan: exported.colSpan,
+            rowSpan: exported.rowSpan,
+            styles: {
+                ...(exported.bold ? { fontStyle: 'bold' } : {}),
+                ...(exported.indent ? { cellPadding: { top: 3, right: 3, bottom: 3, left: 3 + exported.indent * GRID_INDENT$1 } } : {}),
+            },
+        });
+        return {
+            head: table.head.map((row) => row.map(cell)),
+            cells: table.body.map((row) => row.map(cell)),
+            numeric: table.numeric,
+            foot: table.foot ? table.foot.map((exported) => this._pdfText(exported.text)) : null,
+            omitted: table.moreRows,
+        };
+    }
     // Each fetched row as the strings its table cells print, in the report's
     // zone, locale and currency, which columns hold formatted numbers, and the
     // totals row (null without one). The columns the viewer hid are left out.
@@ -14207,7 +14981,7 @@ class ReportPdfService {
     _tableOptions(context, head, numeric, body, x, startY, w, bottom, columnStyles, foot) {
         return {
             theme: 'grid',
-            head: [head],
+            head,
             body,
             startY,
             margin: { left: x, right: context.pageW - x - w, bottom },
@@ -14319,7 +15093,7 @@ class ReportPdfService {
         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, this._noticeRow(moreRowsNotice(overflow.omitted), overflow.numeric.length, false)]
             : overflow.rows;
         // The document's pages the table draws on, in order.
         const pages = [];
@@ -14332,7 +15106,7 @@ class ReportPdfService {
             willDrawPage: () => {
                 pages.push(doc.getCurrentPageInfo().pageNumber);
                 const tokens = this._tokens(context, page, index, pageNumber + pages.length);
-                this._componentTitle(doc, this._continuedTitle(overflow.component, tokens, overflow.search, overflow.crumbs), x, top, w);
+                this._componentTitle(doc, this._continuedTitle(overflow.component, tokens, overflow.search, overflow.crumbs, overflow.filtered), x, top, w);
             },
         });
         await this._renderContinuationMasters(context, page, index, pageNumber, pages);
@@ -14355,8 +15129,8 @@ class ReportPdfService {
     _continuationMargin(band) {
         return band ? band * PT + CONTINUATION_GAP : NO_BAND_MARGIN;
     }
-    _continuedTitle(component, tokens, search, crumbs) {
-        const title = exportTitle(component, tokens, search, crumbs);
+    _continuedTitle(component, tokens, search, crumbs, filtered) {
+        const title = exportTitle(component, tokens, search, crumbs, filtered);
         return title ? `${title} (continued)` : 'Continued';
     }
     // A KPI tile: the card the screen draws (kpi-card.ts decides every line),
@@ -14596,6 +15370,9 @@ const PPTX_RANK_WHOLE_STEP_PEAK = 10;
 const PPTX_RANK_FORMAT_CODE = '0';
 // Approximate table row height, inches — drives the rows-that-fit cap.
 const SLIDE_ROW_H = 0.26;
+// The spaces a table's group label steps in by per level: a cell's text is
+// the one place a slide table indents.
+const GRID_INDENT = '\u00A0\u00A0\u00A0';
 // 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.
@@ -14983,7 +15760,7 @@ class ReportPptxService {
         const component = item.component;
         // Geometry is in inches — PowerPoint's native unit.
         const { x, y, w, h } = component;
-        const title = exportTitle(component, tokens, item.search, item.crumbs);
+        const title = exportTitle(component, tokens, item.search, item.crumbs, item.filtered);
         if (title) {
             slide.addText(title, {
                 x, y, w, h: TITLE_H,
@@ -15013,7 +15790,7 @@ class ReportPptxService {
                 fontSize: SMALL_FONT_SIZE, color: MUTED_COLOR, valign: 'top', margin: 0, fit: 'none',
             });
         }
-        if (!item.data || !item.data.rows?.length) {
+        if (!item.data || isEmptyTile(item)) {
             slide.addText(emptyLabel(item), {
                 x, y: bodyY, w, h: bodyH,
                 fontSize: 10, italic: true, color: MUTED_COLOR, align: 'center', valign: 'middle',
@@ -15027,6 +15804,9 @@ class ReportPptxService {
             case 'list':
                 this._renderTable(slide, component, item.data, item.hiddenColumns, timezone, context, x, bodyY, w, bodyH);
                 break;
+            case 'grid':
+                this._renderGridTable(slide, item, context, x, bodyY, w, bodyH);
+                break;
             case 'kpi':
                 this._renderKpi(pptx, slide, item, timezone, context, x, bodyY, w, bodyH);
                 break;
@@ -15626,6 +16406,43 @@ class ReportPptxService {
             valign: 'middle',
         });
     }
+    // A table tile as a native table (gridExportTable()): its heading rows
+    // spanned as the screen's header, as many lines as the box holds (groups
+    // and totals bold, a group's label stepped in by its depth), the
+    // moreRowsNotice row for the rest and the total row. A number is written
+    // in the report's locale.
+    _renderGridTable(slide, item, context, x, y, w, h) {
+        const table = gridExportTable(item.table);
+        const cell = (exported, options = {}) => ({
+            text: `${GRID_INDENT.repeat(exported.indent)}${exported.text}`,
+            options: pptxRunOptions({
+                ...(exported.colSpan > 1 ? { colspan: exported.colSpan } : {}),
+                ...(exported.rowSpan > 1 ? { rowspan: exported.rowSpan } : {}),
+                ...(exported.bold ? { bold: true } : {}),
+                ...(exported.numeric ? { align: 'right' } : {}),
+                ...options,
+            }, exported.numeric ? context.locale : undefined),
+        });
+        const cap = Math.max(1, Math.floor(h / SLIDE_ROW_H) - table.head.length - (table.foot ? 1 : 0));
+        const lines = table.body.slice(0, cap);
+        const remaining = table.body.length - lines.length + table.moreRows;
+        slide.addTable([
+            ...table.head.map((row) => row.map((heading) => cell(heading, { color: 'FFFFFF', fill: { color: '4E79A7' } }))),
+            ...lines.map((row) => row.map((line) => cell(line))),
+            ...(remaining > 0
+                ? [[{ text: moreRowsNotice(remaining), options: { colspan: table.numeric.length, italic: true, color: MUTED_COLOR } }]]
+                : []),
+            ...(table.foot ? [table.foot.map((total) => cell(total, { bold: true, fill: { color: 'E4E7EB' } }))] : []),
+        ], {
+            x, y, w,
+            fontSize: 9,
+            color: '1F2933',
+            border: { type: 'solid', pt: 0.5, color: 'E4E7EB' },
+            autoPage: false,
+            rowH: SLIDE_ROW_H,
+            valign: 'middle',
+        });
+    }
     // A KPI tile: the card the screen draws (kpi-card.ts decides every line),
     // as native text boxes and shapes stacked and centered in the body. A card
     // with only its value and label keeps the tile's long-standing single text
@@ -16252,7 +17069,7 @@ class ReportComponent {
         const filters = this._filterState.resolveForReport(report, pageId);
         const frequency = this._filterState.frequency();
         const snapshot = this._collector.snapshot(report);
-        const states = zipExportStates(report, snapshot.state, pageId);
+        const states = zipExportStates(report, snapshot.state, pageId, (component) => this._filterState.gridSessionLayout(component));
         this._process.download('Exporting data', this._collector.exportWording(report, snapshot, pageId)
             .pipe(switchMap(({ lines, titles }) => this._reportData.exportReport(report.id, filters, pageId, frequency, lines, states, titles))));
     }
@@ -16441,7 +17258,7 @@ class ReportComponent {
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily with
             // this route's chunk.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B0RWUjR8.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-EecIloKo.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -16462,7 +17279,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-B0RWUjR8.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-EecIloKo.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -17673,11 +18490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
-// The parts of the chat's viewer state (ReportChatViewerState) read off a
-// snapshot of the screen (the state service's snapshot()). Pure, so the
-// node harness checks them. The caps are the server's: it reads at most
-// CHAT_DRILLS_MAX drilled charts, DRILL_MAX_DEPTH steps a path and
-// CHAT_LABEL_MAX characters a label, and drops the rest.
 const CHAT_DRILLS_MAX = 10;
 const CHAT_LABEL_MAX = 100;
 // The match the chat is told of: 'any' while the groups match any filter.
@@ -17704,6 +18516,26 @@ function chatViewerDrills(snapshot, locale) {
         })),
     }));
 }
+// Every table tile on screen while `pageId` is the page on screen: the
+// page's own, then the header and footer's unless the page hides them, each
+// with the layout the viewer has it in (layoutOf; null while it shows the
+// stored layout, and then left out). Empty when the page is unknown or holds
+// no table.
+function chatViewerTiles(report, pageId, layoutOf) {
+    const page = (report?.pages ?? []).find((item) => item.id === pageId);
+    if (!report || !page) {
+        return [];
+    }
+    return [
+        ...(page.components ?? []),
+        ...(page.masterHidden ? [] : report.master?.components ?? []),
+    ]
+        .filter((component) => component.type === 'grid')
+        .map((component) => {
+        const layout = layoutOf(component);
+        return layout ? { componentId: component.id, layout } : { componentId: component.id };
+    });
+}
 
 // The groups a saved filter holds: the report-wide ones.
 function savedFilterGroups(groups) {
@@ -18109,7 +18941,7 @@ class FsAiReportComponent {
         const filters = this._filterState.resolveForReport(report, pageId);
         const frequency = this._filterState.frequency();
         const snapshot = this._collector.snapshot(report);
-        const states = zipExportStates(report, snapshot.state, pageId);
+        const states = zipExportStates(report, snapshot.state, pageId, (component) => this._filterState.gridSessionLayout(component));
         this._process.download('Exporting data', this._collector.exportWording(report, snapshot, pageId)
             .pipe(switchMap(({ lines, titles }) => this._reportData.exportReport(report.id, filters, pageId, frequency, lines, states, titles))));
     }
@@ -18152,16 +18984,20 @@ class FsAiReportComponent {
     // 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. The match is sent only while it is
-    // 'any', and the drilled charts only when one is drilled.
+    // 'any', the drilled charts only when one is drilled, and the tables only
+    // when the bound page shows one, each with the layout the viewer has it in
+    // while that differs from the stored one.
     _chatViewerState() {
         const snapshot = this._filterState.snapshot();
         const drills = chatViewerDrills(snapshot, this._filterState.formatContext().locale);
+        const tiles = chatViewerTiles(this._filterState.report(), this.chatPageId(), (component) => this._filterState.gridSessionLayout(component));
         return {
             granularity: this._filterState.frequency(),
             selectedComponentId: this.editMode() ? this._canvas?.selectedComponentId() ?? null : null,
             filters: this._filterState.viewerFilters(),
             ...chatViewerMatch(snapshot),
             ...(drills.length ? { drills } : {}),
+            ...(tiles.length ? { tiles } : {}),
         };
     }
     _resizeTo(clientX) {
@@ -18419,7 +19255,7 @@ class FsAiReportComponent {
             ReportAiChatData,
             { provide: FsAiChatData, useExisting: ReportAiChatData },
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B0RWUjR8.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-EecIloKo.mjs').then((module) => module.default) }),
             // The bar's date pickers start their weeks on Monday and list the built-in
             // presets; a preset only sets the days.
             provideReportDatePicker(),
@@ -18443,7 +19279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportAiChatData,
                         { provide: FsAiChatData, useExisting: ReportAiChatData },
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-B0RWUjR8.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-EecIloKo.mjs').then((module) => module.default) }),
                         // The bar's date pickers start their weeks on Monday and list the built-in
                         // presets; a preset only sets the days.
                         provideReportDatePicker(),
@@ -18483,4 +19319,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, 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, ReportValueFormat as j, ReportValueFormula as k, ReportListColumnFormat as l, ReportNumberUnits as m, ReportChartDataLabels as n, ReportChartColor as o, ReportChartLineStyle as p, ReportChartMarkStat as q, ReportChartDateLabel as r, ReportChangePolarity as s };
-//# sourceMappingURL=firestitch-report-firestitch-report-CJW0lLdW.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-DbdLxQSE.mjs.map