@kortix/ui 0.14.10 → 0.14.11

package/dist/workspace/session-workspace.js

@@ -189,7 +189,14 @@ function DesktopSessionLayout({ panel, children }) {
                 // over the detail's toolbar. Elevate to z-[35] while expanded:
                 // above the toggle (30) and the sidebar edge strip (30), still
                 // below the sidebar's hover-peek flyout (40) and fixed overlays.
-                isExpanded ? 'z-[35]' : 'z-10'), children: _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full gap-0 bg-transparent", style: { transition: 'none' }, children: [_jsx(ResizablePanel, { ref: mainPanelRef, defaultSize: shouldShowPanel ? (isEasy ? 65 : 50) : 100, minSize: shouldShowPanel ? (isAnimating ? 0 : isExpanded ? 0 : 30) : 100, maxSize: shouldShowPanel ? (isAnimating ? 100 : isExpanded ? 0 : 65) : 100, collapsible: isExpanded || isAnimating, className: cn('relative flex w-full flex-col overflow-hidden bg-transparent transition-[padding] duration-300 ease-out', isExpanded && !isAnimating && 'pointer-events-none opacity-0'), children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: children }) }), _jsx(SessionPanelHandle, { panel: panel }), _jsx(SessionPanelSide, { panel: panel })] }) }) }) }));
+                isExpanded ? 'z-[35]' : 'z-10'), children: _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full gap-0 bg-transparent", style: { transition: 'none' }, children: [_jsx(ResizablePanel, { ref: mainPanelRef, defaultSize: shouldShowPanel ? (isEasy ? 65 : 50) : 100, 
+                            // Expanded: no constraint, so the frozen split survives the
+                            // layer covering it (see `SessionPanelSide`).
+                            minSize: shouldShowPanel ? (isAnimating || isExpanded ? 0 : 30) : 100, maxSize: shouldShowPanel ? (isAnimating || isExpanded ? 100 : 65) : 100, collapsible: isExpanded || isAnimating, className: cn(
+                            // `isolate`: the chat's own z-indexes (the site header is
+                            // z-50) stay inside this panel, so the full-screen layer
+                            // (z-30, `SessionPanelSide`) always paints above all of it.
+                            'relative isolate flex w-full flex-col overflow-hidden bg-transparent transition-[padding] duration-(--duration-slow) ease-out', isExpanded && 'pointer-events-none'), "aria-hidden": isExpanded || undefined, children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: children }) }), _jsx(SessionPanelHandle, { panel: panel }), _jsx(SessionPanelSide, { panel: panel })] }) }) }) }));
 }
 function SessionPanelHandle({ panel }) {
     const { isExpanded, shouldShowPanel } = panel;
@@ -202,16 +209,28 @@ function SessionPanelHandle({ panel }) {
     // always resizable. The two states collapse into one.
     const handleEnabled = shouldShowPanel && !isExpanded;
     const handleVisible = handleEnabled;
-    return (_jsx(ResizableHandle, { withHandle: handleEnabled, disabled: !handleEnabled, className: cn('z-20 w-0 transition-opacity duration-300', 'after:absolute after:inset-y-0 after:-left-1.5 after:w-3', handleEnabled ? '-right-3' : 'pointer-events-none', handleVisible
+    return (_jsx(ResizableHandle, { withHandle: handleEnabled, disabled: !handleEnabled, className: cn('z-20 w-0 transition-opacity duration-(--duration-slow)', 'after:absolute after:inset-y-0 after:-left-1.5 after:w-3', handleEnabled ? '-right-3' : 'pointer-events-none', handleVisible
             ? 'opacity-100'
             : 'opacity-0 hover:opacity-100 data-[resize-handle-active]:opacity-100') }));
 }
 function SessionPanelSide({ panel }) {
     const { sidePanelRef, shouldShowPanel, isAnimating, isExpanded, isEasy, effectivePanelHeader, effectivePanelBody, } = panel;
-    return (_jsx(ResizablePanel, { ref: sidePanelRef, defaultSize: shouldShowPanel ? (isEasy ? 35 : 50) : 0, minSize: shouldShowPanel ? (isAnimating ? 0 : isExpanded ? 100 : 35) : 0, maxSize: shouldShowPanel ? (isAnimating ? 100 : isExpanded ? 100 : 70) : 0, collapsible: !isExpanded || isAnimating, className: cn('bg-background relative overflow-hidden', !shouldShowPanel && 'hidden'), children: _jsx("div", { className: cn('bg-background h-full transition-[padding] duration-300 ease-out'), children: _jsxs("div", { className: cn('border-border flex h-full min-h-0 w-full min-w-0 flex-col overflow-clip', 
+    return (_jsx(ResizablePanel, { ref: sidePanelRef, defaultSize: shouldShowPanel ? (isEasy ? 35 : 50) : 0, minSize: shouldShowPanel ? (isAnimating || isExpanded ? 0 : 35) : 0, maxSize: shouldShowPanel ? (isAnimating || isExpanded ? 100 : 70) : 0, collapsible: !isExpanded || isAnimating, className: cn('bg-background overflow-hidden', 
+        // Full screen is a LAYER over the chat, not a split at 100%. The
+        // panel drops `relative`, so the content below positions against the
+        // panel group instead (the panel's own overflow cannot clip a child
+        // whose containing block is outside it). Same nodes, same parent: the
+        // open document does not remount. The split behind stays frozen
+        // (`usePanelGlide`), so the chat never squeezes under the viewer.
+        !isExpanded && 'relative', !shouldShowPanel && 'hidden'), children: _jsx("div", { className: cn('bg-background h-full transition-[padding] duration-(--duration-slow) ease-out', 
+            // The backdrop fades over the chat while the detail card slides in
+            // on top of it (`DetailLayer`) — one layer arriving, nothing resizing.
+            isExpanded &&
+                'animate-in fade-in-0 absolute inset-0 z-30 duration-(--duration-normal)'), children: _jsxs("div", { className: cn('border-border flex h-full min-h-0 w-full min-w-0 flex-col overflow-clip', 
                 // Easy mode is chrome-free — the cards carry their own
-                // borders, so a panel border would just box a box.
-                !isEasy && 'border-l'), children: [effectivePanelHeader, _jsx("div", { className: "min-h-0 flex-1 overflow-clip", children: effectivePanelBody })] }) }) }));
+                // borders, so a panel border would just box a box. A full-screen
+                // layer has no neighbour to separate from.
+                !isEasy && !isExpanded && 'border-l'), children: [effectivePanelHeader, _jsx("div", { className: "min-h-0 flex-1 overflow-clip", children: effectivePanelBody })] }) }) }));
 }
 /**
  * The whole session screen apps/web renders: the thread, and the resizable side

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kortix/ui",
-  "version": "0.14.10",
+  "version": "0.14.11",
   "description": "Kortix UI: the shared React component library for apps/web, Kortix Apps and SDK hosts. Tailwind v4 classes, themed by CSS variables.",
   "type": "module",
   "license": "Elastic-2.0",
@@ -2193,7 +2193,7 @@
     "@extend-ai/react-docx": "^0.7.5",
     "@extend-ai/react-xlsx": "0.13.4",
     "@glideapps/glide-data-grid": "6.0.4-alpha24",
-    "@kortix/llm-catalog": "0.14.10",
+    "@kortix/llm-catalog": "0.14.11",
     "@lezer/highlight": "1.2.3",
     "@paper-design/shaders-react": "^0.0.76",
     "@phosphor-icons/react": "2.1.10",
@@ -2285,7 +2285,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
-    "@kortix/sdk": "^0.14.10",
+    "@kortix/sdk": "^0.14.11",
     "@tanstack/react-query": "^5.75.2",
     "@types/react": ">=18",
     "react": ">=19",