@firestitch/report 18.12.0 → 18.13.0

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

@@ -29,9 +29,9 @@ 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, 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 { canonicalGridLayout, GridFormat, GridUnits, GridFieldType, FsGridComponent } from '@firestitch/grid';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i3 from '@firestitch/dialog';
@@ -392,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
@@ -4460,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.
@@ -4796,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.
@@ -4831,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);
@@ -5141,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
@@ -5359,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
@@ -5536,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
@@ -5561,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') {
@@ -5586,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;
         }
@@ -5966,9 +6040,17 @@ function listPriorAlias(outputs, alias, output) {
         : null;
 }
 
-// A table tile's layouts: the one its config authors, and the canonical key
-// two layouts are compared by.
+// 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;
@@ -5978,6 +6060,51 @@ function authoredGridLayout(component) {
 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.
@@ -6140,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();
@@ -6152,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.
@@ -6212,6 +6342,16 @@ class ReportFilterStateService {
     // 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());
@@ -6278,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();
     }
@@ -6538,24 +6682,27 @@ class ReportFilterStateService {
     // 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) {
-        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;
-        }
-        const next = new Map(this._gridLayouts());
-        if (key === base) {
-            next.delete(component.id);
+        if (this._putGridLayout(component, layout)) {
+            this._stateChanged$.next();
         }
-        else {
-            next.set(component.id, { layout, base });
+    }
+    // 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._gridLayouts.set(next);
-        this._stateChanged$.next();
+        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
@@ -6921,6 +7068,56 @@ class ReportFilterStateService {
         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) {
@@ -6933,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);
@@ -6954,39 +7151,55 @@ class ReportFilterStateService {
         return this._tiles()
             .some((component) => component.id === componentId && component.type === 'chart');
     }
-    // Drops each table layout whose tile is gone, is no table any more, or is
-    // authored otherwise than when the viewer changed it.
+    // 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()]
-            .filter(([componentId, session]) => {
+        const kept = new Map();
+        this._gridLayouts().forEach((session, componentId) => {
             const component = grids.get(componentId);
-            return !!component && session.base === gridLayoutKey(authoredGridLayout(component));
-        }));
-        if (kept.size !== this._gridLayouts().size) {
-            this._gridLayouts.set(kept);
-        }
+            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 while it is still a table authored as it
-    // was when the viewer changed it (a new authored layout, an edit or the
-    // agent's, is shown as authored). On another report it starts again: match
-    // 'all', no drill, every table as authored and nothing temporary.
+    // 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);
         }
@@ -8255,6 +8468,44 @@ function readError(error) {
     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,
@@ -8354,12 +8605,20 @@ function decimalMark(locale) {
 //   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.
+//   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();
@@ -8369,7 +8628,11 @@ class ComponentGridComponent {
         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(),
@@ -8382,17 +8645,26 @@ class ComponentGridComponent {
     // 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,
@@ -8407,24 +8679,28 @@ class ComponentGridComponent {
         this._paramsVersion = this._filterState.stateVersion();
         this.params.set(this._readParams());
     }
-    // The tile's report filters and 'any' groups as they stand.
+    // The tile's report filters, 'any' groups and group-by grain as they stand
+    // (tileState()).
     _readParams() {
         const component = this.component();
-        const matchAnyGroupIds = this._filterState.tileState(component).matchAnyGroupIds;
+        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      [params]=\"params\"\n      [controls]=\"controls()\"\n      [formatter]=\"formatter()\"\n      (layoutChange)=\"setLayout($event)\">\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: "component", type: ComponentNoteComponent, selector: "app-report-component-note", inputs: ["data", "windows", "windowDescriptions", "windowNotes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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,
-                    ], 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      [params]=\"params\"\n      [controls]=\"controls()\"\n      [formatter]=\"formatter()\"\n      (layoutChange)=\"setLayout($event)\">\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"] }]
+                        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
@@ -10135,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(() => {
@@ -10327,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)));
@@ -10590,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.
@@ -10641,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);
     }
@@ -13063,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;
@@ -13103,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;
     }
@@ -13236,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.
@@ -13429,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(),
@@ -13513,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 }
@@ -13531,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
@@ -13675,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-CoaGXKET.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`;
@@ -13995,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.
@@ -14436,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);
         }
@@ -14457,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;
         }
@@ -14468,6 +14848,7 @@ class ReportPdfService {
                 break;
             }
             case 'list':
+            case 'grid':
                 this._renderTable(context, item, x, bodyY, w, bodyH, overflows);
                 break;
             case 'kpi':
@@ -14520,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) {
@@ -14538,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.
@@ -14574,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 },
@@ -14686,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 = [];
@@ -14699,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);
@@ -14722,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),
@@ -14963,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.
@@ -15350,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,
@@ -15380,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',
@@ -15394,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;
@@ -15993,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
@@ -16619,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))));
     }
@@ -16808,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-CoaGXKET.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(),
@@ -16829,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-CoaGXKET.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(),
@@ -18491,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))));
     }
@@ -18805,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-CoaGXKET.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(),
@@ -18829,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-CoaGXKET.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(),
@@ -18869,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-CHPA7sla.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-DbdLxQSE.mjs.map