@sybilion/uilib 1.3.65 → 1.3.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,253 @@
1
+ /** Generated by scripts/build-agent-glossary.mjs — do not edit. */
2
+ export const CONTENT_AGENT_UI_GLOSSARY = `Sybilion page content glossary (content profile)
3
+
4
+
5
+ # Page layout system
6
+
7
+ Sybilion workspace and report surfaces use a small set of **Page** primitives from \`@sybilion/uilib\`. Agents must compose these instead of inventing layout with inline styles, Tailwind structure classes, or ad-hoc wrappers.
8
+
9
+ ## Two modes
10
+
11
+ | Mode | When | Shell |
12
+ | ------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------- |
13
+ | **workspace-page** | Route inside \`AppShell\` / scrolled main column | \`PageHeader\` → \`PageContent\` → \`PageContentSection\`(s). Optional \`PageTabs\`. |
14
+ | **content** | Report tiles, json-dashboard, embedded body only | No \`PageHeader\` / \`AppShell\` chrome. Map React blocks to dashboard tiles (see below). |
15
+
16
+ Do not nest workspace shell components inside **content** mode output.
17
+
18
+ ## Mandatory workspace-page skeleton
19
+
20
+ \`\`\`tsx
21
+ <PageHeader title="…" subheader="…" breadcrumbs={[…]} actions={…} />
22
+ <PageContent>
23
+ <PageContentSection>{/* section A */}</PageContentSection>
24
+ <PageContentSection grow={false}>{/* section B */}</PageContentSection>
25
+ </PageContent>
26
+ \`\`\`
27
+
28
+ - **PageHeader**: one per route view in the main column; title, optional subheader, breadcrumbs, actions.
29
+ - **PageContent**: vertical stack for the body below the header; \`variant="clean"\` when you need a flatter body (no extra chrome).
30
+ - **PageContentSection**: primary vertical band; applies horizontal **page-x-padding** via Stylus (\`pageXPadding()\`). Use multiple sections to separate logical blocks.
31
+
32
+ Global tokens (host app \`:root\`, e.g. \`standalone-global.css\`): \`--page-width\`, \`--page-x-padding\`, \`--page-y-padding\`. \`PageContent\` caps width at \`--page-width\`.
33
+
34
+ ## PageTabs — rules and patterns
35
+
36
+ **NEVER** place \`PageTabs\` inside \`PageContentSection\`. Tabs manage their own horizontal inset via \`PageXScroll\` / \`tabsListProps.withPaddings\`.
37
+
38
+ ### Unified (tabs + panels inside PageContent)
39
+
40
+ \`\`\`tsx
41
+ <PageHeader … />
42
+ <PageContent>
43
+ <PageTabs
44
+ items={[
45
+ { value: 'a', label: 'Tab A', content: <PageContentSection>…</PageContentSection> },
46
+ { value: 'b', label: 'Tab B', content: <PageContentSection>…</PageContentSection> },
47
+ ]}
48
+ />
49
+ </PageContent>
50
+ \`\`\`
51
+
52
+ Tab **panels** use \`PageContentSection\` so section padding stays correct.
53
+
54
+ ### Split (bar-only sibling)
55
+
56
+ Use when the tab bar must sit between header and a custom scroll region:
57
+
58
+ \`\`\`tsx
59
+ <PageHeader … />
60
+ <PageTabs
61
+ items={[
62
+ { value: 'a', label: 'Tab A', content: null },
63
+ { value: 'b', label: 'Tab B', content: null },
64
+ ]}
65
+ />
66
+ <PageContent>…</PageContent>
67
+ \`\`\`
68
+
69
+ Set \`content: null\` (or omit) for bar-only items; render panel bodies in \`PageContent\` yourself.
70
+
71
+ ## Spacing ownership
72
+
73
+ | Component | Owns horizontal page padding? |
74
+ | ---------------------- | --------------------------------------------------------- |
75
+ | **PageContentSection** | Yes (\`pageXPadding\`) |
76
+ | **PageTabs** | Via \`tabsListProps.withPaddings\` + internal \`PageXScroll\` |
77
+ | **PageXScroll** | Reads \`--page-x-padding\` for inset when used standalone |
78
+ | **PageHeader** | Own header inner layout (not \`PageContentSection\`) |
79
+
80
+ Do not duplicate \`padding-left/right\` on children that already sit in \`PageContentSection\`.
81
+
82
+ ## Styling rules
83
+
84
+ - **No** \`style={{…}}\` for layout or spacing (margins, padding, flex, width, gap).
85
+ - **No** Tailwind (or other) utility classes for **structural** layout on page primitives.
86
+ - Custom layout CSS only in co-located \`ComponentName.styl\`, using design tokens (\`var(--p-*)\`, \`var(--page-x-padding)\`, \`pageXPadding()\`, etc.).
87
+ - \`className\` on Page components is for Stylus module classes or state hooks, not one-off pixel tweaks.
88
+
89
+ ## Component reference
90
+
91
+ ### PageHeader
92
+
93
+ Sticky-style page title row: breadcrumbs (optional sidebar trigger in full app), \`title\`, \`subheader\`, \`actions\`. Lives **above** \`PageContent\`, never inside a section.
94
+
95
+ ### PageContent / PageContentSection
96
+
97
+ \`PageContent\`: column flex child, \`max-width: var(--page-width)\`.
98
+ \`PageContentSection\`: \`grow\` (default \`true\`) lets the section absorb remaining height in flex layouts.
99
+
100
+ ### PageColumns
101
+
102
+ Side-by-side columns with gap. **\`fill\`** controls which column(s) grow:
103
+
104
+ | \`fill\` | Behavior |
105
+ | --------------- | ----------------------------------------------------------------------------------------------- |
106
+ | \`all\` (default) | Every column \`flex-grow: 1\`, \`max-width\` unset — use for equal split or fluid grids of columns. |
107
+ | \`left\` | First column grows; others stay at fixed min/max column width. |
108
+ | \`right\` | Last column grows. |
109
+
110
+ Pass \`columns={[node1, node2, …]}\`. On mobile, stacks vertically. Typical pattern: main + aside inside one \`PageContentSection\`.
111
+
112
+ ### PageXScroll
113
+
114
+ Horizontal scroll strip; used inside \`PageTabs\` and anywhere a overflowing row needs page-aligned padding. Props: \`size\`, \`fullWidth\`, \`innerClassName\`, \`scrollbarClassName\`.
115
+
116
+ ### SectionHeader
117
+
118
+ In-section title block (\`title\`, \`description\`, \`actions\`). Use **inside** \`PageContentSection\`, not as a replacement for \`PageHeader\`.
119
+
120
+ ### PageEmptyCanvas
121
+
122
+ Centered empty state: \`title\`, \`hint\`, optional \`children\` (e.g. CTA button). Use when a route has no data yet.
123
+
124
+ ### GridLayout
125
+
126
+ Responsive CSS grid (\`repeat(auto-fit, minmax(colWidth, 1fr))\`). Use for card/tile dashboards inside a section. Report mapping: dashboard **grid** rows / multi-column tile groups.
127
+
128
+ ### Card / Foldable
129
+
130
+ Use inside sections for grouped content; see package \`AGENT.md\` on those components when present. Do not wrap the whole page in Card.
131
+
132
+ ## Content mode — React → json-dashboard tiles
133
+
134
+ When generating **report** / dashboard specs (not workspace routes), map UI blocks to tiles:
135
+
136
+ | React / intent | Dashboard tile / markdown |
137
+ | ------------------------------- | ----------------------------------------------------------------- |
138
+ | \`PageHeader\` title text | First \`markdown\` tile \`# Title\` or report title field |
139
+ | \`SectionHeader\` \`title\` | \`markdown\` with \`## …\` |
140
+ | \`SectionHeader\` \`description\` | markdown paragraph under that heading |
141
+ | \`PageContentSection\` block | group of tiles or one markdown section |
142
+ | \`GridLayout\` children | grid row of widget tiles |
143
+ | \`ChartAreaInteractive\` / charts | \`dataset_card\`, \`performance_chart\`, etc. (see widget \`AGENT.md\`) |
144
+ | \`PageEmptyCanvas\` copy | \`markdown\` explanatory tile |
145
+
146
+ See \`AGENT.report-only-tiles.md\` in the app repo for tiles without a uilib widget.
147
+
148
+ ## Shell components (workspace only)
149
+
150
+ Not part of the per-route skeleton but part of **workspace-page** host wiring:
151
+
152
+ - **AppShell** / **AppShellMainContent** — sidebar + main column + header slot + footer.
153
+ - **PageScroll** — scroll root for the main column.
154
+ - **SybilionAppHeader** — workspace app switcher + user menu (lives in header slot, not inside \`PageContent\`).
155
+
156
+ ## Anti-patterns
157
+
158
+ - \`PageTabs\` inside \`PageContentSection\`.
159
+ - Inline styles or Tailwind for page structure.
160
+ - Second \`PageHeader\` nested in content.
161
+ - \`PageContent\` without sections for multi-block pages (prefer multiple \`PageContentSection\`).
162
+ - Wrapping data widgets in extra layout divs with hard-coded padding.
163
+
164
+ ## Future candidates (not implemented)
165
+
166
+ - **PageToolbar** — dedicated action row between header and tabs.
167
+ - **PageFullBleed** — edge-to-edge section escape hatch.
168
+
169
+ Do not add these locally; extend uilib when product needs them.
170
+
171
+ # ChartAreaInteractive
172
+
173
+ Renders: time-series chart with historical line, forecast lines, optional pin / quantile-band / threshold overlays.
174
+
175
+ Use when: custom forecast UI with overlays or full chart control.
176
+ Not when: packaged performance or drivers-comparison views (use PerformanceChart or DriversComparisonChart).
177
+
178
+ Host provides:
179
+
180
+ - \`chartData\`, \`forecastData\` built from API
181
+ - \`timeRange\` / \`onTimeRangeChange\` or brush-only range
182
+ - Optional \`mode\`: pin | intervals | thresholds + overlay state
183
+ - Analysis selector and fetch outside widget
184
+
185
+ Report tile: \`dataset_card\` — host loads dataset + analysis; chart inside dashboard card.
186
+
187
+ Requires: \`chartData\`; \`forecastData\`; \`loading\`; \`toggleLegendSeries\` / \`ensureAnalysisSeriesVisible\` when legend is external.
188
+
189
+ Empty/loading: \`loading\`, \`error\`; empty data shows chart empty state via host message props.
190
+
191
+ # DriverMap
192
+
193
+ Renders: world map with regional driver badges, bottom strip for world-level drivers, selection highlight.
194
+
195
+ Use when: geographic driver exploration for one analysis.
196
+ Not when: driver detail metrics card alone (pair with DriverCard) or normalized series chart (use DriversComparisonChart).
197
+
198
+ Host provides:
199
+
200
+ - \`drivers\` as \`DriverData[]\` from analysis API
201
+ - Controlled \`selectedDriver\` + \`setSelectedDriver\`
202
+ - \`isLoading\` while fetching drivers
203
+
204
+ Report tile: \`drivers_map\` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
205
+
206
+ Requires: \`drivers\`; \`isLoading\`; \`selectedDriver\`; \`setSelectedDriver\`.
207
+
208
+ Empty/loading: \`isLoading\` shows overlay; empty \`drivers\` leaves map without badges.
209
+
210
+ # PerformanceChart
211
+
212
+ Renders: forecast performance on ChartAreaInteractive — per-horizon tab (24m window, MAE/MAPE table) and spaghetti tab (all horizons overlaid).
213
+
214
+ Use when: dataset performance tab with horizon selector and error metrics.
215
+ Not when: simple forecast card or driver backtests — use ChartAreaInteractive or DriversComparisonChart.
216
+
217
+ Host provides:
218
+
219
+ - \`performanceData\` (PerformanceChartPayload) and \`historicalData\` from performance API
220
+ - Analysis selection and fetch outside widget
221
+ - Optional \`forecastData\`, \`customPerformanceMatrix\`, \`userSeries\` for spaghetti
222
+
223
+ Report tile: \`performance_chart\` — host loads performance payload + dataset series; built-in analysis selector.
224
+
225
+ Requires: \`performanceData\` — model/drift forecasts and metrics; \`historicalData\` — baseline series; \`loading\` / \`chartLoading\` / \`performanceDataLoading\` — spinners; \`runAnalysisHint\` / \`statusHint\` — empty states.
226
+
227
+ Empty/loading: loading props show shimmer/spinner; null \`performanceData\` with \`runAnalysisHint\` prompts to run analysis.
228
+
229
+ # DriversComparisonChart
230
+
231
+ Renders: target vs drivers backtests chart with ChartAreaInteractive plus table; row click toggles series visibility.
232
+
233
+ Use when: drivers comparison tab with normalized target and driver series from backtests payload.
234
+ Not when: geographic map or performance horizons — use DriverMap or PerformanceChart.
235
+
236
+ Host provides:
237
+
238
+ - \`payload\`: BacktestsComponentPayload from platform SDK (host fetch per analysis)
239
+ - Optional \`datasetHistorical\` overlay
240
+ - \`seriesInitKey\` when selected analysis changes
241
+ - \`viewTab\` / \`onViewTabChange\`: \`lagged\` (calendar-aligned, raw dates) or \`overlapped\` (driver series shifted backward by parsed lag months)
242
+
243
+ View tabs: host should render uilib \`Tabs variant="button"\` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies \`applyDriversComparisonViewToPayload\` internally.
244
+
245
+ Report tile: \`drivers_comparison_chart\` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
246
+
247
+ Requires: \`payload\` — target + driver normalized_series; \`loading\` / \`chartLoading\` — spinners; \`seriesInitKey\` — reset visible series on analysis or view tab change; \`runAnalysisHint\` / \`statusHint\` — empty/error text.
248
+
249
+ Lag column: **Lagged** shows API \`lag\` string (may be a range). **Overlapped** shows single \`N month(s)\` from \`parseLagMonthsFromLabel\` (range uses max month).
250
+
251
+ Historical window: lead-in is anchored to the **lagged** (unshifted) view (\`computeDriversComparisonHistoricalWindowFloor\`); overlapped tab shifts driver lines backward only — switching tabs does not change historical extent when floor is pinned.
252
+
253
+ Empty/loading: loading props shimmer chart; null \`payload\` with \`runAnalysisHint\` prompts to run analysis.`;
@@ -0,0 +1,252 @@
1
+ Sybilion page content glossary (content profile)
2
+
3
+
4
+ # Page layout system
5
+
6
+ Sybilion workspace and report surfaces use a small set of **Page** primitives from `@sybilion/uilib`. Agents must compose these instead of inventing layout with inline styles, Tailwind structure classes, or ad-hoc wrappers.
7
+
8
+ ## Two modes
9
+
10
+ | Mode | When | Shell |
11
+ | ------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------- |
12
+ | **workspace-page** | Route inside `AppShell` / scrolled main column | `PageHeader` → `PageContent` → `PageContentSection`(s). Optional `PageTabs`. |
13
+ | **content** | Report tiles, json-dashboard, embedded body only | No `PageHeader` / `AppShell` chrome. Map React blocks to dashboard tiles (see below). |
14
+
15
+ Do not nest workspace shell components inside **content** mode output.
16
+
17
+ ## Mandatory workspace-page skeleton
18
+
19
+ ```tsx
20
+ <PageHeader title="…" subheader="…" breadcrumbs={[…]} actions={…} />
21
+ <PageContent>
22
+ <PageContentSection>{/* section A */}</PageContentSection>
23
+ <PageContentSection grow={false}>{/* section B */}</PageContentSection>
24
+ </PageContent>
25
+ ```
26
+
27
+ - **PageHeader**: one per route view in the main column; title, optional subheader, breadcrumbs, actions.
28
+ - **PageContent**: vertical stack for the body below the header; `variant="clean"` when you need a flatter body (no extra chrome).
29
+ - **PageContentSection**: primary vertical band; applies horizontal **page-x-padding** via Stylus (`pageXPadding()`). Use multiple sections to separate logical blocks.
30
+
31
+ Global tokens (host app `:root`, e.g. `standalone-global.css`): `--page-width`, `--page-x-padding`, `--page-y-padding`. `PageContent` caps width at `--page-width`.
32
+
33
+ ## PageTabs — rules and patterns
34
+
35
+ **NEVER** place `PageTabs` inside `PageContentSection`. Tabs manage their own horizontal inset via `PageXScroll` / `tabsListProps.withPaddings`.
36
+
37
+ ### Unified (tabs + panels inside PageContent)
38
+
39
+ ```tsx
40
+ <PageHeader … />
41
+ <PageContent>
42
+ <PageTabs
43
+ items={[
44
+ { value: 'a', label: 'Tab A', content: <PageContentSection>…</PageContentSection> },
45
+ { value: 'b', label: 'Tab B', content: <PageContentSection>…</PageContentSection> },
46
+ ]}
47
+ />
48
+ </PageContent>
49
+ ```
50
+
51
+ Tab **panels** use `PageContentSection` so section padding stays correct.
52
+
53
+ ### Split (bar-only sibling)
54
+
55
+ Use when the tab bar must sit between header and a custom scroll region:
56
+
57
+ ```tsx
58
+ <PageHeader … />
59
+ <PageTabs
60
+ items={[
61
+ { value: 'a', label: 'Tab A', content: null },
62
+ { value: 'b', label: 'Tab B', content: null },
63
+ ]}
64
+ />
65
+ <PageContent>…</PageContent>
66
+ ```
67
+
68
+ Set `content: null` (or omit) for bar-only items; render panel bodies in `PageContent` yourself.
69
+
70
+ ## Spacing ownership
71
+
72
+ | Component | Owns horizontal page padding? |
73
+ | ---------------------- | --------------------------------------------------------- |
74
+ | **PageContentSection** | Yes (`pageXPadding`) |
75
+ | **PageTabs** | Via `tabsListProps.withPaddings` + internal `PageXScroll` |
76
+ | **PageXScroll** | Reads `--page-x-padding` for inset when used standalone |
77
+ | **PageHeader** | Own header inner layout (not `PageContentSection`) |
78
+
79
+ Do not duplicate `padding-left/right` on children that already sit in `PageContentSection`.
80
+
81
+ ## Styling rules
82
+
83
+ - **No** `style={{…}}` for layout or spacing (margins, padding, flex, width, gap).
84
+ - **No** Tailwind (or other) utility classes for **structural** layout on page primitives.
85
+ - Custom layout CSS only in co-located `ComponentName.styl`, using design tokens (`var(--p-*)`, `var(--page-x-padding)`, `pageXPadding()`, etc.).
86
+ - `className` on Page components is for Stylus module classes or state hooks, not one-off pixel tweaks.
87
+
88
+ ## Component reference
89
+
90
+ ### PageHeader
91
+
92
+ Sticky-style page title row: breadcrumbs (optional sidebar trigger in full app), `title`, `subheader`, `actions`. Lives **above** `PageContent`, never inside a section.
93
+
94
+ ### PageContent / PageContentSection
95
+
96
+ `PageContent`: column flex child, `max-width: var(--page-width)`.
97
+ `PageContentSection`: `grow` (default `true`) lets the section absorb remaining height in flex layouts.
98
+
99
+ ### PageColumns
100
+
101
+ Side-by-side columns with gap. **`fill`** controls which column(s) grow:
102
+
103
+ | `fill` | Behavior |
104
+ | --------------- | ----------------------------------------------------------------------------------------------- |
105
+ | `all` (default) | Every column `flex-grow: 1`, `max-width` unset — use for equal split or fluid grids of columns. |
106
+ | `left` | First column grows; others stay at fixed min/max column width. |
107
+ | `right` | Last column grows. |
108
+
109
+ Pass `columns={[node1, node2, …]}`. On mobile, stacks vertically. Typical pattern: main + aside inside one `PageContentSection`.
110
+
111
+ ### PageXScroll
112
+
113
+ Horizontal scroll strip; used inside `PageTabs` and anywhere a overflowing row needs page-aligned padding. Props: `size`, `fullWidth`, `innerClassName`, `scrollbarClassName`.
114
+
115
+ ### SectionHeader
116
+
117
+ In-section title block (`title`, `description`, `actions`). Use **inside** `PageContentSection`, not as a replacement for `PageHeader`.
118
+
119
+ ### PageEmptyCanvas
120
+
121
+ Centered empty state: `title`, `hint`, optional `children` (e.g. CTA button). Use when a route has no data yet.
122
+
123
+ ### GridLayout
124
+
125
+ Responsive CSS grid (`repeat(auto-fit, minmax(colWidth, 1fr))`). Use for card/tile dashboards inside a section. Report mapping: dashboard **grid** rows / multi-column tile groups.
126
+
127
+ ### Card / Foldable
128
+
129
+ Use inside sections for grouped content; see package `AGENT.md` on those components when present. Do not wrap the whole page in Card.
130
+
131
+ ## Content mode — React → json-dashboard tiles
132
+
133
+ When generating **report** / dashboard specs (not workspace routes), map UI blocks to tiles:
134
+
135
+ | React / intent | Dashboard tile / markdown |
136
+ | ------------------------------- | ----------------------------------------------------------------- |
137
+ | `PageHeader` title text | First `markdown` tile `# Title` or report title field |
138
+ | `SectionHeader` `title` | `markdown` with `## …` |
139
+ | `SectionHeader` `description` | markdown paragraph under that heading |
140
+ | `PageContentSection` block | group of tiles or one markdown section |
141
+ | `GridLayout` children | grid row of widget tiles |
142
+ | `ChartAreaInteractive` / charts | `dataset_card`, `performance_chart`, etc. (see widget `AGENT.md`) |
143
+ | `PageEmptyCanvas` copy | `markdown` explanatory tile |
144
+
145
+ See `AGENT.report-only-tiles.md` in the app repo for tiles without a uilib widget.
146
+
147
+ ## Shell components (workspace only)
148
+
149
+ Not part of the per-route skeleton but part of **workspace-page** host wiring:
150
+
151
+ - **AppShell** / **AppShellMainContent** — sidebar + main column + header slot + footer.
152
+ - **PageScroll** — scroll root for the main column.
153
+ - **SybilionAppHeader** — workspace app switcher + user menu (lives in header slot, not inside `PageContent`).
154
+
155
+ ## Anti-patterns
156
+
157
+ - `PageTabs` inside `PageContentSection`.
158
+ - Inline styles or Tailwind for page structure.
159
+ - Second `PageHeader` nested in content.
160
+ - `PageContent` without sections for multi-block pages (prefer multiple `PageContentSection`).
161
+ - Wrapping data widgets in extra layout divs with hard-coded padding.
162
+
163
+ ## Future candidates (not implemented)
164
+
165
+ - **PageToolbar** — dedicated action row between header and tabs.
166
+ - **PageFullBleed** — edge-to-edge section escape hatch.
167
+
168
+ Do not add these locally; extend uilib when product needs them.
169
+
170
+ # ChartAreaInteractive
171
+
172
+ Renders: time-series chart with historical line, forecast lines, optional pin / quantile-band / threshold overlays.
173
+
174
+ Use when: custom forecast UI with overlays or full chart control.
175
+ Not when: packaged performance or drivers-comparison views (use PerformanceChart or DriversComparisonChart).
176
+
177
+ Host provides:
178
+
179
+ - `chartData`, `forecastData` built from API
180
+ - `timeRange` / `onTimeRangeChange` or brush-only range
181
+ - Optional `mode`: pin | intervals | thresholds + overlay state
182
+ - Analysis selector and fetch outside widget
183
+
184
+ Report tile: `dataset_card` — host loads dataset + analysis; chart inside dashboard card.
185
+
186
+ Requires: `chartData`; `forecastData`; `loading`; `toggleLegendSeries` / `ensureAnalysisSeriesVisible` when legend is external.
187
+
188
+ Empty/loading: `loading`, `error`; empty data shows chart empty state via host message props.
189
+
190
+ # DriverMap
191
+
192
+ Renders: world map with regional driver badges, bottom strip for world-level drivers, selection highlight.
193
+
194
+ Use when: geographic driver exploration for one analysis.
195
+ Not when: driver detail metrics card alone (pair with DriverCard) or normalized series chart (use DriversComparisonChart).
196
+
197
+ Host provides:
198
+
199
+ - `drivers` as `DriverData[]` from analysis API
200
+ - Controlled `selectedDriver` + `setSelectedDriver`
201
+ - `isLoading` while fetching drivers
202
+
203
+ Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
204
+
205
+ Requires: `drivers`; `isLoading`; `selectedDriver`; `setSelectedDriver`.
206
+
207
+ Empty/loading: `isLoading` shows overlay; empty `drivers` leaves map without badges.
208
+
209
+ # PerformanceChart
210
+
211
+ Renders: forecast performance on ChartAreaInteractive — per-horizon tab (24m window, MAE/MAPE table) and spaghetti tab (all horizons overlaid).
212
+
213
+ Use when: dataset performance tab with horizon selector and error metrics.
214
+ Not when: simple forecast card or driver backtests — use ChartAreaInteractive or DriversComparisonChart.
215
+
216
+ Host provides:
217
+
218
+ - `performanceData` (PerformanceChartPayload) and `historicalData` from performance API
219
+ - Analysis selection and fetch outside widget
220
+ - Optional `forecastData`, `customPerformanceMatrix`, `userSeries` for spaghetti
221
+
222
+ Report tile: `performance_chart` — host loads performance payload + dataset series; built-in analysis selector.
223
+
224
+ Requires: `performanceData` — model/drift forecasts and metrics; `historicalData` — baseline series; `loading` / `chartLoading` / `performanceDataLoading` — spinners; `runAnalysisHint` / `statusHint` — empty states.
225
+
226
+ Empty/loading: loading props show shimmer/spinner; null `performanceData` with `runAnalysisHint` prompts to run analysis.
227
+
228
+ # DriversComparisonChart
229
+
230
+ Renders: target vs drivers backtests chart with ChartAreaInteractive plus table; row click toggles series visibility.
231
+
232
+ Use when: drivers comparison tab with normalized target and driver series from backtests payload.
233
+ Not when: geographic map or performance horizons — use DriverMap or PerformanceChart.
234
+
235
+ Host provides:
236
+
237
+ - `payload`: BacktestsComponentPayload from platform SDK (host fetch per analysis)
238
+ - Optional `datasetHistorical` overlay
239
+ - `seriesInitKey` when selected analysis changes
240
+ - `viewTab` / `onViewTabChange`: `lagged` (calendar-aligned, raw dates) or `overlapped` (driver series shifted backward by parsed lag months)
241
+
242
+ View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies `applyDriversComparisonViewToPayload` internally.
243
+
244
+ Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
245
+
246
+ Requires: `payload` — target + driver normalized_series; `loading` / `chartLoading` — spinners; `seriesInitKey` — reset visible series on analysis or view tab change; `runAnalysisHint` / `statusHint` — empty/error text.
247
+
248
+ Lag column: **Lagged** shows API `lag` string (may be a range). **Overlapped** shows single `N month(s)` from `parseLagMonthsFromLabel` (range uses max month).
249
+
250
+ Historical window: lead-in is anchored to the **lagged** (unshifted) view (`computeDriversComparisonHistoricalWindowFloor`); overlapped tab shifts driver lines backward only — switching tabs does not change historical extent when floor is pinned.
251
+
252
+ Empty/loading: loading props shimmer chart; null `payload` with `runAnalysisHint` prompts to run analysis.