@you-agent-factory/components 0.0.0

package/src/forms/select-icons.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from "react";
+
+export function SelectChevronDownIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function SelectCheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}

package/src/graphs/graph-edge-path.ts

@@ -0,0 +1,241 @@
+import { getBezierPath, Position } from "@xyflow/react";
+
+export type GraphEdgeWaypoint = {
+  x: number;
+  y: number;
+};
+
+const CATMULL_ROM_ALPHA = 0.5;
+const MIN_PARAMETER_DISTANCE = 0.0001;
+const VIRTUAL_ENDPOINT_DISTANCE = 96;
+
+function positionVector(position: Position): GraphEdgeWaypoint {
+  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: GraphEdgeWaypoint,
+  second: GraphEdgeWaypoint,
+): number {
+  return Math.hypot(second.x - first.x, second.y - first.y);
+}
+
+function catmullRomParameterDistance(
+  first: GraphEdgeWaypoint,
+  second: GraphEdgeWaypoint,
+): number {
+  return Math.max(
+    MIN_PARAMETER_DISTANCE,
+    pointDistance(first, second) ** CATMULL_ROM_ALPHA,
+  );
+}
+
+function formatPathNumber(value: number): string {
+  if (Object.is(value, -0)) {
+    return "0";
+  }
+
+  return Number.isInteger(value) ? `${value}` : value.toFixed(3);
+}
+
+function compactConsecutiveRoutePoints(
+  routePoints: readonly GraphEdgeWaypoint[],
+): GraphEdgeWaypoint[] {
+  const compacted: GraphEdgeWaypoint[] = [];
+
+  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: {
+  direction: GraphEdgeWaypoint;
+  from: GraphEdgeWaypoint;
+  mode: "after" | "before";
+  neighbor: GraphEdgeWaypoint;
+}): GraphEdgeWaypoint {
+  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: {
+  current: GraphEdgeWaypoint;
+  next: GraphEdgeWaypoint;
+  previous: GraphEdgeWaypoint;
+  tCurrent: number;
+  tNext: number;
+  tPrevious: number;
+}): GraphEdgeWaypoint {
+  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: {
+  routePoints: readonly GraphEdgeWaypoint[];
+  sourcePosition: Position;
+  targetPosition: Position;
+}): string {
+  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(" ");
+}
+
+export function buildGraphEdgePathThroughWaypoints(input: {
+  sourceX: number;
+  sourceY: number;
+  sourcePosition: Position;
+  targetX: number;
+  targetY: number;
+  targetPosition: Position;
+  waypoints?: readonly GraphEdgeWaypoint[];
+}): {
+  labelX: number;
+  labelY: number;
+  path: string;
+} {
+  const routePoints = [
+    { x: input.sourceX, y: input.sourceY },
+    ...(input.waypoints ?? []),
+    { x: input.targetX, y: input.targetY },
+  ];
+
+  if (routePoints.length <= 2) {
+    const [path, 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 };
+  }
+
+  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,
+  };
+}

package/src/graphs/graph-edge.tsx

@@ -0,0 +1,130 @@
+import { BaseEdge, type EdgeProps, getBezierPath } from "@xyflow/react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  buildGraphEdgePathThroughWaypoints,
+  type GraphEdgeWaypoint,
+} from "./graph-edge-path";
+
+export type GraphEdgeData = {
+  alwaysShowLabel?: boolean;
+  label?: string;
+  waypoints?: GraphEdgeWaypoint[];
+};
+
+export const GRAPH_EDGE_TYPES = {
+  graphEdge: GraphEdge,
+};
+
+export type GraphEdgeProps = EdgeProps & {
+  edgeClassName?: string;
+  labelClassName?: string;
+};
+
+export 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,
+}: GraphEdgeProps) {
+  const edgeRef = useRef<SVGGElement | null>(null);
+  const [inspected, setInspected] = useState(false);
+  const edgeData = (data ?? {}) as GraphEdgeData;
+  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 (
+    <g
+      className={edgeClassName}
+      data-edge-id={id}
+      data-label-visible={revealLabel ? "true" : "false"}
+      ref={edgeRef}
+    >
+      <BaseEdge
+        interactionWidth={interactionWidth}
+        markerEnd={markerEnd}
+        path={edgePath}
+        style={style}
+      />
+      {edgeData.label ? (
+        <text
+          className={labelClassName}
+          style={{
+            paintOrder: "stroke",
+            stroke: "var(--color-surface)",
+            strokeLinejoin: "round",
+            strokeWidth: 8,
+          }}
+          textAnchor="middle"
+          x={labelX}
+          y={labelY}
+        >
+          {edgeData.label}
+        </text>
+      ) : null}
+    </g>
+  );
+}

package/src/graphs/graph-interactive-example.tsx

@@ -0,0 +1,187 @@
+import "@xyflow/react/dist/style.css";
+
+import {
+  Background,
+  Controls,
+  ReactFlow,
+  ReactFlowProvider,
+  type Edge,
+  type Node,
+  type NodeProps,
+} from "@xyflow/react";
+import { useCallback, useMemo, useState } from "react";
+
+import { GRAPH_EDGE_TYPES } from "./graph-edge";
+import {
+  desktopInteractiveGraphNodes,
+  type GraphInteractiveFixtureNode,
+} from "./graph-story-fixtures";
+import { GraphNodeButton } from "./graph-node-button";
+import { GraphNodeShell } from "./graph-node-shell";
+import type { GraphNodeState } from "./graph-node-state";
+import { GraphViewportSurface } from "./graph-viewport-surface";
+
+type GenericGraphFlowNodeData = GraphInteractiveFixtureNode & {
+  graphState: GraphNodeState;
+  onActivate?: () => void;
+  shellState: GraphNodeState;
+};
+
+function GenericGraphFlowNode({ data }: NodeProps<Node<GenericGraphFlowNodeData>>) {
+  return (
+    <div className="w-44 max-w-full sm:w-52">
+      <GraphNodeShell
+        handles={data.handles}
+        nodeKind={data.nodeKind}
+        state={data.shellState}
+        stateLabel={data.stateLabel}
+      >
+        <GraphNodeButton
+          graphState={data.graphState}
+          onClick={data.onActivate}
+          stateLabel={data.stateLabel}
+        >
+          {data.label}
+        </GraphNodeButton>
+      </GraphNodeShell>
+    </div>
+  );
+}
+
+const GENERIC_GRAPH_NODE_TYPES = {
+  genericGraph: GenericGraphFlowNode,
+};
+
+function buildFlowNodes(
+  fixtureNodes: GraphInteractiveFixtureNode[],
+  selectedNodeId: string | null,
+  onSelectNode: (nodeId: string) => void,
+): Node<GenericGraphFlowNodeData>[] {
+  return fixtureNodes.map((fixtureNode) => {
+    const isSelectable = fixtureNode.selectable === true;
+    const isSelected = isSelectable && selectedNodeId === fixtureNode.id;
+    const resolvedState =
+      fixtureNode.fixedState ?? (isSelected ? "selected" : "default");
+
+    return {
+      data: {
+        ...fixtureNode,
+        graphState: resolvedState,
+        onActivate: isSelectable
+          ? () => {
+              onSelectNode(fixtureNode.id);
+            }
+          : undefined,
+        shellState: resolvedState,
+      },
+      draggable: false,
+      id: fixtureNode.id,
+      position: fixtureNode.position,
+      selectable: false,
+      type: "genericGraph",
+    };
+  });
+}
+
+function buildFlowEdges(
+  fixtureNodes: GraphInteractiveFixtureNode[],
+  selectedNodeId: string | null,
+): Edge[] {
+  const readyNode = fixtureNodes.find((node) => node.id === "ready-node");
+  const targetNode = fixtureNodes.find((node) => node.id === "target-node");
+
+  if (!readyNode || !targetNode) {
+    return [];
+  }
+
+  return [
+    {
+      data: {
+        alwaysShowLabel: true,
+        label: "Example edge",
+        waypoints:
+          readyNode.position.y === targetNode.position.y
+            ? undefined
+            : [
+                {
+                  x: (readyNode.position.x + targetNode.position.x) / 2 + 72,
+                  y: readyNode.position.y + 48,
+                },
+                {
+                  x: (readyNode.position.x + targetNode.position.x) / 2 + 72,
+                  y: targetNode.position.y + 48,
+                },
+              ],
+      },
+      id: "ready-to-target",
+      selectable: false,
+      source: readyNode.id,
+      target: targetNode.id,
+      type: "graphEdge",
+    },
+  ].map((edge) => ({
+    ...edge,
+    selected: selectedNodeId === edge.source || selectedNodeId === edge.target,
+  }));
+}
+
+export type GraphInteractiveExampleProps = {
+  "aria-label"?: string;
+  className?: string;
+  fixtureNodes?: GraphInteractiveFixtureNode[];
+  initialSelectedNodeId?: string | null;
+  viewportWidthClass?: string;
+};
+
+export function GraphInteractiveExample({
+  "aria-label": ariaLabel = "Interactive graph example",
+  className = "h-[28rem]",
+  fixtureNodes = desktopInteractiveGraphNodes,
+  initialSelectedNodeId = null,
+  viewportWidthClass = "w-[48rem] max-w-full",
+}: GraphInteractiveExampleProps) {
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(
+    initialSelectedNodeId,
+  );
+
+  const handleSelectNode = useCallback((nodeId: string) => {
+    setSelectedNodeId(nodeId);
+  }, []);
+
+  const nodes = useMemo(
+    () => buildFlowNodes(fixtureNodes, selectedNodeId, handleSelectNode),
+    [fixtureNodes, handleSelectNode, selectedNodeId],
+  );
+  const edges = useMemo(
+    () => buildFlowEdges(fixtureNodes, selectedNodeId),
+    [fixtureNodes, selectedNodeId],
+  );
+
+  return (
+    <ReactFlowProvider>
+      <div className={viewportWidthClass}>
+        <GraphViewportSurface aria-label={ariaLabel} className={className}>
+          <ReactFlow
+            defaultEdgeOptions={{ selectable: false }}
+            edgeTypes={GRAPH_EDGE_TYPES}
+            edges={edges}
+            fitView
+            fitViewOptions={{ padding: 0.2 }}
+            maxZoom={1.25}
+            minZoom={0.5}
+            nodeTypes={GENERIC_GRAPH_NODE_TYPES}
+            nodes={nodes}
+            nodesConnectable={false}
+            nodesDraggable={false}
+            panOnDrag={true}
+            proOptions={{ hideAttribution: true }}
+            zoomOnScroll={true}
+          >
+            <Background gap={16} size={1} />
+            <Controls showInteractive={false} />
+          </ReactFlow>
+        </GraphViewportSurface>
+      </div>
+    </ReactFlowProvider>
+  );
+}

package/src/graphs/graph-node-button.tsx

@@ -0,0 +1,51 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
+import { cn } from "../utilities/cn";
+import {
+  type GraphNodeState,
+  graphNodeButtonIsDisabled,
+  graphNodeButtonStateAttributes,
+  graphNodeButtonStateClassName,
+} from "./graph-node-state";
+
+export type GraphNodeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  graphState?: GraphNodeState;
+  stateLabel?: string;
+};
+
+export const GRAPH_NODE_BUTTON_BASE_CLASS =
+  "nodrag nopan cursor-pointer border-0 bg-transparent p-0 text-left text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-af-focus-ring disabled:cursor-not-allowed disabled:opacity-100";
+
+export const GraphNodeButton = forwardRef<
+  HTMLButtonElement,
+  GraphNodeButtonProps
+>(function GraphNodeButton(
+  {
+    className,
+    disabled,
+    graphState = "default",
+    onClick,
+    stateLabel,
+    type = "button",
+    ...props
+  },
+  ref,
+) {
+  const isDisabled = graphNodeButtonIsDisabled(graphState, disabled);
+
+  return (
+    <button
+      className={cn(
+        GRAPH_NODE_BUTTON_BASE_CLASS,
+        graphNodeButtonStateClassName(graphState),
+        className,
+      )}
+      disabled={isDisabled}
+      onClick={isDisabled ? undefined : onClick}
+      ref={ref}
+      type={type}
+      {...graphNodeButtonStateAttributes(graphState, stateLabel)}
+      {...props}
+    />
+  );
+});