@you-agent-factory/components 0.0.0

package/src/graphs/graph-node-handle-badge.tsx

@@ -0,0 +1,108 @@
+import { Handle, Position } from "@xyflow/react";
+import type { CSSProperties } from "react";
+
+import { cn } from "../utilities/cn";
+import type { GraphNodeHandle, GraphNodeHandleTone } from "./graph-node-handle";
+
+export interface GraphNodeHandleBadgeProps {
+  handle: GraphNodeHandle;
+}
+
+export function GraphNodeHandleBadge({ handle }: GraphNodeHandleBadgeProps) {
+  const position = handle.side === "left" ? Position.Left : Position.Right;
+  const overlayHandleStyle = anchoredHandleStyle(handle.side);
+
+  if (handle.hidden) {
+    return (
+      <Handle
+        className="pointer-events-none !top-1/2 opacity-0"
+        id={handle.id}
+        isConnectable={handle.connectable ?? false}
+        position={position}
+        style={overlayHandleStyle}
+        type={handle.type}
+      />
+    );
+  }
+
+  const tone = handle.tone ?? "default";
+
+  return (
+    <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" : undefined}
+      data-node-handle-tone={tone}
+    >
+      <Handle
+        aria-invalid={handle.validationError ? true : undefined}
+        aria-label={handle.buttonAriaLabel ?? handle.label}
+        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.onButtonClick}
+        position={position}
+        style={
+          {
+            ...overlayHandleStyle,
+            "--node-handle-background": handleDotColor(tone),
+            opacity: handle.buttonDisabled ? 0.45 : undefined,
+          } as CSSProperties
+        }
+        title={handle.buttonTitle ?? handle.validationMessage}
+        type={handle.type}
+      />
+    </div>
+  );
+}
+
+function handleDotColor(tone: GraphNodeHandleTone): string {
+  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: GraphNodeHandle["side"],
+): CSSProperties {
+  return side === "left"
+    ? {
+        left: "50%",
+        top: "50%",
+        transform: "translateY(-50%)",
+      }
+    : {
+        left: "50%",
+        top: "50%",
+        transform: "translate(-100%, -50%)",
+      };
+}

package/src/graphs/graph-node-handle.ts

@@ -0,0 +1,28 @@
+export type GraphNodeHandleTone =
+  | "assignment"
+  | "continue"
+  | "default"
+  | "failure"
+  | "input"
+  | "output"
+  | "rejection"
+  | "resource"
+  | "worker";
+
+export interface GraphNodeHandle {
+  buttonAriaLabel?: string;
+  buttonDisabled?: boolean;
+  buttonPressed?: boolean;
+  buttonTitle?: string;
+  connectable?: boolean;
+  hidden?: boolean;
+  id: string;
+  label: string;
+  onButtonClick?: () => void;
+  side: "left" | "right";
+  tone?: GraphNodeHandleTone;
+  type: "source" | "target";
+  validationError?: boolean;
+  validationMessage?: string;
+  variant?: "default" | "error" | "muted" | "selected" | "valid-target";
+}

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

@@ -0,0 +1,111 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+import { GraphNodeHandleBadge } from "./graph-node-handle-badge";
+import type { GraphNodeHandle } from "./graph-node-handle";
+import { GraphNodeStateIndicator } from "./graph-node-state-indicator";
+import {
+  GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
+  type GraphNodeState,
+  graphNodeShellStateAttributes,
+  graphNodeShellStateClassName,
+} from "./graph-node-state";
+
+export interface GraphNodeShellProps
+  extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  children: ReactNode;
+  className?: string;
+  handles: GraphNodeHandle[];
+  nodeKind?: string;
+  showStateIndicator?: boolean;
+  state?: GraphNodeState;
+  stateLabel?: string;
+}
+
+export function GraphNodeShell({
+  children,
+  className = "",
+  handles,
+  nodeKind,
+  showStateIndicator = true,
+  state = "default",
+  stateLabel,
+  ...articleProps
+}: GraphNodeShellProps) {
+  const leftHandles = handles.filter((handle) => handle.side === "left");
+  const rightHandles = handles.filter((handle) => handle.side === "right");
+
+  return (
+    <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}
+    >
+      <NodeHandleRail handles={leftHandles} side="left" />
+      <NodeHandleRail handles={rightHandles} side="right" />
+      <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,
+        )}
+      >
+        {showStateIndicator ? (
+          <GraphNodeStateIndicator state={state} stateLabel={stateLabel} />
+        ) : null}
+        {children}
+      </div>
+    </article>
+  );
+}
+
+function NodeHandleRail({
+  handles,
+  side,
+}: {
+  handles: GraphNodeHandle[];
+  side: "left" | "right";
+}) {
+  if (handles.length === 0) {
+    return null;
+  }
+
+  return (
+    <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}
+    >
+      {handles.map((handle, index) => (
+        <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",
+          )}
+          key={handle.id}
+          style={{ top: handlePosition(index, handles.length) }}
+        >
+          <GraphNodeHandleBadge handle={handle} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function handlePosition(index: number, count: number): string {
+  return `${((index + 1) * 100) / (count + 1)}%`;
+}

package/src/graphs/graph-node-state-indicator.tsx

@@ -0,0 +1,47 @@
+import { cn } from "../utilities/cn";
+import {
+  defaultGraphNodeStateLabel,
+  GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
+  type GraphNodeState,
+} from "./graph-node-state";
+
+export interface GraphNodeStateIndicatorProps {
+  state: GraphNodeState;
+  stateLabel?: string;
+}
+
+export function GraphNodeStateIndicator({
+  state,
+  stateLabel,
+}: GraphNodeStateIndicatorProps) {
+  const label = stateLabel ?? defaultGraphNodeStateLabel(state);
+  const showIndicator = state === "loading" || state === "error";
+
+  return (
+    <div
+      aria-hidden={showIndicator ? undefined : 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 : undefined}
+    >
+      {state === "loading" ? (
+        <>
+          <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"
+          />
+          <span>{label ?? "Loading"}</span>
+        </>
+      ) : state === "error" ? (
+        <span role="alert">{label ?? "Error"}</span>
+      ) : (
+        <span aria-hidden="true">&nbsp;</span>
+      )}
+    </div>
+  );
+}

package/src/graphs/graph-node-state.ts

@@ -0,0 +1,111 @@
+import { cn } from "../utilities/cn";
+
+export type GraphNodeState =
+  | "default"
+  | "selected"
+  | "disabled"
+  | "loading"
+  | "error";
+
+export const GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS = "min-h-12";
+
+export const GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS = "min-h-5";
+
+export function graphNodeShellStateClassName(state: GraphNodeState): string {
+  switch (state) {
+    case "selected":
+      return cn(
+        "border-2 border-primary bg-primary-container",
+        "shadow-[0_0_0_1px_rgb(from_var(--color-primary)_r_g_b_/_0.28),0_0_0_4px_rgb(from_var(--color-primary)_r_g_b_/_0.08)]",
+      );
+    case "error":
+      return cn(
+        "border-2 border-dashed border-error bg-error-container",
+        "shadow-[0_0_0_3px_var(--color-error-container)]",
+      );
+    case "disabled":
+      return "border-outline-variant bg-surface-container text-on-surface";
+    case "loading":
+      return "border-outline bg-surface";
+    default:
+      return "";
+  }
+}
+
+export function graphNodeButtonStateClassName(state: GraphNodeState): string {
+  switch (state) {
+    case "selected":
+      return "ring-2 ring-primary/30";
+    case "error":
+      return "ring-2 ring-error/40";
+    case "disabled":
+    case "loading":
+      return "cursor-not-allowed";
+    default:
+      return "";
+  }
+}
+
+export function graphNodeShellStateAttributes(
+  state: GraphNodeState,
+  stateLabel?: string,
+): {
+  "aria-busy"?: boolean;
+  "aria-disabled"?: boolean;
+  "aria-invalid"?: boolean;
+  "aria-label"?: string;
+  "aria-selected"?: boolean;
+  "data-graph-node-state"?: GraphNodeState;
+} {
+  return {
+    "aria-busy": state === "loading" ? true : undefined,
+    "aria-disabled": state === "disabled" ? true : undefined,
+    "aria-invalid": state === "error" ? true : undefined,
+    "aria-label": stateLabel,
+    "aria-selected": state === "selected" ? true : undefined,
+    "data-graph-node-state": state === "default" ? undefined : state,
+  };
+}
+
+export function graphNodeButtonStateAttributes(
+  state: GraphNodeState,
+  stateLabel?: string,
+): {
+  "aria-busy"?: boolean;
+  "aria-disabled"?: boolean;
+  "aria-invalid"?: boolean;
+  "aria-label"?: string;
+  "aria-pressed"?: boolean;
+  "data-graph-node-state"?: GraphNodeState;
+} {
+  return {
+    "aria-busy": state === "loading" ? true : undefined,
+    "aria-disabled": state === "disabled" ? true : undefined,
+    "aria-invalid": state === "error" ? true : undefined,
+    "aria-label": stateLabel,
+    "aria-pressed": state === "selected" ? true : undefined,
+    "data-graph-node-state": state === "default" ? undefined : state,
+  };
+}
+
+export function graphNodeButtonIsDisabled(
+  state: GraphNodeState,
+  disabled?: boolean,
+): boolean {
+  return disabled === true || state === "disabled" || state === "loading";
+}
+
+export function defaultGraphNodeStateLabel(state: GraphNodeState): string | undefined {
+  switch (state) {
+    case "selected":
+      return "Selected node";
+    case "disabled":
+      return "Disabled node";
+    case "loading":
+      return "Loading node";
+    case "error":
+      return "Error node";
+    default:
+      return undefined;
+  }
+}

package/src/graphs/graph-viewport-surface.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+
+export interface GraphViewportSurfaceProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+export const GraphViewportSurface = forwardRef<
+  HTMLElement,
+  GraphViewportSurfaceProps
+>(function GraphViewportSurface({ children, className, role, ...props }, ref) {
+  return (
+    <section
+      className={cn(
+        "relative min-h-0 overflow-hidden rounded-3xl border shadow-none transition-colors",
+        className,
+      )}
+      data-graph-viewport-surface="true"
+      ref={ref}
+      role={role ?? "region"}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+});

package/src/graphs/index.ts

@@ -0,0 +1,41 @@
+/** Stable category path for `@you-agent-factory/components/graphs`. */
+export const COMPONENTS_CATEGORY = "graphs" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export {
+  GRAPH_NODE_BUTTON_BASE_CLASS,
+  GraphNodeButton,
+  type GraphNodeButtonProps,
+} from "./graph-node-button";
+export {
+  GraphViewportSurface,
+  type GraphViewportSurfaceProps,
+} from "./graph-viewport-surface";
+export type { GraphNodeHandle, GraphNodeHandleTone } from "./graph-node-handle";
+export {
+  GraphNodeHandleBadge,
+  type GraphNodeHandleBadgeProps,
+} from "./graph-node-handle-badge";
+export { GraphNodeShell, type GraphNodeShellProps } from "./graph-node-shell";
+export {
+  defaultGraphNodeStateLabel,
+  GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
+  GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
+  graphNodeButtonIsDisabled,
+  graphNodeButtonStateAttributes,
+  graphNodeButtonStateClassName,
+  graphNodeShellStateAttributes,
+  graphNodeShellStateClassName,
+  type GraphNodeState,
+} from "./graph-node-state";
+export {
+  GraphNodeStateIndicator,
+  type GraphNodeStateIndicatorProps,
+} from "./graph-node-state-indicator";
+export {
+  buildGraphEdgePathThroughWaypoints,
+  type GraphEdgeWaypoint,
+} from "./graph-edge-path";
+export type { GraphEdgeData, GraphEdgeProps } from "./graph-edge";
+export { GRAPH_EDGE_TYPES, GraphEdge } from "./graph-edge";

package/src/icons/index.ts

@@ -0,0 +1,4 @@
+/** Stable category path for `@you-agent-factory/components/icons`. */
+export const COMPONENTS_CATEGORY = "icons" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;

package/src/index.ts

@@ -0,0 +1,209 @@
+/** Stable package identifier for `@you-agent-factory/components` consumers. */
+export const COMPONENTS_PACKAGE_NAME = "@you-agent-factory/components" as const;
+
+export type ComponentsPackageName = typeof COMPONENTS_PACKAGE_NAME;
+
+export {
+  COMPONENT_CATEGORY_EXPORT_PATHS,
+  type ComponentCategoryExportPath,
+} from "./category-paths";
+
+export { Button, ButtonLink, buttonVariants, IconButtonShell } from "./primitives";
+export type {
+  ButtonLinkProps,
+  ButtonProps,
+  IconButtonShellProps,
+} from "./primitives";
+export { DescriptionList } from "./data-display/description-list";
+export type { DescriptionListProps } from "./data-display/description-list";
+
+export {
+  AlertPanel,
+  AlertPanelStatusLabel,
+  AlertPanelText,
+  AlertPanelTitle,
+  Skeleton,
+} from "./feedback";
+export type {
+  AlertPanelProps,
+  AlertPanelSemanticVariant,
+  AlertPanelStatusLabelProps,
+  AlertPanelTextProps,
+  AlertPanelTitleProps,
+  AlertPanelTone,
+  AlertPanelVariant,
+} from "./feedback";
+export {
+  CodePanel,
+  DataTable,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  codePanelVariants,
+  tableCellTruncateClassName,
+  tableCellWrapClassName,
+  tableMinWidthWideClassName,
+  tableNarrowContainerClassName,
+} from "./data-display";
+export type {
+  CodePanelProps,
+  DataTableColumn,
+  DataTableProps,
+  DataTableState,
+  TableProps,
+  TableSize,
+} from "./data-display";
+export {
+  WidgetDetailCopy,
+  WidgetEmptyState,
+  WidgetEmptyStateText,
+  WidgetEmptyStateTitle,
+  WidgetErrorState,
+  WidgetFrame,
+  WidgetFrameDisclosure,
+  WidgetFrameDisclosureIcon,
+  WidgetFrameDisclosurePanel,
+  WidgetFrameDisclosureTrigger,
+  WidgetFrameSkeleton,
+  WidgetLoadingState,
+  WidgetSubtitle,
+  WidgetSuccessState,
+  WIDGET_FRAME_BODY_TEXT_CLASS,
+  WIDGET_FRAME_MIN_WIDTH_CLASS,
+  WIDGET_FRAME_OVERFLOW_TOLERANCE_PX,
+  WIDGET_FRAME_RESPONSIVE_SHELL_CLASS,
+  WIDGET_FRAME_SECTION_HEADING_CLASS,
+  WIDGET_FRAME_STORY_SHELL_DATA_ATTR,
+  WIDGET_FRAME_SUBTITLE_CLASS,
+  WIDGET_FRAME_SUPPORTING_LABEL_CLASS,
+  WIDGET_FRAME_SUPPORTING_LABELS_CLASS,
+  WIDGET_FRAME_WIDE_BODY_CLASS,
+  widgetFrameDetailCardClass,
+  widgetFrameHasNoHorizontalOverflow,
+  widgetFrameStoryShellStyle,
+} from "./recipes";
+export type {
+  WidgetDetailCopyProps,
+  WidgetEmptyStateProps,
+  WidgetEmptyStateTextProps,
+  WidgetEmptyStateTitleProps,
+  WidgetErrorStateProps,
+  WidgetFrameDisclosureIconProps,
+  WidgetFrameDisclosurePanelProps,
+  WidgetFrameDisclosureProps,
+  WidgetFrameDisclosureTriggerProps,
+  WidgetFrameProps,
+  WidgetLoadingStateProps,
+  WidgetSubtitleProps,
+  WidgetSuccessStateProps,
+} from "./recipes";
+export {
+  buildFormFieldAriaDescribedBy,
+  EnumSelect,
+  ENUM_SELECT_EMPTY_VALUE,
+  FormDescription,
+  FormError,
+  FormField,
+  FormFieldGroup,
+  FormFieldGroupLabel,
+  FormHelperText,
+  FormLabel,
+  FormSuccess,
+  FormWarning,
+  NativeSelect,
+  OptionalEnumSelect,
+  PackageCheckbox,
+  PackageFileInput,
+  PackageInput,
+  PackageTextarea,
+  ResetEnumSelect,
+  Select,
+  SELECT_EMPTY_STATE_VALUE,
+  SelectContent,
+  SelectEmpty,
+  SelectField,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  inputVariants,
+  textareaVariants,
+} from "./forms";
+export type {
+  EnumSelectOption,
+  EnumSelectProps,
+  FormDescriptionProps,
+  FormErrorProps,
+  FormFieldGroupLabelProps,
+  FormFieldGroupProps,
+  FormFieldMessageIds,
+  FormFieldProps,
+  FormHelperTextProps,
+  FormLabelProps,
+  FormSuccessProps,
+  FormWarningProps,
+  NativeSelectProps,
+  OptionalEnumSelectProps,
+  PackageCheckboxProps,
+  PackageFileInputProps,
+  PackageInputProps,
+  PackageTextareaProps,
+  ResetEnumSelectProps,
+  SelectContentProps,
+  SelectEmptyProps,
+  SelectFieldProps,
+  SelectItemProps,
+  SelectLabelProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+} from "./forms";
+
+export { ActionRow } from "./layout/action-row";
+export type { ActionRowProps } from "./layout/action-row";
+export { SurfacePanel, surfacePanelVariants } from "./layout/surface-panel";
+export type { SurfacePanelProps } from "./layout/surface-panel";
+
+export { Code, Heading, Label, Text } from "./primitives/typography";
+export type {
+  CodeProps,
+  HeadingProps,
+  LabelProps,
+  TextProps,
+  TextVariant,
+} from "./primitives/typography";
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  OVERLAY_DIALOG_BODY_CLASS,
+  OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
+  OVERLAY_FORM_GROUP_CLASS,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+  ScrollBar,
+} from "./overlays";
+export type {
+  DialogContentProps,
+  ScrollAreaProps,
+  ScrollBarProps,
+} from "./overlays";
+