@sybilion/uilib 1.3.18 → 1.3.20

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

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;box-sizing:border-box;display:grid;max-width:100%;min-width:0;overflow-wrap:break-word;width:-moz-max-content;width:max-content;word-break:break-word;grid-gap:.375rem;background-color:var(--background);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.5);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1}.Chart_tooltipLabel__zMpjZ{display:grid;grid-gap:.375rem;gap:.375rem}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3)}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
-var S = {"chartContainer":"Chart_chartContainer__--q1l","chartGrid":"Chart_chartGrid__t52WF","tooltipContainer":"Chart_tooltipContainer__6tc0q","tooltipItem":"Chart_tooltipItem__j8I9T","tooltipIndicator":"Chart_tooltipIndicator__Z-JWp","indicator-dot":"Chart_indicator-dot__MWcmW","indicator-line":"Chart_indicator-line__MO3ul","indicator-dashed":"Chart_indicator-dashed__2LqIN","nested":"Chart_nested__7EWWk","tooltipContent":"Chart_tooltipContent__M3R-W","tooltipLabel":"Chart_tooltipLabel__zMpjZ","tooltipValue":"Chart_tooltipValue__vTQxU","legendContainer":"Chart_legendContainer__u1J3U","legendItem":"Chart_legendItem__0CSyC","legendIndicator":"Chart_legendIndicator__erzzP","chart-line-blink":"Chart_chart-line-blink__4EI-g"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{box-sizing:border-box;max-width:90%;z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;box-sizing:border-box;display:grid;max-width:min(500px,90vw);min-width:0;overflow-wrap:break-word;width:100%;word-break:break-word;grid-gap:.375rem;backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--background) 50%,transparent);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.2),0 0 1px 0 var(--muted-foreground);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.dark .Chart_tooltipContainer__6tc0q{box-shadow:0 0 1px 0 var(--sb-slate-700),0 10px 10px -5px rgba(0,0,0,.7)}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1;min-width:0}.Chart_tooltipLabel__zMpjZ{display:grid;min-width:0;grid-gap:.375rem;gap:.375rem}.Chart_tooltipLabelText__45osJ{display:-webkit-box;-webkit-line-clamp:3;max-width:100%;min-width:0;overflow:hidden;word-break:break-word;-webkit-box-orient:vertical}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3);white-space:nowrap}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
+var S = {"chartContainer":"Chart_chartContainer__--q1l","chartGrid":"Chart_chartGrid__t52WF","tooltipContainer":"Chart_tooltipContainer__6tc0q","tooltipItem":"Chart_tooltipItem__j8I9T","tooltipIndicator":"Chart_tooltipIndicator__Z-JWp","indicator-dot":"Chart_indicator-dot__MWcmW","indicator-line":"Chart_indicator-line__MO3ul","indicator-dashed":"Chart_indicator-dashed__2LqIN","nested":"Chart_nested__7EWWk","tooltipContent":"Chart_tooltipContent__M3R-W","tooltipLabel":"Chart_tooltipLabel__zMpjZ","tooltipLabelText":"Chart_tooltipLabelText__45osJ","tooltipValue":"Chart_tooltipValue__vTQxU","legendContainer":"Chart_legendContainer__u1J3U","legendItem":"Chart_legendItem__0CSyC","legendIndicator":"Chart_legendIndicator__erzzP","chart-line-blink":"Chart_chart-line-blink__4EI-g"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Chart/components/ChartTooltipItem.js

@@ -16,7 +16,7 @@ function ChartTooltipItem({ item, index, config, indicator, hideIndicator, nestL
     return (jsx("div", { className: cn(S.tooltipItem, indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn(S.tooltipIndicator, S[`indicator-${indicator}`], nestLabel && S.nested), style: {
                         '--color-bg': indicatorColor,
                         '--color-border': indicatorColor,
-                    } }))), jsxs("div", { className: cn(S.tooltipContent, nestLabel ? 'items-end' : 'items-center'), children: [jsxs("div", { className: S.tooltipLabel, children: [nestLabel ? tooltipLabel : null, jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: S.tooltipValue, children: Array.isArray(item.value)
+                    } }))), jsxs("div", { className: cn(S.tooltipContent, nestLabel ? 'items-end' : 'items-center'), children: [jsxs("div", { className: S.tooltipLabel, children: [nestLabel ? tooltipLabel : null, jsx("span", { className: cn('text-muted-foreground', S.tooltipLabelText), children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: S.tooltipValue, children: Array.isArray(item.value)
                                 ? `${item.value[0].toLocaleString(undefined, { maximumFractionDigits: 20 })} – ${item.value[1].toLocaleString(undefined, { maximumFractionDigits: 20 })}`
                                 : item.value.toLocaleString(undefined, {
                                     maximumFractionDigits: 20,

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.js

@@ -111,7 +111,7 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
                 return (jsx(BaseChartWrapper, { ...baseChartProps, chartClassName: cn(S.chartContainer, chartContainerClassName) }));
         }
     };
-    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), jsx(TimeRangeBrushHost, { chartData: bridgedChartData, onTimeRangeChange: onTimeRangeChange, enabled: brushEnabled, layoutKey: chartRenderId ?? null, children: renderChart() })] }));
+    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), disabled: loading, children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), jsx(TimeRangeBrushHost, { chartData: bridgedChartData, onTimeRangeChange: onTimeRangeChange, enabled: brushEnabled, layoutKey: chartRenderId ?? null, children: renderChart() })] }));
 }
 
 export { ChartAreaInteractive, chartConfig };

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

@@ -4,7 +4,7 @@ import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js'
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
-import { useChatsForScopeId, useChat, useChatOutboundPending, isChatEmpty } from '../../../../contexts/chat-context.js';
+import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -31,6 +31,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const chat = useChat(effectiveScopeId, currentChatId);
     const isOutboundPending = useChatOutboundPending(effectiveScopeId, currentChatId);
     const isLoading = isOutboundPending || localUiBusy;
+    useSyncChatPanelBusy(isLoading);
     const { searchParams, addSearchParams, removeSearchParams, mutateSearchParams, } = useQueryParams();
     const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
     const [isOpen, setIsOpen] = useState(false);

package/dist/esm/components/ui/InteractionOverlay/InteractionOverlay.js

@@ -1,22 +1,25 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useCallback, useEffect } from 'react';
+import { useIsChatLoading } from '../../../contexts/chat-context.js';
 import { useIsTouchDevice } from '../../../hooks/useIsTouchDevice.js';
 import S from './InteractionOverlay.styl.js';
 
-function InteractionOverlay({ className, children, message = 'Touch to interact', }) {
+function InteractionOverlay({ className, children, message = 'Touch to interact', disabled = false, }) {
     const isTouchDevice = useIsTouchDevice();
+    const isChatLoading = useIsChatLoading();
+    const suppressOverlay = disabled || isChatLoading;
     const [isVisible, setIsVisible] = useState(true);
     const handleClick = useCallback(() => {
         setIsVisible(false);
     }, []);
     useEffect(() => {
-        if (isTouchDevice) {
+        if (isTouchDevice && !suppressOverlay) {
             setIsVisible(true);
         }
-    }, [isTouchDevice]);
+    }, [isTouchDevice, suppressOverlay]);
     useEffect(() => {
-        if (!isTouchDevice)
+        if (!isTouchDevice || suppressOverlay)
             return;
         const handleScroll = () => {
             setIsVisible(true);
@@ -25,11 +28,11 @@ function InteractionOverlay({ className, children, message = 'Touch to interact'
         return () => {
             document.removeEventListener('scroll', handleScroll, { capture: true });
         };
-    }, [isTouchDevice]);
+    }, [isTouchDevice, suppressOverlay]);
     if (!isTouchDevice) {
         return jsx(Fragment, { children: children });
     }
-    return (jsxs("div", { className: cn(S.root, !isVisible && S.hidden, className), children: [children, jsx("button", { type: "button", className: S.overlay, onClick: handleClick, "aria-label": message, children: jsx("span", { className: S.message, children: message }) })] }));
+    return (jsxs("div", { className: cn(S.root, (!isVisible || suppressOverlay) && S.hidden, className), children: [children, jsx("button", { type: "button", className: S.overlay, onClick: handleClick, "aria-label": message, children: jsx("span", { className: S.message, children: message }) })] }));
 }
 
 export { InteractionOverlay };

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

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractionOverlay_root__9FV58{position:relative}.InteractionOverlay_overlay__Nwawr{background:transparent;border:none;box-shadow:inset 0 0 80px 40px var(--overlay-background-color);cursor:pointer;inset:0;margin:0;padding:0;position:absolute;touch-action:manipulation;transition:box-shadow .2s ease-out;z-index:4}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr{box-shadow:inset 0 0 0 0 var(--overlay-background-color);pointer-events:none}.InteractionOverlay_message__oCuPR{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--overlay-background-color) 80%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);border-radius:9999px;box-shadow:0 0 24px 10px var(--overlay-background-color),0 0 0 1px color-mix(in srgb,var(--overlay-background-color) 40%,transparent);color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;line-height:1.25;padding:var(--p-3) var(--p-5);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s ease-out;transition-property:transform,opacity;white-space:nowrap;z-index:1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_message__oCuPR{opacity:0;transform:translate(-50%,-50%) scale(.3)}:root{--overlay-background-color:var(--page-color)}";
+var css_248z = ".InteractionOverlay_root__9FV58{position:relative}.InteractionOverlay_overlay__Nwawr{background:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute;touch-action:manipulation;z-index:4}.InteractionOverlay_overlay__Nwawr:before{background-color:color-mix(in srgb,var(--overlay-background-color) 70%,transparent);bottom:calc(var(--p-2)*-1);box-shadow:inset 0 0 80px 40px var(--overlay-background-color);content:\"\";left:calc(var(--p-2)*-1);pointer-events:none;position:absolute;right:calc(var(--p-2)*-1);top:calc(var(--p-2)*-1);transition:.2s ease-out;transition-property:box-shadow,background-color;z-index:-1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr{pointer-events:none}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_overlay__Nwawr:before{background-color:transparent;box-shadow:inset 0 0 0 0 var(--overlay-background-color)}.InteractionOverlay_message__oCuPR{backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--overlay-background-color) 80%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);border-radius:9999px;box-shadow:0 0 24px 10px var(--overlay-background-color),0 0 0 1px color-mix(in srgb,var(--overlay-background-color) 40%,transparent);color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;line-height:1.25;padding:var(--p-3) var(--p-5);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:.2s ease-out;transition-property:transform,opacity;white-space:nowrap;z-index:1}.InteractionOverlay_hidden__NRlgG .InteractionOverlay_message__oCuPR{opacity:0;transform:translate(-50%,-50%) scale(.3)}:root{--overlay-background-color:var(--page-color)}";
 var S = {"root":"InteractionOverlay_root__9FV58","overlay":"InteractionOverlay_overlay__Nwawr","hidden":"InteractionOverlay_hidden__NRlgG","message":"InteractionOverlay_message__oCuPR"};
 styleInject(css_248z);
 

package/dist/esm/contexts/chat-context.js

@@ -92,6 +92,13 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
         return loadChatsFromLS(userSwitchKey).currentChatId;
     });
     const [outboundPendingByKey, setOutboundPendingByKey] = useState({});
+    const [panelBusyCount, setPanelBusyCount] = useState(0);
+    const acquirePanelBusy = useCallback(() => {
+        setPanelBusyCount(count => count + 1);
+    }, []);
+    const releasePanelBusy = useCallback(() => {
+        setPanelBusyCount(count => Math.max(0, count - 1));
+    }, []);
     const beginOutboundPending = useCallback((scopeId, chatSessionId) => {
         const key = outboundPendingKey(scopeId, chatSessionId);
         setOutboundPendingByKey(prev => ({
@@ -282,6 +289,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             setChats({});
             setCurrentChatIdState({});
             setOutboundPendingByKey({});
+            setPanelBusyCount(0);
             return;
         }
         const loaded = loadChatsFromLS(userSwitchKey);
@@ -306,6 +314,9 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             getCurrentChatId,
             deleteChat,
             outboundPendingByKey,
+            panelBusyCount,
+            acquirePanelBusy,
+            releasePanelBusy,
         }, children: children }));
 }
 const isChatEmpty = (chat) => chat?.messages.length === 0;
@@ -334,6 +345,29 @@ function useChatOutboundPending(scopeId, chatSessionId) {
         return (outboundPendingByKey[key] ?? 0) > 0;
     }, [scopeId, chatSessionId, outboundPendingByKey]);
 }
+/** True when chat is waiting on API or panel UI busy (safe outside ChatProvider). */
+function useIsChatLoading() {
+    const context = useContext(ChatContext);
+    return useMemo(() => {
+        if (!context)
+            return false;
+        const outboundPending = Object.values(context.outboundPendingByKey).some(count => count > 0);
+        return outboundPending || context.panelBusyCount > 0;
+    }, [context?.outboundPendingByKey, context?.panelBusyCount]);
+}
+/** Syncs chat panel `isLoading` into context for touch-overlay suppression. */
+function useSyncChatPanelBusy(isLoading) {
+    const acquirePanelBusy = useContext(ChatContext)?.acquirePanelBusy;
+    const releasePanelBusy = useContext(ChatContext)?.releasePanelBusy;
+    useEffect(() => {
+        if (!isLoading || !acquirePanelBusy || !releasePanelBusy)
+            return;
+        acquirePanelBusy();
+        return () => {
+            releasePanelBusy();
+        };
+    }, [isLoading, acquirePanelBusy, releasePanelBusy]);
+}
 function useChatsForScopeId(scopeId) {
     const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
@@ -363,4 +397,4 @@ function useCurrentChat(scopeId) {
     return useChat(scopeId, chatId ?? undefined);
 }
 
-export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat, useIsChatLoading, useSyncChatPanelBusy };

package/dist/esm/index.js

@@ -6,7 +6,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
-export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat, useIsChatLoading, useSyncChatPanelBusy } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';
 export { AnalysisLineIcon } from './components/ui/AnalysisLineIcon/AnalysisLineIcon.js';
 export { AppHeaderHost, AppHeaderPortal } from './components/ui/AppHeader/AppHeader.js';

package/dist/esm/types/src/components/ui/InteractionOverlay/InteractionOverlay.d.ts

@@ -2,6 +2,8 @@ interface InteractionOverlayProps {
     className?: string;
     children?: React.ReactNode;
     message?: string;
+    /** When true, hides the touch overlay (e.g. chart data loading). */
+    disabled?: boolean;
 }
-export declare function InteractionOverlay({ className, children, message, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function InteractionOverlay({ className, children, message, disabled, }: InteractionOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -21,6 +21,10 @@ export interface ChatContextType {
      * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
      */
     outboundPendingByKey: Readonly<Record<string, number>>;
+    /** Ref-count of chat panels reporting UI busy (outbound wait, preset scripts, etc.). */
+    panelBusyCount: number;
+    acquirePanelBusy: () => void;
+    releasePanelBusy: () => void;
 }
 declare const ChatContext: import("react").Context<ChatContextType>;
 /** Stable composite key; avoids collisions if `scopeId` contains `:`. */
@@ -36,6 +40,10 @@ export declare const isChatEmpty: (chat: Chat | null) => boolean;
 export declare function useChats(): ChatContextType;
 export declare function useChat(scopeId: string | undefined, chatId: string | undefined): Chat | null;
 export declare function useChatOutboundPending(scopeId: string | undefined | null, chatSessionId: string | null | undefined): boolean;
+/** True when chat is waiting on API or panel UI busy (safe outside ChatProvider). */
+export declare function useIsChatLoading(): boolean;
+/** Syncs chat panel `isLoading` into context for touch-overlay suppression. */
+export declare function useSyncChatPanelBusy(isLoading: boolean): void;
 export declare function useChatsForScopeId(scopeId: string): {
     chats: Chat[];
     currentChat: Chat;

package/package.json

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

package/src/components/ui/Chart/Chart.styl

@@ -1,3 +1,5 @@
+@import 'lib/theme.styl'
+
 // Chart container
 .chartContainer
   display flex
@@ -60,6 +62,8 @@
     // Tooltip portal positions with absolute + transform; do not override with relative.
     .recharts-tooltip-wrapper
       z-index 3 !important
+      max-width 90%
+      box-sizing border-box
 
     // Active dots and cursor
     .recharts-active-dot
@@ -75,8 +79,8 @@
 .tooltipContainer
   display grid
   box-sizing border-box
-  width max-content
-  max-width 100%
+  width 100%
+  max-width unquote('min(500px, 90vw)')
   min-width 0
   overflow-wrap break-word
   word-break break-word
@@ -85,13 +89,18 @@
   padding 0.375rem 0.625rem /* py-1.5 px-2.5 */
   border-radius 0.5rem /* rounded-lg */
   border 1px solid var(--border) / 0.5
-  background-color var(--background)
+  // background-color var(--background)
+  backdrop-filter blur(10px)
+  background-color unquote('color-mix(in srgb, var(--background) 50%, transparent)')
   font-size 0.75rem /* text-xs */
   line-height 1rem
-  box-shadow 0 10px 10px -5px rgba(0 0 0 0.3), 0 0 2px 0 rgba(0 0 0 0.5) /* shadow-xl */
+  box-shadow 0 10px 10px -5px rgba(0 0 0 0.2), 0 0 1px 0 var(--muted-foreground)
   opacity 0
   transition opacity 0.5s ease-out
 
+  :global(.dark) &
+    box-shadow 0 0 1px 0 var(--sb-slate-700), 0 10px 10px -5px rgba(0 0 0 0.7)
+
   .chartContainer:hover &
     opacity 1
     transition-duration 0.5s
@@ -135,19 +144,29 @@
 .tooltipContent
   display flex
   flex 1 1 0%
+  min-width 0
   justify-content space-between
   line-height 1
 
 .tooltipLabel
   display grid
+  min-width 0
   gap 0.375rem /* gap-1.5 */
 
+.tooltipLabelText
+  min-width 0
+  max-width 100%
+  overflow hidden
+  word-break break-word
+  line-clamp(3)
+
 .tooltipValue
   font-family ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
   font-weight 500
   font-variant-numeric tabular-nums
   color var(--foreground)
   margin-left var(--p-3)
+  white-space nowrap
 
 // Legend styles
 .legendContainer

package/src/components/ui/Chart/Chart.styl.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'tooltipIndicator': string;
   'tooltipItem': string;
   'tooltipLabel': string;
+  'tooltipLabelText': string;
   'tooltipValue': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Chart/components/ChartTooltipItem.tsx

@@ -92,7 +92,7 @@ export function ChartTooltipItem({
           >
             <div className={S.tooltipLabel}>
               {nestLabel ? tooltipLabel : null}
-              <span className="text-muted-foreground">
+              <span className={cn('text-muted-foreground', S.tooltipLabelText)}>
                 {itemConfig?.label || item.name}
               </span>
             </div>

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -231,7 +231,10 @@ export function ChartAreaInteractive({
   };
 
   return (
-    <InteractionOverlay className={cn(className, loading && S.loading)}>
+    <InteractionOverlay
+      className={cn(className, loading && S.loading)}
+      disabled={loading}
+    >
       {(!disableTimeRangeSelector || headerActions) && (
         <div className={S.chartHeaderContainer}>
           {!disableTimeRangeSelector && (

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

@@ -32,6 +32,7 @@ import {
   useChat,
   useChatOutboundPending,
   useChatsForScopeId,
+  useSyncChatPanelBusy,
 } from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
@@ -144,6 +145,7 @@ export function useChatPanelChromeModel({
     currentChatId,
   );
   const isLoading = isOutboundPending || localUiBusy;
+  useSyncChatPanelBusy(isLoading);
 
   const {
     searchParams,

package/src/components/ui/InteractionOverlay/InteractionOverlay.styl

@@ -11,13 +11,28 @@
   cursor pointer
   touch-action manipulation
   background transparent
-  box-shadow inset 0 0 80px 40px var(--overlay-background-color)
-  transition box-shadow 200ms ease-out
+
+  &::before
+    content ''
+    position absolute
+    top calc(-1 * var(--p-2))
+    right calc(-1 * var(--p-2))
+    bottom calc(-1 * var(--p-2))
+    left calc(-1 * var(--p-2))
+    background-color unquote('color-mix(in srgb, var(--overlay-background-color) 70%, transparent)')
+    box-shadow inset 0 0 80px 40px var(--overlay-background-color)
+    pointer-events none
+    z-index -1
+    transition 200ms ease-out
+    transition-property box-shadow, background-color
 
   .hidden &
-    box-shadow inset 0 0 0 0 var(--overlay-background-color)
     pointer-events none
 
+    &::before
+      box-shadow inset 0 0 0 0 var(--overlay-background-color)
+      background-color transparent
+
 .message
   position absolute
   top 50%

package/src/components/ui/InteractionOverlay/InteractionOverlay.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 
+import { useIsChatLoading } from '#uilib/contexts/chat-context';
 import { useIsTouchDevice } from '#uilib/hooks/useIsTouchDevice';
 
 import S from './InteractionOverlay.styl';
@@ -9,14 +10,19 @@ interface InteractionOverlayProps {
   className?: string;
   children?: React.ReactNode;
   message?: string;
+  /** When true, hides the touch overlay (e.g. chart data loading). */
+  disabled?: boolean;
 }
 
 export function InteractionOverlay({
   className,
   children,
   message = 'Touch to interact',
+  disabled = false,
 }: InteractionOverlayProps) {
   const isTouchDevice = useIsTouchDevice();
+  const isChatLoading = useIsChatLoading();
+  const suppressOverlay = disabled || isChatLoading;
   const [isVisible, setIsVisible] = useState(true);
 
   const handleClick = useCallback(() => {
@@ -24,13 +30,13 @@ export function InteractionOverlay({
   }, []);
 
   useEffect(() => {
-    if (isTouchDevice) {
+    if (isTouchDevice && !suppressOverlay) {
       setIsVisible(true);
     }
-  }, [isTouchDevice]);
+  }, [isTouchDevice, suppressOverlay]);
 
   useEffect(() => {
-    if (!isTouchDevice) return;
+    if (!isTouchDevice || suppressOverlay) return;
 
     const handleScroll = () => {
       setIsVisible(true);
@@ -40,14 +46,20 @@ export function InteractionOverlay({
     return () => {
       document.removeEventListener('scroll', handleScroll, { capture: true });
     };
-  }, [isTouchDevice]);
+  }, [isTouchDevice, suppressOverlay]);
 
   if (!isTouchDevice) {
     return <>{children}</>;
   }
 
   return (
-    <div className={cn(S.root, !isVisible && S.hidden, className)}>
+    <div
+      className={cn(
+        S.root,
+        (!isVisible || suppressOverlay) && S.hidden,
+        className,
+      )}
+    >
       {children}
       <button
         type="button"

package/src/contexts/chat-context.tsx

@@ -66,6 +66,10 @@ export interface ChatContextType {
    * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
    */
   outboundPendingByKey: Readonly<Record<string, number>>;
+  /** Ref-count of chat panels reporting UI busy (outbound wait, preset scripts, etc.). */
+  panelBusyCount: number;
+  acquirePanelBusy: () => void;
+  releasePanelBusy: () => void;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
@@ -175,6 +179,15 @@ export function ChatProvider({
   const [outboundPendingByKey, setOutboundPendingByKey] = useState<
     Record<string, number>
   >({});
+  const [panelBusyCount, setPanelBusyCount] = useState(0);
+
+  const acquirePanelBusy = useCallback(() => {
+    setPanelBusyCount(count => count + 1);
+  }, []);
+
+  const releasePanelBusy = useCallback(() => {
+    setPanelBusyCount(count => Math.max(0, count - 1));
+  }, []);
 
   const beginOutboundPending = useCallback(
     (scopeId: string, chatSessionId: string) => {
@@ -444,6 +457,7 @@ export function ChatProvider({
       setChats({});
       setCurrentChatIdState({});
       setOutboundPendingByKey({});
+      setPanelBusyCount(0);
       return;
     }
 
@@ -475,6 +489,9 @@ export function ChatProvider({
         getCurrentChatId,
         deleteChat,
         outboundPendingByKey,
+        panelBusyCount,
+        acquirePanelBusy,
+        releasePanelBusy,
       }}
     >
       {children}
@@ -519,6 +536,31 @@ export function useChatOutboundPending(
   }, [scopeId, chatSessionId, outboundPendingByKey]);
 }
 
+/** True when chat is waiting on API or panel UI busy (safe outside ChatProvider). */
+export function useIsChatLoading(): boolean {
+  const context = useContext(ChatContext);
+  return useMemo(() => {
+    if (!context) return false;
+    const outboundPending = Object.values(context.outboundPendingByKey).some(
+      count => count > 0,
+    );
+    return outboundPending || context.panelBusyCount > 0;
+  }, [context?.outboundPendingByKey, context?.panelBusyCount]);
+}
+
+/** Syncs chat panel `isLoading` into context for touch-overlay suppression. */
+export function useSyncChatPanelBusy(isLoading: boolean): void {
+  const acquirePanelBusy = useContext(ChatContext)?.acquirePanelBusy;
+  const releasePanelBusy = useContext(ChatContext)?.releasePanelBusy;
+  useEffect(() => {
+    if (!isLoading || !acquirePanelBusy || !releasePanelBusy) return;
+    acquirePanelBusy();
+    return () => {
+      releasePanelBusy();
+    };
+  }, [isLoading, acquirePanelBusy, releasePanelBusy]);
+}
+
 export function useChatsForScopeId(scopeId: string) {
   const {
     getChatsForScopeId,

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -6,7 +6,9 @@ import type {
   OverlayMode,
 } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { Label } from '#uilib/components/ui/Label';
 import { PageContentSection } from '#uilib/components/ui/Page';
+import { Switch } from '#uilib/components/ui/Switch';
 import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
 import { useTheme } from '#uilib/contexts/theme-context';
 import type { ForecastData } from '#uilib/types/forecast-data';
@@ -83,7 +85,10 @@ const INITIAL_CHART: ChartDataPoint[] = [
 ];
 
 const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
-  { id: DEMO_FORECAST_ID, name: 'My custom forecast' },
+  {
+    id: DEMO_FORECAST_ID,
+    name: 'My custom forecast with an extremely long descriptive name that should wrap and clamp inside the chart tooltip after three lines',
+  },
 ];
 
 type DemoMode = 'none' | OverlayMode;
@@ -102,6 +107,7 @@ export default function ChartAreaInteractivePage() {
     string | null
   >('0.9');
   const [upperThreshold, setUpperThreshold] = useState(15);
+  const [loading, setLoading] = useState(false);
 
   const toggleLegendSeries = useCallback((key: string) => {
     setHidden(prev => {
@@ -155,6 +161,21 @@ export default function ChartAreaInteractivePage() {
             <TabsTrigger value="thresholds">Thresholds</TabsTrigger>
           </TabsList>
         </Tabs>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            marginBottom: 16,
+          }}
+        >
+          <Switch
+            id="chart-loading"
+            checked={loading}
+            onCheckedChange={setLoading}
+          />
+          <Label htmlFor="chart-loading">Loading</Label>
+        </div>
         <ChartAreaInteractive
           timeRange={timeRange}
           onTimeRangeChange={setTimeRange}
@@ -163,7 +184,7 @@ export default function ChartAreaInteractivePage() {
           mode={mode}
           chartData={chartData}
           forecastData={DEMO_FORECAST_ITEMS}
-          loading={false}
+          loading={loading}
           isDarkTheme={isDarkMode}
           toggleLegendSeries={toggleLegendSeries}
           ensureAnalysisSeriesVisible={ensureAnalysisSeriesVisible}