@you-agent-factory/components 0.0.2 → 0.0.7

package/dist/graphs/index.js

@@ -1,7 +1,274 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { getBezierPath, Position, BaseEdge, Handle } from "@xyflow/react";
+import { useRef, useState, useEffect, forwardRef } from "react";
 import { c as cn } from "../chunks/cn.js";
-import { Position, Handle, getBezierPath, BaseEdge } from "@xyflow/react";
+const CATMULL_ROM_ALPHA = 0.5;
+const MIN_PARAMETER_DISTANCE = 1e-4;
+const VIRTUAL_ENDPOINT_DISTANCE = 96;
+function positionVector(position) {
+  switch (position) {
+    case Position.Left:
+      return { x: -1, y: 0 };
+    case Position.Right:
+      return { x: 1, y: 0 };
+    case Position.Top:
+      return { x: 0, y: -1 };
+    case Position.Bottom:
+      return { x: 0, y: 1 };
+  }
+}
+function pointDistance(first, second) {
+  return Math.hypot(second.x - first.x, second.y - first.y);
+}
+function catmullRomParameterDistance(first, second) {
+  return Math.max(
+    MIN_PARAMETER_DISTANCE,
+    pointDistance(first, second) ** CATMULL_ROM_ALPHA
+  );
+}
+function formatPathNumber(value) {
+  if (Object.is(value, -0)) {
+    return "0";
+  }
+  return Number.isInteger(value) ? `${value}` : value.toFixed(3);
+}
+function compactConsecutiveRoutePoints(routePoints) {
+  const compacted = [];
+  for (const point of routePoints) {
+    const previous = compacted.at(-1);
+    if (previous && previous.x === point.x && previous.y === point.y) {
+      continue;
+    }
+    compacted.push(point);
+  }
+  return compacted;
+}
+function virtualEndpoint(input) {
+  const distance = Math.max(
+    VIRTUAL_ENDPOINT_DISTANCE,
+    pointDistance(input.from, input.neighbor)
+  );
+  const scalar = input.mode === "before" ? -distance : distance;
+  return {
+    x: input.from.x + input.direction.x * scalar,
+    y: input.from.y + input.direction.y * scalar
+  };
+}
+function catmullRomTangent(input) {
+  const previousSpan = input.tCurrent - input.tPrevious;
+  const nextSpan = input.tNext - input.tCurrent;
+  const totalSpan = input.tNext - input.tPrevious;
+  return {
+    x: nextSpan * ((input.current.x - input.previous.x) / previousSpan - (input.next.x - input.previous.x) / totalSpan + (input.next.x - input.current.x) / nextSpan),
+    y: nextSpan * ((input.current.y - input.previous.y) / previousSpan - (input.next.y - input.previous.y) / totalSpan + (input.next.y - input.current.y) / nextSpan)
+  };
+}
+function buildWaypointCatmullRomPath(input) {
+  const routePoints = compactConsecutiveRoutePoints(input.routePoints);
+  if (routePoints.length <= 1) {
+    const [point] = routePoints;
+    return point ? `M ${formatPathNumber(point.x)} ${formatPathNumber(point.y)}` : "";
+  }
+  const lastPointIndex = routePoints.length - 1;
+  const [source] = routePoints;
+  const points = [
+    virtualEndpoint({
+      direction: positionVector(input.sourcePosition),
+      from: source,
+      mode: "before",
+      neighbor: routePoints[1]
+    }),
+    ...routePoints,
+    virtualEndpoint({
+      direction: {
+        x: -positionVector(input.targetPosition).x,
+        y: -positionVector(input.targetPosition).y
+      },
+      from: routePoints[lastPointIndex],
+      mode: "after",
+      neighbor: routePoints[lastPointIndex - 1]
+    })
+  ];
+  const segments = [
+    `M ${formatPathNumber(source.x)} ${formatPathNumber(source.y)}`
+  ];
+  for (let index = 1; index <= lastPointIndex; index += 1) {
+    const previous = points[index - 1];
+    const start = points[index];
+    const end = points[index + 1];
+    const next = points[index + 2];
+    const tPrevious = 0;
+    const tStart = tPrevious + catmullRomParameterDistance(previous, start);
+    const tEnd = tStart + catmullRomParameterDistance(start, end);
+    const tNext = tEnd + catmullRomParameterDistance(end, next);
+    const startTangent = catmullRomTangent({
+      current: start,
+      next: end,
+      previous,
+      tCurrent: tStart,
+      tNext: tEnd,
+      tPrevious
+    });
+    const endTangent = catmullRomTangent({
+      current: end,
+      next,
+      previous: start,
+      tCurrent: tEnd,
+      tNext,
+      tPrevious: tStart
+    });
+    const firstControl = {
+      x: start.x + startTangent.x / 3,
+      y: start.y + startTangent.y / 3
+    };
+    const secondControl = {
+      x: end.x - endTangent.x / 3,
+      y: end.y - endTangent.y / 3
+    };
+    segments.push(
+      [
+        "C",
+        formatPathNumber(firstControl.x),
+        formatPathNumber(firstControl.y),
+        `${formatPathNumber(secondControl.x)},`,
+        formatPathNumber(secondControl.y),
+        `${formatPathNumber(end.x)},`,
+        formatPathNumber(end.y)
+      ].join(" ")
+    );
+  }
+  return segments.join(" ");
+}
+function buildGraphEdgePathThroughWaypoints(input) {
+  const routePoints = [
+    { x: input.sourceX, y: input.sourceY },
+    ...input.waypoints ?? [],
+    { x: input.targetX, y: input.targetY }
+  ];
+  if (routePoints.length <= 2) {
+    const [path2, labelX, labelY] = getBezierPath({
+      sourcePosition: input.sourcePosition,
+      sourceX: input.sourceX,
+      sourceY: input.sourceY,
+      targetPosition: input.targetPosition,
+      targetX: input.targetX,
+      targetY: input.targetY
+    });
+    return { labelX, labelY, path: path2 };
+  }
+  const path = buildWaypointCatmullRomPath({
+    routePoints,
+    sourcePosition: input.sourcePosition,
+    targetPosition: input.targetPosition
+  });
+  const midpointIndex = Math.floor((routePoints.length - 1) / 2);
+  const labelPoint = routePoints[midpointIndex];
+  return {
+    labelX: labelPoint.x,
+    labelY: labelPoint.y,
+    path
+  };
+}
+const GRAPH_EDGE_TYPES = {
+  graphEdge: GraphEdge
+};
+function GraphEdge({
+  data,
+  edgeClassName = "graph-edge",
+  id,
+  interactionWidth,
+  labelClassName = "graph-edge-label pointer-events-none fill-on-surface-subtle text-[11px] font-semibold",
+  markerEnd,
+  selected,
+  sourcePosition,
+  sourceX,
+  sourceY,
+  style,
+  targetPosition,
+  targetX,
+  targetY
+}) {
+  const edgeRef = useRef(null);
+  const [inspected, setInspected] = useState(false);
+  const edgeData = data ?? {};
+  const routedPath = buildGraphEdgePathThroughWaypoints({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY,
+    waypoints: edgeData.waypoints
+  });
+  const [fallbackPath, fallbackLabelX, fallbackLabelY] = getBezierPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  const edgePath = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.path : fallbackPath;
+  const labelX = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.labelX : fallbackLabelX;
+  const labelY = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.labelY : fallbackLabelY;
+  useEffect(() => {
+    const edgeElement = edgeRef.current?.parentElement;
+    if (!edgeElement) {
+      return;
+    }
+    const show = () => setInspected(true);
+    const hide = () => setInspected(false);
+    edgeElement.addEventListener("mouseenter", show);
+    edgeElement.addEventListener("mouseleave", hide);
+    edgeElement.addEventListener("focusin", show);
+    edgeElement.addEventListener("focusout", hide);
+    return () => {
+      edgeElement.removeEventListener("mouseenter", show);
+      edgeElement.removeEventListener("mouseleave", hide);
+      edgeElement.removeEventListener("focusin", show);
+      edgeElement.removeEventListener("focusout", hide);
+    };
+  }, []);
+  const revealLabel = Boolean(
+    edgeData.label && (edgeData.alwaysShowLabel || inspected || selected)
+  );
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: edgeClassName,
+      "data-edge-id": id,
+      "data-label-visible": revealLabel ? "true" : "false",
+      ref: edgeRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseEdge,
+          {
+            interactionWidth,
+            markerEnd,
+            path: edgePath,
+            style
+          }
+        ),
+        edgeData.label ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: labelClassName,
+            style: {
+              paintOrder: "stroke",
+              stroke: "var(--color-surface)",
+              strokeLinejoin: "round",
+              strokeWidth: 8
+            },
+            textAnchor: "middle",
+            x: labelX,
+            y: labelY,
+            children: edgeData.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
 const GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS = "min-h-12";
 const GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS = "min-h-5";
 function graphNodeShellStateClassName(state) {
@@ -79,518 +346,251 @@ const GraphNodeButton = forwardRef(function GraphNodeButton2({
   className,
   disabled,
   graphState = "default",
-  onClick,
-  stateLabel,
-  type = "button",
-  ...props
-}, ref) {
-  const isDisabled = graphNodeButtonIsDisabled(graphState, disabled);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: cn(
-        GRAPH_NODE_BUTTON_BASE_CLASS,
-        graphNodeButtonStateClassName(graphState),
-        className
-      ),
-      disabled: isDisabled,
-      onClick: isDisabled ? void 0 : onClick,
-      ref,
-      type,
-      ...graphNodeButtonStateAttributes(graphState, stateLabel),
-      ...props
-    }
-  );
-});
-const GraphViewportSurface = forwardRef(function GraphViewportSurface2({ children, className, role, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      className: cn(
-        "relative min-h-0 overflow-hidden rounded-3xl border shadow-none transition-colors",
-        className
-      ),
-      "data-graph-viewport-surface": "true",
-      ref,
-      role: role ?? "region",
-      ...props,
-      children
-    }
-  );
-});
-function GraphNodeHandleBadge({ handle }) {
-  const position = handle.side === "left" ? Position.Left : Position.Right;
-  const overlayHandleStyle = anchoredHandleStyle(handle.side);
-  const isButton = handle.onButtonClick !== void 0;
-  if (handle.hidden) {
-    return /* @__PURE__ */ jsx(
-      Handle,
-      {
-        className: "pointer-events-none !top-1/2 opacity-0",
-        id: handle.id,
-        isConnectable: handle.connectable ?? false,
-        position,
-        style: overlayHandleStyle,
-        type: handle.type
-      }
-    );
-  }
-  const tone = handle.tone ?? "default";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "pointer-events-none relative flex h-5 w-5 items-center justify-center",
-      "data-node-handle-badge": handle.id,
-      "data-node-handle-invalid": handle.validationError ? "true" : void 0,
-      "data-node-handle-tone": tone,
-      children: /* @__PURE__ */ jsx(
-        Handle,
-        {
-          "aria-disabled": isButton && handle.buttonDisabled ? true : void 0,
-          "aria-invalid": handle.validationError ? true : void 0,
-          "aria-label": handle.buttonAriaLabel ?? handle.label,
-          "aria-pressed": isButton ? handle.buttonPressed : void 0,
-          className: cn(
-            "pointer-events-auto absolute !top-1/2 !h-5 !w-5 !border-0 !bg-transparent",
-            "before:pointer-events-none before:absolute before:top-1/2 before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-surface before:bg-[var(--node-handle-background)] before:shadow-sm before:transition before:content-['']",
-            handle.side === "left" ? "before:left-0" : "before:left-full",
-            handle.buttonPressed && "before:scale-125 before:shadow-[0_0_0_3px_var(--color-primary-container)]",
-            handle.variant === "valid-target" && "before:scale-125 before:shadow-[0_0_0_3px_var(--color-success-container)]",
-            handle.variant === "error" && "before:border-af-danger-border before:shadow-[0_0_0_3px_var(--color-error-container)] motion-safe:before:animate-pulse",
-            handle.validationError && "before:ring-2 before:ring-af-danger-border motion-safe:before:animate-pulse"
-          ),
-          id: handle.id,
-          isConnectable: handle.connectable ?? true,
-          onClick: handle.buttonDisabled ? void 0 : handle.onButtonClick,
-          onKeyDown: isButton && !handle.buttonDisabled ? (event) => {
-            if (event.key !== "Enter" && event.key !== " ") return;
-            event.preventDefault();
-            handle.onButtonClick?.();
-          } : void 0,
-          position,
-          role: isButton ? "button" : "img",
-          style: {
-            ...overlayHandleStyle,
-            "--node-handle-background": handleDotColor(tone),
-            opacity: handle.buttonDisabled ? 0.45 : void 0
-          },
-          title: handle.buttonTitle ?? handle.validationMessage,
-          tabIndex: isButton && !handle.buttonDisabled ? 0 : void 0,
-          type: handle.type
-        }
-      )
-    }
-  );
-}
-function handleDotColor(tone) {
-  switch (tone) {
-    case "assignment":
-      return "var(--color-success)";
-    case "continue":
-      return "var(--color-secondary)";
-    case "failure":
-      return "var(--color-error)";
-    case "input":
-      return "var(--color-success)";
-    case "output":
-      return "var(--color-success)";
-    case "rejection":
-      return "var(--color-warning)";
-    case "resource":
-      return "var(--color-black)";
-    case "worker":
-      return "var(--color-purple-500)";
-    default:
-      return "var(--color-success)";
-  }
-}
-function anchoredHandleStyle(side) {
-  return side === "left" ? {
-    left: "50%",
-    top: "50%",
-    transform: "translateY(-50%)"
-  } : {
-    left: "50%",
-    top: "50%",
-    transform: "translate(-100%, -50%)"
-  };
-}
-function GraphNodeStateIndicator({
-  state,
-  stateLabel
-}) {
-  const label = stateLabel ?? defaultGraphNodeStateLabel(state);
-  const showIndicator = state === "loading" || state === "error";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": showIndicator ? void 0 : true,
-      className: cn(
-        GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
-        "flex items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-[0.08em]",
-        state === "error" ? "text-on-error-container" : "text-on-surface-variant",
-        !showIndicator && "invisible"
-      ),
-      "data-graph-node-state-indicator": showIndicator ? state : void 0,
-      children: state === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "inline-block h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-outline border-t-primary",
-            "data-graph-node-loading-spinner": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: label ?? "Loading" })
-      ] }) : state === "error" ? /* @__PURE__ */ jsx("span", { role: "alert", children: label ?? "Error" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " " })
-    }
-  );
-}
-function GraphNodeShell({
-  children,
-  className = "",
-  handles,
-  nodeKind,
-  showStateIndicator = true,
-  state = "default",
-  stateLabel,
-  ...articleProps
-}) {
-  const leftHandles = handles.filter((handle) => handle.side === "left");
-  const rightHandles = handles.filter((handle) => handle.side === "right");
-  return /* @__PURE__ */ jsxs(
-    "article",
+  onClick,
+  stateLabel,
+  type = "button",
+  ...props
+}, ref) {
+  const isDisabled = graphNodeButtonIsDisabled(graphState, disabled);
+  return /* @__PURE__ */ jsx(
+    "button",
     {
       className: cn(
-        "relative flex h-full min-w-0 w-full overflow-visible rounded-lg border border-outline bg-surface text-on-surface",
-        graphNodeShellStateClassName(state),
+        GRAPH_NODE_BUTTON_BASE_CLASS,
+        graphNodeButtonStateClassName(graphState),
         className
       ),
-      "data-graph-node-kind": nodeKind,
-      ...graphNodeShellStateAttributes(state, stateLabel),
-      ...articleProps,
-      children: [
-        /* @__PURE__ */ jsx(NodeHandleRail, { handles: leftHandles, side: "left" }),
-        /* @__PURE__ */ jsx(NodeHandleRail, { handles: rightHandles, side: "right" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex h-full min-w-0 w-full flex-col gap-1 py-3",
-              showStateIndicator && GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
-              leftHandles.length > 0 ? "pl-6 pr-3" : "px-3",
-              rightHandles.length > 0 && leftHandles.length > 0 ? "pr-6" : rightHandles.length > 0 ? "pl-3 pr-6" : null
-            ),
-            children: [
-              showStateIndicator ? /* @__PURE__ */ jsx(GraphNodeStateIndicator, { state, stateLabel }) : null,
-              children
-            ]
-          }
-        )
-      ]
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      ref,
+      type,
+      ...graphNodeButtonStateAttributes(graphState, stateLabel),
+      ...props
     }
   );
-}
-function NodeHandleRail({
-  handles,
-  side
-}) {
-  if (handles.length === 0) {
-    return null;
+});
+function GraphNodeHandleBadge({ handle }) {
+  const position = handle.side === "left" ? Position.Left : Position.Right;
+  const overlayHandleStyle = anchoredHandleStyle(handle.side);
+  const isButton = handle.onButtonClick !== void 0;
+  if (handle.hidden) {
+    return /* @__PURE__ */ jsx(
+      Handle,
+      {
+        className: "pointer-events-none !top-1/2 opacity-0",
+        id: handle.id,
+        isConnectable: handle.connectable ?? false,
+        position,
+        style: overlayHandleStyle,
+        type: handle.type
+      }
+    );
   }
+  const tone = handle.tone ?? "default";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        "pointer-events-none absolute inset-y-0 z-20 w-6",
-        side === "left" ? "left-0" : "right-0"
-      ),
-      "data-node-handle-rail": side,
-      children: handles.map((handle, index) => /* @__PURE__ */ jsx(
-        "div",
+      className: "pointer-events-none relative flex h-5 w-5 items-center justify-center",
+      "data-node-handle-badge": handle.id,
+      "data-node-handle-invalid": handle.validationError ? "true" : void 0,
+      "data-node-handle-tone": tone,
+      children: /* @__PURE__ */ jsx(
+        Handle,
         {
+          "aria-disabled": isButton && handle.buttonDisabled ? true : void 0,
+          "aria-invalid": handle.validationError ? true : void 0,
+          "aria-label": handle.buttonAriaLabel ?? handle.label,
+          "aria-pressed": isButton ? handle.buttonPressed : void 0,
           className: cn(
-            "absolute top-0 flex -translate-y-1/2",
-            side === "left" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"
+            "pointer-events-auto absolute !top-1/2 !h-5 !w-5 !border-0 !bg-transparent",
+            "before:pointer-events-none before:absolute before:top-1/2 before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:border before:border-surface before:bg-[var(--node-handle-background)] before:shadow-sm before:transition before:content-['']",
+            handle.side === "left" ? "before:left-0" : "before:left-full",
+            handle.buttonPressed && "before:scale-125 before:shadow-[0_0_0_3px_var(--color-primary-container)]",
+            handle.variant === "valid-target" && "before:scale-125 before:shadow-[0_0_0_3px_var(--color-success-container)]",
+            handle.variant === "error" && "before:border-af-danger-border before:shadow-[0_0_0_3px_var(--color-error-container)] motion-safe:before:animate-pulse",
+            handle.validationError && "before:ring-2 before:ring-af-danger-border motion-safe:before:animate-pulse"
           ),
-          style: { top: handlePosition(index, handles.length) },
-          children: /* @__PURE__ */ jsx(GraphNodeHandleBadge, { handle })
-        },
-        handle.id
-      ))
-    }
-  );
-}
-function handlePosition(index, count) {
-  return `${(index + 1) * 100 / (count + 1)}%`;
-}
-const CATMULL_ROM_ALPHA = 0.5;
-const MIN_PARAMETER_DISTANCE = 1e-4;
-const VIRTUAL_ENDPOINT_DISTANCE = 96;
-function positionVector(position) {
-  switch (position) {
-    case Position.Left:
-      return { x: -1, y: 0 };
-    case Position.Right:
-      return { x: 1, y: 0 };
-    case Position.Top:
-      return { x: 0, y: -1 };
-    case Position.Bottom:
-      return { x: 0, y: 1 };
-  }
-}
-function pointDistance(first, second) {
-  return Math.hypot(second.x - first.x, second.y - first.y);
-}
-function catmullRomParameterDistance(first, second) {
-  return Math.max(
-    MIN_PARAMETER_DISTANCE,
-    pointDistance(first, second) ** CATMULL_ROM_ALPHA
-  );
-}
-function formatPathNumber(value) {
-  if (Object.is(value, -0)) {
-    return "0";
-  }
-  return Number.isInteger(value) ? `${value}` : value.toFixed(3);
-}
-function compactConsecutiveRoutePoints(routePoints) {
-  const compacted = [];
-  for (const point of routePoints) {
-    const previous = compacted.at(-1);
-    if (previous && previous.x === point.x && previous.y === point.y) {
-      continue;
+          id: handle.id,
+          isConnectable: handle.connectable ?? true,
+          onClick: handle.buttonDisabled ? void 0 : handle.onButtonClick,
+          onKeyDown: isButton && !handle.buttonDisabled ? (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            handle.onButtonClick?.();
+          } : void 0,
+          position,
+          role: isButton ? "button" : "img",
+          style: {
+            ...overlayHandleStyle,
+            "--node-handle-background": handleDotColor(tone),
+            opacity: handle.buttonDisabled ? 0.45 : void 0
+          },
+          title: handle.buttonTitle ?? handle.validationMessage,
+          tabIndex: isButton && !handle.buttonDisabled ? 0 : void 0,
+          type: handle.type
+        }
+      )
     }
-    compacted.push(point);
-  }
-  return compacted;
-}
-function virtualEndpoint(input) {
-  const distance = Math.max(
-    VIRTUAL_ENDPOINT_DISTANCE,
-    pointDistance(input.from, input.neighbor)
   );
-  const scalar = input.mode === "before" ? -distance : distance;
-  return {
-    x: input.from.x + input.direction.x * scalar,
-    y: input.from.y + input.direction.y * scalar
-  };
-}
-function catmullRomTangent(input) {
-  const previousSpan = input.tCurrent - input.tPrevious;
-  const nextSpan = input.tNext - input.tCurrent;
-  const totalSpan = input.tNext - input.tPrevious;
-  return {
-    x: nextSpan * ((input.current.x - input.previous.x) / previousSpan - (input.next.x - input.previous.x) / totalSpan + (input.next.x - input.current.x) / nextSpan),
-    y: nextSpan * ((input.current.y - input.previous.y) / previousSpan - (input.next.y - input.previous.y) / totalSpan + (input.next.y - input.current.y) / nextSpan)
-  };
 }
-function buildWaypointCatmullRomPath(input) {
-  const routePoints = compactConsecutiveRoutePoints(input.routePoints);
-  if (routePoints.length <= 1) {
-    const [point] = routePoints;
-    return point ? `M ${formatPathNumber(point.x)} ${formatPathNumber(point.y)}` : "";
-  }
-  const lastPointIndex = routePoints.length - 1;
-  const [source] = routePoints;
-  const points = [
-    virtualEndpoint({
-      direction: positionVector(input.sourcePosition),
-      from: source,
-      mode: "before",
-      neighbor: routePoints[1]
-    }),
-    ...routePoints,
-    virtualEndpoint({
-      direction: {
-        x: -positionVector(input.targetPosition).x,
-        y: -positionVector(input.targetPosition).y
-      },
-      from: routePoints[lastPointIndex],
-      mode: "after",
-      neighbor: routePoints[lastPointIndex - 1]
-    })
-  ];
-  const segments = [
-    `M ${formatPathNumber(source.x)} ${formatPathNumber(source.y)}`
-  ];
-  for (let index = 1; index <= lastPointIndex; index += 1) {
-    const previous = points[index - 1];
-    const start = points[index];
-    const end = points[index + 1];
-    const next = points[index + 2];
-    const tPrevious = 0;
-    const tStart = tPrevious + catmullRomParameterDistance(previous, start);
-    const tEnd = tStart + catmullRomParameterDistance(start, end);
-    const tNext = tEnd + catmullRomParameterDistance(end, next);
-    const startTangent = catmullRomTangent({
-      current: start,
-      next: end,
-      previous,
-      tCurrent: tStart,
-      tNext: tEnd,
-      tPrevious
-    });
-    const endTangent = catmullRomTangent({
-      current: end,
-      next,
-      previous: start,
-      tCurrent: tEnd,
-      tNext,
-      tPrevious: tStart
-    });
-    const firstControl = {
-      x: start.x + startTangent.x / 3,
-      y: start.y + startTangent.y / 3
-    };
-    const secondControl = {
-      x: end.x - endTangent.x / 3,
-      y: end.y - endTangent.y / 3
-    };
-    segments.push(
-      [
-        "C",
-        formatPathNumber(firstControl.x),
-        formatPathNumber(firstControl.y),
-        `${formatPathNumber(secondControl.x)},`,
-        formatPathNumber(secondControl.y),
-        `${formatPathNumber(end.x)},`,
-        formatPathNumber(end.y)
-      ].join(" ")
-    );
+function handleDotColor(tone) {
+  switch (tone) {
+    case "assignment":
+      return "var(--color-success)";
+    case "continue":
+      return "var(--color-secondary)";
+    case "failure":
+      return "var(--color-error)";
+    case "input":
+      return "var(--color-success)";
+    case "output":
+      return "var(--color-success)";
+    case "rejection":
+      return "var(--color-warning)";
+    case "resource":
+      return "var(--color-black)";
+    case "worker":
+      return "var(--color-purple-500)";
+    default:
+      return "var(--color-success)";
   }
-  return segments.join(" ");
 }
-function buildGraphEdgePathThroughWaypoints(input) {
-  const routePoints = [
-    { x: input.sourceX, y: input.sourceY },
-    ...input.waypoints ?? [],
-    { x: input.targetX, y: input.targetY }
-  ];
-  if (routePoints.length <= 2) {
-    const [path2, labelX, labelY] = getBezierPath({
-      sourcePosition: input.sourcePosition,
-      sourceX: input.sourceX,
-      sourceY: input.sourceY,
-      targetPosition: input.targetPosition,
-      targetX: input.targetX,
-      targetY: input.targetY
-    });
-    return { labelX, labelY, path: path2 };
-  }
-  const path = buildWaypointCatmullRomPath({
-    routePoints,
-    sourcePosition: input.sourcePosition,
-    targetPosition: input.targetPosition
-  });
-  const midpointIndex = Math.floor((routePoints.length - 1) / 2);
-  const labelPoint = routePoints[midpointIndex];
-  return {
-    labelX: labelPoint.x,
-    labelY: labelPoint.y,
-    path
+function anchoredHandleStyle(side) {
+  return side === "left" ? {
+    left: "50%",
+    top: "50%",
+    transform: "translateY(-50%)"
+  } : {
+    left: "50%",
+    top: "50%",
+    transform: "translate(-100%, -50%)"
   };
 }
-const GRAPH_EDGE_TYPES = {
-  graphEdge: GraphEdge
-};
-function GraphEdge({
-  data,
-  edgeClassName = "graph-edge",
-  id,
-  interactionWidth,
-  labelClassName = "graph-edge-label pointer-events-none fill-on-surface-subtle text-[11px] font-semibold",
-  markerEnd,
-  selected,
-  sourcePosition,
-  sourceX,
-  sourceY,
-  style,
-  targetPosition,
-  targetX,
-  targetY
+function GraphNodeStateIndicator({
+  state,
+  stateLabel
 }) {
-  const edgeRef = useRef(null);
-  const [inspected, setInspected] = useState(false);
-  const edgeData = data ?? {};
-  const routedPath = buildGraphEdgePathThroughWaypoints({
-    sourcePosition,
-    sourceX,
-    sourceY,
-    targetPosition,
-    targetX,
-    targetY,
-    waypoints: edgeData.waypoints
-  });
-  const [fallbackPath, fallbackLabelX, fallbackLabelY] = getBezierPath({
-    sourcePosition,
-    sourceX,
-    sourceY,
-    targetPosition,
-    targetX,
-    targetY
-  });
-  const edgePath = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.path : fallbackPath;
-  const labelX = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.labelX : fallbackLabelX;
-  const labelY = edgeData.waypoints && edgeData.waypoints.length > 0 ? routedPath.labelY : fallbackLabelY;
-  useEffect(() => {
-    const edgeElement = edgeRef.current?.parentElement;
-    if (!edgeElement) {
-      return;
-    }
-    const show = () => setInspected(true);
-    const hide = () => setInspected(false);
-    edgeElement.addEventListener("mouseenter", show);
-    edgeElement.addEventListener("mouseleave", hide);
-    edgeElement.addEventListener("focusin", show);
-    edgeElement.addEventListener("focusout", hide);
-    return () => {
-      edgeElement.removeEventListener("mouseenter", show);
-      edgeElement.removeEventListener("mouseleave", hide);
-      edgeElement.removeEventListener("focusin", show);
-      edgeElement.removeEventListener("focusout", hide);
-    };
-  }, []);
-  const revealLabel = Boolean(
-    edgeData.label && (edgeData.alwaysShowLabel || inspected || selected)
-  );
-  return /* @__PURE__ */ jsxs(
-    "g",
+  const label = stateLabel ?? defaultGraphNodeStateLabel(state);
+  const showIndicator = state === "loading" || state === "error";
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className: edgeClassName,
-      "data-edge-id": id,
-      "data-label-visible": revealLabel ? "true" : "false",
-      ref: edgeRef,
-      children: [
+      "aria-hidden": showIndicator ? void 0 : true,
+      className: cn(
+        GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
+        "flex items-center gap-2 text-[0.65rem] font-semibold uppercase tracking-[0.08em]",
+        state === "error" ? "text-on-error-container" : "text-on-surface-variant",
+        !showIndicator && "invisible"
+      ),
+      "data-graph-node-state-indicator": showIndicator ? state : void 0,
+      children: state === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          BaseEdge,
+          "span",
           {
-            interactionWidth,
-            markerEnd,
-            path: edgePath,
-            style
+            "aria-hidden": "true",
+            className: "inline-block h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-outline border-t-primary",
+            "data-graph-node-loading-spinner": "true"
           }
         ),
-        edgeData.label ? /* @__PURE__ */ jsx(
-          "text",
+        /* @__PURE__ */ jsx("span", { children: label ?? "Loading" })
+      ] }) : state === "error" ? /* @__PURE__ */ jsx("span", { role: "alert", children: label ?? "Error" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " " })
+    }
+  );
+}
+function GraphNodeShell({
+  children,
+  className = "",
+  handles,
+  nodeKind,
+  showStateIndicator = true,
+  state = "default",
+  stateLabel,
+  ...articleProps
+}) {
+  const leftHandles = handles.filter((handle) => handle.side === "left");
+  const rightHandles = handles.filter((handle) => handle.side === "right");
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "relative flex h-full min-w-0 w-full overflow-visible rounded-lg border border-outline bg-surface text-on-surface",
+        graphNodeShellStateClassName(state),
+        className
+      ),
+      "data-graph-node-kind": nodeKind,
+      ...graphNodeShellStateAttributes(state, stateLabel),
+      ...articleProps,
+      children: [
+        /* @__PURE__ */ jsx(NodeHandleRail, { handles: leftHandles, side: "left" }),
+        /* @__PURE__ */ jsx(NodeHandleRail, { handles: rightHandles, side: "right" }),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            className: labelClassName,
-            style: {
-              paintOrder: "stroke",
-              stroke: "var(--color-surface)",
-              strokeLinejoin: "round",
-              strokeWidth: 8
-            },
-            textAnchor: "middle",
-            x: labelX,
-            y: labelY,
-            children: edgeData.label
+            className: cn(
+              "flex h-full min-w-0 w-full flex-col gap-1 py-3",
+              showStateIndicator && GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
+              leftHandles.length > 0 ? "pl-6 pr-3" : "px-3",
+              rightHandles.length > 0 && leftHandles.length > 0 ? "pr-6" : rightHandles.length > 0 ? "pl-3 pr-6" : null
+            ),
+            children: [
+              showStateIndicator ? /* @__PURE__ */ jsx(GraphNodeStateIndicator, { state, stateLabel }) : null,
+              children
+            ]
           }
-        ) : null
+        )
       ]
     }
   );
 }
+function NodeHandleRail({
+  handles,
+  side
+}) {
+  if (handles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute inset-y-0 z-20 w-6",
+        side === "left" ? "left-0" : "right-0"
+      ),
+      "data-node-handle-rail": side,
+      children: handles.map((handle, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "absolute top-0 flex -translate-y-1/2",
+            side === "left" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"
+          ),
+          style: { top: handlePosition(index, handles.length) },
+          children: /* @__PURE__ */ jsx(GraphNodeHandleBadge, { handle })
+        },
+        handle.id
+      ))
+    }
+  );
+}
+function handlePosition(index, count) {
+  return `${(index + 1) * 100 / (count + 1)}%`;
+}
+const GraphViewportSurface = forwardRef(function GraphViewportSurface2({ children, className, role, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "relative min-h-0 overflow-hidden rounded-3xl border shadow-none transition-colors",
+        className
+      ),
+      "data-graph-viewport-surface": "true",
+      ref,
+      role: role ?? "region",
+      ...props,
+      children
+    }
+  );
+});
 const COMPONENTS_CATEGORY = "graphs";
 export {
   COMPONENTS_CATEGORY,