855cff07c2
BaseNode (structured node shell with header/content/footer slots), BaseHandle (styled connection handle), LabeledHandle (handle with port label), NodeStatusIndicator (status border effect), NodeTooltip (hover details via NodeToolbar). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import type { ComponentProps } from 'react'
|
|
import { type HandleProps, Position } from '@xyflow/react'
|
|
import { cn } from '@/lib/utils'
|
|
import { BaseHandle } from './base-handle'
|
|
|
|
const flexDirections: Record<string, string> = {
|
|
[Position.Top]: 'flex-col',
|
|
[Position.Right]: 'flex-row-reverse justify-end',
|
|
[Position.Bottom]: 'flex-col-reverse justify-end',
|
|
[Position.Left]: 'flex-row',
|
|
}
|
|
|
|
export function LabeledHandle({
|
|
className,
|
|
labelClassName,
|
|
handleClassName,
|
|
title,
|
|
position,
|
|
...props
|
|
}: HandleProps &
|
|
ComponentProps<'div'> & {
|
|
title: string
|
|
handleClassName?: string
|
|
labelClassName?: string
|
|
}) {
|
|
const { ref, ...handleProps } = props
|
|
return (
|
|
<div
|
|
title={title}
|
|
className={cn('relative flex items-center', flexDirections[position], className)}
|
|
ref={ref}
|
|
>
|
|
<BaseHandle position={position} className={handleClassName} {...handleProps} />
|
|
<label className={cn('text-muted-foreground text-[10px] font-mono px-1.5', labelClassName)}>
|
|
{title}
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|