{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "connector-edge",
  "title": "Connector Edge",
  "description": "Curved edge between canvas objects with optional inline label state.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/connector-edge/connector-edge.tsx",
      "content": "import type { CSSProperties } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { EdgeLabel } from \"@vllnt/ui\";\n\nexport type ConnectorEdgePoint = {\n  x: number;\n  y: number;\n};\n\nexport type ConnectorEdgeProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  end: ConnectorEdgePoint;\n  label?: string;\n  start: ConnectorEdgePoint;\n  state?: \"active\" | \"blocked\" | \"idle\";\n};\n\nconst strokeClasses: Record<\n  NonNullable<ConnectorEdgeProps[\"state\"]>,\n  string\n> = {\n  active: \"stroke-sky-500\",\n  blocked: \"stroke-amber-500\",\n  idle: \"stroke-muted-foreground/60\",\n};\n\nconst ConnectorEdge = ({\n  className,\n  end,\n  label,\n  ref,\n  start,\n  state = \"idle\",\n  ...props\n}: ConnectorEdgeProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const width = Math.max(Math.abs(end.x - start.x), 32);\n  const height = Math.max(Math.abs(end.y - start.y), 32);\n  const midX = width / 2;\n  const startX = start.x <= end.x ? 4 : width - 4;\n  const endX = start.x <= end.x ? width - 4 : 4;\n  const startY = start.y <= end.y ? 4 : height - 4;\n  const endY = start.y <= end.y ? height - 4 : 4;\n  const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;\n\n  const style = {\n    height,\n    width,\n  } satisfies CSSProperties;\n\n  return (\n    <div\n      className={cn(\"relative inline-flex\", className)}\n      ref={ref}\n      style={style}\n      {...props}\n    >\n      <svg\n        className=\"overflow-visible\"\n        height={height}\n        viewBox={`0 0 ${width} ${height}`}\n        width={width}\n      >\n        <path\n          className={cn(\"fill-none stroke-[2.5]\", strokeClasses[state])}\n          d={path}\n          strokeDasharray={state === \"blocked\" ? \"4 4\" : undefined}\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      {label ? (\n        <EdgeLabel\n          className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n          emphasis={state === \"active\" ? \"active\" : \"subtle\"}\n        >\n          {label}\n        </EdgeLabel>\n      ) : null}\n    </div>\n  );\n};\n\nConnectorEdge.displayName = \"ConnectorEdge\";\n\nexport { ConnectorEdge };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}