@firestitch/report 18.4.0 → 18.5.0

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

@@ -979,113 +979,413 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
-// colorBy applies only to single-dimension bar charts, and only when splitBy
-// isn't already driving multiple series: it colors each bar by its category and
-// shows a legend (one series per category, overlapped to full width).
-//
-// It is the DEFAULT for a categorical bar chart rather than something the config
-// has to ask for. A bar chart whose x-axis is a category — provinces, statuses,
-// clinics — is comparing those categories to each other, and one flat color with
-// no legend is the wrong reading of it in essentially every case. Requiring
-// colorBy to opt in meant every such chart rendered monochrome unless whoever
-// wrote the config remembered an optional property, which is a default set the
-// wrong way round: the common case should not need the flag.
-//
-// A TIME axis is excluded: consecutive periods are one series moving, not
-// categories being compared, and coloring each month differently reads as
-// unrelated groups. Explicitly opting out — colorBy: {column: ''} or a
-// config.legend of 'hidden' — still wins, so a caller that wants one flat color
-// can say so.
-//
-// "Bar chart" is the type the lone measure is actually DRAWN as: its own type
-// when it names one, which can turn a line chart's single series into bars or
-// a bar chart's into a line.
-function isColorBy(config) {
-    if (config.splitBy?.column || (config.measures?.[0]?.type ?? config.chartType ?? 'bar') !== 'bar') {
-        return false;
+// Measure-value formatting shared by the KPI renderer and the exports — the
+// config's `format` (number | percent | currency) and `precision` mean the same
+// thing on screen, in PowerPoint and in PDF.
+// A bare `new Intl.NumberFormat()` defaults to maximumFractionDigits: 3, which
+// is why an unconfigured percentage reads 38.298%. When the measure names a
+// precision it is pinned as BOTH the minimum and the maximum, so a column of
+// rates lines up instead of each value showing however many decimals it happens
+// to need. Undefined leaves the locale default alone, so a report authored
+// before precision existed renders exactly as it did.
+function getFractionDigits(precision) {
+    return Number.isFinite(precision)
+        ? { minimumFractionDigits: precision, maximumFractionDigits: precision }
+        : {};
+}
+function formatMeasureValue(value, format, precision) {
+    if (value === null || value === undefined || value === '') {
+        return '—';
     }
-    if (config.colorBy) {
-        return !!config.colorBy.column;
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+        return String(value);
+    }
+    const fractionDigits = getFractionDigits(precision);
+    switch (format) {
+        case 'percent':
+            return `${new Intl.NumberFormat(undefined, fractionDigits).format(numeric)}%`;
+        case 'currency':
+            return new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: 'USD',
+                // Whole dollars unless the measure asks for decimals — cents were
+                // unrepresentable before, because this was hardcoded to 0.
+                maximumFractionDigits: 0,
+                ...fractionDigits,
+            }).format(numeric);
+        default:
+            return new Intl.NumberFormat(undefined, fractionDigits).format(numeric);
     }
-    return (config.xAxis?.kind ?? 'category') === 'category'
-        && !config.xAxis?.granularity
-        && (config.measures?.length ?? 1) <= 1;
 }
-// The column colorBy groups by — its own when the config named one, otherwise
-// the x-axis it defaults to coloring.
-function colorByColumn(config) {
-    return isColorBy(config)
-        ? (config.colorBy?.column || config.xAxis?.column)
-        : undefined;
+
+// Text blocks — shared by the canvas and both exports, so a block reads the
+// same on screen, in the deck and in the PDF.
+//
+// A block's html arrives already rebuilt server-side from a small allowlist
+// (ReportTextHtml): p, h1-h3, strong, em, u, s, ul/ol/li, br, a, and span with
+// color / background-color / font-size / font-weight / font-family, plus
+// text-align on a block. Everything here only has to understand that set.
+// Body text size, points, and the heading sizes — the same numbers the canvas
+// stylesheet uses, so an unstyled paragraph is one size everywhere.
+const DEFAULT_TEXT_SIZE = 12;
+const HEADING_TEXT_SIZES = { 1: 24, 2: 18, 3: 14 };
+const DEFAULT_TEXT_COLOR = '#1f2933';
+// The tokens a block may carry, with what fills each. {{page.number}} is the
+// page's position among the report's pages (1-based), which is what makes a
+// shared footer number every page correctly.
+const TOKENS$1 = {
+    'page.number': (context) => String(context.pageNumber),
+    'page.name': (context) => context.pageName,
+    'report.name': (context) => context.reportName,
+};
+// Replace every {{token}} in the html. Values are html-escaped: a page named
+// "R&D <draft>" must read as that, not as markup.
+function fillTextTokens(html, context) {
+    return html.replace(/\{\{\s*([a-z.]+)\s*\}\}/gi, (match, token) => {
+        const fill = TOKENS$1[token.toLowerCase()];
+        return fill ? escapeHtml(fill(context)) : match;
+    });
 }
-function extractChartSeries(component, data) {
-    const config = component.config;
-    const xColumn = config.xAxis?.column ?? data.columns[0];
-    const splitColumn = config.splitBy?.column;
-    // colorBy emits one series per category too (so each bar carries its own
-    // color + legend entry), but the bars are overlapped to full width in
-    // buildAxisOption rather than laid side-by-side. splitBy wins if both are set.
-    const groupColumn = splitColumn || colorByColumn(config);
-    const measures = config.measures?.length
-        ? config.measures
-        : [{ column: data.columns[data.columns.length - 1] }];
-    const rawCategories = uniqueValues(data.rows, xColumn);
-    const categories = rawCategories.map((category) => String(category ?? '—'));
-    const series = [];
-    if (groupColumn) {
-        // One series per group value (splitBy/colorBy), pivoted over the first measure.
-        const measure = measures[0];
-        for (const groupValue of uniqueValues(data.rows, groupColumn)) {
-            const byCategory = new Map();
-            for (const row of data.rows) {
-                if (row[groupColumn] === groupValue) {
-                    byCategory.set(row[xColumn], row[measure.column]);
-                }
+// Walk a block's html into paragraphs of styled runs — the shape both exports
+// draw from. Tokens are filled first so a page number is just text by then.
+function textParagraphs(html, context) {
+    const document = new DOMParser().parseFromString(`<body>${fillTextTokens(html, context)}</body>`, 'text/html');
+    const paragraphs = [];
+    walkBlocks(document.body, paragraphs, null);
+    return paragraphs.filter((paragraph, index) => 
+    // Keep an empty paragraph between two others (a deliberate blank line), but
+    // not one left dangling at either end.
+    paragraph.runs.length || (index > 0 && index < paragraphs.length - 1));
+}
+// The html as plain text — what a block says, for anything that cannot style it.
+function textPlain(html, context) {
+    return textParagraphs(html, context)
+        .map((paragraph) => paragraph.runs.map((run) => run.text).join(''))
+        .join('\n');
+}
+function walkBlocks(parent, paragraphs, list) {
+    // Loose inline content between blocks (text straight under <body> or <li>)
+    // is gathered into a paragraph of its own.
+    let loose = null;
+    const flush = () => {
+        if (loose) {
+            paragraphs.push(loose);
+            loose = null;
+        }
+    };
+    parent.childNodes.forEach((node) => {
+        const name = node.nodeName.toLowerCase();
+        if (name === 'ul' || name === 'ol') {
+            flush();
+            walkBlocks(node, paragraphs, name === 'ul' ? 'bullet' : 'number');
+            return;
+        }
+        if (name === 'li') {
+            flush();
+            const item = { runs: [], bullet: list ?? 'bullet' };
+            const nested = [];
+            // A list item's first paragraph IS the item; anything after it is its own
+            // line under the same bullet.
+            walkBlocks(node, nested, list);
+            const [first, ...rest] = nested.length ? nested : [item];
+            paragraphs.push({ ...first, bullet: list ?? 'bullet' }, ...rest);
+            return;
+        }
+        if (name === 'p' || /^h[1-3]$/.test(name)) {
+            flush();
+            const element = node;
+            const heading = name.startsWith('h') ? Number(name[1]) : undefined;
+            const paragraph = {
+                runs: [],
+                align: blockAlign(element),
+                bullet: undefined,
+                heading,
+            };
+            const base = heading
+                ? { bold: true, fontSize: HEADING_TEXT_SIZES[heading] }
+                : {};
+            walkInline(node, base, paragraph, paragraphs);
+            paragraphs.push(paragraph);
+            return;
+        }
+        loose = loose ?? { runs: [] };
+        walkInline(node, {}, loose, paragraphs, true);
+    });
+    flush();
+}
+// Accumulate inline styles down the tree. A <br> ends the current line: the
+// runs after it start a new paragraph with the same alignment and bullet.
+function walkInline(node, style, paragraph, paragraphs, isSelf = false) {
+    const visit = (child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            const text = child.textContent ?? '';
+            if (text) {
+                paragraph.runs.push({ ...style, text });
             }
-            series.push({
-                name: String(groupValue ?? '—'),
-                values: rawCategories.map((category) => numeric(byCategory.get(category))),
-                type: measure.type,
-            });
+            return;
+        }
+        if (child.nodeType !== Node.ELEMENT_NODE) {
+            return;
+        }
+        const element = child;
+        const name = element.nodeName.toLowerCase();
+        if (name === 'br') {
+            paragraphs.push({ ...paragraph, runs: [...paragraph.runs] });
+            paragraph.runs.length = 0;
+            return;
         }
+        walkInline(element, { ...style, ...inlineStyle(element) }, paragraph, paragraphs);
+    };
+    if (isSelf) {
+        visit(node);
     }
     else {
-        for (const measure of measures) {
-            const byCategory = new Map();
-            for (const row of data.rows) {
-                byCategory.set(row[xColumn], row[measure.column]);
-            }
-            series.push({
-                name: measure.label ?? measure.column,
-                values: rawCategories.map((category) => numeric(byCategory.get(category))),
-                type: measure.type,
-            });
-        }
+        node.childNodes.forEach(visit);
     }
-    return { categories, series };
-}
-// The type each extracted series is drawn as: its measure's own type when it
-// names one, the chart's chartType otherwise. More than one distinct type is a
-// combo chart. Shared with the PowerPoint export so both media draw each series
-// the same way.
-function seriesTypes(extracted, chartType) {
-    return extracted.series.map((series) => series.type ?? chartType);
 }
-// The one pure mapping from our standard camelCase chart config + the data
-// endpoint's rows to an ECharts option. Everything visual that isn't in the
-// registered 'report' theme is decided here, so report standards have exactly
-// two homes.
-function buildChartOption(component, data) {
-    const config = component.config;
-    const chartType = config.chartType ?? 'bar';
-    if (chartType === 'pie' || chartType === 'donut') {
-        return buildPieOption(component, data, chartType === 'donut');
+function inlineStyle(element) {
+    const name = element.nodeName.toLowerCase();
+    const style = {};
+    if (name === 'strong') {
+        style.bold = true;
     }
-    return buildAxisOption(component, data, chartType);
-}
-function buildAxisOption(component, data, chartType) {
-    const config = component.config;
-    const extracted = extractChartSeries(component, data);
+    if (name === 'em') {
+        style.italic = true;
+    }
+    if (name === 'u') {
+        style.underline = true;
+    }
+    if (name === 's') {
+        style.strike = true;
+    }
+    if (name === 'a') {
+        style.link = element.getAttribute('href') ?? undefined;
+        style.underline = true;
+    }
+    const css = element.style;
+    if (css.color) {
+        style.color = hexColor(css.color);
+    }
+    if (css.backgroundColor) {
+        style.highlight = hexColor(css.backgroundColor);
+    }
+    if (css.fontSize) {
+        style.fontSize = points(css.fontSize);
+    }
+    if (css.fontWeight) {
+        style.bold = css.fontWeight === 'bold' || Number(css.fontWeight) >= 600;
+    }
+    if (css.fontStyle) {
+        style.italic = css.fontStyle === 'italic';
+    }
+    if (css.textDecoration) {
+        style.underline = css.textDecoration.includes('underline');
+        style.strike = css.textDecoration.includes('line-through');
+    }
+    if (css.fontFamily) {
+        style.fontFace = css.fontFamily.split(',')[0].replace(/["']/g, '').trim();
+    }
+    return style;
+}
+function blockAlign(element) {
+    const align = element.style.textAlign;
+    return align === 'center' || align === 'right' || align === 'justify' ? align : undefined;
+}
+// A CSS font-size in points. The canvas renders at 96px per inch, so 1px is
+// exactly 0.75pt; em/rem/% are relative to the body size.
+function points(value) {
+    const match = /^([\d.]+)(pt|px|em|rem|%)$/.exec(value.trim());
+    if (!match) {
+        return undefined;
+    }
+    const size = Number(match[1]);
+    switch (match[2]) {
+        case 'pt':
+            return size;
+        case 'px':
+            return size * 0.75;
+        case '%':
+            return (size / 100) * DEFAULT_TEXT_SIZE;
+        default:
+            return size * DEFAULT_TEXT_SIZE;
+    }
+}
+// Any CSS color the allowlist lets through (hex, rgb(), a name) as #rrggbb —
+// the one form both exports accept. The browser resolves it, so a named color
+// comes out exactly as the canvas painted it.
+let colorContext = null;
+function hexColor(value) {
+    colorContext = colorContext ?? document.createElement('canvas').getContext('2d');
+    if (!colorContext) {
+        return undefined;
+    }
+    colorContext.fillStyle = '#000000';
+    colorContext.fillStyle = value;
+    const resolved = String(colorContext.fillStyle);
+    if (resolved.startsWith('#')) {
+        return resolved;
+    }
+    // rgba(...) for a translucent color — drop the alpha, keep the hue.
+    const channels = resolved.match(/[\d.]+/g)?.slice(0, 3).map(Number) ?? [];
+    return channels.length === 3
+        ? `#${channels.map((channel) => Math.round(channel).toString(16).padStart(2, '0')).join('')}`
+        : undefined;
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+// The report chart palette — one definition shared by the ECharts theme (on
+// screen), the PowerPoint export's native chart colors, and the PDF export,
+// so a series keeps its color across every medium.
+const REPORT_CHART_COLORS = [
+    '4e79a7', 'f28e2b', 'e15759', '76b7b2', '59a14f',
+    'edc948', 'b07aa1', 'ff9da7', '9c755f', 'bab0ac',
+];
+// CSS-hex form for ECharts.
+const REPORT_CHART_COLORS_CSS = REPORT_CHART_COLORS.map((color) => `#${color}`);
+// A waterfall colors each bar by what it does to the running total, in the
+// order Excel and PowerPoint use by default: a rise takes the first series
+// color, a fall the second, and the closing total a neutral gray.
+const REPORT_WATERFALL_COLORS = {
+    rise: REPORT_CHART_COLORS[0],
+    fall: REPORT_CHART_COLORS[1],
+    total: REPORT_CHART_COLORS[9],
+};
+
+// colorBy applies only to single-dimension bar charts, and only when splitBy
+// isn't already driving multiple series: it colors each bar by its category and
+// shows a legend (one series per category, overlapped to full width).
+//
+// It is the DEFAULT for a categorical bar chart rather than something the config
+// has to ask for. A bar chart whose x-axis is a category — provinces, statuses,
+// clinics — is comparing those categories to each other, and one flat color with
+// no legend is the wrong reading of it in essentially every case. Requiring
+// colorBy to opt in meant every such chart rendered monochrome unless whoever
+// wrote the config remembered an optional property, which is a default set the
+// wrong way round: the common case should not need the flag.
+//
+// A TIME axis is excluded: consecutive periods are one series moving, not
+// categories being compared, and coloring each month differently reads as
+// unrelated groups. Explicitly opting out — colorBy: {column: ''} or a
+// config.legend of 'hidden' — still wins, so a caller that wants one flat color
+// can say so.
+//
+// "Bar chart" is the type the lone measure is actually DRAWN as: its own type
+// when it names one, which can turn a line chart's single series into bars or
+// a bar chart's into a line.
+function isColorBy(config) {
+    if (config.splitBy?.column || (config.measures?.[0]?.type ?? config.chartType ?? 'bar') !== 'bar') {
+        return false;
+    }
+    if (config.colorBy) {
+        return !!config.colorBy.column;
+    }
+    return (config.xAxis?.kind ?? 'category') === 'category'
+        && !config.xAxis?.granularity
+        && (config.measures?.length ?? 1) <= 1;
+}
+// The column colorBy groups by — its own when the config named one, otherwise
+// the x-axis it defaults to coloring.
+function colorByColumn(config) {
+    return isColorBy(config)
+        ? (config.colorBy?.column || config.xAxis?.column)
+        : undefined;
+}
+function extractChartSeries(component, data) {
+    const config = component.config;
+    const xColumn = config.xAxis?.column ?? data.columns[0];
+    const splitColumn = config.splitBy?.column;
+    // colorBy emits one series per category too (so each bar carries its own
+    // color + legend entry), but the bars are overlapped to full width in
+    // buildAxisOption rather than laid side-by-side. splitBy wins if both are set.
+    const groupColumn = splitColumn || colorByColumn(config);
+    const measures = config.measures?.length
+        ? config.measures
+        : [{ column: data.columns[data.columns.length - 1] }];
+    const rawCategories = uniqueValues(data.rows, xColumn);
+    const categories = rawCategories.map((category) => String(category ?? '—'));
+    const series = [];
+    if (groupColumn) {
+        // One series per group value (splitBy/colorBy), pivoted over the first measure.
+        const measure = measures[0];
+        for (const groupValue of uniqueValues(data.rows, groupColumn)) {
+            const byCategory = new Map();
+            for (const row of data.rows) {
+                if (row[groupColumn] === groupValue) {
+                    byCategory.set(row[xColumn], row[measure.column]);
+                }
+            }
+            series.push({
+                name: String(groupValue ?? '—'),
+                values: rawCategories.map((category) => numeric(byCategory.get(category))),
+                type: measure.type,
+            });
+        }
+    }
+    else {
+        for (const measure of measures) {
+            const byCategory = new Map();
+            for (const row of data.rows) {
+                byCategory.set(row[xColumn], row[measure.column]);
+            }
+            series.push({
+                name: measure.label ?? measure.column,
+                values: rawCategories.map((category) => numeric(byCategory.get(category))),
+                type: measure.type,
+            });
+        }
+    }
+    return { categories, series };
+}
+// The type each extracted series is drawn as: its measure's own type when it
+// names one, the chart's chartType otherwise. More than one distinct type is a
+// combo chart. Shared with the PowerPoint export so both media draw each series
+// the same way.
+function seriesTypes(extracted, chartType) {
+    return extracted.series.map((series) => series.type ?? chartType);
+}
+const WATERFALL_TOTAL_LABEL = 'Total';
+// A waterfall's bars from its one measure: each category's value is how far the
+// running total moves there, and a last Total bar shows where it ended. A
+// category with no value moves nothing and draws no bar. Shared with the
+// PowerPoint export so both media draw the same steps.
+function extractWaterfall(component, data) {
+    const extracted = extractChartSeries(component, data);
+    const values = extracted.series[0]?.values ?? [];
+    const steps = [];
+    let total = 0;
+    extracted.categories.forEach((category, index) => {
+        const change = values[index] ?? null;
+        steps.push({ category, start: total, change, kind: (change ?? 0) < 0 ? 'fall' : 'rise' });
+        total += change ?? 0;
+    });
+    steps.push({ category: WATERFALL_TOTAL_LABEL, start: 0, change: total, kind: 'total' });
+    return { name: extracted.series[0]?.name ?? '', steps };
+}
+// The one pure mapping from our standard camelCase chart config + the data
+// endpoint's rows to an ECharts option. Everything visual that isn't in the
+// registered 'report' theme is decided here, so report standards have exactly
+// two homes.
+function buildChartOption(component, data) {
+    const config = component.config;
+    const chartType = config.chartType ?? 'bar';
+    if (chartType === 'pie' || chartType === 'donut') {
+        return buildPieOption(component, data, chartType === 'donut');
+    }
+    if (chartType === 'waterfall') {
+        return buildWaterfallOption(component, data);
+    }
+    return buildAxisOption(component, data, chartType);
+}
+function buildAxisOption(component, data, chartType) {
+    const config = component.config;
+    const extracted = extractChartSeries(component, data);
     const horizontal = config.orientation === 'horizontal';
     const colorBy = isColorBy(config);
     const types = seriesTypes(extracted, chartType);
@@ -1099,15 +1399,7 @@ function buildAxisOption(component, data, chartType) {
     // a combo each type stacks only with its own kind, so a line of a rate never
     // sits on top of the bars' total.
     const series = extracted.series.map((extractedSeries, index) => buildSeries(extractedSeries.name, extractedSeries.values, types[index], config.stacked ? (combo ? `total-${types[index]}` : 'total') : undefined, colorBy && index === 0, combo));
-    const granularity = bucketGranularity(data);
-    const categoryAxis = {
-        type: 'category',
-        data: extracted.categories,
-        name: config.xAxis?.label,
-        nameLocation: 'middle',
-        nameGap: granularity && spansMultipleYears(extracted.categories) ? 40 : 28,
-        ...periodAxisLabel(granularity, extracted.categories),
-    };
+    const categoryAxis = categoryAxisOption(config, data, extracted.categories);
     const valueAxis = { type: 'value' };
     const legendPosition = resolveLegendPosition(config, series.length, colorBy);
     return {
@@ -1121,6 +1413,87 @@ function buildAxisOption(component, data, chartType) {
         series,
     };
 }
+// The category axis of an axis chart or a waterfall: the categories in row
+// order, labeled as periods when the rows were bucketed by time.
+function categoryAxisOption(config, data, categories) {
+    const granularity = bucketGranularity(data);
+    return {
+        type: 'category',
+        data: categories,
+        name: config.xAxis?.label,
+        nameLocation: 'middle',
+        nameGap: granularity && spansMultipleYears(categories) ? 40 : 28,
+        ...periodAxisLabel(granularity, categories),
+    };
+}
+function buildWaterfallOption(component, data) {
+    const config = component.config;
+    const waterfall = extractWaterfall(component, data);
+    const categoryAxis = categoryAxisOption(config, data, waterfall.steps.map((step) => step.category));
+    const valueAxis = { type: 'value' };
+    const horizontal = config.orientation === 'horizontal';
+    // One visible series, so the legend is hidden unless the config pins it.
+    const legendPosition = resolveLegendPosition(config, 1);
+    const granularity = bucketGranularity(data);
+    return {
+        grid: axisGrid(legendPosition),
+        legend: { ...legendOption(legendPosition), data: [waterfall.name] },
+        // Per bar: the invisible base is silent, so only a step answers the hover.
+        tooltip: {
+            trigger: 'item',
+            formatter: (params) => waterfallTooltip(waterfall, (Array.isArray(params) ? params[0] : params).dataIndex, granularity),
+        },
+        xAxis: horizontal ? valueAxis : categoryAxis,
+        yAxis: horizontal ? categoryAxis : valueAxis,
+        series: waterfallSeries(waterfall),
+    };
+}
+// An invisible base series lifts each visible bar to where its step starts.
+// Both stack with the 'all' strategy, which adds signed values in series order,
+// so a fall draws DOWN from the total before it, even across zero. The default
+// same-sign stacking would hang a negative bar below the axis instead.
+function waterfallSeries(waterfall) {
+    return [
+        {
+            type: 'bar',
+            stack: 'waterfall',
+            stackStrategy: 'all',
+            data: waterfall.steps.map((step) => step.start),
+            barMaxWidth: 48,
+            itemStyle: { color: 'transparent' },
+            silent: true,
+        },
+        {
+            name: waterfall.name,
+            type: 'bar',
+            stack: 'waterfall',
+            stackStrategy: 'all',
+            barMaxWidth: 48,
+            // The series color is the rise color so a pinned legend shows it; each
+            // bar is then colored by what it does to the total.
+            itemStyle: { color: `#${REPORT_WATERFALL_COLORS.rise}` },
+            data: waterfall.steps.map((step) => ({
+                value: step.change,
+                itemStyle: { color: `#${REPORT_WATERFALL_COLORS[step.kind]}` },
+            })),
+        },
+    ];
+}
+// A step's tooltip: its period, how far it moved the running total and where
+// that left it. The closing Total shows the total alone. The category and the
+// measure name come from the data and the config, and ECharts sets the tooltip
+// as HTML, so both are escaped.
+function waterfallTooltip(waterfall, index, granularity) {
+    const step = waterfall.steps[index];
+    const category = escapeHtml(granularity ? formatPeriodLabel(step.category, granularity, true) : step.category);
+    const name = escapeHtml(waterfall.name);
+    if (step.kind === 'total') {
+        return `${category}<br/>${name}: ${formatMeasureValue(step.change)}`;
+    }
+    const sign = (step.change ?? 0) > 0 ? '+' : '';
+    return `${category}<br/>${name}: ${sign}${formatMeasureValue(step.change)}`
+        + `<br/>Running total: ${formatMeasureValue(step.start + (step.change ?? 0))}`;
+}
 // Default legend placement when the config doesn't pin one: pie charts read
 // best with the slice key beside them (right); axis charts only need a legend
 // to tell multiple series apart, so a single-series chart hides it. An explicit
@@ -1236,670 +1609,409 @@ function uniqueValues(rows, column) {
     const values = [];
     for (const row of rows) {
         const value = row[column];
-        if (!seen.has(value)) {
-            seen.add(value);
-            values.push(value);
-        }
-    }
-    return values;
-}
-function numeric(value) {
-    if (value === null || value === undefined || value === '') {
-        return null;
-    }
-    const parsed = Number(value);
-    return Number.isFinite(parsed) ? parsed : null;
-}
-// The effective time bucket the rows were grouped into (from the data endpoint),
-// or null when the x-axis isn't a time axis — gates the compact period labels.
-function bucketGranularity(data) {
-    return data.granularity && GRANULARITY_OPTIONS.some((option) => option.value === data.granularity)
-        ? data.granularity
-        : null;
-}
-// Whether the period-start categories cross a year boundary. When they don't,
-// the year is pure noise on every label, so it's dropped entirely.
-function spansMultipleYears(categories) {
-    const years = new Set();
-    for (const category of categories) {
-        const date = parseISO(category);
-        if (isValid(date)) {
-            years.add(date.getFullYear());
-        }
-    }
-    return years.size > 1;
-}
-// A bucket's period-start split into its primary label and its year. Day/week
-// read as "May 1", month as "May", quarter as "Q2", year as "2025". Returns null
-// for a value that isn't a parseable date (left as-is by callers).
-function periodLabelParts(value, granularity) {
-    const date = parseISO(value);
-    if (!isValid(date)) {
-        return null;
-    }
-    const year = String(date.getFullYear());
-    switch (granularity) {
-        case 'year':
-            return { primary: year, year };
-        case 'quarter':
-            return { primary: `Q${Math.floor(date.getMonth() / 3) + 1}`, year };
-        case 'month':
-            return { primary: format(date, 'MMMM'), year };
-        default: // day, week — the bucket start as a compact "MMM d"
-            return { primary: format(date, 'MMM d'), year };
-    }
-}
-// A compact single-line period label (year appended only when the data spans
-// years) — for media that can't do a styled second line, e.g. PowerPoint.
-function formatPeriodLabel(value, granularity, multiYear) {
-    const parts = periodLabelParts(value, granularity);
-    if (!parts) {
-        return value;
-    }
-    return multiYear && granularity !== 'year' ? `${parts.primary} ${parts.year}` : parts.primary;
-}
-// ECharts category-axis label config for a time bucket: the primary label on
-// line one, and — only when the data spans multiple years — the year on a small
-// gray second line, centered under the tick (year granularity needs no second
-// line, it already is the year). Empty for a non-time axis (labels as-is).
-function periodAxisLabel(granularity, categories) {
-    if (!granularity) {
-        return {};
-    }
-    const multiYear = spansMultipleYears(categories);
-    return {
-        axisLabel: {
-            formatter: (value) => {
-                const parts = periodLabelParts(value, granularity);
-                if (!parts) {
-                    return value;
-                }
-                return multiYear && granularity !== 'year'
-                    ? `${parts.primary}\n{yr|${parts.year}}`
-                    : parts.primary;
-            },
-            rich: { yr: { fontSize: 10, color: '#9aa0a6', lineHeight: 14 } },
-        },
-    };
-}
-
-// ECharts host for a chart component. Pure rendering: the parent owns the
-// data fetch; this maps (component config, rows) → option and exposes the
-// chart instance for resize + the future image exports (getDataURL needs the
-// canvas renderer registered in theme/echarts.ts).
-class ComponentChartComponent {
-    component;
-    data = null;
-    options = null;
-    _chart = null;
-    ngOnChanges() {
-        this.options = this.component && this.data
-            ? buildChartOption(this.component, this.data)
-            : null;
-    }
-    onChartInit(chart) {
-        this._chart = chart;
-    }
-    // Called by the canvas when the box is resized in edit mode.
-    resize() {
-        this._chart?.resize();
-    }
-    // High-res image for the (later-phase) PPT/PDF exports.
-    getDataURL(pixelRatio = 3) {
-        return this._chart?.getDataURL({
-            type: 'png',
-            pixelRatio,
-            backgroundColor: '#ffffff',
-        }) ?? null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ComponentChartComponent, isStandalone: true, selector: "app-report-component-chart", inputs: { component: "component", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\">\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-host{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-report-component-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgxEchartsDirective,
-                    ], template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\">\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-host{width:100%;height:100%}\n"] }]
-        }], propDecorators: { component: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }] } });
-
-// Measure-value formatting shared by the KPI renderer and the exports — the
-// config's `format` (number | percent | currency) and `precision` mean the same
-// thing on screen, in PowerPoint and in PDF.
-// A bare `new Intl.NumberFormat()` defaults to maximumFractionDigits: 3, which
-// is why an unconfigured percentage reads 38.298%. When the measure names a
-// precision it is pinned as BOTH the minimum and the maximum, so a column of
-// rates lines up instead of each value showing however many decimals it happens
-// to need. Undefined leaves the locale default alone, so a report authored
-// before precision existed renders exactly as it did.
-function getFractionDigits(precision) {
-    return Number.isFinite(precision)
-        ? { minimumFractionDigits: precision, maximumFractionDigits: precision }
-        : {};
-}
-function formatMeasureValue(value, format, precision) {
-    if (value === null || value === undefined || value === '') {
-        return '—';
-    }
-    const numeric = Number(value);
-    if (!Number.isFinite(numeric)) {
-        return String(value);
-    }
-    const fractionDigits = getFractionDigits(precision);
-    switch (format) {
-        case 'percent':
-            return `${new Intl.NumberFormat(undefined, fractionDigits).format(numeric)}%`;
-        case 'currency':
-            return new Intl.NumberFormat(undefined, {
-                style: 'currency',
-                currency: 'USD',
-                // Whole dollars unless the measure asks for decimals — cents were
-                // unrepresentable before, because this was hardcoded to 0.
-                maximumFractionDigits: 0,
-                ...fractionDigits,
-            }).format(numeric);
-        default:
-            return new Intl.NumberFormat(undefined, fractionDigits).format(numeric);
-    }
-}
-
-// A single big number: the component's measure aggregated over all (filtered)
-// rows server-side; this just formats the one cell.
-class ComponentKpiComponent {
-    component;
-    data = null;
-    value = '—';
-    label = '';
-    ngOnChanges() {
-        const config = (this.component?.config ?? {});
-        this.label = config.measure?.label ?? '';
-        const row = this.data?.rows?.[0];
-        if (!row) {
-            this.value = '—';
-            return;
-        }
-        const column = config.measure?.column ?? Object.keys(row)[0];
-        this.value = formatMeasureValue(row[column], config.measure?.format, config.measure?.precision);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentKpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentKpiComponent, isStandalone: true, selector: "app-report-component-kpi", inputs: { component: "component", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"kpi\">\n  <div class=\"kpi-value\">{{ value }}</div>\n  @if (label) {\n    <div class=\"kpi-label\">{{ label }}</div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.kpi .kpi-value{font-size:34px;font-weight:600;color:#1f2933;line-height:1}.kpi .kpi-label{font-size:12px;color:#7b8794}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentKpiComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-report-component-kpi', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"kpi\">\n  <div class=\"kpi-value\">{{ value }}</div>\n  @if (label) {\n    <div class=\"kpi-label\">{{ label }}</div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.kpi .kpi-value{font-size:34px;font-weight:600;color:#1f2933;line-height:1}.kpi .kpi-label{font-size:12px;color:#7b8794}\n"] }]
-        }], propDecorators: { component: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }] } });
-
-// A list component: FsList + FsFilter rendered from the component's config and
-// its report_filters rows. The component's own filter bar carries its filters
-// whose group renders at the component level; report-level groups apply
-// through the shared filter-state service and merge into every request.
-// Paging and sorting are pushed into the SQL wrap server-side.
-class ComponentListComponent {
-    reportId;
-    component;
-    groups;
-    listComponent;
-    listConfig;
-    // A plain list's columns are authored and fixed at init. A cross-tab's are
-    // the pivot dimension's VALUES, so they arrive with the rows and change
-    // whenever the filters do — which is why this is a signal rather than the
-    // one-shot read it used to be.
-    columns = signal([]);
-    // A cross-tab sorts only by its row-key column: every other header is a
-    // pivot value, and the server orders the long rows before pivoting, so a
-    // click on "Mar 2026" has nothing to order by.
-    pivoted = signal(false);
-    // A cut result is worse for a grid than for a list: the cut lands on the LONG
-    // rows before the reshape, so a pivot value living only in the tail vanishes
-    // as a whole COLUMN and straddled cells come back blank, indistinguishable
-    // from a real zero. The parent's truncation banner never fires for a list
-    // (it only renders what _load() fetched, which lists skip), so the warning
-    // belongs here.
-    truncated = signal(false);
-    _reportData = inject(ReportData);
-    _filterState = inject(ReportFilterStateService);
-    _destroyRef = inject(DestroyRef);
-    ngOnInit() {
-        const config = (this.component.config ?? {});
-        this.pivoted.set(!!config.pivotBy?.column);
-        this.columns.set(config.columns ?? []);
-        this._initListConfig(config);
-        // Report-level filter changes that scope this component re-run the list.
-        this._filterState.changesFor(this.component)
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => this.listComponent?.reload());
-    }
-    _initListConfig(config) {
-        this.listConfig = {
-            // Inside a report component the list is a clean data pane — no status
-            // bar, no reload button (filter changes already refetch).
-            status: false,
-            reload: false,
-            // Never touch the URL or persist filter/paging state — report filtering
-            // is session-only.
-            queryParam: false,
-            persist: false,
-            sort: config.sort
-                ? { value: config.sort.column, direction: config.sort.direction ?? 'asc' }
-                : undefined,
-            // Load-more: the list keeps a fixed, scrollable height and appends the
-            // next page in place instead of swapping pages. The button is pinned to
-            // the bottom of the scroll pane (see component SCSS).
-            //
-            // Uses the Offset strategy (offset + limit) rather than Many: in
-            // @firestitch/list the pagination template resolves `hasManyStrategy`
-            // BEFORE `loadMoreEnabled`, and Many renders a forward-only page pager —
-            // so Many would suppress the load-more button entirely. Offset + loadMore
-            // is the combination that actually renders and appends. `_fetch` already
-            // derives `page` from `offset`, so the server-side wrap is unaffected.
-            paging: {
-                limit: config.pageSize ?? 25,
-                strategy: PaginationStrategy.Offset,
-            },
-            loadMore: {
-                enabled: true,
-                label: 'Load more',
-                buttonType: 'stroked',
-            },
-            filters: this._ownFilters().map((filter) => this._filterItem(filter)),
-            fetch: (query) => this._fetch(query),
-        };
-    }
-    // The filters this list renders in its own bar: its report_filters whose
-    // group is component-level. Report-level groups render in the report bar.
-    _ownFilters() {
-        return (this.component.filters ?? [])
-            .filter((filter) => {
-            const group = this.groups?.get(filter.filterGroupId);
-            return filter.enabled && (!group || group.level === 'component' || group.level === 'both');
-        });
-    }
-    _filterItem(filter) {
-        const group = this.groups?.get(filter.filterGroupId);
-        const name = `f${filter.id}`;
-        const label = filter.label || group?.label || filter.filterColumn;
-        switch (group?.type) {
-            case 'dateRange':
-                return {
-                    name,
-                    type: ItemType.DateRange,
-                    label: [`${label} From`, `${label} To`],
-                };
-            case 'select':
-                return {
-                    name,
-                    type: ItemType.AutoCompleteChips,
-                    label,
-                    // The server sends { value, label }: the filter matches on the value
-                    // (an entity's stable id) while the viewer reads the label.
-                    values: () => this._reportData.filterOptions(this.reportId, filter.id)
-                        .pipe(map$1((options) => (options ?? [])
-                        .map((option) => ({ name: option.label, value: option.value })))),
-                };
-            case 'keyword':
-            default:
-                return {
-                    name,
-                    type: ItemType.Keyword,
-                    label,
-                };
-        }
-    }
-    _fetch(query) {
-        // Many/load-more sends `offset` + `limit` (not `page`); derive the page so
-        // the server-side wrap keeps working unchanged. Page strategy still sends
-        // `page` directly.
-        const pageSize = query.limit ?? 25;
-        const page = query.page
-            ?? (query.offset != null ? Math.floor(query.offset / pageSize) + 1 : 1);
-        const state = {
-            page,
-            pageSize,
-        };
-        const order = String(query.order ?? '');
-        if (order) {
-            const [column, direction] = order.split(',');
-            state.sort = { column, direction: direction === 'desc' ? 'desc' : 'asc' };
-        }
-        // Report-level values from the shared session state, merged with this
-        // list's own filter-bar values (own values win per filter).
-        const resolved = new Map();
-        for (const value of this._filterState.resolveForComponent(this.component)) {
-            resolved.set(value.filterId, value);
-        }
-        for (const value of this._barValues(query)) {
-            resolved.set(value.filterId, value);
-        }
-        return this._reportData
-            .componentData(this.reportId, this.component.id, [...resolved.values()], state)
-            .pipe(map$1((data) => {
-            // A cross-tab's headers come back with the rows: the row-key column
-            // first, then one per pivot value. Re-read them on every fetch, since
-            // a filter change can add or remove a column.
-            if (this.pivoted()) {
-                this.columns.set(this._pivotColumns(data));
-                this.truncated.set(!!data.truncated);
-            }
-            return {
-                data: data.rows ?? [],
-                paging: {
-                    limit: data.paging?.pageSize ?? state.pageSize,
-                    records: data.paging?.total ?? (data.rows?.length ?? 0),
-                    page: data.paging?.page ?? state.page,
-                },
-            };
-        }));
-    }
-    // A cross-tab's columns, built from the wire. The first is the row key and
-    // keeps its authored label; the rest are pivot VALUES used as headings. When
-    // the pivot axis is a time dimension the server sends the grain it bucketed
-    // at, so a period-start like "2026-01-01" is shown as "Jan 2026" — the same
-    // formatter the chart's x-axis uses, so a grid and a chart of the same query
-    // label their periods identically.
-    _pivotColumns(data) {
-        const config = (this.component.config ?? {});
-        const granularity = data.granularity;
-        const multiYear = this._spansMultipleYears(data.columns ?? []);
-        return (data.columns ?? []).map((column, index) => {
-            if (index === 0) {
-                return { column, label: config.rowBy?.label || column };
-            }
-            return {
-                column,
-                label: granularity ? formatPeriodLabel(column, granularity, multiYear) : column,
-            };
-        });
-    }
-    // Whether the period columns cross a year boundary, which decides if the
-    // formatter appends the year to each heading.
-    _spansMultipleYears(columns) {
-        const years = new Set(columns
-            .map((column) => /^(\d{4})-\d{2}-\d{2}/.exec(column))
-            .filter(Boolean)
-            .map((match) => match[1]));
-        return years.size > 1;
-    }
-    // The list's own FsFilter values, read back out of the fetch query by the
-    // `f<filterId>` naming convention.
-    _barValues(query) {
-        const values = [];
-        for (const filter of this._ownFilters()) {
-            const group = this.groups?.get(filter.filterGroupId);
-            const name = `f${filter.id}`;
-            if (group?.type === 'dateRange') {
-                const from = dateBoundString(query[`${name}From`]);
-                const to = dateBoundString(query[`${name}To`]);
-                if (from || to) {
-                    values.push({ filterId: filter.id, start: from, end: to });
-                }
-            }
-            else if (group?.type === 'select') {
-                // fs-filter joins a multi-select into one "a,b" string; split it back
-                // so each value binds separately (else `col IN ('a,b')` matches nothing).
-                const selected = query[name];
-                const selectedValues = Array.isArray(selected)
-                    ? selected
-                    : (selected ? String(selected).split(',') : []);
-                if (selectedValues.length) {
-                    values.push({ filterId: filter.id, values: selectedValues });
-                }
-            }
-            else {
-                const keyword = String(query[name] ?? '').trim();
-                if (keyword) {
-                    values.push({ filterId: filter.id, value: keyword });
-                }
-            }
-        }
-        return values;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-report-component-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        DatePipe,
-                        FsListModule,
-                    ], template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"] }]
-        }], propDecorators: { reportId: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], groups: [{
-                type: Input
-            }], listComponent: [{
-                type: ViewChild,
-                args: [FsListComponent]
-            }] } });
-
-// Text blocks — shared by the canvas and both exports, so a block reads the
-// same on screen, in the deck and in the PDF.
-//
-// A block's html arrives already rebuilt server-side from a small allowlist
-// (ReportTextHtml): p, h1-h3, strong, em, u, s, ul/ol/li, br, a, and span with
-// color / background-color / font-size / font-weight / font-family, plus
-// text-align on a block. Everything here only has to understand that set.
-// Body text size, points, and the heading sizes — the same numbers the canvas
-// stylesheet uses, so an unstyled paragraph is one size everywhere.
-const DEFAULT_TEXT_SIZE = 12;
-const HEADING_TEXT_SIZES = { 1: 24, 2: 18, 3: 14 };
-const DEFAULT_TEXT_COLOR = '#1f2933';
-// The tokens a block may carry, with what fills each. {{page.number}} is the
-// page's position among the report's pages (1-based), which is what makes a
-// shared footer number every page correctly.
-const TOKENS$1 = {
-    'page.number': (context) => String(context.pageNumber),
-    'page.name': (context) => context.pageName,
-    'report.name': (context) => context.reportName,
-};
-// Replace every {{token}} in the html. Values are html-escaped: a page named
-// "R&D <draft>" must read as that, not as markup.
-function fillTextTokens(html, context) {
-    return html.replace(/\{\{\s*([a-z.]+)\s*\}\}/gi, (match, token) => {
-        const fill = TOKENS$1[token.toLowerCase()];
-        return fill ? escapeHtml(fill(context)) : match;
-    });
-}
-// Walk a block's html into paragraphs of styled runs — the shape both exports
-// draw from. Tokens are filled first so a page number is just text by then.
-function textParagraphs(html, context) {
-    const document = new DOMParser().parseFromString(`<body>${fillTextTokens(html, context)}</body>`, 'text/html');
-    const paragraphs = [];
-    walkBlocks(document.body, paragraphs, null);
-    return paragraphs.filter((paragraph, index) => 
-    // Keep an empty paragraph between two others (a deliberate blank line), but
-    // not one left dangling at either end.
-    paragraph.runs.length || (index > 0 && index < paragraphs.length - 1));
-}
-// The html as plain text — what a block says, for anything that cannot style it.
-function textPlain(html, context) {
-    return textParagraphs(html, context)
-        .map((paragraph) => paragraph.runs.map((run) => run.text).join(''))
-        .join('\n');
-}
-function walkBlocks(parent, paragraphs, list) {
-    // Loose inline content between blocks (text straight under <body> or <li>)
-    // is gathered into a paragraph of its own.
-    let loose = null;
-    const flush = () => {
-        if (loose) {
-            paragraphs.push(loose);
-            loose = null;
-        }
-    };
-    parent.childNodes.forEach((node) => {
-        const name = node.nodeName.toLowerCase();
-        if (name === 'ul' || name === 'ol') {
-            flush();
-            walkBlocks(node, paragraphs, name === 'ul' ? 'bullet' : 'number');
-            return;
-        }
-        if (name === 'li') {
-            flush();
-            const item = { runs: [], bullet: list ?? 'bullet' };
-            const nested = [];
-            // A list item's first paragraph IS the item; anything after it is its own
-            // line under the same bullet.
-            walkBlocks(node, nested, list);
-            const [first, ...rest] = nested.length ? nested : [item];
-            paragraphs.push({ ...first, bullet: list ?? 'bullet' }, ...rest);
-            return;
-        }
-        if (name === 'p' || /^h[1-3]$/.test(name)) {
-            flush();
-            const element = node;
-            const heading = name.startsWith('h') ? Number(name[1]) : undefined;
-            const paragraph = {
-                runs: [],
-                align: blockAlign(element),
-                bullet: undefined,
-                heading,
-            };
-            const base = heading
-                ? { bold: true, fontSize: HEADING_TEXT_SIZES[heading] }
-                : {};
-            walkInline(node, base, paragraph, paragraphs);
-            paragraphs.push(paragraph);
-            return;
-        }
-        loose = loose ?? { runs: [] };
-        walkInline(node, {}, loose, paragraphs, true);
-    });
-    flush();
-}
-// Accumulate inline styles down the tree. A <br> ends the current line: the
-// runs after it start a new paragraph with the same alignment and bullet.
-function walkInline(node, style, paragraph, paragraphs, isSelf = false) {
-    const visit = (child) => {
-        if (child.nodeType === Node.TEXT_NODE) {
-            const text = child.textContent ?? '';
-            if (text) {
-                paragraph.runs.push({ ...style, text });
-            }
-            return;
-        }
-        if (child.nodeType !== Node.ELEMENT_NODE) {
-            return;
-        }
-        const element = child;
-        const name = element.nodeName.toLowerCase();
-        if (name === 'br') {
-            paragraphs.push({ ...paragraph, runs: [...paragraph.runs] });
-            paragraph.runs.length = 0;
-            return;
+        if (!seen.has(value)) {
+            seen.add(value);
+            values.push(value);
         }
-        walkInline(element, { ...style, ...inlineStyle(element) }, paragraph, paragraphs);
-    };
-    if (isSelf) {
-        visit(node);
     }
-    else {
-        node.childNodes.forEach(visit);
+    return values;
+}
+function numeric(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
     }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
 }
-function inlineStyle(element) {
-    const name = element.nodeName.toLowerCase();
-    const style = {};
-    if (name === 'strong') {
-        style.bold = true;
+// The effective time bucket the rows were grouped into (from the data endpoint),
+// or null when the x-axis isn't a time axis — gates the compact period labels.
+function bucketGranularity(data) {
+    return data.granularity && GRANULARITY_OPTIONS.some((option) => option.value === data.granularity)
+        ? data.granularity
+        : null;
+}
+// Whether the period-start categories cross a year boundary. When they don't,
+// the year is pure noise on every label, so it's dropped entirely.
+function spansMultipleYears(categories) {
+    const years = new Set();
+    for (const category of categories) {
+        const date = parseISO(category);
+        if (isValid(date)) {
+            years.add(date.getFullYear());
+        }
     }
-    if (name === 'em') {
-        style.italic = true;
+    return years.size > 1;
+}
+// A bucket's period-start split into its primary label and its year. Day/week
+// read as "May 1", month as "May", quarter as "Q2", year as "2025". Returns null
+// for a value that isn't a parseable date (left as-is by callers).
+function periodLabelParts(value, granularity) {
+    const date = parseISO(value);
+    if (!isValid(date)) {
+        return null;
     }
-    if (name === 'u') {
-        style.underline = true;
+    const year = String(date.getFullYear());
+    switch (granularity) {
+        case 'year':
+            return { primary: year, year };
+        case 'quarter':
+            return { primary: `Q${Math.floor(date.getMonth() / 3) + 1}`, year };
+        case 'month':
+            return { primary: format(date, 'MMMM'), year };
+        default: // day, week — the bucket start as a compact "MMM d"
+            return { primary: format(date, 'MMM d'), year };
     }
-    if (name === 's') {
-        style.strike = true;
+}
+// A compact single-line period label (year appended only when the data spans
+// years) — for media that can't do a styled second line, e.g. PowerPoint.
+function formatPeriodLabel(value, granularity, multiYear) {
+    const parts = periodLabelParts(value, granularity);
+    if (!parts) {
+        return value;
     }
-    if (name === 'a') {
-        style.link = element.getAttribute('href') ?? undefined;
-        style.underline = true;
+    return multiYear && granularity !== 'year' ? `${parts.primary} ${parts.year}` : parts.primary;
+}
+// ECharts category-axis label config for a time bucket: the primary label on
+// line one, and — only when the data spans multiple years — the year on a small
+// gray second line, centered under the tick (year granularity needs no second
+// line, it already is the year). Empty for a non-time axis (labels as-is).
+function periodAxisLabel(granularity, categories) {
+    if (!granularity) {
+        return {};
     }
-    const css = element.style;
-    if (css.color) {
-        style.color = hexColor(css.color);
+    const multiYear = spansMultipleYears(categories);
+    return {
+        axisLabel: {
+            formatter: (value) => {
+                const parts = periodLabelParts(value, granularity);
+                if (!parts) {
+                    return value;
+                }
+                return multiYear && granularity !== 'year'
+                    ? `${parts.primary}\n{yr|${parts.year}}`
+                    : parts.primary;
+            },
+            rich: { yr: { fontSize: 10, color: '#9aa0a6', lineHeight: 14 } },
+        },
+    };
+}
+
+// ECharts host for a chart component. Pure rendering: the parent owns the
+// data fetch; this maps (component config, rows) → option and exposes the
+// chart instance for resize + the future image exports (getDataURL needs the
+// canvas renderer registered in theme/echarts.ts).
+class ComponentChartComponent {
+    component;
+    data = null;
+    options = null;
+    _chart = null;
+    ngOnChanges() {
+        this.options = this.component && this.data
+            ? buildChartOption(this.component, this.data)
+            : null;
     }
-    if (css.backgroundColor) {
-        style.highlight = hexColor(css.backgroundColor);
+    onChartInit(chart) {
+        this._chart = chart;
     }
-    if (css.fontSize) {
-        style.fontSize = points(css.fontSize);
+    // Called by the canvas when the box is resized in edit mode.
+    resize() {
+        this._chart?.resize();
     }
-    if (css.fontWeight) {
-        style.bold = css.fontWeight === 'bold' || Number(css.fontWeight) >= 600;
+    // High-res image for the (later-phase) PPT/PDF exports.
+    getDataURL(pixelRatio = 3) {
+        return this._chart?.getDataURL({
+            type: 'png',
+            pixelRatio,
+            backgroundColor: '#ffffff',
+        }) ?? null;
     }
-    if (css.fontStyle) {
-        style.italic = css.fontStyle === 'italic';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ComponentChartComponent, isStandalone: true, selector: "app-report-component-chart", inputs: { component: "component", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\">\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-host{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-chart', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgxEchartsDirective,
+                    ], template: "<div\n  class=\"chart-host\"\n  echarts\n  [options]=\"options ?? {}\"\n  [theme]=\"'report'\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\">\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.chart-host{width:100%;height:100%}\n"] }]
+        }], propDecorators: { component: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+// A single big number: the component's measure aggregated over all (filtered)
+// rows server-side; this just formats the one cell.
+class ComponentKpiComponent {
+    component;
+    data = null;
+    value = '—';
+    label = '';
+    ngOnChanges() {
+        const config = (this.component?.config ?? {});
+        this.label = config.measure?.label ?? '';
+        const row = this.data?.rows?.[0];
+        if (!row) {
+            this.value = '—';
+            return;
+        }
+        const column = config.measure?.column ?? Object.keys(row)[0];
+        this.value = formatMeasureValue(row[column], config.measure?.format, config.measure?.precision);
     }
-    if (css.textDecoration) {
-        style.underline = css.textDecoration.includes('underline');
-        style.strike = css.textDecoration.includes('line-through');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentKpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentKpiComponent, isStandalone: true, selector: "app-report-component-kpi", inputs: { component: "component", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"kpi\">\n  <div class=\"kpi-value\">{{ value }}</div>\n  @if (label) {\n    <div class=\"kpi-label\">{{ label }}</div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.kpi .kpi-value{font-size:34px;font-weight:600;color:#1f2933;line-height:1}.kpi .kpi-label{font-size:12px;color:#7b8794}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentKpiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-kpi', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"kpi\">\n  <div class=\"kpi-value\">{{ value }}</div>\n  @if (label) {\n    <div class=\"kpi-label\">{{ label }}</div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.kpi{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.kpi .kpi-value{font-size:34px;font-weight:600;color:#1f2933;line-height:1}.kpi .kpi-label{font-size:12px;color:#7b8794}\n"] }]
+        }], propDecorators: { component: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+// A list component: FsList + FsFilter rendered from the component's config and
+// its report_filters rows. The component's own filter bar carries its filters
+// whose group renders at the component level; report-level groups apply
+// through the shared filter-state service and merge into every request.
+// Paging and sorting are pushed into the SQL wrap server-side.
+class ComponentListComponent {
+    reportId;
+    component;
+    groups;
+    listComponent;
+    listConfig;
+    // A plain list's columns are authored and fixed at init. A cross-tab's are
+    // the pivot dimension's VALUES, so they arrive with the rows and change
+    // whenever the filters do — which is why this is a signal rather than the
+    // one-shot read it used to be.
+    columns = signal([]);
+    // A cross-tab sorts only by its row-key column: every other header is a
+    // pivot value, and the server orders the long rows before pivoting, so a
+    // click on "Mar 2026" has nothing to order by.
+    pivoted = signal(false);
+    // A cut result is worse for a grid than for a list: the cut lands on the LONG
+    // rows before the reshape, so a pivot value living only in the tail vanishes
+    // as a whole COLUMN and straddled cells come back blank, indistinguishable
+    // from a real zero. The parent's truncation banner never fires for a list
+    // (it only renders what _load() fetched, which lists skip), so the warning
+    // belongs here.
+    truncated = signal(false);
+    _reportData = inject(ReportData);
+    _filterState = inject(ReportFilterStateService);
+    _destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        const config = (this.component.config ?? {});
+        this.pivoted.set(!!config.pivotBy?.column);
+        this.columns.set(config.columns ?? []);
+        this._initListConfig(config);
+        // Report-level filter changes that scope this component re-run the list.
+        this._filterState.changesFor(this.component)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this.listComponent?.reload());
+    }
+    _initListConfig(config) {
+        this.listConfig = {
+            // Inside a report component the list is a clean data pane — no status
+            // bar, no reload button (filter changes already refetch).
+            status: false,
+            reload: false,
+            // Never touch the URL or persist filter/paging state — report filtering
+            // is session-only.
+            queryParam: false,
+            persist: false,
+            sort: config.sort
+                ? { value: config.sort.column, direction: config.sort.direction ?? 'asc' }
+                : undefined,
+            // Load-more: the list keeps a fixed, scrollable height and appends the
+            // next page in place instead of swapping pages. The button is pinned to
+            // the bottom of the scroll pane (see component SCSS).
+            //
+            // Uses the Offset strategy (offset + limit) rather than Many: in
+            // @firestitch/list the pagination template resolves `hasManyStrategy`
+            // BEFORE `loadMoreEnabled`, and Many renders a forward-only page pager —
+            // so Many would suppress the load-more button entirely. Offset + loadMore
+            // is the combination that actually renders and appends. `_fetch` already
+            // derives `page` from `offset`, so the server-side wrap is unaffected.
+            paging: {
+                limit: config.pageSize ?? 25,
+                strategy: PaginationStrategy.Offset,
+            },
+            loadMore: {
+                enabled: true,
+                label: 'Load more',
+                buttonType: 'stroked',
+            },
+            filters: this._ownFilters().map((filter) => this._filterItem(filter)),
+            fetch: (query) => this._fetch(query),
+        };
+    }
+    // The filters this list renders in its own bar: its report_filters whose
+    // group is component-level. Report-level groups render in the report bar.
+    _ownFilters() {
+        return (this.component.filters ?? [])
+            .filter((filter) => {
+            const group = this.groups?.get(filter.filterGroupId);
+            return filter.enabled && (!group || group.level === 'component' || group.level === 'both');
+        });
     }
-    if (css.fontFamily) {
-        style.fontFace = css.fontFamily.split(',')[0].replace(/["']/g, '').trim();
+    _filterItem(filter) {
+        const group = this.groups?.get(filter.filterGroupId);
+        const name = `f${filter.id}`;
+        const label = filter.label || group?.label || filter.filterColumn;
+        switch (group?.type) {
+            case 'dateRange':
+                return {
+                    name,
+                    type: ItemType.DateRange,
+                    label: [`${label} From`, `${label} To`],
+                };
+            case 'select':
+                return {
+                    name,
+                    type: ItemType.AutoCompleteChips,
+                    label,
+                    // The server sends { value, label }: the filter matches on the value
+                    // (an entity's stable id) while the viewer reads the label.
+                    values: () => this._reportData.filterOptions(this.reportId, filter.id)
+                        .pipe(map$1((options) => (options ?? [])
+                        .map((option) => ({ name: option.label, value: option.value })))),
+                };
+            case 'keyword':
+            default:
+                return {
+                    name,
+                    type: ItemType.Keyword,
+                    label,
+                };
+        }
     }
-    return style;
-}
-function blockAlign(element) {
-    const align = element.style.textAlign;
-    return align === 'center' || align === 'right' || align === 'justify' ? align : undefined;
-}
-// A CSS font-size in points. The canvas renders at 96px per inch, so 1px is
-// exactly 0.75pt; em/rem/% are relative to the body size.
-function points(value) {
-    const match = /^([\d.]+)(pt|px|em|rem|%)$/.exec(value.trim());
-    if (!match) {
-        return undefined;
+    _fetch(query) {
+        // Many/load-more sends `offset` + `limit` (not `page`); derive the page so
+        // the server-side wrap keeps working unchanged. Page strategy still sends
+        // `page` directly.
+        const pageSize = query.limit ?? 25;
+        const page = query.page
+            ?? (query.offset != null ? Math.floor(query.offset / pageSize) + 1 : 1);
+        const state = {
+            page,
+            pageSize,
+        };
+        const order = String(query.order ?? '');
+        if (order) {
+            const [column, direction] = order.split(',');
+            state.sort = { column, direction: direction === 'desc' ? 'desc' : 'asc' };
+        }
+        // Report-level values from the shared session state, merged with this
+        // list's own filter-bar values (own values win per filter).
+        const resolved = new Map();
+        for (const value of this._filterState.resolveForComponent(this.component)) {
+            resolved.set(value.filterId, value);
+        }
+        for (const value of this._barValues(query)) {
+            resolved.set(value.filterId, value);
+        }
+        return this._reportData
+            .componentData(this.reportId, this.component.id, [...resolved.values()], state)
+            .pipe(map$1((data) => {
+            // A cross-tab's headers come back with the rows: the row-key column
+            // first, then one per pivot value. Re-read them on every fetch, since
+            // a filter change can add or remove a column.
+            if (this.pivoted()) {
+                this.columns.set(this._pivotColumns(data));
+                this.truncated.set(!!data.truncated);
+            }
+            return {
+                data: data.rows ?? [],
+                paging: {
+                    limit: data.paging?.pageSize ?? state.pageSize,
+                    records: data.paging?.total ?? (data.rows?.length ?? 0),
+                    page: data.paging?.page ?? state.page,
+                },
+            };
+        }));
     }
-    const size = Number(match[1]);
-    switch (match[2]) {
-        case 'pt':
-            return size;
-        case 'px':
-            return size * 0.75;
-        case '%':
-            return (size / 100) * DEFAULT_TEXT_SIZE;
-        default:
-            return size * DEFAULT_TEXT_SIZE;
+    // A cross-tab's columns, built from the wire. The first is the row key and
+    // keeps its authored label; the rest are pivot VALUES used as headings. When
+    // the pivot axis is a time dimension the server sends the grain it bucketed
+    // at, so a period-start like "2026-01-01" is shown as "Jan 2026" — the same
+    // formatter the chart's x-axis uses, so a grid and a chart of the same query
+    // label their periods identically.
+    _pivotColumns(data) {
+        const config = (this.component.config ?? {});
+        const granularity = data.granularity;
+        const multiYear = this._spansMultipleYears(data.columns ?? []);
+        return (data.columns ?? []).map((column, index) => {
+            if (index === 0) {
+                return { column, label: config.rowBy?.label || column };
+            }
+            return {
+                column,
+                label: granularity ? formatPeriodLabel(column, granularity, multiYear) : column,
+            };
+        });
     }
-}
-// Any CSS color the allowlist lets through (hex, rgb(), a name) as #rrggbb —
-// the one form both exports accept. The browser resolves it, so a named color
-// comes out exactly as the canvas painted it.
-let colorContext = null;
-function hexColor(value) {
-    colorContext = colorContext ?? document.createElement('canvas').getContext('2d');
-    if (!colorContext) {
-        return undefined;
+    // Whether the period columns cross a year boundary, which decides if the
+    // formatter appends the year to each heading.
+    _spansMultipleYears(columns) {
+        const years = new Set(columns
+            .map((column) => /^(\d{4})-\d{2}-\d{2}/.exec(column))
+            .filter(Boolean)
+            .map((match) => match[1]));
+        return years.size > 1;
     }
-    colorContext.fillStyle = '#000000';
-    colorContext.fillStyle = value;
-    const resolved = String(colorContext.fillStyle);
-    if (resolved.startsWith('#')) {
-        return resolved;
+    // The list's own FsFilter values, read back out of the fetch query by the
+    // `f<filterId>` naming convention.
+    _barValues(query) {
+        const values = [];
+        for (const filter of this._ownFilters()) {
+            const group = this.groups?.get(filter.filterGroupId);
+            const name = `f${filter.id}`;
+            if (group?.type === 'dateRange') {
+                const from = dateBoundString(query[`${name}From`]);
+                const to = dateBoundString(query[`${name}To`]);
+                if (from || to) {
+                    values.push({ filterId: filter.id, start: from, end: to });
+                }
+            }
+            else if (group?.type === 'select') {
+                // fs-filter joins a multi-select into one "a,b" string; split it back
+                // so each value binds separately (else `col IN ('a,b')` matches nothing).
+                const selected = query[name];
+                const selectedValues = Array.isArray(selected)
+                    ? selected
+                    : (selected ? String(selected).split(',') : []);
+                if (selectedValues.length) {
+                    values.push({ filterId: filter.id, values: selectedValues });
+                }
+            }
+            else {
+                const keyword = String(query[name] ?? '').trim();
+                if (keyword) {
+                    values.push({ filterId: filter.id, value: keyword });
+                }
+            }
+        }
+        return values;
     }
-    // rgba(...) for a translucent color — drop the alpha, keep the hue.
-    const channels = resolved.match(/[\d.]+/g)?.slice(0, 3).map(Number) ?? [];
-    return channels.length === 3
-        ? `#${channels.map((channel) => Math.round(channel).toString(16).padStart(2, '0')).join('')}`
-        : undefined;
-}
-function escapeHtml(value) {
-    return value
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentListComponent, isStandalone: true, selector: "app-report-component-list", inputs: { reportId: "reportId", component: "component", groups: "groups" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines", "cellRowType"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell],[fsListCell]", inputs: ["colspan", "align", "class", "fsListCell", "configTyping"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-report-component-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DatePipe,
+                        FsListModule,
+                    ], template: "@if (truncated()) {\n  <div class=\"pivot-truncated\">\n    This grid was built from a partial result, so some columns or values may be missing. Narrow it with a filter.\n  </div>\n}\n\n<fs-list [config]=\"listConfig\">\n  @for (column of columns(); track column.column) {\n    <fs-list-column\n      [name]=\"column.column\"\n      [title]=\"column.label || column.column\"\n      [sortable]=\"!pivoted() || $first\">\n      <ng-template\n        fs-list-cell\n        let-row=\"row\">\n        @if (column.format === 'date') {\n          {{ row[column.column] | date: 'mediumDate' }}\n        } @else {\n          {{ row[column.column] }}\n        }\n      </ng-template>\n    </fs-list-column>\n  }\n</fs-list>\n", styles: [":host{display:block;width:100%;height:100%;min-height:0}:host ::ng-deep fs-list{display:flex;flex-direction:column;height:100%;min-height:0}:host ::ng-deep fs-list .fs-list-container{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%}:host ::ng-deep fs-list .fs-list-header-container{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-container .fs-list-table-container{flex:1 1 auto;min-height:0;overflow-y:auto!important}:host ::ng-deep fs-list .fs-list-table thead th{position:sticky;top:0;z-index:1;background-color:#fff}:host ::ng-deep fs-list fs-list-pagination{flex:0 0 auto}:host ::ng-deep fs-list .fs-list-load-more{position:sticky;bottom:0;background-color:#fff}:host ::ng-deep fs-list .fs-list-load-more button{margin-top:0}.pivot-truncated{flex:0 0 auto;padding:8px 12px;margin-bottom:8px;border-radius:4px;background-color:#fff4e5;color:#663c00}\n"] }]
+        }], propDecorators: { reportId: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], listComponent: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }] } });
 
 // Point sizes — the report's type unit (1:1 with PowerPoint and PDF).
 const FONT_SIZES = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '40', '48', '60', '72'];
@@ -3910,7 +4022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 // complete synchronously after setOption.
 async function renderChartImage(component, data, width, height, pixelRatio = 3) {
     // The same tree-shaken echarts build + 'report' theme the live canvas uses.
-    const echarts = (await import('./firestitch-report-echarts-CFkoNvo_.mjs')).default;
+    const echarts = (await import('./firestitch-report-echarts-CtKYuRcT.mjs')).default;
     const host = document.createElement('div');
     host.style.width = `${width}px`;
     host.style.height = `${height}px`;
@@ -4236,16 +4348,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
-// The report chart palette — one definition shared by the ECharts theme (on
-// screen), the PowerPoint export's native chart colors, and the PDF export,
-// so a series keeps its color across every medium.
-const REPORT_CHART_COLORS = [
-    '4e79a7', 'f28e2b', 'e15759', '76b7b2', '59a14f',
-    'edc948', 'b07aa1', 'ff9da7', '9c755f', 'bab0ac',
-];
-// CSS-hex form for ECharts.
-const REPORT_CHART_COLORS_CSS = REPORT_CHART_COLORS.map((color) => `#${color}`);
-
 // Component title strip height on the slide, inches.
 const TITLE_H = 0.28;
 // Approximate table row height, inches — drives the rows-that-fit cap.
@@ -4260,6 +4362,13 @@ const PPTX_LEGEND_POS = {
     right: 'r',
     hidden: 't',
 };
+// What a waterfall's series are called in PowerPoint's data sheet and on hover.
+// The legend stays off, as it does on screen.
+const WATERFALL_SERIES_NAMES = {
+    rise: 'Increase',
+    fall: 'Decrease',
+    total: 'Total',
+};
 // Builds the PowerPoint deck client-side with pptxgenjs. Charts are NATIVE
 // editable PowerPoint charts (slide.addChart writes real chart XML with an
 // embedded data workbook — "Edit Data" works), never images. The page IS the
@@ -4406,6 +4515,10 @@ class ReportPptxService {
     _renderChart(pptx, slide, component, data, x, y, w, h) {
         const config = component.config;
         const chartType = config.chartType ?? 'bar';
+        if (chartType === 'waterfall') {
+            this._renderWaterfall(pptx, slide, component, data, x, y, w, h);
+            return;
+        }
         const extracted = extractChartSeries(component, data);
         const typeMap = {
             bar: pptx.ChartType.bar,
@@ -4416,12 +4529,7 @@ class ReportPptxService {
         };
         const pie = chartType === 'pie' || chartType === 'donut';
         const colorBy = isColorBy(config);
-        // Compact period labels match the on-screen axis (year only when the data
-        // spans years); PowerPoint can't do a styled second line, so it's inline.
-        const granularity = data.granularity;
-        const labels = granularity
-            ? extracted.categories.map((category) => formatPeriodLabel(category, granularity, spansMultipleYears(extracted.categories)))
-            : extracted.categories;
+        const labels = this._categoryLabels(extracted.categories, data.granularity);
         // Native chart data: one entry per series (pie charts take exactly one).
         // colorBy emits one series per category for the on-screen overlap; PowerPoint
         // has no equivalent overlap, so collapse them back into a single series (each
@@ -4453,14 +4561,7 @@ class ReportPptxService {
             barDir: config.orientation === 'horizontal' ? 'bar' : 'col',
             barGrouping: config.stacked ? 'stacked' : 'clustered',
             holeSize: chartType === 'donut' ? 55 : undefined,
-            catAxisLabelFontSize: 9,
-            valAxisLabelFontSize: 9,
-            showCatAxisTitle: !!config.xAxis?.label,
-            catAxisTitle: config.xAxis?.label,
-            catAxisTitleFontSize: 10,
-            showValAxisTitle: !!config.measures?.[0]?.label && !pie,
-            valAxisTitle: config.measures?.[0]?.label,
-            valAxisTitleFontSize: 10,
+            ...this._axisTextOptions(config, pie),
             dataBorder: { pt: 0, color: 'FFFFFF' },
         };
         // The type each chartData entry is drawn as. A pie is one entry of its own
@@ -4493,6 +4594,75 @@ class ReportPptxService {
             };
         }), options);
     }
+    // A waterfall is a stacked bar chart whose first series is invisible: it
+    // lifts each bar to where its step starts. The series are cut differently
+    // from the screen's; _waterfallSeries says why.
+    _renderWaterfall(pptx, slide, component, data, x, y, w, h) {
+        const config = component.config;
+        const waterfall = extractWaterfall(component, data);
+        const labels = this._categoryLabels(waterfall.steps.map((step) => step.category), data.granularity);
+        const series = this._waterfallSeries(waterfall.steps);
+        slide.addChart(pptx.ChartType.bar, series.map((entry) => ({ name: entry.name, labels, values: entry.values })), {
+            x, y, w, h,
+            chartColors: series.map((entry) => entry.color),
+            showLegend: false,
+            barDir: config.orientation === 'horizontal' ? 'bar' : 'col',
+            barGrouping: 'stacked',
+            ...this._axisTextOptions(config, false),
+            // A running total can go below zero, where the category axis crosses;
+            // its labels stay at the plot's edge instead of across the bars.
+            catAxisLabelPos: 'low',
+        });
+    }
+    // PowerPoint stacks positive and negative values apart, each from zero, so a
+    // bar cannot simply sit on the total before it the way it does on screen.
+    // Each step is cut at zero instead: the invisible base carries it to its end
+    // nearer zero, and its kind's series carries the rest — one series above zero
+    // and one below, because a step that crosses zero needs both. Every other
+    // point is left blank: a zero there would still draw a zero-height bar, which
+    // renders as a hairline. A kind's series that stays blank is dropped.
+    _waterfallSeries(steps) {
+        const base = { name: '', color: 'transparent', values: [] };
+        const kinds = Object.keys(WATERFALL_SERIES_NAMES);
+        const piece = (kind) => ({
+            kind, name: WATERFALL_SERIES_NAMES[kind], color: REPORT_WATERFALL_COLORS[kind], values: [],
+        });
+        const above = kinds.map(piece);
+        const below = kinds.map(piece);
+        const blankZero = (value) => (value === 0 ? null : value);
+        for (const step of steps) {
+            const end = step.start + (step.change ?? 0);
+            const low = Math.min(step.start, end);
+            const high = Math.max(step.start, end);
+            base.values.push(blankZero(low > 0 ? low : (high < 0 ? high : 0)));
+            above.forEach((entry) => entry.values.push(entry.kind === step.kind ? blankZero(Math.max(high, 0) - Math.max(low, 0)) : null));
+            below.forEach((entry) => entry.values.push(entry.kind === step.kind ? blankZero(Math.min(low, 0) - Math.min(high, 0)) : null));
+        }
+        return [base, ...[...above, ...below].filter((entry) => entry.values.some((value) => value !== null))];
+    }
+    // Compact period labels match the on-screen axis (year only when the data
+    // spans years); PowerPoint can't do a styled second line, so it's inline.
+    _categoryLabels(categories, granularity) {
+        if (!granularity) {
+            return categories;
+        }
+        const multiYear = spansMultipleYears(categories);
+        return categories.map((category) => formatPeriodLabel(category, granularity, multiYear));
+    }
+    // The axis label and title settings every native chart shares. A pie has no
+    // value axis to title.
+    _axisTextOptions(config, pie) {
+        return {
+            catAxisLabelFontSize: 9,
+            valAxisLabelFontSize: 9,
+            showCatAxisTitle: !!config.xAxis?.label,
+            catAxisTitle: config.xAxis?.label,
+            catAxisTitleFontSize: 10,
+            showValAxisTitle: !!config.measures?.[0]?.label && !pie,
+            valAxisTitle: config.measures?.[0]?.label,
+            valAxisTitleFontSize: 10,
+        };
+    }
     _renderTable(slide, component, data, x, y, w, h) {
         const config = component.config;
         const columns = config.columns?.length
@@ -5027,7 +5197,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-CFkoNvo_.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CtKYuRcT.mjs').then((module) => module.default) }),
         ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div\n    #split\n    class=\"report fs-row.align-start\">\n  <fs-ai-chat\n    #chatPanel\n    class=\"chat\"\n    style=\"min-height: 500px;\"\n    basePath=\"reports\"\n    [requestData]=\"{ reportId: selected?.id ?? null }\"\n    [introMessage]=\"introMessage\"\n    (response)=\"onChatResponse($event)\">\n  </fs-ai-chat>\n  <div\n    class=\"resizer\"\n    (pointerdown)=\"onResizeStart($event)\">\n  </div>\n  <div class=\"viewer fs-flex fs-column\">\n    <div class=\"fs-row.align-center.gap-sm\">\n      <fs-autocomplete-chips\n          class=\"fs-flex\"\n          [fetch]=\"fetchReports\"\n          [(ngModel)]=\"selected\"\n          [disabled]=\"loadingReports\"\n          [padless]=\"true\"\n          [multiple]=\"false\"\n          [fetchOnFocus]=\"true\"\n          (ngModelChange)=\"reportChange($event)\"\n          placeholder=\"Report\"\n          name=\"report\">\n        <ng-template\n            fsAutocompleteChipsTemplate\n            let-object=\"object\">\n          {{ object.name }}\n        </ng-template>\n        <ng-template\n            fsAutocompleteChipsStatic\n            (click)=\"createReport()\">\n          Create Report\n        </ng-template>\n      </fs-autocomplete-chips>\n      @if (report && editMode) {\n        <!-- What layout editing can add or switch to, and the way out of it \u2014\n             the same outlined buttons as the fs-ai-report toolbar. -->\n        <button\n            mat-stroked-button\n            type=\"button\"\n            matTooltip=\"Add a block of text\"\n            (click)=\"addText()\">\n          <mat-icon>title</mat-icon>\n          Add text\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            class=\"master-toggle\"\n            [class.active]=\"isMasterMode\"\n            [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n            (click)=\"toggleMasterMode()\">\n          <mat-icon>web_asset</mat-icon>\n          Header & footer\n        </button>\n        <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"toggleEditMode()\">\n          <mat-icon>check</mat-icon>\n          Done editing\n        </button>\n      }\n      @if (report) {\n        <fs-menu>\n          <ng-template\n              fs-menu-item\n              (click)=\"reportSettings()\">\n            <mat-icon>\n              tune\n            </mat-icon>\n            Report settings\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"toggleEditMode()\"\n              [disabled]=\"editMode\">\n            <mat-icon>\n              dashboard_customize\n            </mat-icon>\n            {{ editMode ? 'Done editing layout' : 'Edit layout' }}\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPowerpoint()\">\n            <mat-icon>\n              slideshow\n            </mat-icon>\n            Export PowerPoint\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportPdf()\">\n            <mat-icon>\n              picture_as_pdf\n            </mat-icon>\n            Export PDF\n          </ng-template>\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData()\">\n            <mat-icon>\n              table_view\n            </mat-icon>\n            Export Raw Data\n          </ng-template>\n          @if ((report?.pages?.length ?? 0) > 1) {\n            <ng-template\n                fs-menu-item\n                (click)=\"exportData(true)\">\n              <mat-icon>\n                table_view\n              </mat-icon>\n              Export Raw Data (This Page)\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n    @if (report) {\n      <!-- Report-level filters only (the report's actions live in the menu\n           above). fs-filter reads its config once at init, so it's keyed on the\n           filter signature: when the report-level filter set changes the block\n           is recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter [config]=\"reportFilterConfig\"></fs-filter>\n        }\n      }\n      <app-report-canvas\n        [report]=\"report\"\n        [editMode]=\"editMode\"\n        (componentSettings)=\"componentSettings($event)\"\n        (reportChanged)=\"onCanvasReportChanged()\">\n      </app-report-canvas>\n    }\n  </div>\n</div>", styles: [".report{height:100%;min-height:500px}.report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:500px;min-width:0;border:none}.report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.report .viewer fs-filter{flex:0 0 auto;margin-top:10px;margin-bottom:0}.report .viewer ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.report .resizer:before{content:\"\";width:0px;background:#0000001f;transition:width .12s ease,background-color .12s ease}.report .resizer:hover:before{width:3px;background:var(--brand-primary-color)}.report.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.report.resizing .resizer:before{width:3px;background:var(--brand-primary-color)}.report.resizing .chat,.report.resizing .viewer{pointer-events:none}::ng-deep body.body-report-reports .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel{flex:1;min-height:0}::ng-deep body.body-report-reports .mat-mdc-card-content mat-tab-nav-panel router-outlet+ng-component{height:100%}.master-toggle.active{background:#eceff3}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i2$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "maxPanelHeight", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear", "panelOpened", "panelClosed"] }, { kind: "directive", type: i2$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i2$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReportComponent, decorators: [{
@@ -5042,7 +5212,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-CFkoNvo_.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CtKYuRcT.mjs').then((module) => module.default) }),
                     ], imports: [
                         FormsModule,
                         FsAutocompleteChipsModule,
@@ -5270,6 +5440,9 @@ class SemanticDatabaseComponent {
     static NAME_SUFFIX = 'Model';
     // null until loaded — gates the tab behind the skeleton.
     status = signal(null);
+    // The status request failed. Settles the skeleton and shows why; the Build
+    // action never depends on the status, so a build can still be started.
+    statusError = signal(false);
     // Free-text filter over the unit list — at a few hundred rows the accordion
     // is only usable if you can narrow it.
     filter = signal('');
@@ -5277,6 +5450,9 @@ class SemanticDatabaseComponent {
     building = signal(false);
     buildActive = computed(() => this.building()
         || SemanticDatabaseComponent.ACTIVE_STATES.includes(this.status()?.build?.state));
+    // A semantic database has been published before, so a build replaces it.
+    // False while the status is unloaded or failed to load.
+    rebuild = computed(() => !!this.status()?.detail?.generatedAt);
     buildStateLabel = computed(() => SemanticDatabaseComponent.STATE_LABELS[this.status()?.build?.state] ?? '');
     // Whether the published semantic database came from a build that finished.
     //
@@ -5380,7 +5556,7 @@ class SemanticDatabaseComponent {
     // Confirm before kicking off a build — a rebuild replaces the current
     // semantic database, so it should never fire on a stray click.
     build() {
-        const rebuild = !!this.status()?.detail?.generatedAt;
+        const rebuild = this.rebuild();
         this._prompt.confirm({
             title: rebuild ? 'Rebuild semantic database' : 'Build semantic database',
             template: rebuild
@@ -5446,12 +5622,8 @@ class SemanticDatabaseComponent {
             this._refreshStatus();
             return;
         }
-        this._reportData.semanticBuildStatus()
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((status) => {
-            this.status.set(status);
-            this._announceOutcome(status);
-        });
+        this._loadStatus()
+            .subscribe((status) => this._announceOutcome(status));
     }
     /**
      * The real reason a broken build stream broke, from what the server actually
@@ -5550,12 +5722,23 @@ class SemanticDatabaseComponent {
             : shortName;
     }
     _refreshStatus() {
-        this._reportData.semanticBuildStatus()
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((status) => this.status.set(status));
+        this._loadStatus()
+            .subscribe();
+    }
+    // Fetch the status into the tab. A failure flags statusError and completes
+    // quietly, so the tab settles and callers never see the error.
+    _loadStatus() {
+        return this._reportData.semanticBuildStatus()
+            .pipe(tap((status) => {
+            this.statusError.set(false);
+            this.status.set(status);
+        }), catchError(() => {
+            this.statusError.set(true);
+            return EMPTY;
+        }), takeUntilDestroyed(this._destroyRef));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SemanticDatabaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SemanticDatabaseComponent, isStandalone: true, selector: "fs-ai-report-global-settings-semantic-database", ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    The semantic database is what the report AI uses to understand your data \u2014\n    tables, relationships and the calculations in code. Rebuild it after\n    significant application updates. The build runs in the background; progress\n    appears in the dock at the bottom right and this dialog can be closed while\n    it runs.\n  </p>\n\n  <div *fsSkeleton=\"status()\">\n    @if (status(); as buildStatus) {\n      <div class=\"build-status\">\n        @if (buildStatus.detail.generatedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Last built</span>\n            <fs-date\n                [date]=\"buildStatus.detail.generatedAt\"\n                format=\"date-time\">\n            </fs-date>\n          </div>\n          <div class=\"stat\">\n            <span class=\"label\">Coverage</span>\n            <span>{{ coverage() }}</span>\n          </div>\n        } @else {\n          <fs-message-warning>\n            The semantic database has not been built yet \u2014 the report AI can't\n            answer data questions until it is. Run the first build.\n          </fs-message-warning>\n        }\n        @if (buildStatus.build) {\n          <div class=\"stat\">\n            <span class=\"label\">Last build run</span>\n            <span>\n              {{ buildStateLabel() }}\n              @if (buildStatus.build.message) {\n                \u2014 {{ buildStatus.build.message }}\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Everything above is true about what was published, and on its own it\n             reads as a finished build: the structural half publishes BEFORE the\n             AI function pass, so a run that died in that pass still stamps a\n             date and still fills in the whole coverage line. This is the only\n             line that says the build never got to the end. -->\n        @if (buildStatus.detail.generatedAt && !buildComplete()) {\n          <fs-message-warning>\n            The last build did not finish, so this semantic database is incomplete \u2014\n            {{ incompleteEntityCount() }} of {{ buildStatus.detail.entityCount }}\n            entities have no code-function knowledge. The report AI answers from what\n            is here and cannot see the rest. Rebuild to complete it.\n          </fs-message-warning>\n        }\n      </div>\n\n      <!-- Everything the build read, in one list: entities (a table + a model +\n           a handler) and standalone code classes (domain logic with no table).\n           The AI reads code from both, so splitting them into two sections\n           would hide half of what was built. Each row drills into its shape,\n           enum values, computed fields and cached function counts \u2014 the counts\n           link into the functions dialog. -->\n      @if (units().length) {\n        <h2>Included ({{ units().length }})</h2>\n        <div class=\"subheading\">\n          Everything the report AI was built from. Entities can be queried;\n          code classes are logic it reads and translates into SQL.\n        </div>\n\n        <input\n            class=\"unit-filter\"\n            type=\"search\"\n            placeholder=\"Filter by name, class or key\u2026\"\n            [value]=\"filter()\"\n            (input)=\"setFilter($any($event.target).value)\">\n\n        <mat-accordion class=\"entities\">\n          @for (unit of filteredUnits(); track unit.key) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>{{ unit.name }}</mat-panel-title>\n                <mat-panel-description>\n                  <div class=\"stage-chips\">\n                    @if (!unit.hasTable) {\n                      <fs-chip size=\"tiny\" matTooltip=\"Domain logic with no table \u2014 read, never queried\">\n                        code\n                      </fs-chip>\n                    }\n                    <!-- Silence means built. A chip here means an interrupted\n                         build left this row owing content. -->\n                    @for (stage of pendingStages(unit); track stage) {\n                      <fs-chip\n                          size=\"tiny\"\n                          [backgroundColor]=\"pendingColor()\"\n                          color=\"#ffffff\"\n                          matTooltip=\"Needs building\">\n                        {{ stage }}\n                      </fs-chip>\n                    }\n                  </div>\n                </mat-panel-description>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"entity-detail\">\n                  @if (unit.model) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Class</span>\n                      <span>{{ unit.model }}</span>\n                    </div>\n                  }\n                  @if (unit.entity; as entity) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Table</span>\n                      <span>{{ entity.table }}</span>\n                    </div>\n                    <!-- The handle the report AI addresses this entity by in\n                         describe_entity / compile_query. -->\n                    <div class=\"stat\">\n                      <span class=\"label\">Entity key</span>\n                      <span>{{ entity.key }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Columns</span>\n                      <span>{{ entity.columns }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Relationships</span>\n                      <span>{{ entity.relationships }}</span>\n                    </div>\n                    @if (entity.enums.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Enumeration values</span>\n                        <div class=\"pair-list\">\n                          @for (enumColumn of entity.enums; track enumColumn.column) {\n                            <div class=\"pair-row\">\n                              <span class=\"pair-name\">{{ enumColumn.column }}</span>\n                              <span>{{ enumColumn.values.join(', ') }}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (entity.computedFields.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Computed fields</span>\n                        <span>{{ entity.computedFields.join(', ') }}</span>\n                      </div>\n                    }\n                    <div class=\"stat\">\n                      <span class=\"label\">Model functions</span>\n                      @if (entity.modelFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'model')\">\n                          {{ entity.modelFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Handler functions</span>\n                      @if (entity.handlerFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'handler')\">\n                          {{ entity.handlerFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"stat\">\n                      <span class=\"label\">Code functions</span>\n                      @if (unit.functionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'class')\">\n                          {{ unit.functionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n\n        @if (!filteredUnits().length) {\n          <div class=\"subheading\">Nothing matches \u201C{{ filter() }}\u201D.</div>\n        }\n      }\n\n      <!-- The other half of the picture: tables the AI can't reach. Excluded\n           ones have no model; unlinked junctions have a composite primary key\n           but were folded into no relationship, so nothing can navigate to\n           them. Both are invisible by omission \u2014 no error, just a capability\n           that silently isn't there. Collapsed by default: the excluded list is\n           long and mostly framework plumbing. -->\n      @if (hasCatalog()) {\n        <h2>Not in the semantic database</h2>\n        <div class=\"subheading\">\n          Tables the report AI can't see. Give one a model to promote it to an\n          entity, then rebuild.\n        </div>\n        <mat-accordion class=\"catalog\">\n          @if (excludedTables().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Tables excluded ({{ excludedTables().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"pair-list\">\n                  @for (table of excludedTables(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n          @if (unlinkedJunctions().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Junctions not linked ({{ unlinkedJunctions().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <ng-template matExpansionPanelContent>\n                <p class=\"small\">\n                  Link tables the build couldn't fold into a relationship \u2014 so\n                  neither they nor what they link can be reported on.\n                </p>\n                <div class=\"pair-list\">\n                  @for (table of unlinkedJunctions(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n      }\n    }\n  </div>\n</div>\n", styles: [".hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}.stat{display:flex;align-items:baseline;gap:12px}.stat>.label{flex:0 0 150px;white-space:nowrap;color:#0009}.build-status{display:flex;flex-direction:column;gap:8px}.pair-list{display:flex;flex-direction:column;gap:3px}.pair-row{display:flex;gap:12px}.pair-name{flex:0 0 140px;white-space:nowrap;color:#0009}.unit-filter{width:100%;box-sizing:border-box;margin:8px 0 4px;padding:6px 10px;border:1px solid rgba(0,0,0,.2);border-radius:4px;font:inherit}.unit-filter:focus{outline:none;border-color:#00000080}.entities{display:block;padding:3px}.entities mat-panel-description{justify-content:flex-end;margin-right:8px}.entities .stage-chips{display:flex;gap:4px}.entities .entity-detail{display:flex;flex-direction:column;gap:8px}.catalog{display:block;padding:3px}.catalog .pair-name{flex-basis:220px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$5.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "disabled", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageWarningComponent, selector: "fs-message-warning" }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SemanticDatabaseComponent, isStandalone: true, selector: "fs-ai-report-global-settings-semantic-database", ngImport: i0, template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    The semantic database is what the report AI uses to understand your data \u2014\n    tables, relationships and the calculations in code. Rebuild it after\n    significant application updates. The build runs in the background; progress\n    appears in the dock at the bottom right and this dialog can be closed while\n    it runs.\n  </p>\n\n  <!-- A failed status load settles the skeleton too, so the tab says what\n       happened instead of loading forever. -->\n  @if (statusError()) {\n    <fs-message-warning>\n      The build status could not be loaded, so the last build and its coverage\n      can't be shown. You can still run a build.\n    </fs-message-warning>\n  }\n\n  <div *fsSkeleton=\"status() || statusError()\">\n    @if (status(); as buildStatus) {\n      <div class=\"build-status\">\n        @if (buildStatus.detail.generatedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Last built</span>\n            <fs-date\n                [date]=\"buildStatus.detail.generatedAt\"\n                format=\"date-time\">\n            </fs-date>\n          </div>\n          <div class=\"stat\">\n            <span class=\"label\">Coverage</span>\n            <span>{{ coverage() }}</span>\n          </div>\n        } @else {\n          <fs-message-warning>\n            The semantic database has not been built yet \u2014 the report AI can't\n            answer data questions until it is. Run the first build.\n          </fs-message-warning>\n        }\n        @if (buildStatus.build) {\n          <div class=\"stat\">\n            <span class=\"label\">Last build run</span>\n            <span>\n              {{ buildStateLabel() }}\n              @if (buildStatus.build.message) {\n                \u2014 {{ buildStatus.build.message }}\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Everything above is true about what was published, and on its own it\n             reads as a finished build: the structural half publishes BEFORE the\n             AI function pass, so a run that died in that pass still stamps a\n             date and still fills in the whole coverage line. This is the only\n             line that says the build never got to the end. -->\n        @if (buildStatus.detail.generatedAt && !buildComplete()) {\n          <fs-message-warning>\n            The last build did not finish, so this semantic database is incomplete \u2014\n            {{ incompleteEntityCount() }} of {{ buildStatus.detail.entityCount }}\n            entities have no code-function knowledge. The report AI answers from what\n            is here and cannot see the rest. Rebuild to complete it.\n          </fs-message-warning>\n        }\n      </div>\n\n      <!-- Everything the build read, in one list: entities (a table + a model +\n           a handler) and standalone code classes (domain logic with no table).\n           The AI reads code from both, so splitting them into two sections\n           would hide half of what was built. Each row drills into its shape,\n           enum values, computed fields and cached function counts \u2014 the counts\n           link into the functions dialog. -->\n      @if (units().length) {\n        <h2>Included ({{ units().length }})</h2>\n        <div class=\"subheading\">\n          Everything the report AI was built from. Entities can be queried;\n          code classes are logic it reads and translates into SQL.\n        </div>\n\n        <input\n            class=\"unit-filter\"\n            type=\"search\"\n            placeholder=\"Filter by name, class or key\u2026\"\n            [value]=\"filter()\"\n            (input)=\"setFilter($any($event.target).value)\">\n\n        <mat-accordion class=\"entities\">\n          @for (unit of filteredUnits(); track unit.key) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>{{ unit.name }}</mat-panel-title>\n                <mat-panel-description>\n                  <div class=\"stage-chips\">\n                    @if (!unit.hasTable) {\n                      <fs-chip size=\"tiny\" matTooltip=\"Domain logic with no table \u2014 read, never queried\">\n                        code\n                      </fs-chip>\n                    }\n                    <!-- Silence means built. A chip here means an interrupted\n                         build left this row owing content. -->\n                    @for (stage of pendingStages(unit); track stage) {\n                      <fs-chip\n                          size=\"tiny\"\n                          [backgroundColor]=\"pendingColor()\"\n                          color=\"#ffffff\"\n                          matTooltip=\"Needs building\">\n                        {{ stage }}\n                      </fs-chip>\n                    }\n                  </div>\n                </mat-panel-description>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"entity-detail\">\n                  @if (unit.model) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Class</span>\n                      <span>{{ unit.model }}</span>\n                    </div>\n                  }\n                  @if (unit.entity; as entity) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Table</span>\n                      <span>{{ entity.table }}</span>\n                    </div>\n                    <!-- The handle the report AI addresses this entity by in\n                         describe_entity / compile_query. -->\n                    <div class=\"stat\">\n                      <span class=\"label\">Entity key</span>\n                      <span>{{ entity.key }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Columns</span>\n                      <span>{{ entity.columns }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Relationships</span>\n                      <span>{{ entity.relationships }}</span>\n                    </div>\n                    @if (entity.enums.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Enumeration values</span>\n                        <div class=\"pair-list\">\n                          @for (enumColumn of entity.enums; track enumColumn.column) {\n                            <div class=\"pair-row\">\n                              <span class=\"pair-name\">{{ enumColumn.column }}</span>\n                              <span>{{ enumColumn.values.join(', ') }}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (entity.computedFields.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Computed fields</span>\n                        <span>{{ entity.computedFields.join(', ') }}</span>\n                      </div>\n                    }\n                    <div class=\"stat\">\n                      <span class=\"label\">Model functions</span>\n                      @if (entity.modelFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'model')\">\n                          {{ entity.modelFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Handler functions</span>\n                      @if (entity.handlerFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'handler')\">\n                          {{ entity.handlerFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"stat\">\n                      <span class=\"label\">Code functions</span>\n                      @if (unit.functionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'class')\">\n                          {{ unit.functionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n\n        @if (!filteredUnits().length) {\n          <div class=\"subheading\">Nothing matches \u201C{{ filter() }}\u201D.</div>\n        }\n      }\n\n      <!-- The other half of the picture: tables the AI can't reach. Excluded\n           ones have no model; unlinked junctions have a composite primary key\n           but were folded into no relationship, so nothing can navigate to\n           them. Both are invisible by omission \u2014 no error, just a capability\n           that silently isn't there. Collapsed by default: the excluded list is\n           long and mostly framework plumbing. -->\n      @if (hasCatalog()) {\n        <h2>Not in the semantic database</h2>\n        <div class=\"subheading\">\n          Tables the report AI can't see. Give one a model to promote it to an\n          entity, then rebuild.\n        </div>\n        <mat-accordion class=\"catalog\">\n          @if (excludedTables().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Tables excluded ({{ excludedTables().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"pair-list\">\n                  @for (table of excludedTables(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n          @if (unlinkedJunctions().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Junctions not linked ({{ unlinkedJunctions().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <ng-template matExpansionPanelContent>\n                <p class=\"small\">\n                  Link tables the build couldn't fold into a relationship \u2014 so\n                  neither they nor what they link can be reported on.\n                </p>\n                <div class=\"pair-list\">\n                  @for (table of unlinkedJunctions(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n      }\n    }\n  </div>\n</div>\n", styles: [".hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}.stat{display:flex;align-items:baseline;gap:12px}.stat>.label{flex:0 0 150px;white-space:nowrap;color:#0009}.build-status{display:flex;flex-direction:column;gap:8px}.pair-list{display:flex;flex-direction:column;gap:3px}.pair-row{display:flex;gap:12px}.pair-name{flex:0 0 140px;white-space:nowrap;color:#0009}.unit-filter{width:100%;box-sizing:border-box;margin:8px 0 4px;padding:6px 10px;border:1px solid rgba(0,0,0,.2);border-radius:4px;font:inherit}.unit-filter:focus{outline:none;border-color:#00000080}.entities{display:block;padding:3px}.entities mat-panel-description{justify-content:flex-end;margin-right:8px}.entities .stage-chips{display:flex;gap:4px}.entities .entity-detail{display:flex;flex-direction:column;gap:8px}.catalog{display:block;padding:3px}.catalog .pair-name{flex-basis:220px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$5.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "disabled", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$4.FsDateComponent, selector: "fs-date", inputs: ["date", "format", "timezone"] }, { kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i5$1.FsMessageWarningComponent, selector: "fs-message-warning" }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SemanticDatabaseComponent, decorators: [{
             type: Component,
@@ -5566,7 +5749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FsDateModule,
                         FsMessageModule,
                         FsSkeletonModule,
-                    ], template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    The semantic database is what the report AI uses to understand your data \u2014\n    tables, relationships and the calculations in code. Rebuild it after\n    significant application updates. The build runs in the background; progress\n    appears in the dock at the bottom right and this dialog can be closed while\n    it runs.\n  </p>\n\n  <div *fsSkeleton=\"status()\">\n    @if (status(); as buildStatus) {\n      <div class=\"build-status\">\n        @if (buildStatus.detail.generatedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Last built</span>\n            <fs-date\n                [date]=\"buildStatus.detail.generatedAt\"\n                format=\"date-time\">\n            </fs-date>\n          </div>\n          <div class=\"stat\">\n            <span class=\"label\">Coverage</span>\n            <span>{{ coverage() }}</span>\n          </div>\n        } @else {\n          <fs-message-warning>\n            The semantic database has not been built yet \u2014 the report AI can't\n            answer data questions until it is. Run the first build.\n          </fs-message-warning>\n        }\n        @if (buildStatus.build) {\n          <div class=\"stat\">\n            <span class=\"label\">Last build run</span>\n            <span>\n              {{ buildStateLabel() }}\n              @if (buildStatus.build.message) {\n                \u2014 {{ buildStatus.build.message }}\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Everything above is true about what was published, and on its own it\n             reads as a finished build: the structural half publishes BEFORE the\n             AI function pass, so a run that died in that pass still stamps a\n             date and still fills in the whole coverage line. This is the only\n             line that says the build never got to the end. -->\n        @if (buildStatus.detail.generatedAt && !buildComplete()) {\n          <fs-message-warning>\n            The last build did not finish, so this semantic database is incomplete \u2014\n            {{ incompleteEntityCount() }} of {{ buildStatus.detail.entityCount }}\n            entities have no code-function knowledge. The report AI answers from what\n            is here and cannot see the rest. Rebuild to complete it.\n          </fs-message-warning>\n        }\n      </div>\n\n      <!-- Everything the build read, in one list: entities (a table + a model +\n           a handler) and standalone code classes (domain logic with no table).\n           The AI reads code from both, so splitting them into two sections\n           would hide half of what was built. Each row drills into its shape,\n           enum values, computed fields and cached function counts \u2014 the counts\n           link into the functions dialog. -->\n      @if (units().length) {\n        <h2>Included ({{ units().length }})</h2>\n        <div class=\"subheading\">\n          Everything the report AI was built from. Entities can be queried;\n          code classes are logic it reads and translates into SQL.\n        </div>\n\n        <input\n            class=\"unit-filter\"\n            type=\"search\"\n            placeholder=\"Filter by name, class or key\u2026\"\n            [value]=\"filter()\"\n            (input)=\"setFilter($any($event.target).value)\">\n\n        <mat-accordion class=\"entities\">\n          @for (unit of filteredUnits(); track unit.key) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>{{ unit.name }}</mat-panel-title>\n                <mat-panel-description>\n                  <div class=\"stage-chips\">\n                    @if (!unit.hasTable) {\n                      <fs-chip size=\"tiny\" matTooltip=\"Domain logic with no table \u2014 read, never queried\">\n                        code\n                      </fs-chip>\n                    }\n                    <!-- Silence means built. A chip here means an interrupted\n                         build left this row owing content. -->\n                    @for (stage of pendingStages(unit); track stage) {\n                      <fs-chip\n                          size=\"tiny\"\n                          [backgroundColor]=\"pendingColor()\"\n                          color=\"#ffffff\"\n                          matTooltip=\"Needs building\">\n                        {{ stage }}\n                      </fs-chip>\n                    }\n                  </div>\n                </mat-panel-description>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"entity-detail\">\n                  @if (unit.model) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Class</span>\n                      <span>{{ unit.model }}</span>\n                    </div>\n                  }\n                  @if (unit.entity; as entity) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Table</span>\n                      <span>{{ entity.table }}</span>\n                    </div>\n                    <!-- The handle the report AI addresses this entity by in\n                         describe_entity / compile_query. -->\n                    <div class=\"stat\">\n                      <span class=\"label\">Entity key</span>\n                      <span>{{ entity.key }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Columns</span>\n                      <span>{{ entity.columns }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Relationships</span>\n                      <span>{{ entity.relationships }}</span>\n                    </div>\n                    @if (entity.enums.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Enumeration values</span>\n                        <div class=\"pair-list\">\n                          @for (enumColumn of entity.enums; track enumColumn.column) {\n                            <div class=\"pair-row\">\n                              <span class=\"pair-name\">{{ enumColumn.column }}</span>\n                              <span>{{ enumColumn.values.join(', ') }}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (entity.computedFields.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Computed fields</span>\n                        <span>{{ entity.computedFields.join(', ') }}</span>\n                      </div>\n                    }\n                    <div class=\"stat\">\n                      <span class=\"label\">Model functions</span>\n                      @if (entity.modelFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'model')\">\n                          {{ entity.modelFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Handler functions</span>\n                      @if (entity.handlerFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'handler')\">\n                          {{ entity.handlerFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"stat\">\n                      <span class=\"label\">Code functions</span>\n                      @if (unit.functionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'class')\">\n                          {{ unit.functionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n\n        @if (!filteredUnits().length) {\n          <div class=\"subheading\">Nothing matches \u201C{{ filter() }}\u201D.</div>\n        }\n      }\n\n      <!-- The other half of the picture: tables the AI can't reach. Excluded\n           ones have no model; unlinked junctions have a composite primary key\n           but were folded into no relationship, so nothing can navigate to\n           them. Both are invisible by omission \u2014 no error, just a capability\n           that silently isn't there. Collapsed by default: the excluded list is\n           long and mostly framework plumbing. -->\n      @if (hasCatalog()) {\n        <h2>Not in the semantic database</h2>\n        <div class=\"subheading\">\n          Tables the report AI can't see. Give one a model to promote it to an\n          entity, then rebuild.\n        </div>\n        <mat-accordion class=\"catalog\">\n          @if (excludedTables().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Tables excluded ({{ excludedTables().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"pair-list\">\n                  @for (table of excludedTables(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n          @if (unlinkedJunctions().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Junctions not linked ({{ unlinkedJunctions().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <ng-template matExpansionPanelContent>\n                <p class=\"small\">\n                  Link tables the build couldn't fold into a relationship \u2014 so\n                  neither they nor what they link can be reported on.\n                </p>\n                <div class=\"pair-list\">\n                  @for (table of unlinkedJunctions(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n      }\n    }\n  </div>\n</div>\n", styles: [".hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}.stat{display:flex;align-items:baseline;gap:12px}.stat>.label{flex:0 0 150px;white-space:nowrap;color:#0009}.build-status{display:flex;flex-direction:column;gap:8px}.pair-list{display:flex;flex-direction:column;gap:3px}.pair-row{display:flex;gap:12px}.pair-name{flex:0 0 140px;white-space:nowrap;color:#0009}.unit-filter{width:100%;box-sizing:border-box;margin:8px 0 4px;padding:6px 10px;border:1px solid rgba(0,0,0,.2);border-radius:4px;font:inherit}.unit-filter:focus{outline:none;border-color:#00000080}.entities{display:block;padding:3px}.entities mat-panel-description{justify-content:flex-end;margin-right:8px}.entities .stage-chips{display:flex;gap:4px}.entities .entity-detail{display:flex;flex-direction:column;gap:8px}.catalog{display:block;padding:3px}.catalog .pair-name{flex-basis:220px}\n"] }]
+                    ], template: "<div class=\"fs-column tab-body\">\n  <p class=\"hint\">\n    The semantic database is what the report AI uses to understand your data \u2014\n    tables, relationships and the calculations in code. Rebuild it after\n    significant application updates. The build runs in the background; progress\n    appears in the dock at the bottom right and this dialog can be closed while\n    it runs.\n  </p>\n\n  <!-- A failed status load settles the skeleton too, so the tab says what\n       happened instead of loading forever. -->\n  @if (statusError()) {\n    <fs-message-warning>\n      The build status could not be loaded, so the last build and its coverage\n      can't be shown. You can still run a build.\n    </fs-message-warning>\n  }\n\n  <div *fsSkeleton=\"status() || statusError()\">\n    @if (status(); as buildStatus) {\n      <div class=\"build-status\">\n        @if (buildStatus.detail.generatedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Last built</span>\n            <fs-date\n                [date]=\"buildStatus.detail.generatedAt\"\n                format=\"date-time\">\n            </fs-date>\n          </div>\n          <div class=\"stat\">\n            <span class=\"label\">Coverage</span>\n            <span>{{ coverage() }}</span>\n          </div>\n        } @else {\n          <fs-message-warning>\n            The semantic database has not been built yet \u2014 the report AI can't\n            answer data questions until it is. Run the first build.\n          </fs-message-warning>\n        }\n        @if (buildStatus.build) {\n          <div class=\"stat\">\n            <span class=\"label\">Last build run</span>\n            <span>\n              {{ buildStateLabel() }}\n              @if (buildStatus.build.message) {\n                \u2014 {{ buildStatus.build.message }}\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Everything above is true about what was published, and on its own it\n             reads as a finished build: the structural half publishes BEFORE the\n             AI function pass, so a run that died in that pass still stamps a\n             date and still fills in the whole coverage line. This is the only\n             line that says the build never got to the end. -->\n        @if (buildStatus.detail.generatedAt && !buildComplete()) {\n          <fs-message-warning>\n            The last build did not finish, so this semantic database is incomplete \u2014\n            {{ incompleteEntityCount() }} of {{ buildStatus.detail.entityCount }}\n            entities have no code-function knowledge. The report AI answers from what\n            is here and cannot see the rest. Rebuild to complete it.\n          </fs-message-warning>\n        }\n      </div>\n\n      <!-- Everything the build read, in one list: entities (a table + a model +\n           a handler) and standalone code classes (domain logic with no table).\n           The AI reads code from both, so splitting them into two sections\n           would hide half of what was built. Each row drills into its shape,\n           enum values, computed fields and cached function counts \u2014 the counts\n           link into the functions dialog. -->\n      @if (units().length) {\n        <h2>Included ({{ units().length }})</h2>\n        <div class=\"subheading\">\n          Everything the report AI was built from. Entities can be queried;\n          code classes are logic it reads and translates into SQL.\n        </div>\n\n        <input\n            class=\"unit-filter\"\n            type=\"search\"\n            placeholder=\"Filter by name, class or key\u2026\"\n            [value]=\"filter()\"\n            (input)=\"setFilter($any($event.target).value)\">\n\n        <mat-accordion class=\"entities\">\n          @for (unit of filteredUnits(); track unit.key) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>{{ unit.name }}</mat-panel-title>\n                <mat-panel-description>\n                  <div class=\"stage-chips\">\n                    @if (!unit.hasTable) {\n                      <fs-chip size=\"tiny\" matTooltip=\"Domain logic with no table \u2014 read, never queried\">\n                        code\n                      </fs-chip>\n                    }\n                    <!-- Silence means built. A chip here means an interrupted\n                         build left this row owing content. -->\n                    @for (stage of pendingStages(unit); track stage) {\n                      <fs-chip\n                          size=\"tiny\"\n                          [backgroundColor]=\"pendingColor()\"\n                          color=\"#ffffff\"\n                          matTooltip=\"Needs building\">\n                        {{ stage }}\n                      </fs-chip>\n                    }\n                  </div>\n                </mat-panel-description>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"entity-detail\">\n                  @if (unit.model) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Class</span>\n                      <span>{{ unit.model }}</span>\n                    </div>\n                  }\n                  @if (unit.entity; as entity) {\n                    <div class=\"stat\">\n                      <span class=\"label\">Table</span>\n                      <span>{{ entity.table }}</span>\n                    </div>\n                    <!-- The handle the report AI addresses this entity by in\n                         describe_entity / compile_query. -->\n                    <div class=\"stat\">\n                      <span class=\"label\">Entity key</span>\n                      <span>{{ entity.key }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Columns</span>\n                      <span>{{ entity.columns }}</span>\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Relationships</span>\n                      <span>{{ entity.relationships }}</span>\n                    </div>\n                    @if (entity.enums.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Enumeration values</span>\n                        <div class=\"pair-list\">\n                          @for (enumColumn of entity.enums; track enumColumn.column) {\n                            <div class=\"pair-row\">\n                              <span class=\"pair-name\">{{ enumColumn.column }}</span>\n                              <span>{{ enumColumn.values.join(', ') }}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    @if (entity.computedFields.length) {\n                      <div class=\"stat\">\n                        <span class=\"label\">Computed fields</span>\n                        <span>{{ entity.computedFields.join(', ') }}</span>\n                      </div>\n                    }\n                    <div class=\"stat\">\n                      <span class=\"label\">Model functions</span>\n                      @if (entity.modelFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'model')\">\n                          {{ entity.modelFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                    <div class=\"stat\">\n                      <span class=\"label\">Handler functions</span>\n                      @if (entity.handlerFunctionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'handler')\">\n                          {{ entity.handlerFunctionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"stat\">\n                      <span class=\"label\">Code functions</span>\n                      @if (unit.functionCount) {\n                        <a\n                            class=\"count-link\"\n                            (click)=\"openFunctions(unit, 'class')\">\n                          {{ unit.functionCount }}\n                        </a>\n                      } @else {\n                        <span>0</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n\n        @if (!filteredUnits().length) {\n          <div class=\"subheading\">Nothing matches \u201C{{ filter() }}\u201D.</div>\n        }\n      }\n\n      <!-- The other half of the picture: tables the AI can't reach. Excluded\n           ones have no model; unlinked junctions have a composite primary key\n           but were folded into no relationship, so nothing can navigate to\n           them. Both are invisible by omission \u2014 no error, just a capability\n           that silently isn't there. Collapsed by default: the excluded list is\n           long and mostly framework plumbing. -->\n      @if (hasCatalog()) {\n        <h2>Not in the semantic database</h2>\n        <div class=\"subheading\">\n          Tables the report AI can't see. Give one a model to promote it to an\n          entity, then rebuild.\n        </div>\n        <mat-accordion class=\"catalog\">\n          @if (excludedTables().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Tables excluded ({{ excludedTables().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <!-- Deferred: the body only exists once expanded. -->\n              <ng-template matExpansionPanelContent>\n                <div class=\"pair-list\">\n                  @for (table of excludedTables(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n          @if (unlinkedJunctions().length) {\n            <mat-expansion-panel>\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                  Junctions not linked ({{ unlinkedJunctions().length }})\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <ng-template matExpansionPanelContent>\n                <p class=\"small\">\n                  Link tables the build couldn't fold into a relationship \u2014 so\n                  neither they nor what they link can be reported on.\n                </p>\n                <div class=\"pair-list\">\n                  @for (table of unlinkedJunctions(); track table.table) {\n                    <div class=\"pair-row\">\n                      <span class=\"pair-name\">{{ table.table }}</span>\n                      <span>{{ table.reason }}</span>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-expansion-panel>\n          }\n        </mat-accordion>\n      }\n    }\n  </div>\n</div>\n", styles: [".hint{margin:0 0 12px;color:#0009;font-size:13px;line-height:1.5}.stat{display:flex;align-items:baseline;gap:12px}.stat>.label{flex:0 0 150px;white-space:nowrap;color:#0009}.build-status{display:flex;flex-direction:column;gap:8px}.pair-list{display:flex;flex-direction:column;gap:3px}.pair-row{display:flex;gap:12px}.pair-name{flex:0 0 140px;white-space:nowrap;color:#0009}.unit-filter{width:100%;box-sizing:border-box;margin:8px 0 4px;padding:6px 10px;border:1px solid rgba(0,0,0,.2);border-radius:4px;font:inherit}.unit-filter:focus{outline:none;border-color:#00000080}.entities{display:block;padding:3px}.entities mat-panel-description{justify-content:flex-end;margin-right:8px}.entities .stage-chips{display:flex;gap:4px}.entities .entity-detail{display:flex;flex-direction:column;gap:8px}.catalog{display:block;padding:3px}.catalog .pair-name{flex-basis:220px}\n"] }]
         }], ctorParameters: () => [] });
 
 // Matches the backend cap (ReportsView::INSTRUCTIONS_MAX_LENGTH) — the document
@@ -5685,7 +5868,7 @@ class GlobalSettingsComponent {
         this.concurrency.set(settings.semanticBuildConcurrency);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlobalSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GlobalSettingsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "semanticDatabase", first: true, predicate: SemanticDatabaseComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            @if (db.status(); as buildStatus) {\n              <button\n                  type=\"button\"\n                  mat-button\n                  (click)=\"db.build()\">\n                {{ buildStatus.detail.generatedAt ? 'Rebuild' : 'Build' }}\n              </button>\n            }\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: AiKnowledgeComponent, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: ["content", "config"], outputs: ["contentChange"] }, { kind: "component", type: GeneralComponent, selector: "fs-ai-report-global-settings-general", inputs: ["concurrency", "min", "max"], outputs: ["concurrencyChange"] }, { kind: "component", type: SemanticDatabaseComponent, selector: "fs-ai-report-global-settings-semantic-database" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GlobalSettingsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "semanticDatabase", first: true, predicate: SemanticDatabaseComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            <!-- Never gated on the status load: a status response that fails\n                 must not take the Build action away with it. -->\n            <button\n                type=\"button\"\n                mat-button\n                (click)=\"db.build()\">\n              {{ db.rebuild() ? 'Rebuild' : 'Build' }}\n            </button>\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i3$2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "component", type: i2$2.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i2$2.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i4.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: AiKnowledgeComponent, selector: "fs-ai-report-global-settings-ai-knowledge", inputs: ["content", "config"], outputs: ["contentChange"] }, { kind: "component", type: GeneralComponent, selector: "fs-ai-report-global-settings-general", inputs: ["concurrency", "min", "max"], outputs: ["concurrencyChange"] }, { kind: "component", type: SemanticDatabaseComponent, selector: "fs-ai-report-global-settings-semantic-database" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GlobalSettingsComponent, decorators: [{
             type: Component,
@@ -5703,7 +5886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AiKnowledgeComponent,
                         GeneralComponent,
                         SemanticDatabaseComponent,
-                    ], template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            @if (db.status(); as buildStatus) {\n              <button\n                  type=\"button\"\n                  mat-button\n                  (click)=\"db.build()\">\n                {{ buildStatus.detail.generatedAt ? 'Rebuild' : 'Build' }}\n              </button>\n            }\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<form\n    *fsSkeletonForm=\"loaded()\"\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <fs-dialog-title>\n      Report Settings\n    </fs-dialog-title>\n    <mat-dialog-content>\n      <mat-tab-group [(selected)]=\"selectedTab\">\n        <mat-tab\n            label=\"AI Knowledge\"\n            name=\"knowledge\">\n          <fs-ai-report-global-settings-ai-knowledge\n              [content]=\"content()\"\n              (contentChange)=\"content.set($event)\"\n              [config]=\"editorConfig\">\n          </fs-ai-report-global-settings-ai-knowledge>\n        </mat-tab>\n        <mat-tab\n            label=\"Semantic Database\"\n            name=\"build\">\n          <fs-ai-report-global-settings-semantic-database>\n          </fs-ai-report-global-settings-semantic-database>\n        </mat-tab>\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <fs-ai-report-global-settings-general\n              [concurrency]=\"concurrency()\"\n              (concurrencyChange)=\"concurrency.set($event)\"\n              [min]=\"settings()!.semanticBuildConcurrencyMin\"\n              [max]=\"settings()!.semanticBuildConcurrencyMax\">\n          </fs-ai-report-global-settings-general>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <!-- The footer follows the selected tab. AI Knowledge projects its own\n           Save | View History | Cancel row (fs-form-dialog-actions renders\n           projected content after Save/Cancel, so the default pair can't keep\n           View History beside Save); General uses the default Save/Cancel; the\n           Semantic Database tab is a read/run surface, so it gets a primary\n           Close plus its Build/Rebuild/Stop action. -->\n      <fs-form-dialog-actions [save]=\"selectedTab === 'general'\">\n        @if (selectedTab === 'knowledge') {\n          <button\n              type=\"submit\"\n              mat-button\n              color=\"primary\">\n            Save\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              (click)=\"openHistory()\">\n            View History\n          </button>\n          <button\n              type=\"button\"\n              mat-button\n              [mat-dialog-close]=\"null\">\n            Cancel\n          </button>\n        }\n        @if (selectedTab === 'build') {\n          <button\n              type=\"button\"\n              mat-button\n              color=\"primary\"\n              [mat-dialog-close]=\"undefined\">\n            Close\n          </button>\n        }\n        @if (selectedTab === 'build' && semanticDatabase(); as db) {\n          @if (db.buildActive()) {\n            <button\n                type=\"button\"\n                mat-button\n                color=\"warn\"\n                (click)=\"db.stopBuild()\">\n              Stop Build\n            </button>\n          } @else {\n            <!-- Never gated on the status load: a status response that fails\n                 must not take the Build action away with it. -->\n            <button\n                type=\"button\"\n                mat-button\n                (click)=\"db.build()\">\n              {{ db.rebuild() ? 'Rebuild' : 'Build' }}\n            </button>\n          }\n        }\n      </fs-form-dialog-actions>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
 // The reports listing — an fs-tree of folders and the reports filed into them.
@@ -6594,7 +6777,7 @@ class FsAiReportComponent {
             ReportPdfService,
             ReportExportService,
             // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CFkoNvo_.mjs').then((module) => module.default) }),
+            provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CtKYuRcT.mjs').then((module) => module.default) }),
         ], viewQueries: [{ propertyName: "_split", first: true, predicate: ["split"], descendants: true, static: true }, { propertyName: "_chatPanel", first: true, predicate: ["chatPanel"], descendants: true, read: ElementRef, static: true }, { propertyName: "_canvas", first: true, predicate: ReportCanvasComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-ai-report fs-column\">\n\n  <div class=\"fs-ai-report__header fs-row.align-center\">\n    <h2 class=\"fs-ai-report__title fs-flex\">{{ report?.name }}</h2>\n\n    @if (report) {\n      <!-- Report-level filters, inline with the toolbar actions. fs-filter\n           reads its config once at init, so it's keyed on the filter\n           signature: when the report-level filter set changes the block is\n           recreated and re-reads the rebuilt config. -->\n      @if (reportHasFilters) {\n        @for (key of [reportFilterKey]; track key) {\n          <fs-filter\n              class=\"fs-ai-report__filters\"\n              [config]=\"reportFilterConfig\">\n          </fs-filter>\n        }\n      }\n\n      <!-- What layout editing can add or switch to, and the way out of it.\n           One style for all three \u2014 outlined, icon and text. \"Header & footer\"\n           is a toggle: it keeps its label and turns gray while it is on. -->\n      @if (editMode) {\n        <div class=\"fs-ai-report__edit-tools fs-row.align-center.gap-xs\">\n          <button\n              mat-stroked-button\n              type=\"button\"\n              matTooltip=\"Add a block of text\"\n              (click)=\"addText()\">\n            <mat-icon>title</mat-icon>\n            Add text\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              class=\"fs-ai-report__master\"\n              [class.active]=\"isMasterMode\"\n              [matTooltip]=\"isMasterMode ? 'Back to editing this page' : 'Edit the header and footer shown on every page'\"\n              (click)=\"toggleMasterMode()\">\n            <mat-icon>web_asset</mat-icon>\n            Header & footer\n          </button>\n          <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"toggleEditMode()\">\n            <mat-icon>check</mat-icon>\n            Done editing\n          </button>\n        </div>\n      }\n\n      <!-- One icon for both states: it reads as pressed while editing rather\n           than swapping to something else. -->\n      <button\n          mat-icon-button\n          type=\"button\"\n          class=\"fs-ai-report__toggle\"\n          [class.active]=\"editMode\"\n          [matTooltip]=\"editMode ? 'Done editing' : 'Edit layout'\"\n          (click)=\"toggleEditMode()\">\n        <mat-icon>dashboard_customize</mat-icon>\n      </button>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Export\"\n          [fsMenuTriggerFor]=\"exportMenu\">\n        <mat-icon>download</mat-icon>\n      </button>\n      <fs-menu #exportMenu>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPowerpoint()\">\n          Export PowerPoint\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportPdf()\">\n          Export PDF\n        </ng-template>\n        <ng-template\n            fs-menu-item\n            (click)=\"exportData()\">\n          Export Raw Data\n        </ng-template>\n        @if ((report?.pages?.length ?? 0) > 1) {\n          <ng-template\n              fs-menu-item\n              (click)=\"exportData(true)\">\n            Export Raw Data (This Page)\n          </ng-template>\n        }\n      </fs-menu>\n\n      <button\n          mat-icon-button\n          type=\"button\"\n          matTooltip=\"Report settings\"\n          (click)=\"reportSettings()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n    }\n  </div>\n\n  <div\n      #split\n      class=\"fs-ai-report__split fs-row.align-start\">\n    <fs-ai-chat\n        #chatPanel\n        class=\"chat\"\n        [basePath]=\"basePath()\"\n        [requestData]=\"chatRequestData()\"\n        [ready]=\"chatPageId() !== null\"\n        (response)=\"onChatResponse($event)\">\n    </fs-ai-chat>\n\n    <div\n        class=\"resizer\"\n        (pointerdown)=\"onResizeStart($event)\">\n    </div>\n\n    <div class=\"viewer fs-flex fs-column\">\n      @if (report) {\n        <app-report-canvas\n            [report]=\"report\"\n            [editMode]=\"editMode\"\n            [pageId]=\"pageId\"\n            (componentSettings)=\"componentSettings($event)\"\n            (reportChanged)=\"onCanvasReportChanged()\"\n            (pageChanged)=\"onCanvasPageChanged($event)\">\n        </app-report-canvas>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".fs-ai-report{height:100%;min-height:500px;display:flex;flex-direction:column}.fs-ai-report__header{flex:0 0 auto;margin-bottom:10px}.fs-ai-report__title{margin:0;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-ai-report__filters{flex:0 1 auto;min-width:0;display:block;margin:0 5px 0 0}.fs-ai-report__filters ::ng-deep .filter-bar-container{align-items:center!important}.fs-ai-report__filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.fs-ai-report__toggle.active{background:#e3ecf7;color:var(--brand-primary-color, #2196f3)}.fs-ai-report__master.active{background:#eceff3}.fs-ai-report__edit-tools{margin:0 5px}.fs-ai-report__split{flex:1 1 auto;min-height:0}.fs-ai-report .chat{display:block;flex:0 0 25%;width:100%;height:100%;min-height:400px;min-width:0;border:none}.fs-ai-report .viewer{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}.fs-ai-report .resizer{flex:0 0 11px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none}.fs-ai-report .resizer:before{content:\"\";width:3px;border-radius:3px;background:transparent;transition:background-color .12s ease}.fs-ai-report .resizer:hover:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.fs-ai-report__split.resizing .resizer:before{background:var(--brand-primary-color)}.fs-ai-report__split.resizing .chat,.fs-ai-report__split.resizing .viewer{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FsFilterModule }, { kind: "component", type: i2.FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "component", type: FsAiChatComponent, selector: "fs-ai-chat", inputs: ["basePath", "requestData", "ready", "introMessage", "showThinking"], outputs: ["response", "showThinkingChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReportCanvasComponent, selector: "app-report-canvas", inputs: ["report", "editMode", "pageId"], outputs: ["componentSettings", "reportChanged", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FsAiReportComponent, decorators: [{
@@ -6608,7 +6791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReportPdfService,
                         ReportExportService,
                         // Tree-shaken ECharts core + the 'report' house theme, loaded lazily.
-                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CFkoNvo_.mjs').then((module) => module.default) }),
+                        provideEchartsCore({ echarts: () => import('./firestitch-report-echarts-CtKYuRcT.mjs').then((module) => module.default) }),
                     ], imports: [
                         FsFilterModule,
                         FsMenuModule,
@@ -6642,4 +6825,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 
 export { FsAiReportsComponent as F, GRANULARITY_OPTIONS as G, REPORT_CHART_COLORS_CSS as R, ReportComponent as a, FsAiReportComponent as b, ReportData as c, ReportService as d, ReportFilterStateService as e, ReportNodeType as f, ReportState as g };
-//# sourceMappingURL=firestitch-report-firestitch-report-PZzkYYTD.mjs.map
+//# sourceMappingURL=firestitch-report-firestitch-report-Df1IXrEs.mjs.map