feat: network diagrams — draw.io-style editor #139

Merged
chihlasm merged 31 commits from feat/network-diagrams into main 2026-04-14 05:44:27 +00:00
2 changed files with 5 additions and 3 deletions
Showing only changes of commit e41d7bd960 - Show all commits

View File

@@ -31,7 +31,7 @@ export function NodeStatusIndicator({ status = 'unknown', children, className }:
return ( return (
<div <div
className={cn( className={cn(
'rounded-lg border-2 transition-colors', 'w-full h-full rounded-lg border-2 transition-colors',
STATUS_BORDER_COLORS[status], STATUS_BORDER_COLORS[status],
STATUS_GLOW[status], STATUS_GLOW[status],
className, className,

View File

@@ -14,20 +14,21 @@ const NodeTooltipContext = createContext<NodeTooltipContextValue>({
hide: () => {}, hide: () => {},
}) })
export function NodeTooltip({ children, ...props }: ComponentProps<'div'>) { export function NodeTooltip({ children, className, ...props }: ComponentProps<'div'>) {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const show = useCallback(() => setVisible(true), []) const show = useCallback(() => setVisible(true), [])
const hide = useCallback(() => setVisible(false), []) const hide = useCallback(() => setVisible(false), [])
return ( return (
<NodeTooltipContext.Provider value={{ visible, show, hide }}> <NodeTooltipContext.Provider value={{ visible, show, hide }}>
<div {...props}>{children}</div> <div className={cn('w-full h-full', className)} {...props}>{children}</div>
</NodeTooltipContext.Provider> </NodeTooltipContext.Provider>
) )
} }
export function NodeTooltipTrigger({ export function NodeTooltipTrigger({
children, children,
className,
onMouseEnter, onMouseEnter,
onMouseLeave, onMouseLeave,
...props ...props
@@ -36,6 +37,7 @@ export function NodeTooltipTrigger({
return ( return (
<div <div
className={cn('w-full h-full', className)}
onMouseEnter={(e) => { onMouseEnter={(e) => {
show() show()
onMouseEnter?.(e) onMouseEnter?.(e)