@you-agent-factory/components 0.0.0 → 0.0.2

package/src/forms/package-select.tsx

@@ -1,209 +0,0 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
-import {
-  type ComponentProps,
-  type ComponentRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-
-import { cn } from "../utilities/cn";
-import { inputVariants } from "./package-input";
-import { SelectCheckIcon, SelectChevronDownIcon } from "./select-icons";
-
-export const Select = SelectPrimitive.Root;
-export const SelectGroup = SelectPrimitive.Group;
-export const SelectValue = SelectPrimitive.Value;
-
-export type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger>;
-
-export const SelectTrigger = forwardRef<
-  ComponentRef<typeof SelectPrimitive.Trigger>,
-  SelectTriggerProps
->(function SelectTrigger({ className, children, ...props }, ref) {
-  return (
-    <SelectPrimitive.Trigger
-      className={cn(
-        inputVariants({
-          className:
-            "flex items-center justify-between gap-2 text-left data-[placeholder]:text-on-surface-disabled [&>span]:line-clamp-1",
-        }),
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <SelectChevronDownIcon className="h-4 w-4 shrink-0 text-af-text-subtle" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-});
-
-export type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content>;
-
-// tailwind-exception: intrinsic-sizing
-const SELECT_CONTENT_POPPER_CLASS = "min-w-[var(--radix-select-trigger-width)]";
-// tailwind-exception: intrinsic-sizing
-const SELECT_VIEWPORT_POPPER_CLASS =
-  "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]";
-
-export function SelectContent({
-  children,
-  className,
-  onCloseAutoFocus,
-  position = "popper",
-  ...props
-}: SelectContentProps) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        className={cn(
-          "relative z-50 max-h-72 overflow-hidden rounded-xl border border-outline bg-surface-container-high text-on-surface shadow-af-panel data-[state=closed]:animate-out data-[state=open]:animate-in",
-          position === "popper" && SELECT_CONTENT_POPPER_CLASS,
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        onCloseAutoFocus={onCloseAutoFocus}
-        position={position}
-        {...props}
-      >
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" && SELECT_VIEWPORT_POPPER_CLASS,
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-export type SelectLabelProps = ComponentProps<typeof SelectPrimitive.Label>;
-
-export function SelectLabel({ className, ...props }: SelectLabelProps) {
-  return (
-    <SelectPrimitive.Label
-      className={cn(
-        "px-2 py-1.5 text-xs font-semibold uppercase tracking-[0.08em] text-on-surface-subtle",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export const SELECT_EMPTY_STATE_VALUE = "__select-empty-state__";
-
-export type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
-
-export const SelectItem = forwardRef<
-  ComponentRef<typeof SelectPrimitive.Item>,
-  SelectItemProps
->(function SelectItem({ children, className, ...props }, ref) {
-  return (
-    <SelectPrimitive.Item
-      className={cn(
-        "relative flex w-full min-w-0 cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none focus:bg-surface-container-highest data-[disabled]:pointer-events-none data-[disabled]:text-on-surface-disabled data-[highlighted]:bg-surface-container-highest",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <SelectCheckIcon className="h-4 w-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText className="line-clamp-2 break-words">
-        {children}
-      </SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-});
-
-export type SelectEmptyProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-export function SelectEmpty({ children, className }: SelectEmptyProps) {
-  return (
-    <SelectPrimitive.Item
-      className={cn(
-        "relative flex w-full min-w-0 cursor-default select-none items-center rounded-lg px-2 py-2 text-sm text-on-surface-disabled data-[disabled]:pointer-events-none data-[disabled]:text-on-surface-disabled",
-        className,
-      )}
-      disabled
-      value={SELECT_EMPTY_STATE_VALUE}
-    >
-      <SelectPrimitive.ItemText className="line-clamp-2 break-words">
-        {children}
-      </SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-export type SelectSeparatorProps = ComponentProps<
-  typeof SelectPrimitive.Separator
->;
-
-export function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
-  return (
-    <SelectPrimitive.Separator
-      className={cn("-mx-1 my-1 h-px bg-outline", className)}
-      {...props}
-    />
-  );
-}
-
-export interface SelectFieldProps {
-  children: ReactNode;
-  className?: string;
-  description?: ReactNode;
-  descriptionId?: string;
-  error?: ReactNode;
-  errorId?: string;
-  inputId: string;
-  label: ReactNode;
-}
-
-export function SelectField({
-  children,
-  className,
-  description,
-  descriptionId,
-  error,
-  errorId,
-  inputId,
-  label,
-}: SelectFieldProps) {
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <label
-        className="text-xs font-bold uppercase tracking-[0.08em] text-af-text-subtle"
-        htmlFor={inputId}
-      >
-        {label}
-      </label>
-      {children}
-      {description ? (
-        <p className="m-0 text-sm text-af-text-muted" id={descriptionId}>
-          {description}
-        </p>
-      ) : null}
-      {error ? (
-        <p
-          className="m-0 text-sm font-medium text-on-error-container"
-          id={errorId}
-          role="alert"
-        >
-          {error}
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/src/forms/package-textarea.tsx

@@ -1,35 +0,0 @@
-import { forwardRef, type TextareaHTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-import { inputVariants } from "./package-input";
-
-const TEXTAREA_PLAIN_CLASS =
-  "m-0 w-full resize-none border-0 bg-transparent p-0 text-sm leading-6 text-on-surface outline-none";
-
-const TEXTAREA_FIELD_CLASS =
-  "min-h-28 max-h-52 resize-none overflow-y-auto py-3";
-
-export type PackageTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  variant?: "field" | "plain";
-};
-
-export function textareaVariants({ className }: { className?: string } = {}) {
-  return inputVariants({ className: cn(TEXTAREA_FIELD_CLASS, className) });
-}
-
-export const PackageTextarea = forwardRef<
-  HTMLTextAreaElement,
-  PackageTextareaProps
->(function PackageTextarea({ className, variant = "field", ...props }, ref) {
-  return (
-    <textarea
-      className={
-        variant === "plain"
-          ? cn(TEXTAREA_PLAIN_CLASS, className)
-          : textareaVariants({ className })
-      }
-      ref={ref}
-      {...props}
-    />
-  );
-});

package/src/forms/select-icons.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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>
-  );
-}