@skyhook-io/k8s-ui 1.5.13 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.13",
+  "version": "1.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -86,10 +86,10 @@
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
     "lucide-react": "^1.12.0",
-    "react": "^19.2.4",
+    "react": "^19.2.6",
     "react-dom": "^19.2.4",
     "typescript": "^6.0.2",
     "vitest": "^4.1.5",
-    "yaml": "^2.8.3"
+    "yaml": "^2.9.0"
   }
 }

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -64,9 +64,8 @@ export interface ClusterSwitcherProps {
 // horizontal-real-estate guard rather than a readability one. The cap
 // grows with viewport so wide screens (where there's no real estate
 // pressure) show full cluster names rather than middle-truncating
-// pointlessly. The xl tier (~400px) fits names up to ~30 chars in
-// full — comfortably covering parsed cluster names from any provider.
-const TRIGGER_NAME_MAX_WIDTH = 'max-w-[160px] sm:max-w-[260px] xl:max-w-[400px]'
+// pointlessly.
+const TRIGGER_NAME_MAX_WIDTH = 'max-w-[140px] sm:max-w-[220px] xl:max-w-[340px]'
 
 export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcherProps>(({
   currentId,

package/src/components/dock/BottomDock.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect, ReactNode } from 'react'
+import { useCallback, useRef, useEffect, ReactNode } from 'react'
 import { DURATION_DOCK } from '../../utils/animation'
 import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -6,7 +6,6 @@ import { useDock, DockTab } from './DockContext'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 const MIN_HEIGHT = 200
-const DEFAULT_HEIGHT = 400
 const MAX_HEIGHT_RATIO = 0.7
 const MAXIMIZED_TOP_OFFSET = 48
 
@@ -21,28 +20,27 @@ interface BottomDockProps {
 }
 
 export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset: leftOffsetProp, defaultHeight }: BottomDockProps) {
-  const { tabs, activeTabId, isExpanded, leftOffset: leftOffsetCtx, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
+  const { tabs, activeTabId, isExpanded, leftOffset: leftOffsetCtx, height, isMaximized, isResizing, setHeight, setMaximized, setResizing, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
   const leftOffset = leftOffsetProp ?? leftOffsetCtx
-  const [height, setHeight] = useState(defaultHeight ?? DEFAULT_HEIGHT)
   const prevDefaultHeight = useRef(defaultHeight)
   useEffect(() => {
     if (defaultHeight != null && defaultHeight !== prevDefaultHeight.current) {
       setHeight(defaultHeight)
     }
     prevDefaultHeight.current = defaultHeight
-  }, [defaultHeight])
-  const [isMaximized, setIsMaximized] = useState(false)
+  }, [defaultHeight, setHeight])
   const isDragging = useRef(false)
   const startY = useRef(0)
   const startHeight = useRef(0)
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     isDragging.current = true
+    setResizing(true)
     startY.current = e.clientY
     startHeight.current = height
     document.body.style.cursor = 'ns-resize'
     document.body.style.userSelect = 'none'
-  }, [height])
+  }, [height, setResizing])
 
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
@@ -53,7 +51,10 @@ export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset:
     }
 
     const handleMouseUp = () => {
-      isDragging.current = false
+      if (isDragging.current) {
+        isDragging.current = false
+        setResizing(false)
+      }
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     }
@@ -65,20 +66,20 @@ export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset:
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
     }
-  }, [])
+  }, [setHeight, setResizing])
 
   const toggleMaximized = useCallback(() => {
-    setIsMaximized(prev => !prev)
-  }, [])
+    setMaximized(!isMaximized)
+  }, [isMaximized, setMaximized])
 
   useEffect(() => {
     if (!isMaximized) return
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setIsMaximized(false)
+      if (e.key === 'Escape') setMaximized(false)
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [isMaximized])
+  }, [isMaximized, setMaximized])
 
   useRegisterShortcuts([
     {
@@ -105,12 +106,18 @@ export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset:
     return null
   }
 
-  const effectiveHeight = !isExpanded ? 36 : isMaximized ? `calc(100vh - ${MAXIMIZED_TOP_OFFSET}px)` : height
+  const effectiveHeight = !isExpanded ? 36 : isMaximized ? `calc(100% - ${MAXIMIZED_TOP_OFFSET}px)` : height
 
   return (
     <div
-      className="fixed bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40 overflow-hidden"
-      style={{ height: effectiveHeight, left: leftOffset, transition: `height ${DURATION_DOCK}ms cubic-bezier(0.4, 0, 0.2, 1), left ${DURATION_DOCK}ms ease-out` }}
+      className="absolute bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40 overflow-hidden"
+      style={{
+        height: effectiveHeight,
+        left: leftOffset,
+        transition: isResizing
+          ? `left ${DURATION_DOCK}ms ease-out`
+          : `height ${DURATION_DOCK}ms cubic-bezier(0.4, 0, 0.2, 1), left ${DURATION_DOCK}ms ease-out`,
+      }}
     >
       {isExpanded && !isMaximized && (
         <div
@@ -165,7 +172,7 @@ export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset:
             </button>
           )}
           <button
-            onClick={() => { if (isMaximized) setIsMaximized(false); toggleExpanded() }}
+            onClick={() => { if (isMaximized) setMaximized(false); toggleExpanded() }}
             className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
             title={isExpanded ? 'Collapse' : 'Expand'}
           >

package/src/components/dock/DockContext.tsx

@@ -29,12 +29,18 @@ export interface DockContextValue {
   activeTabId: string | null
   isExpanded: boolean
   leftOffset: number
+  height: number
+  isMaximized: boolean
+  isResizing: boolean
   addTab: (tab: Omit<DockTab, 'id'>) => string
   removeTab: (id: string) => void
   setActiveTab: (id: string) => void
   toggleExpanded: () => void
   setExpanded: (expanded: boolean) => void
   setLeftOffset: (offset: number) => void
+  setHeight: (height: number) => void
+  setMaximized: (maximized: boolean) => void
+  setResizing: (resizing: boolean) => void
   closeAll: () => void
 }
 
@@ -42,11 +48,17 @@ const DockContext = createContext<DockContextValue | null>(null)
 
 let tabIdCounter = 0
 
+const DOCK_DEFAULT_HEIGHT = 400
+const DOCK_COLLAPSED_HEIGHT = 36
+
 export function DockProvider({ children }: { children: ReactNode }) {
   const [tabs, setTabs] = useState<DockTab[]>([])
   const [activeTabId, setActiveTabId] = useState<string | null>(null)
   const [isExpanded, setIsExpanded] = useState(false)
   const [leftOffset, setLeftOffset] = useState(0)
+  const [height, setHeight] = useState(DOCK_DEFAULT_HEIGHT)
+  const [isMaximized, setIsMaximized] = useState(false)
+  const [isResizing, setIsResizing] = useState(false)
   // Keep a ref to the latest tabs for deduplication without stale-closure issues
   const tabsRef = useRef<DockTab[]>(tabs)
   useEffect(() => { tabsRef.current = tabs }, [tabs])
@@ -126,12 +138,18 @@ export function DockProvider({ children }: { children: ReactNode }) {
       activeTabId,
       isExpanded,
       leftOffset,
+      height,
+      isMaximized,
+      isResizing,
       addTab,
       removeTab,
       setActiveTab,
       toggleExpanded,
       setExpanded: setIsExpanded,
       setLeftOffset,
+      setHeight,
+      setMaximized: setIsMaximized,
+      setResizing: setIsResizing,
       closeAll,
     }}>
       {children}
@@ -147,6 +165,27 @@ export function useDock() {
   return context
 }
 
+/**
+ * Reserved vertical space at the bottom of the viewport for the dock, in px.
+ * Drawers and main-content spacers subtract this so they don't sit behind the dock.
+ * Maximized returns 0 — the dock covers everything by design.
+ *
+ * Safe to call without a DockProvider ancestor (returns 0) — the shared
+ * @skyhook/k8s-ui package exports drawers that may be consumed without a dock.
+ */
+export function useDockReservedHeight(): number {
+  const context = useContext(DockContext)
+  if (!context) return 0
+  const { tabs, isExpanded, isMaximized, height } = context
+  if (tabs.length === 0) return 0
+  // Order matches BottomDock's effectiveHeight: collapsed tab bar wins over
+  // maximized so the (maximized=true, expanded=false) state — reachable by
+  // Cmd+J / Ctrl+` while maximized — still reserves the 36px tab bar height.
+  if (!isExpanded) return DOCK_COLLAPSED_HEIGHT
+  if (isMaximized) return 0
+  return height
+}
+
 // Convenience hooks for adding specific tab types
 
 export function useOpenTerminal() {

package/src/components/gitops/index.ts

@@ -2,3 +2,7 @@ export { GitOpsStatusBadge, SyncStatusBadge, HealthStatusBadge } from './GitOpsS
 export { SyncCountdown, IntervalDisplay } from './SyncCountdown'
 export { ManagedResourcesList, InventoryCount } from './ManagedResourcesList'
 export { GitOpsActions, SyncButton, SuspendToggle } from './GitOpsActions'
+export { GitOpsTreeGraph } from './tree'
+export { gitOpsFilterSet, hasGitOpsTreeFilters, matchesGitOpsTreeFilters } from './tree'
+export type { GitOpsTreeFilters, GitOpsTreePreset } from './tree'
+export * from './insights'