@sybilion/uilib 1.3.85 → 1.3.87

package/dist/agent-glossary/content.generated.ts

@@ -180,7 +180,6 @@ Host provides:
 - \`chartData\`, \`forecastData\` built from API
 - \`timeRange\` / \`onTimeRangeChange\` or brush-only range
 - Optional \`mode\`: pin | intervals | thresholds + overlay state
-- Analysis selector and fetch outside widget
 
 Report tile: \`dataset_card\` — host loads dataset + analysis; chart inside dashboard card.
 
@@ -201,7 +200,7 @@ Host provides:
 - Controlled \`selectedDriver\` + \`setSelectedDriver\`
 - \`isLoading\` while fetching drivers
 
-Report tile: \`drivers_map\` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
+Report tile: \`drivers_map\` — tile resolves analysis id, fetches drivers, passes list + selection.
 
 Requires: \`drivers\`; \`isLoading\`; \`selectedDriver\`; \`setSelectedDriver\`.
 
@@ -217,10 +216,9 @@ Not when: simple forecast card or driver backtests — use ChartAreaInteractive
 Host provides:
 
 - \`performanceData\` (PerformanceChartPayload) and \`historicalData\` from performance API
-- Analysis selection and fetch outside widget
 - Optional \`forecastData\`, \`customPerformanceMatrix\`, \`userSeries\` for spaghetti
 
-Report tile: \`performance_chart\` — host loads performance payload + dataset series; built-in analysis selector.
+Report tile: \`performance_chart\` — host loads performance payload + dataset series.
 
 Requires: \`performanceData\` — model/drift forecasts and metrics; \`historicalData\` — baseline series; \`loading\` / \`chartLoading\` / \`performanceDataLoading\` — spinners; \`runAnalysisHint\` / \`statusHint\` — empty states.
 
@@ -240,9 +238,9 @@ Host provides:
 - \`seriesInitKey\` when selected analysis changes
 - \`viewTab\` / \`onViewTabChange\`: \`lagged\` (calendar-aligned, raw dates) or \`overlapped\` (driver series shifted backward by parsed lag months)
 
-View tabs: host should render uilib \`Tabs variant="button"\` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies \`applyDriversComparisonViewToPayload\` internally.
+View tabs: host should render uilib \`Tabs variant="button"\` with **Lagged** / **Overlapped** in the toolbar. Chart applies \`applyDriversComparisonViewToPayload\` internally.
 
-Report tile: \`drivers_comparison_chart\` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
+Report tile: \`drivers_comparison_chart\` — host loads normalized backtests payload + dataset historical.
 
 Requires: \`payload\` — target + driver normalized_series; \`loading\` / \`chartLoading\` — spinners; \`seriesInitKey\` — reset visible series on analysis or view tab change; \`runAnalysisHint\` / \`statusHint\` — empty/error text.
 

package/dist/agent-glossary/content.md

@@ -179,7 +179,6 @@ Host provides:
 - `chartData`, `forecastData` built from API
 - `timeRange` / `onTimeRangeChange` or brush-only range
 - Optional `mode`: pin | intervals | thresholds + overlay state
-- Analysis selector and fetch outside widget
 
 Report tile: `dataset_card` — host loads dataset + analysis; chart inside dashboard card.
 
@@ -200,7 +199,7 @@ Host provides:
 - Controlled `selectedDriver` + `setSelectedDriver`
 - `isLoading` while fetching drivers
 
-Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
+Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection.
 
 Requires: `drivers`; `isLoading`; `selectedDriver`; `setSelectedDriver`.
 
@@ -216,10 +215,9 @@ Not when: simple forecast card or driver backtests — use ChartAreaInteractive
 Host provides:
 
 - `performanceData` (PerformanceChartPayload) and `historicalData` from performance API
-- Analysis selection and fetch outside widget
 - Optional `forecastData`, `customPerformanceMatrix`, `userSeries` for spaghetti
 
-Report tile: `performance_chart` — host loads performance payload + dataset series; built-in analysis selector.
+Report tile: `performance_chart` — host loads performance payload + dataset series.
 
 Requires: `performanceData` — model/drift forecasts and metrics; `historicalData` — baseline series; `loading` / `chartLoading` / `performanceDataLoading` — spinners; `runAnalysisHint` / `statusHint` — empty states.
 
@@ -239,9 +237,9 @@ Host provides:
 - `seriesInitKey` when selected analysis changes
 - `viewTab` / `onViewTabChange`: `lagged` (calendar-aligned, raw dates) or `overlapped` (driver series shifted backward by parsed lag months)
 
-View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies `applyDriversComparisonViewToPayload` internally.
+View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar. Chart applies `applyDriversComparisonViewToPayload` internally.
 
-Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
+Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical.
 
 Requires: `payload` — target + driver normalized_series; `loading` / `chartLoading` — spinners; `seriesInitKey` — reset visible series on analysis or view tab change; `runAnalysisHint` / `statusHint` — empty/error text.
 

package/dist/agent-glossary/workspace.generated.ts

@@ -199,7 +199,6 @@ Host provides:
 - \`chartData\`, \`forecastData\` built from API
 - \`timeRange\` / \`onTimeRangeChange\` or brush-only range
 - Optional \`mode\`: pin | intervals | thresholds + overlay state
-- Analysis selector and fetch outside widget
 
 Report tile: \`dataset_card\` — host loads dataset + analysis; chart inside dashboard card.
 
@@ -220,7 +219,7 @@ Host provides:
 - Controlled \`selectedDriver\` + \`setSelectedDriver\`
 - \`isLoading\` while fetching drivers
 
-Report tile: \`drivers_map\` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
+Report tile: \`drivers_map\` — tile resolves analysis id, fetches drivers, passes list + selection.
 
 Requires: \`drivers\`; \`isLoading\`; \`selectedDriver\`; \`setSelectedDriver\`.
 
@@ -236,10 +235,9 @@ Not when: simple forecast card or driver backtests — use ChartAreaInteractive
 Host provides:
 
 - \`performanceData\` (PerformanceChartPayload) and \`historicalData\` from performance API
-- Analysis selection and fetch outside widget
 - Optional \`forecastData\`, \`customPerformanceMatrix\`, \`userSeries\` for spaghetti
 
-Report tile: \`performance_chart\` — host loads performance payload + dataset series; built-in analysis selector.
+Report tile: \`performance_chart\` — host loads performance payload + dataset series.
 
 Requires: \`performanceData\` — model/drift forecasts and metrics; \`historicalData\` — baseline series; \`loading\` / \`chartLoading\` / \`performanceDataLoading\` — spinners; \`runAnalysisHint\` / \`statusHint\` — empty states.
 
@@ -259,9 +257,9 @@ Host provides:
 - \`seriesInitKey\` when selected analysis changes
 - \`viewTab\` / \`onViewTabChange\`: \`lagged\` (calendar-aligned, raw dates) or \`overlapped\` (driver series shifted backward by parsed lag months)
 
-View tabs: host should render uilib \`Tabs variant="button"\` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies \`applyDriversComparisonViewToPayload\` internally.
+View tabs: host should render uilib \`Tabs variant="button"\` with **Lagged** / **Overlapped** in the toolbar. Chart applies \`applyDriversComparisonViewToPayload\` internally.
 
-Report tile: \`drivers_comparison_chart\` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
+Report tile: \`drivers_comparison_chart\` — host loads normalized backtests payload + dataset historical.
 
 Requires: \`payload\` — target + driver normalized_series; \`loading\` / \`chartLoading\` — spinners; \`seriesInitKey\` — reset visible series on analysis or view tab change; \`runAnalysisHint\` / \`statusHint\` — empty/error text.
 

package/dist/agent-glossary/workspace.md

@@ -198,7 +198,6 @@ Host provides:
 - `chartData`, `forecastData` built from API
 - `timeRange` / `onTimeRangeChange` or brush-only range
 - Optional `mode`: pin | intervals | thresholds + overlay state
-- Analysis selector and fetch outside widget
 
 Report tile: `dataset_card` — host loads dataset + analysis; chart inside dashboard card.
 
@@ -219,7 +218,7 @@ Host provides:
 - Controlled `selectedDriver` + `setSelectedDriver`
 - `isLoading` while fetching drivers
 
-Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
+Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection.
 
 Requires: `drivers`; `isLoading`; `selectedDriver`; `setSelectedDriver`.
 
@@ -235,10 +234,9 @@ Not when: simple forecast card or driver backtests — use ChartAreaInteractive
 Host provides:
 
 - `performanceData` (PerformanceChartPayload) and `historicalData` from performance API
-- Analysis selection and fetch outside widget
 - Optional `forecastData`, `customPerformanceMatrix`, `userSeries` for spaghetti
 
-Report tile: `performance_chart` — host loads performance payload + dataset series; built-in analysis selector.
+Report tile: `performance_chart` — host loads performance payload + dataset series.
 
 Requires: `performanceData` — model/drift forecasts and metrics; `historicalData` — baseline series; `loading` / `chartLoading` / `performanceDataLoading` — spinners; `runAnalysisHint` / `statusHint` — empty states.
 
@@ -258,9 +256,9 @@ Host provides:
 - `seriesInitKey` when selected analysis changes
 - `viewTab` / `onViewTabChange`: `lagged` (calendar-aligned, raw dates) or `overlapped` (driver series shifted backward by parsed lag months)
 
-View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies `applyDriversComparisonViewToPayload` internally.
+View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar. Chart applies `applyDriversComparisonViewToPayload` internally.
 
-Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
+Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical.
 
 Requires: `payload` — target + driver normalized_series; `loading` / `chartLoading` — spinners; `seriesInitKey` — reset visible series on analysis or view tab change; `runAnalysisHint` / `statusHint` — empty/error text.
 

package/dist/esm/components/ui/Chat/ChatEmptyState/ChatEmptyState.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import S from './ChatEmptyState.styl.js';
 import SparklesIcon from './icons/sparkles.svg.js';
+import cn from 'classnames';
 
-function ChatEmptyState({ icon = jsx(SparklesIcon, {}), title = 'Start a conversation', description, additionalContent, children, }) {
-    return (jsxs("div", { className: S.root, children: [icon && jsx("div", { className: S.icon, children: icon }), title && jsx("h2", { children: title }), description && jsx("p", { children: description }), additionalContent, children] }));
+function ChatEmptyState({ icon = jsx(SparklesIcon, {}), title = 'Start a conversation', description, additionalContent, children, className, }) {
+    return (jsxs("div", { className: cn(S.root, className), children: [icon && jsx("div", { className: S.icon, children: icon }), title && jsx("h2", { children: title }), description && jsx("p", { children: description }), additionalContent, children] }));
 }
 
 export { ChatEmptyState };

package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.js

@@ -6,7 +6,8 @@ import { Button } from '../../Button/Button.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../Select/Select.js';
 import S from './ChatSelector.styl.js';
 
-function ChatSelector({ id, wrapperClassName, className, onChatDeleted, onNewChat, }) {
+const deleteIconSize = (s) => s === 'sm' ? 16 : s === 'md' ? 18 : 20;
+function ChatSelector({ id, size = 'sm', variant = 'clear', wrapperClassName, className, onChatDeleted, onNewChat, }) {
     const { chats, currentChatId, setCurrentChatId, newChat, deleteChat } = useChatsForScopeId(id);
     const handleValueChange = (value) => {
         if (value === 'new') {
@@ -39,7 +40,7 @@ function ChatSelector({ id, wrapperClassName, className, onChatDeleted, onNewCha
         }
         return 'New chat';
     };
-    return (jsxs("div", { className: cn(S.wrapper, wrapperClassName), children: [jsx("div", { className: S.selectGrow, children: jsxs(Select, { variant: "clear", value: currentChatId?.toString() ?? '', onValueChange: handleValueChange, children: [jsx(SelectTrigger, { size: "sm", className: className ? cn(S.selectTrigger, className) : S.selectTrigger, children: jsx(SelectValue, { placeholder: "Select chat" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "new", children: "+ New Chat" }), chats.map(chat => (jsx(SelectItem, { value: chat.session_id.toString(), selected: chat.session_id === currentChatId, children: getChatDisplayName(chat) }, chat.session_id)))] })] }) }), currentChatId && chats.length > 0 && (jsx(Button, { type: "button", variant: "ghost", size: "sm", className: S.deleteBtn, "aria-label": "Delete chat", onClick: handleDeleteChat, children: jsx(Trash2Icon, { size: 16 }) }))] }));
+    return (jsxs("div", { className: cn(S.wrapper, variant === 'clear' ? S.variantClear : S.variantDefault, wrapperClassName), children: [jsx("div", { className: S.selectGrow, children: jsxs(Select, { variant: variant, value: currentChatId?.toString() ?? '', onValueChange: handleValueChange, children: [jsx(SelectTrigger, { size: size, variant: variant, className: className ? cn(S.selectTrigger, className) : S.selectTrigger, children: jsx(SelectValue, { placeholder: "Select chat" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "new", children: "+ New Chat" }), chats.map(chat => (jsx(SelectItem, { value: chat.session_id.toString(), selected: chat.session_id === currentChatId, children: getChatDisplayName(chat) }, chat.session_id)))] })] }) }), currentChatId && chats.length > 0 && (jsx(Button, { type: "button", variant: "ghost", size: size, className: S.deleteBtn, "aria-label": "Delete chat", onClick: handleDeleteChat, children: jsx(Trash2Icon, { size: deleteIconSize(size) }) }))] }));
 }
 
 export { ChatSelector };

package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-2);min-width:200px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:0;pointer-events:none}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1;pointer-events:auto}";
-var S = {"wrapper":"ChatSelector_wrapper__8Z4wN","selectGrow":"ChatSelector_selectGrow__bGR0A","selectTrigger":"ChatSelector_selectTrigger__DASfc","deleteBtn":"ChatSelector_deleteBtn__oJ-9b"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-1);min-width:160px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:0;pointer-events:none}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1;pointer-events:auto}.ChatSelector_variantClear__ZN0MI .ChatSelector_selectTrigger__DASfc{background-color:transparent;border:none;box-shadow:none}.ChatSelector_variantClear__ZN0MI .ChatSelector_selectTrigger__DASfc:hover{background-color:transparent;box-shadow:none}.ChatSelector_variantDefault__y-WeT .ChatSelector_selectTrigger__DASfc{background-color:var(--background)}.ChatSelector_variantDefault__y-WeT .ChatSelector_selectTrigger__DASfc:hover{box-shadow:0 0 0 2px var(--background)}";
+var S = {"wrapper":"ChatSelector_wrapper__8Z4wN","selectGrow":"ChatSelector_selectGrow__bGR0A","selectTrigger":"ChatSelector_selectTrigger__DASfc","deleteBtn":"ChatSelector_deleteBtn__oJ-9b","variantClear":"ChatSelector_variantClear__ZN0MI","variantDefault":"ChatSelector_variantDefault__y-WeT"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Chat/ChatSheet/ChatSheet.js

@@ -34,7 +34,7 @@ function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, r
     if (inline) {
         return jsx(ChatChrome, { ...model.chromeProps });
     }
-    return (jsxs(Fragment, { children: [renderTrigger?.(model.toggleOpen) ?? (jsx(Button, { variant: "outline", "aria-label": triggerAriaLabel, onClick: model.toggleOpen, children: triggerLabel })), model.isOpen &&
+    return (jsxs(Fragment, { children: [renderTrigger?.(model.toggleOpen, model.isOpen) ?? (jsx(Button, { variant: "outline", "aria-label": triggerAriaLabel, onClick: model.toggleOpen, children: triggerLabel })), model.isOpen &&
                 model.chatPanelContainer &&
                 createPortal(jsx(ChatChrome, { ...model.chromeProps }), model.chatPanelContainer)] }));
 }

package/dist/esm/components/ui/Select/Select.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Select_selectTrigger__oTOBl{align-items:center;background-color:var(--background);border:none;border-radius:var(--p-4);box-shadow:none;color:var(--foreground);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--p-1);justify-content:space-between;max-width:calc(90vw - var(--page-x-padding)*2);outline:none;overflow:hidden;padding:var(--p-1) var(--p-3);position:relative;transition:all .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Select_selectTrigger__oTOBl:before{background-image:linear-gradient(to right,transparent,var(--background));content:\"\";display:block;height:100%;left:60vw;min-height:100%;min-width:var(--page-x-padding);position:absolute;width:var(--page-x-padding);width:20%}.Select_selectTrigger__oTOBl[aria-expanded=true]:before{display:none}.Select_selectTrigger__oTOBl.Select_darker__wwisI{background-color:var(--muted)}.Select_selectTrigger__oTOBl:hover{box-shadow:0 0 0 2px var(--background)}.Select_selectTrigger__oTOBl[data-size=md]{height:1.75rem}.Select_selectTrigger__oTOBl[data-size=sm]{font-size:var(--text-xs);height:1.75rem}.Select_selectTrigger__oTOBl[data-size=lg]{font-size:var(--text-sm);height:2.25rem}.Select_selectTrigger__oTOBl[data-placeholder]{color:var(--muted-foreground)}.Select_selectTrigger__oTOBl:focus-visible{border-color:var(--ring)}.Select_selectTrigger__oTOBl[aria-invalid=true]{border-color:var(--destructive)}.Select_selectTrigger__oTOBl:disabled{cursor:not-allowed;opacity:.5}.Select_selectTrigger__oTOBl [data-slot=select-value]{align-items:center;display:flex;gap:var(--p-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_selectTrigger__oTOBl svg{flex-shrink:0;pointer-events:none}.Select_selectTrigger__oTOBl svg:not([class*=text-]){color:var(--foreground)}.Select_selectTrigger__oTOBl svg:not([class*=size-]){height:1rem;width:1rem}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI){background-color:var(--background)}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI):hover{background-color:var(--background-alpha-800)}.Select_clear__vxo-N{background-color:transparent;border:none;box-shadow:none;padding:0}.Select_clear__vxo-N:focus-visible{border:none;box-shadow:none}@media (prefers-color-scheme:dark){.Select_clear__vxo-N,.Select_clear__vxo-N:hover{background-color:transparent}}.Select_selectContent__Wbegi{background-color:var(--popover);border:1px solid var(--border);border-radius:var(--p-4);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);max-height:var(--radix-select-content-available-height);min-width:8rem;overflow-x:hidden;overflow-y:auto;position:relative;transform-origin:var(--radix-select-content-transform-origin);z-index:1100}.Select_selectContent__Wbegi[data-state=open]{animation:Select_fadeIn__hm7v- .25s,Select_zoomIn__ep77v .1s}.Select_selectContent__Wbegi[data-state=closed]{animation:Select_fadeOut__A-ccN .25s,Select_zoomOut__pZ-7e .1s}.Select_selectContent__Wbegi[data-side=bottom]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromTop__O1LeF .1s}.Select_selectContent__Wbegi[data-side=left]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromRight__iJq-J .1s}.Select_selectContent__Wbegi[data-side=right]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromLeft__8tm7S .1s}.Select_selectContent__Wbegi[data-side=top]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromBottom__PsvX6 .1s}.Select_selectContentPopper__TU8Jn[data-side=bottom]{transform:translateY(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=left]{transform:translateX(-.25rem)}.Select_selectContentPopper__TU8Jn[data-side=right]{transform:translateX(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=top]{transform:translateY(-.25rem)}.Select_selectViewport__OtOW7{padding:var(--p-1)}.Select_selectViewportPopper__dUoFi{height:var(--radix-select-trigger-height);min-width:var(--radix-select-trigger-width);scroll-margin:var(--p-1) 0;width:100%}.Select_selectLabel__rX9cj{color:var(--muted-foreground);font-size:var(--text-xs);padding:var(--p-2) var(--p-2);padding-bottom:var(--p-2);padding-top:var(--p-2)}.Select_selectItem__JLg4D{align-items:center;border-radius:var(--radius-sm);cursor:default;display:flex;flex-grow:1;font-size:var(--text-sm);gap:var(--p-2);outline:none;padding:var(--p-1) var(--p-2);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_selectItem__JLg4D.Select_selected__tmqut{background-color:var(--accent);font-weight:600}.Select_selectItem__JLg4D:first-child{border-top-left-radius:var(--p-3);border-top-right-radius:var(--p-3)}.Select_selectItem__JLg4D:last-child{border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3)}.Select_selectItem__JLg4D:focus{background-color:var(--accent);color:var(--accent-foreground)}.Select_selectItem__JLg4D[data-disabled]{opacity:.5;pointer-events:none}.Select_selectItem__JLg4D svg{flex-shrink:0;pointer-events:none}.Select_selectItem__JLg4D svg:not([class*=text-]){color:var(--muted-foreground)}.Select_selectItem__JLg4D svg:not([class*=size-]){height:1rem;width:1rem}.Select_selectItem__JLg4D span:not([data-slot=analysis-icon]){display:flex;flex-grow:1;width:100%}.Select_selectItem__JLg4D span:last-child{align-items:center;display:flex;gap:var(--p-2)}.Select_selectItemText__9JXv9{align-items:center;display:flex;gap:var(--p-1)}.Select_selectItemIndicatorContainer__Vte2-{align-items:center;display:flex;height:var(--p-8);justify-content:center;position:absolute;right:0;width:var(--p-8)}.Select_selectItemIndicator__9HcxQ{height:1rem;width:1rem}.Select_selectSeparator__OZw53{background-color:var(--border);height:1px;margin:-.25rem var(--p-1) var(--p-1);pointer-events:none}.Select_selectScrollButton__-z-iR{align-items:center;cursor:default;display:flex;justify-content:center;padding:var(--p-1) 0}.Select_selectIcon__-TfP9{height:1rem;margin-right:calc(var(--p-1)*-1);opacity:.5;width:1rem}.Select_selectScrollIcon__ZyTUI{height:1rem;width:1rem}@keyframes Select_fadeIn__hm7v-{0%{opacity:0}to{opacity:1}}@keyframes Select_fadeOut__A-ccN{0%{opacity:1}to{opacity:0}}@keyframes Select_zoomIn__ep77v{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes Select_zoomOut__pZ-7e{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes Select_slideInFromTop__O1LeF{0%{transform:translateY(-.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromBottom__PsvX6{0%{transform:translateY(.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromLeft__8tm7S{0%{transform:translateX(-.5rem)}to{transform:translateX(.2)}}@keyframes Select_slideInFromRight__iJq-J{0%{transform:translateX(.5rem)}to{transform:translateY(.2)}}";
+var css_248z = ".Select_selectTrigger__oTOBl{align-items:center;background-color:var(--background);border:none;border-radius:var(--p-4);box-shadow:none;color:var(--foreground);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--p-1);justify-content:space-between;max-width:calc(90vw - var(--page-x-padding)*2);outline:none;overflow:hidden;padding:var(--p-1) var(--p-3);position:relative;transition:all .2s ease-in-out;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Select_selectTrigger__oTOBl:before{background-image:linear-gradient(to right,transparent,var(--background));content:\"\";display:block;height:100%;left:60vw;min-height:100%;min-width:var(--page-x-padding);position:absolute;width:var(--page-x-padding);width:20%}.Select_selectTrigger__oTOBl[aria-expanded=true]:before{display:none}.Select_selectTrigger__oTOBl.Select_darker__wwisI{background-color:var(--muted)}.Select_selectTrigger__oTOBl:hover{box-shadow:0 0 0 2px var(--background)}.Select_selectTrigger__oTOBl[data-size=sm]{border-radius:var(--p-4);font-size:var(--text-xs);height:auto;min-height:28px;padding:0 var(--p-4)}.Select_selectTrigger__oTOBl[data-size=md]{border-radius:var(--p-4);font-size:var(--text-sm);height:auto;min-height:40px;padding:var(--p-3) var(--p-4)}.Select_selectTrigger__oTOBl[data-size=lg]{border-radius:var(--p-4);font-size:var(--text-sm);height:auto;min-height:auto;padding:var(--p-4) var(--p-6)}.Select_selectTrigger__oTOBl[data-placeholder]{color:var(--muted-foreground)}.Select_selectTrigger__oTOBl:focus-visible{border-color:var(--ring)}.Select_selectTrigger__oTOBl[aria-invalid=true]{border-color:var(--destructive)}.Select_selectTrigger__oTOBl:disabled{cursor:not-allowed;opacity:.5}.Select_selectTrigger__oTOBl [data-slot=select-value]{align-items:center;display:flex;gap:var(--p-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_selectTrigger__oTOBl svg{flex-shrink:0;pointer-events:none}.Select_selectTrigger__oTOBl svg:not([class*=text-]){color:var(--foreground)}.Select_selectTrigger__oTOBl svg:not([class*=size-]){height:1rem;width:1rem}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI){background-color:var(--background)}.dark .Select_selectTrigger__oTOBl:not(.Select_darker__wwisI):hover{background-color:var(--background-alpha-800)}.Select_clear__vxo-N{background-color:transparent;border:none;box-shadow:none}.Select_clear__vxo-N:focus-visible{border:none;box-shadow:none}@media (prefers-color-scheme:dark){.Select_clear__vxo-N,.Select_clear__vxo-N:hover{background-color:transparent}}.Select_selectContent__Wbegi{background-color:var(--popover);border:1px solid var(--border);border-radius:var(--p-4);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);max-height:var(--radix-select-content-available-height);min-width:8rem;overflow-x:hidden;overflow-y:auto;position:relative;transform-origin:var(--radix-select-content-transform-origin);z-index:1100}.Select_selectContent__Wbegi[data-state=open]{animation:Select_fadeIn__hm7v- .25s,Select_zoomIn__ep77v .1s}.Select_selectContent__Wbegi[data-state=closed]{animation:Select_fadeOut__A-ccN .25s,Select_zoomOut__pZ-7e .1s}.Select_selectContent__Wbegi[data-side=bottom]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromTop__O1LeF .1s}.Select_selectContent__Wbegi[data-side=left]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromRight__iJq-J .1s}.Select_selectContent__Wbegi[data-side=right]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromLeft__8tm7S .1s}.Select_selectContent__Wbegi[data-side=top]{animation:Select_fadeIn__hm7v- .25s,Select_slideInFromBottom__PsvX6 .1s}.Select_selectContentPopper__TU8Jn[data-side=bottom]{transform:translateY(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=left]{transform:translateX(-.25rem)}.Select_selectContentPopper__TU8Jn[data-side=right]{transform:translateX(.25rem)}.Select_selectContentPopper__TU8Jn[data-side=top]{transform:translateY(-.25rem)}.Select_selectViewport__OtOW7{padding:var(--p-1)}.Select_selectViewportPopper__dUoFi{height:var(--radix-select-trigger-height);min-width:var(--radix-select-trigger-width);scroll-margin:var(--p-1) 0;width:100%}.Select_selectLabel__rX9cj{color:var(--muted-foreground);font-size:var(--text-xs);padding:var(--p-2) var(--p-2);padding-bottom:var(--p-2);padding-top:var(--p-2)}.Select_selectItem__JLg4D{align-items:center;border-radius:var(--radius-sm);cursor:default;display:flex;flex-grow:1;font-size:var(--text-sm);gap:var(--p-2);outline:none;padding:var(--p-1) var(--p-2);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_selectItem__JLg4D.Select_selected__tmqut{background-color:var(--accent);font-weight:600}.Select_selectItem__JLg4D:first-child{border-top-left-radius:var(--p-3);border-top-right-radius:var(--p-3)}.Select_selectItem__JLg4D:last-child{border-bottom-left-radius:var(--p-3);border-bottom-right-radius:var(--p-3)}.Select_selectItem__JLg4D:focus{background-color:var(--accent);color:var(--accent-foreground)}.Select_selectItem__JLg4D[data-disabled]{opacity:.5;pointer-events:none}.Select_selectItem__JLg4D svg{flex-shrink:0;pointer-events:none}.Select_selectItem__JLg4D svg:not([class*=text-]){color:var(--muted-foreground)}.Select_selectItem__JLg4D svg:not([class*=size-]){height:1rem;width:1rem}.Select_selectItem__JLg4D span:not([data-slot=analysis-icon]){display:flex;flex-grow:1;width:100%}.Select_selectItem__JLg4D span:last-child{align-items:center;display:flex;gap:var(--p-2)}.Select_selectItemText__9JXv9{align-items:center;display:flex;gap:var(--p-1)}.Select_selectItemIndicatorContainer__Vte2-{align-items:center;display:flex;height:var(--p-8);justify-content:center;position:absolute;right:0;width:var(--p-8)}.Select_selectItemIndicator__9HcxQ{height:1rem;width:1rem}.Select_selectSeparator__OZw53{background-color:var(--border);height:1px;margin:-.25rem var(--p-1) var(--p-1);pointer-events:none}.Select_selectScrollButton__-z-iR{align-items:center;cursor:default;display:flex;justify-content:center;padding:var(--p-1) 0}.Select_selectIcon__-TfP9{height:1rem;margin-right:calc(var(--p-1)*-1);opacity:.5;width:1rem}.Select_selectScrollIcon__ZyTUI{height:1rem;width:1rem}@keyframes Select_fadeIn__hm7v-{0%{opacity:0}to{opacity:1}}@keyframes Select_fadeOut__A-ccN{0%{opacity:1}to{opacity:0}}@keyframes Select_zoomIn__ep77v{0%{transform:scale(.95)}to{transform:scale(1)}}@keyframes Select_zoomOut__pZ-7e{0%{transform:scale(1)}to{transform:scale(.95)}}@keyframes Select_slideInFromTop__O1LeF{0%{transform:translateY(-.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromBottom__PsvX6{0%{transform:translateY(.5rem)}to{transform:translateY(.2)}}@keyframes Select_slideInFromLeft__8tm7S{0%{transform:translateX(-.5rem)}to{transform:translateX(.2)}}@keyframes Select_slideInFromRight__iJq-J{0%{transform:translateX(.5rem)}to{transform:translateY(.2)}}";
 var S = {"selectTrigger":"Select_selectTrigger__oTOBl","darker":"Select_darker__wwisI","clear":"Select_clear__vxo-N","selectContent":"Select_selectContent__Wbegi","fadeIn":"Select_fadeIn__hm7v-","zoomIn":"Select_zoomIn__ep77v","fadeOut":"Select_fadeOut__A-ccN","zoomOut":"Select_zoomOut__pZ-7e","slideInFromTop":"Select_slideInFromTop__O1LeF","slideInFromRight":"Select_slideInFromRight__iJq-J","slideInFromLeft":"Select_slideInFromLeft__8tm7S","slideInFromBottom":"Select_slideInFromBottom__PsvX6","selectContentPopper":"Select_selectContentPopper__TU8Jn","selectViewport":"Select_selectViewport__OtOW7","selectViewportPopper":"Select_selectViewportPopper__dUoFi","selectLabel":"Select_selectLabel__rX9cj","selectItem":"Select_selectItem__JLg4D","selected":"Select_selected__tmqut","selectItemText":"Select_selectItemText__9JXv9","selectItemIndicatorContainer":"Select_selectItemIndicatorContainer__Vte2-","selectItemIndicator":"Select_selectItemIndicator__9HcxQ","selectSeparator":"Select_selectSeparator__OZw53","selectScrollButton":"Select_selectScrollButton__-z-iR","selectIcon":"Select_selectIcon__-TfP9","selectScrollIcon":"Select_selectScrollIcon__ZyTUI"};
 styleInject(css_248z);
 

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithChildren } from 'react';
 import type { ChatEmptyStateProps } from './ChatEmptyState.types';
-export declare function ChatEmptyState({ icon, title, description, additionalContent, children, }: PropsWithChildren<ChatEmptyStateProps>): import("react/jsx-runtime").JSX.Element;
+import { PropsWithChildren } from 'react';
+export declare function ChatEmptyState({ icon, title, description, additionalContent, children, className, }: PropsWithChildren<ChatEmptyStateProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.d.ts

@@ -5,6 +5,7 @@ export type ChatEmptyStateContext = {
 export interface ChatEmptyStateProps {
     icon?: React.ReactNode;
     title?: string;
+    className?: string;
     description?: string;
     /** Extra block below description (resolved before render in `ChatEmptyState`). */
     additionalContent?: React.ReactNode;

package/dist/esm/types/src/components/ui/Chat/ChatSheet/ChatSelector.d.ts

@@ -1,4 +1,5 @@
-export interface ChatSelectorProps {
+import type { SelectProps, SelectTriggerProps } from '#uilib/components/ui/Select/Select.types.js';
+export interface ChatSelectorProps extends SelectProps, Pick<SelectTriggerProps, 'size' | 'variant'> {
     id: string;
     wrapperClassName?: string;
     className?: string;
@@ -6,4 +7,4 @@ export interface ChatSelectorProps {
     /** When set, used for "+ New Chat" instead of the default empty `newChat()`. */
     onNewChat?: () => void;
 }
-export declare function ChatSelector({ id, wrapperClassName, className, onChatDeleted, onNewChat, }: ChatSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSelector({ id, size, variant, wrapperClassName, className, onChatDeleted, onNewChat, }: ChatSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatSheet/ChatSheet.d.ts

@@ -10,7 +10,7 @@ export interface ChatSheetProps extends Omit<UseChatPanelChromeModelInput, 'embe
     title?: string;
     /** Imperative open / new-chat for triggers outside `renderTrigger` (e.g. sidebar). */
     actionsRef?: React.MutableRefObject<ChatSheetActions | null>;
-    renderTrigger?: (toggleOpen: () => void) => React.ReactNode;
+    renderTrigger?: (toggleOpen: () => void, isOpen: boolean) => React.ReactNode;
     triggerLabel?: React.ReactNode;
     /** aria-label for icon-only trigger (required when trigger has no visible text) */
     triggerAriaLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.85",
+  "version": "1.3.87",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/ChartAreaInteractive/AGENT.md

@@ -10,7 +10,6 @@ Host provides:
 - `chartData`, `forecastData` built from API
 - `timeRange` / `onTimeRangeChange` or brush-only range
 - Optional `mode`: pin | intervals | thresholds + overlay state
-- Analysis selector and fetch outside widget
 
 Report tile: `dataset_card` — host loads dataset + analysis; chart inside dashboard card.
 

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.tsx

@@ -1,8 +1,8 @@
+import type { ChatEmptyStateProps } from './ChatEmptyState.types';
 import { PropsWithChildren } from 'react';
-
 import S from './ChatEmptyState.styl';
-import type { ChatEmptyStateProps } from './ChatEmptyState.types';
 import SparklesIcon from './icons/sparkles.svg';
+import cn from 'classnames';
 
 export function ChatEmptyState({
   icon = <SparklesIcon />,
@@ -10,9 +10,10 @@ export function ChatEmptyState({
   description,
   additionalContent,
   children,
+  className,
 }: PropsWithChildren<ChatEmptyStateProps>) {
   return (
-    <div className={S.root}>
+    <div className={cn(S.root, className)}>
       {icon && <div className={S.icon}>{icon}</div>}
       {title && <h2>{title}</h2>}
       {description && <p>{description}</p>}

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.ts

@@ -7,6 +7,7 @@ export type ChatEmptyStateContext = {
 export interface ChatEmptyStateProps {
   icon?: React.ReactNode;
   title?: string;
+  className?: string;
   description?: string;
   /** Extra block below description (resolved before render in `ChatEmptyState`). */
   additionalContent?: React.ReactNode;

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl

@@ -3,8 +3,8 @@
 .wrapper
   display flex
   align-items center
-  gap var(--p-2)
-  min-width 200px
+  gap var(--p-1)
+  min-width 160px
   z-index 1000
 
 .selectGrow
@@ -24,3 +24,19 @@
 .wrapper:hover .deleteBtn
   opacity 1
   pointer-events auto
+
+// Variant styles
+.variantClear .selectTrigger
+  border none
+  background-color transparent
+  box-shadow none
+
+  &:hover
+    box-shadow none
+    background-color transparent
+
+.variantDefault .selectTrigger
+  background-color var(--background)
+
+  &:hover
+    box-shadow 0 0 0 2px var(--background)

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl.d.ts

@@ -4,6 +4,8 @@ interface CssExports {
   'deleteBtn': string;
   'selectGrow': string;
   'selectTrigger': string;
+  'variantClear': string;
+  'variantDefault': string;
   'wrapper': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx

@@ -1,6 +1,10 @@
 import cn from 'classnames';
 
 import { Chat } from '#uilib/components/ui/Chat/Chat.types';
+import type {
+  SelectProps,
+  SelectTriggerProps,
+} from '#uilib/components/ui/Select/Select.types.js';
 import { useChatsForScopeId } from '#uilib/contexts/chat-context';
 import { Trash2Icon } from 'lucide-react';
 
@@ -14,7 +18,8 @@ import {
 } from '../../Select/Select';
 import S from './ChatSelector.styl';
 
-export interface ChatSelectorProps {
+export interface ChatSelectorProps
+  extends SelectProps, Pick<SelectTriggerProps, 'size' | 'variant'> {
   id: string;
   wrapperClassName?: string;
   className?: string;
@@ -23,8 +28,13 @@ export interface ChatSelectorProps {
   onNewChat?: () => void;
 }
 
+const deleteIconSize = (s: NonNullable<SelectTriggerProps['size']>) =>
+  s === 'sm' ? 16 : s === 'md' ? 18 : 20;
+
 export function ChatSelector({
   id,
+  size = 'sm',
+  variant = 'clear',
   wrapperClassName,
   className,
   onChatDeleted,
@@ -67,15 +77,22 @@ export function ChatSelector({
   };
 
   return (
-    <div className={cn(S.wrapper, wrapperClassName)}>
+    <div
+      className={cn(
+        S.wrapper,
+        variant === 'clear' ? S.variantClear : S.variantDefault,
+        wrapperClassName,
+      )}
+    >
       <div className={S.selectGrow}>
         <Select
-          variant="clear"
+          variant={variant}
           value={currentChatId?.toString() ?? ''}
           onValueChange={handleValueChange}
         >
           <SelectTrigger
-            size="sm"
+            size={size}
+            variant={variant}
             className={
               className ? cn(S.selectTrigger, className) : S.selectTrigger
             }
@@ -100,12 +117,12 @@ export function ChatSelector({
         <Button
           type="button"
           variant="ghost"
-          size="sm"
+          size={size}
           className={S.deleteBtn}
           aria-label="Delete chat"
           onClick={handleDeleteChat}
         >
-          <Trash2Icon size={16} />
+          <Trash2Icon size={deleteIconSize(size)} />
         </Button>
       )}
     </div>

package/src/components/ui/Chat/ChatSheet/ChatSheet.tsx

@@ -22,7 +22,7 @@ export interface ChatSheetProps extends Omit<
   title?: string;
   /** Imperative open / new-chat for triggers outside `renderTrigger` (e.g. sidebar). */
   actionsRef?: React.MutableRefObject<ChatSheetActions | null>;
-  renderTrigger?: (toggleOpen: () => void) => React.ReactNode;
+  renderTrigger?: (toggleOpen: () => void, isOpen: boolean) => React.ReactNode;
   triggerLabel?: React.ReactNode;
   /** aria-label for icon-only trigger (required when trigger has no visible text) */
   triggerAriaLabel?: string;
@@ -88,7 +88,7 @@ export function ChatSheet({
 
   return (
     <>
-      {renderTrigger?.(model.toggleOpen) ?? (
+      {renderTrigger?.(model.toggleOpen, model.isOpen) ?? (
         <Button
           variant="outline"
           aria-label={triggerAriaLabel}

package/src/components/ui/Select/Select.styl

@@ -46,15 +46,25 @@
     box-shadow 0 0 0 2px var(--background)
     // color var(--muted-foreground)
 
-  &[data-size="md"]
-    height 1.75rem
-
   &[data-size="sm"]
-    height 1.75rem
+    height auto
+    min-height 28px
+    padding 0 var(--p-4)
+    border-radius var(--p-4)
     font-size var(--text-xs)
 
+  &[data-size="md"]
+    height auto
+    min-height 40px
+    padding var(--p-3) var(--p-4)
+    border-radius var(--p-4)
+    font-size var(--text-sm)
+
   &[data-size="lg"]
-    height 2.25rem
+    height auto
+    min-height auto
+    padding var(--p-4) var(--p-6)
+    border-radius var(--p-4)
     font-size var(--text-sm)
 
   &[data-placeholder]
@@ -97,7 +107,6 @@
 
 
 .clear
-  padding 0
   border none
   background-color transparent
   box-shadow none

package/src/components/widgets/DriverMap/AGENT.md

@@ -11,7 +11,7 @@ Host provides:
 - Controlled `selectedDriver` + `setSelectedDriver`
 - `isLoading` while fetching drivers
 
-Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection (see EmbeddedAnalysisSelector pattern).
+Report tile: `drivers_map` — tile resolves analysis id, fetches drivers, passes list + selection.
 
 Requires: `drivers`; `isLoading`; `selectedDriver`; `setSelectedDriver`.
 

package/src/components/widgets/DriversComparisonChart/AGENT.md

@@ -12,9 +12,9 @@ Host provides:
 - `seriesInitKey` when selected analysis changes
 - `viewTab` / `onViewTabChange`: `lagged` (calendar-aligned, raw dates) or `overlapped` (driver series shifted backward by parsed lag months)
 
-View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar (analysis selector left, tabs right). Chart applies `applyDriversComparisonViewToPayload` internally.
+View tabs: host should render uilib `Tabs variant="button"` with **Lagged** / **Overlapped** in the toolbar. Chart applies `applyDriversComparisonViewToPayload` internally.
 
-Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical; built-in analysis selector.
+Report tile: `drivers_comparison_chart` — host loads normalized backtests payload + dataset historical.
 
 Requires: `payload` — target + driver normalized_series; `loading` / `chartLoading` — spinners; `seriesInitKey` — reset visible series on analysis or view tab change; `runAnalysisHint` / `statusHint` — empty/error text.
 

package/src/components/widgets/PerformanceChart/AGENT.md

@@ -8,10 +8,9 @@ Not when: simple forecast card or driver backtests — use ChartAreaInteractive
 Host provides:
 
 - `performanceData` (PerformanceChartPayload) and `historicalData` from performance API
-- Analysis selection and fetch outside widget
 - Optional `forecastData`, `customPerformanceMatrix`, `userSeries` for spaghetti
 
-Report tile: `performance_chart` — host loads performance payload + dataset series; built-in analysis selector.
+Report tile: `performance_chart` — host loads performance payload + dataset series.
 
 Requires: `performanceData` — model/drift forecasts and metrics; `historicalData` — baseline series; `loading` / `chartLoading` / `performanceDataLoading` — spinners; `runAnalysisHint` / `statusHint` — empty states.
 

package/src/docs/pages/SelectPage.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { PageContentSection } from '#uilib/components/ui/Page';
 import {
   Select,
@@ -12,28 +10,87 @@ import {
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-export default function SelectPage() {
-  const [v, setV] = useState('apple');
+const VARIANTS = ['default', 'clear'] as const;
+const SIZES = ['sm', 'md', 'lg'] as const;
+
+const FRUIT_OPTIONS = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'banana', label: 'Banana' },
+] as const;
+
+function DemoSelect({
+  variant,
+  size,
+}: {
+  variant: (typeof VARIANTS)[number];
+  size: (typeof SIZES)[number];
+}) {
+  return (
+    <Select defaultValue="apple">
+      <SelectTrigger variant={variant} size={size} style={{ width: 200 }}>
+        <SelectValue placeholder="Pick fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        {FRUIT_OPTIONS.map(o => (
+          <SelectItem key={o.value} value={o.value}>
+            {o.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
 
+export default function SelectPage() {
   return (
     <>
       <AppPageHeader
         breadcrumbs={[{ label: 'Select' }]}
         title="Select"
-        subheader="Radix select."
+        subheader="Radix select — variants and sizes."
         actions={<DocsHeaderActions />}
       />
-      <PageContentSection>
-        <Select value={v} onValueChange={setV}>
-          <SelectTrigger style={{ width: 200 }}>
-            <SelectValue placeholder="Pick fruit" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="orange">Orange</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Variants × sizes</h3>
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+              <thead>
+                <tr>
+                  <th style={{ textAlign: 'left', padding: '0.5rem' }} />
+                  {SIZES.map(s => (
+                    <th key={s} style={{ padding: '0.5rem' }}>
+                      {s}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {VARIANTS.map(v => (
+                  <tr key={v}>
+                    <td
+                      style={{
+                        padding: '0.5rem',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {v}
+                    </td>
+                    {SIZES.map(s => (
+                      <td key={s} style={{ padding: '0.5rem' }}>
+                        <DemoSelect variant={v} size={s} />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
       </PageContentSection>
     </>
   );