@skyhook-io/k8s-ui 1.5.10 → 1.5.12

package/src/components/topology/topology-search-match.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import type { TopologyNode } from '../../types'
+
+// Mirrors the matching predicate inside TopologySearch (kept in sync
+// by reuse) — pure so we can pin the matching rule without rendering
+// the React component.
+function matchesQuery(node: TopologyNode, lowerQuery: string): boolean {
+  const name = node.name.toLowerCase()
+  const kind = node.kind.toLowerCase()
+  const namespace = (node.data.namespace as string || '').toLowerCase()
+  return (
+    name.includes(lowerQuery) ||
+    kind.includes(lowerQuery) ||
+    namespace.includes(lowerQuery) ||
+    `${kind}/${name}`.includes(lowerQuery) ||
+    `${namespace}/${name}`.includes(lowerQuery)
+  )
+}
+
+function countHidden(allNodes: TopologyNode[], visibleNodes: TopologyNode[], query: string): number {
+  if (!query.trim()) return 0
+  const lowerQuery = query.toLowerCase()
+  // First check whether the visible set already has matches — the
+  // hint should only appear when the visible search yielded zero.
+  const visibleMatches = visibleNodes.filter(n => matchesQuery(n, lowerQuery))
+  if (visibleMatches.length > 0) return 0
+  const visibleIds = new Set(visibleNodes.map(n => n.id))
+  return allNodes.filter(n => !visibleIds.has(n.id) && matchesQuery(n, lowerQuery)).length
+}
+
+function makeNode(id: string, kind: string, name: string, namespace = 'default'): TopologyNode {
+  // Tests only need the four fields the matcher reads — cast through
+  // unknown so the partial shape doesn't have to satisfy the full
+  // TopologyNode type.
+  return {
+    id,
+    kind,
+    name,
+    data: { namespace },
+  } as unknown as TopologyNode
+}
+
+describe('TopologySearch hidden-match counting (SKY-828 bug 45)', () => {
+  // The bug: in Fleet topology view (which only shows CAPI kinds),
+  // searching pod names returned "No resources found" — misleading
+  // when the cluster has 338 pods. We compute a hidden-match count
+  // so the empty-state can say "X matches are hidden by the current
+  // view; switch view to see them."
+  //
+  // The count should:
+  //  1. Be 0 when the visible set has any match (don't shame the
+  //     visible empty-state).
+  //  2. Otherwise count nodes that match in the unfiltered set but
+  //     are NOT in the visible set.
+  //  3. Match by name, kind, namespace, kind/name, or
+  //     namespace/name (case-insensitive).
+
+  it('returns 0 when visible nodes contain a match', () => {
+    const visible = [makeNode('a', 'Cluster', 'prod')]
+    const all = [
+      ...visible,
+      makeNode('b', 'Pod', 'prod-app'), // would also match "prod"
+    ]
+    expect(countHidden(all, visible, 'prod')).toBe(0)
+  })
+
+  it('returns count of hidden matches when visible has none (Fleet → pod search)', () => {
+    const visible = [
+      makeNode('cluster-1', 'Cluster', 'prod-cluster'),
+      makeNode('machine-1', 'Machine', 'prod-machine-1'),
+    ]
+    const all = [
+      ...visible,
+      makeNode('pod-1', 'Pod', '3scale-gateway-abc'),
+      makeNode('pod-2', 'Pod', '3scale-system-xyz'),
+      makeNode('pod-3', 'Pod', 'billing-api-789'),
+    ]
+    expect(countHidden(all, visible, '3scale')).toBe(2)
+    expect(countHidden(all, visible, 'billing')).toBe(1)
+  })
+
+  it('matches case-insensitively', () => {
+    const visible = [makeNode('a', 'Cluster', 'prod')]
+    const all = [...visible, makeNode('b', 'Pod', 'MyApp')]
+    expect(countHidden(all, visible, 'myapp')).toBe(1)
+    expect(countHidden(all, visible, 'MYAPP')).toBe(1)
+  })
+
+  it('matches by namespace as well as name', () => {
+    const visible = [makeNode('a', 'Cluster', 'prod')]
+    const all = [
+      ...visible,
+      makeNode('p1', 'Pod', 'frontend', 'billing'),
+      makeNode('p2', 'Pod', 'backend', 'billing'),
+    ]
+    expect(countHidden(all, visible, 'billing')).toBe(2)
+  })
+
+  it('returns 0 for an empty/whitespace query', () => {
+    const visible: TopologyNode[] = []
+    const all = [makeNode('a', 'Pod', 'foo')]
+    expect(countHidden(all, visible, '')).toBe(0)
+    expect(countHidden(all, visible, '   ')).toBe(0)
+  })
+
+  it('does not double-count: a node visible AND matching is excluded from hidden', () => {
+    const visible = [makeNode('a', 'Pod', 'foo-1')]
+    const all = [...visible, makeNode('b', 'Pod', 'foo-2')]
+    // visible has a match → hint suppressed entirely
+    expect(countHidden(all, visible, 'foo')).toBe(0)
+  })
+})

package/src/components/ui/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
+import { computeTooltipPosition } from './tooltip-position'
 
 // Module-level singleton coordinator: only one Tooltip can be visible
 // at a time across the whole app. Without this, two Tooltip instances
@@ -45,53 +46,43 @@ export function Tooltip({
   wrapperStyle,
 }: TooltipProps) {
   const [isVisible, setIsVisible] = useState(false)
-  const [coords, setCoords] = useState({ top: 0, left: 0 })
+  // null until measured. Portal renders with visibility:hidden until coords
+  // resolve so the user never sees a frame painted at default (0,0).
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(
+    null
+  )
   const triggerRef = useRef<HTMLSpanElement>(null)
   const tooltipRef = useRef<HTMLSpanElement>(null)
   const timeoutRef = useRef<number | null>(null)
+  const rafRef = useRef<number | null>(null)
 
   const updatePosition = useCallback(() => {
     if (!triggerRef.current) return
 
-    const rect = triggerRef.current.getBoundingClientRect()
+    const triggerRect = triggerRef.current.getBoundingClientRect()
     const tooltipRect = tooltipRef.current?.getBoundingClientRect()
-    const tooltipWidth = tooltipRect?.width || 0
-    const tooltipHeight = tooltipRect?.height || 0
-
-    let top = 0
-    let left = 0
-
-    switch (position) {
-      case 'top':
-        top = rect.top - tooltipHeight - 6
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        break
-      case 'bottom':
-        top = rect.bottom + 6
-        left = rect.left + rect.width / 2 - tooltipWidth / 2
-        break
-      case 'left':
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        left = rect.left - tooltipWidth - 6
-        break
-      case 'right':
-        top = rect.top + rect.height / 2 - tooltipHeight / 2
-        left = rect.right + 6
-        break
-    }
 
-    // Keep tooltip within viewport
-    const padding = 8
-    if (left < padding) left = padding
-    if (left + tooltipWidth > window.innerWidth - padding) {
-      left = window.innerWidth - tooltipWidth - padding
-    }
-    if (top < padding) top = rect.bottom + 6 // flip to bottom
-    if (top + tooltipHeight > window.innerHeight - padding) {
-      top = rect.top - tooltipHeight - 6 // flip to top
-    }
+    const next = computeTooltipPosition({
+      triggerRect: {
+        top: triggerRect.top,
+        left: triggerRect.left,
+        width: triggerRect.width,
+        height: triggerRect.height,
+      },
+      tooltipSize: {
+        width: tooltipRect?.width ?? 0,
+        height: tooltipRect?.height ?? 0,
+      },
+      position,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+    })
 
-    setCoords({ top, left })
+    if (next) {
+      setCoords(next)
+    }
   }, [position])
 
   // Stable hide function for the singleton registry — useRef so the
@@ -104,6 +95,7 @@ export function Tooltip({
       timeoutRef.current = null
     }
     setIsVisible(false)
+    setCoords(null)
   }
 
   const showTooltip = () => {
@@ -128,12 +120,22 @@ export function Tooltip({
       activeHide = null
     }
     setIsVisible(false)
+    setCoords(null)
   }
 
   useEffect(() => {
     if (isVisible) {
-      // Small delay to let the tooltip render before measuring
-      requestAnimationFrame(updatePosition)
+      // Second rAF re-centers using the measured tooltip size; without
+      // it the first frame centers against size 0 and visibly jumps.
+      const id1 = requestAnimationFrame(() => {
+        updatePosition()
+        const id2 = requestAnimationFrame(updatePosition)
+        rafRef.current = id2
+      })
+      rafRef.current = id1
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      }
     }
   }, [isVisible, updatePosition])
 
@@ -142,6 +144,9 @@ export function Tooltip({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
       }
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current)
+      }
       // Clear from singleton registry on unmount — otherwise a Tooltip
       // that unmounts while visible (e.g. row removed during hover)
       // would leave a stale entry in activeHide pointing at a torn-down
@@ -165,9 +170,27 @@ export function Tooltip({
         timeoutRef.current = null
       }
       setIsVisible(false)
+      setCoords(null)
     }
   }, [disabled])
 
+  // Mouseleave doesn't fire when the trigger stays mounted across a
+  // navigation and the cursor is still over it; popstate + Escape give
+  // a deterministic dismissal path for those cases.
+  useEffect(() => {
+    if (!isVisible) return
+    const onPop = () => hideRef.current()
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') hideRef.current()
+    }
+    window.addEventListener('popstate', onPop)
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('popstate', onPop)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [isVisible])
+
   if (disabled || !content) {
     return <>{children}</>
   }
@@ -182,6 +205,10 @@ export function Tooltip({
         onMouseLeave={hideTooltip}
         onFocus={showTooltip}
         onBlur={hideTooltip}
+        // pointerdown fires before click, so the tooltip is gone before
+        // the trigger's action runs. Required when the child handles
+        // navigation/state changes that don't unmount the trigger.
+        onPointerDown={hideTooltip}
       >
         {children}
       </span>
@@ -194,8 +221,14 @@ export function Tooltip({
               'whitespace-nowrap pointer-events-none',
               className
             )}
-            style={{ top: coords.top, left: coords.left }}
+            style={{
+              top: coords?.top ?? 0,
+              left: coords?.left ?? 0,
+              // Hide until first measurement so we never paint at (0,0).
+              visibility: coords ? 'visible' : 'hidden',
+            }}
             role="tooltip"
+            aria-hidden={coords ? undefined : true}
           >
             {content}
           </span>,

package/src/components/ui/tooltip-position.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect } from 'vitest'
+import { computeTooltipPosition } from './tooltip-position'
+
+const VIEWPORT = { width: 1280, height: 800 }
+
+describe('computeTooltipPosition', () => {
+  it('returns null when the trigger has no layout (prevents 0,0 flash)', () => {
+    expect(
+      computeTooltipPosition({
+        triggerRect: { top: 0, left: 0, width: 0, height: 0 },
+        tooltipSize: { width: 80, height: 24 },
+        position: 'top',
+        viewport: VIEWPORT,
+      })
+    ).toBeNull()
+  })
+
+  it('returns a valid position even when the tooltip itself is unmeasured (size 0,0)', () => {
+    // Real situation on the very first show: tooltip portal exists but
+    // hasn't laid out yet, so its rect is (0,0,0,0). We still need a
+    // sane anchor so the next frame's update has something to refine —
+    // but it must NOT be (0,0).
+    const result = computeTooltipPosition({
+      triggerRect: { top: 12, left: 200, width: 80, height: 28 },
+      tooltipSize: { width: 0, height: 0 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    expect(result).not.toBeNull()
+    // Top placement above a near-the-edge trigger flips to bottom; either
+    // way the tooltip must not land at the viewport origin.
+    expect(result!.top).toBeGreaterThanOrEqual(8)
+    expect(result!.left).toBeGreaterThanOrEqual(8)
+  })
+
+  it('centers a top-placed tooltip horizontally above the trigger', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    expect(result).toEqual({
+      // 200 - 24 - 6
+      top: 170,
+      // 400 + 50 - 40
+      left: 410,
+    })
+  })
+
+  it('flips a top-placed tooltip to bottom when the trigger is too close to the top edge (nav button case)', () => {
+    // Trigger near the top edge: "top" placement computes a negative top,
+    // so the helper must flip below.
+    const result = computeTooltipPosition({
+      triggerRect: { top: 12, left: 200, width: 80, height: 28 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    // 12 - 24 - 6 = -18 → flips to 12 + 28 + 6 = 46
+    expect(result!.top).toBe(46)
+    // Centered: 200 + 40 - 40 = 200
+    expect(result!.left).toBe(200)
+  })
+
+  it('clamps a tooltip that would overflow the right edge', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 100, left: 1240, width: 30, height: 28 },
+      tooltipSize: { width: 200, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    // viewport.width - tooltipWidth - padding = 1280 - 200 - 8
+    expect(result!.left).toBe(1072)
+  })
+
+  it('clamps a tooltip that would overflow the left edge', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 100, left: 4, width: 30, height: 28 },
+      tooltipSize: { width: 200, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+    })
+    expect(result!.left).toBe(8)
+  })
+
+  it('places a bottom-anchored tooltip below the trigger', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'bottom',
+      viewport: VIEWPORT,
+    })
+    expect(result!.top).toBe(246)
+  })
+
+  it('places a left-anchored tooltip to the left of the trigger and centers vertically', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'left',
+      viewport: VIEWPORT,
+    })
+    expect(result).toEqual({
+      // 200 + 20 - 12
+      top: 208,
+      // 400 - 80 - 6
+      left: 314,
+    })
+  })
+
+  it('places a right-anchored tooltip to the right of the trigger', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 200, left: 400, width: 100, height: 40 },
+      tooltipSize: { width: 80, height: 24 },
+      position: 'right',
+      viewport: VIEWPORT,
+    })
+    expect(result!.left).toBe(506)
+  })
+
+  it('respects a custom padding', () => {
+    const result = computeTooltipPosition({
+      triggerRect: { top: 100, left: 4, width: 30, height: 28 },
+      tooltipSize: { width: 200, height: 24 },
+      position: 'top',
+      viewport: VIEWPORT,
+      padding: 20,
+    })
+    expect(result!.left).toBe(20)
+  })
+})

package/src/components/ui/tooltip-position.ts

@@ -0,0 +1,86 @@
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface Rect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface Viewport {
+  width: number
+  height: number
+}
+
+export interface ComputeTooltipPositionInput {
+  triggerRect: Rect
+  tooltipSize: Size
+  position: TooltipPlacement
+  viewport: Viewport
+  padding?: number
+}
+
+/**
+ * Returns null when the trigger has no layout (zero rect at origin) so the
+ * caller can render hidden until a real measurement is available, instead
+ * of painting at (0, 0).
+ */
+export function computeTooltipPosition({
+  triggerRect,
+  tooltipSize,
+  position,
+  viewport,
+  padding = 8,
+}: ComputeTooltipPositionInput): { top: number; left: number } | null {
+  const triggerHasNoLayout =
+    triggerRect.width === 0 &&
+    triggerRect.height === 0 &&
+    triggerRect.top === 0 &&
+    triggerRect.left === 0
+  if (triggerHasNoLayout) {
+    return null
+  }
+
+  const { width: tw, height: th } = tooltipSize
+
+  let top = 0
+  let left = 0
+
+  switch (position) {
+    case 'top':
+      top = triggerRect.top - th - 6
+      left = triggerRect.left + triggerRect.width / 2 - tw / 2
+      break
+    case 'bottom':
+      top = triggerRect.top + triggerRect.height + 6
+      left = triggerRect.left + triggerRect.width / 2 - tw / 2
+      break
+    case 'left':
+      top = triggerRect.top + triggerRect.height / 2 - th / 2
+      left = triggerRect.left - tw - 6
+      break
+    case 'right':
+      top = triggerRect.top + triggerRect.height / 2 - th / 2
+      left = triggerRect.left + triggerRect.width + 6
+      break
+  }
+
+  if (left < padding) left = padding
+  if (left + tw > viewport.width - padding) {
+    left = viewport.width - tw - padding
+  }
+  if (top < padding) {
+    top = triggerRect.top + triggerRect.height + 6
+  }
+  if (top + th > viewport.height - padding) {
+    top = triggerRect.top - th - 6
+  }
+  if (top < padding) top = padding
+
+  return { top, left }
+}

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -115,7 +115,7 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   return (
     <div
       className={clsx(
-        'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
+        'absolute right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
         TRANSITION_DRAWER,
         isOpen
           ? 'translate-x-0 opacity-100'
@@ -123,9 +123,9 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         expanded && '!border-l-0',
       )}
       style={{
-        width: expanded ? `calc(100vw - ${leftOffset}px)` : drawerWidth,
+        width: expanded ? `calc(100% - ${leftOffset}px)` : drawerWidth,
         top: headerHeight,
-        height: `calc(100vh - ${headerHeight}px)`,
+        height: `calc(100% - ${headerHeight}px)`,
         // Collapse is instant — no animation, content and width snap together.
         // Expand + slide-in/out animate via TRANSITION_DRAWER class.
         ...(isCollapsing && { transition: 'none' }),

package/src/components/workload/WorkloadView.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { startViewTransitionSafe } from '../../utils/view-transition'
 import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
@@ -212,12 +213,11 @@ export function WorkloadView({
   }, [kindProp, namespace, name, initialTab])
 
   const switchView = useCallback((yaml: boolean) => {
-    const update = () => flushSync(() => setShowYaml(yaml))
-    if (document.startViewTransition) {
-      document.startViewTransition(update)
-    } else {
-      setShowYaml(yaml)
-    }
+    // startViewTransitionSafe handles the API-missing fallback AND
+    // swallows the InvalidStateError that the API rejects with when
+    // a new transition supersedes an in-flight one (rapid clicks).
+    // (SKY-833 bug 49)
+    startViewTransitionSafe(() => flushSync(() => setShowYaml(yaml)))
   }, [])
 
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null)

package/src/types/core.ts

@@ -20,6 +20,10 @@ export interface ResourcePermissions {
   hpas: boolean
   gateways: boolean
   httpRoutes: boolean
+  roles: boolean
+  clusterRoles: boolean
+  roleBindings: boolean
+  clusterRoleBindings: boolean
 }
 
 // Feature capabilities based on RBAC permissions
@@ -329,6 +333,9 @@ export interface ContextInfo {
   user: string
   namespace: string
   isCurrent: boolean
+  /** Source kubeconfig label (e.g. "kube-cluster-paris"). Set by backend
+   *  only when 2+ kubeconfig files are loaded; empty otherwise. */
+  source?: string
 }
 
 // Namespace
@@ -439,6 +446,8 @@ export interface APIResource {
 export interface HelmRelease {
   name: string
   namespace: string
+  // Empty means Helm stores release metadata in namespace.
+  storageNamespace?: string
   chart: string
   chartVersion: string
   appVersion: string
@@ -463,6 +472,8 @@ export interface HelmRevision {
 export interface HelmReleaseDetail {
   name: string
   namespace: string
+  // Empty means Helm stores release metadata in namespace.
+  storageNamespace?: string
   chart: string
   chartVersion: string
   appVersion: string
@@ -520,6 +531,7 @@ export interface ManifestDiff {
 export interface SelectedHelmRelease {
   namespace: string
   name: string
+  storageNamespace?: string
 }
 
 // Upgrade availability info
@@ -531,7 +543,7 @@ export interface UpgradeInfo {
   error?: string
 }
 
-// Batch upgrade info (map of "namespace/name" to UpgradeInfo)
+// Batch upgrade info keyed by "storageNamespace/name".
 export interface BatchUpgradeInfo {
   releases: Record<string, UpgradeInfo>
 }

package/src/utils/badge-colors.ts

@@ -53,6 +53,25 @@ export const HELM_STATUS_COLORS: Record<string, string> = {
   uninstalled: BADGE_SEVERITY_COLORS.neutral,
 }
 
+// Cloud instance capacity/priority badges — used by Karpenter NodeClaim and CAPI cloud-provider renderers
+// Keyed by the value as it appears in the resource (spot, on-demand, regular, onDemand)
+export const CAPACITY_TYPE_BADGE: Record<string, string> = {
+  spot: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
+  'on-demand': 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  onDemand: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  regular: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+}
+
+// AKS-style nodepool mode badges — System (control plane) vs User (workload)
+export const NODEPOOL_MODE_BADGE: Record<string, string> = {
+  System: 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  User: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+}
+
+// Translucent gray badge for "inactive / unknown / pending / unset / disabled" states.
+// The de-facto fallback in renderers when no severity or category applies.
+export const BADGE_INACTIVE = 'bg-gray-500/20 text-gray-400'
+
 // Best practices category colors
 export const BP_CATEGORY_BADGE: Record<string, string> = {
   Security: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950/40 dark:text-purple-400 dark:border-purple-800/40',

package/src/utils/index.ts

@@ -12,3 +12,5 @@ export * from './api-resources'
 export * from './skeleton-yaml'
 export * from './k8s-errors'
 export * from './parse-go-time'
+export * from './view-transition'
+export * from './validators'