@vllnt/ui 0.1.3 → 0.1.6

package/dist/components/flow-diagram/flow-canvas.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import {
+  Background,
+  BackgroundVariant,
+  ReactFlow
+} from "@xyflow/react";
+import { useTheme } from "next-themes";
+import { cn } from "../../lib/utils";
+import { FlowControls } from "./flow-controls";
+const REACT_FLOW_CLASS = [
+  // Node container styling — no !important on bg/color so inline styles take precedence
+  "[&_.react-flow__node]:rounded-md",
+  "[&_.react-flow__node]:border",
+  "[&_.react-flow__node]:border-border",
+  "[&_.react-flow__node]:bg-card",
+  "[&_.react-flow__node]:px-4",
+  "[&_.react-flow__node]:py-2",
+  "[&_.react-flow__node]:shadow-sm",
+  // Node text styling — defaults, overridable by inline style.color
+  "[&_.react-flow__node]:text-sm",
+  "[&_.react-flow__node]:text-card-foreground",
+  "[&_.react-flow__node]:font-medium",
+  // Edge styling
+  "[&_.react-flow__edge-path]:!stroke-muted-foreground",
+  "[&_.react-flow__edge-path]:!stroke-2",
+  // Arrow marker styling
+  "[&_.react-flow__arrowhead_polyline]:!fill-muted-foreground",
+  "[&_.react-flow__arrowhead_polyline]:!stroke-muted-foreground"
+].join(" ");
+const FlowCanvas = memo(function FlowCanvas2({
+  allowCopy,
+  allowFullscreen,
+  className,
+  copyStatus,
+  edges,
+  fitView,
+  fitViewOptions,
+  height,
+  isFullscreen,
+  nodes,
+  onCopy,
+  onFitView,
+  onFullscreen,
+  onNodeClick,
+  onZoomIn,
+  onZoomOut,
+  showControls,
+  title
+}) {
+  const { resolvedTheme } = useTheme();
+  const colorMode = resolvedTheme === "dark" ? "dark" : "light";
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-foreground", children: title }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative w-full rounded-lg border border-border bg-background overflow-hidden",
+        style: { height: isFullscreen ? "100%" : height },
+        children: /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            className: REACT_FLOW_CLASS,
+            colorMode,
+            edges,
+            elementsSelectable: false,
+            fitView,
+            fitViewOptions: fitViewOptions ?? { padding: 0.2 },
+            nodes,
+            nodesConnectable: false,
+            nodesDraggable: false,
+            onNodeClick,
+            panOnScroll: true,
+            proOptions: { hideAttribution: true },
+            zoomOnScroll: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                Background,
+                {
+                  className: "!bg-background [&>pattern>circle]:fill-muted-foreground/20",
+                  gap: 16,
+                  size: 1,
+                  variant: BackgroundVariant.Dots
+                }
+              ),
+              showControls ? /* @__PURE__ */ jsx(
+                FlowControls,
+                {
+                  copyStatus,
+                  onCopy,
+                  onFitView,
+                  onFullscreen,
+                  onZoomIn,
+                  onZoomOut,
+                  showCopy: allowCopy,
+                  showFullscreen: allowFullscreen
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    )
+  ] });
+});
+export {
+  FlowCanvas
+};

package/dist/components/flow-diagram/flow-controls.js

@@ -0,0 +1,140 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import {
+  Check,
+  Copy,
+  Loader2,
+  Maximize2,
+  Minus,
+  Move,
+  Plus,
+  X
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+const BUTTON_CLASS = "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+function ControlButton({
+  disabled,
+  icon,
+  label,
+  onClick,
+  title
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": label,
+      className: BUTTON_CLASS,
+      disabled,
+      onClick,
+      title,
+      type: "button",
+      children: icon
+    }
+  );
+}
+function getCopyIcon(status) {
+  switch (status) {
+    case "copying":
+      return /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" });
+    case "success":
+      return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" });
+    case "error":
+      return /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-destructive" });
+    case "idle":
+    case void 0:
+      return /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" });
+  }
+}
+function getCopyTitle(status) {
+  switch (status) {
+    case "copying":
+      return "Copying...";
+    case "success":
+      return "Copied!";
+    case "error":
+      return "Copy failed";
+    case "idle":
+    case void 0:
+      return "Copy as image";
+  }
+}
+const FlowControls = memo(function FlowControls2({
+  className,
+  copyStatus,
+  onCopy,
+  onFitView,
+  onFullscreen,
+  onZoomIn,
+  onZoomOut,
+  showCopy = false,
+  showFullscreen = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "absolute bottom-4 left-4 z-10 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-1 backdrop-blur-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ControlButton,
+          {
+            icon: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            label: "Zoom in",
+            onClick: onZoomIn,
+            title: "Zoom in"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ControlButton,
+          {
+            icon: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }),
+            label: "Zoom out",
+            onClick: onZoomOut,
+            title: "Zoom out"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
+        /* @__PURE__ */ jsx(
+          ControlButton,
+          {
+            icon: /* @__PURE__ */ jsx(Move, { className: "h-4 w-4" }),
+            label: "Fit view",
+            onClick: onFitView,
+            title: "Fit view"
+          }
+        ),
+        showCopy && onCopy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              disabled: copyStatus === "copying",
+              icon: getCopyIcon(copyStatus),
+              label: getCopyTitle(copyStatus),
+              onClick: onCopy,
+              title: getCopyTitle(copyStatus)
+            }
+          )
+        ] }) : null,
+        showFullscreen && onFullscreen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
+          /* @__PURE__ */ jsx(
+            ControlButton,
+            {
+              icon: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }),
+              label: "Fullscreen",
+              onClick: onFullscreen,
+              title: "Toggle fullscreen"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+});
+export {
+  FlowControls
+};

package/dist/components/flow-diagram/flow-diagram.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "@xyflow/react/dist/style.css";
+import { memo, useCallback, useEffect } from "react";
+import {
+  ReactFlowProvider
+} from "@xyflow/react";
+import { cn } from "../../lib/utils";
+import { FlowCanvas } from "./flow-canvas";
+import { FlowErrorBoundary } from "./flow-error-boundary";
+import { FlowFullscreen } from "./flow-fullscreen";
+import { useFlowDiagram } from "./use-flow-diagram";
+function validateFlowData(nodes, edges) {
+  if (nodes.length === 0 && edges.length > 0) {
+    console.warn(
+      "[FlowDiagram] Edges provided without nodes - edges will not render"
+    );
+  }
+  const nodeIds = new Set(nodes.map((n) => n.id));
+  const invalidEdges = edges.filter(
+    (e) => !nodeIds.has(e.source) || !nodeIds.has(e.target)
+  );
+  if (invalidEdges.length > 0) {
+    console.warn(
+      `[FlowDiagram] ${invalidEdges.length} edge(s) reference non-existent nodes:`,
+      invalidEdges.map((e) => `${e.id}: ${e.source} -> ${e.target}`)
+    );
+  }
+  const nodesWithoutPosition = nodes.filter((n) => n.position === void 0);
+  if (nodesWithoutPosition.length > 0) {
+    console.warn(
+      `[FlowDiagram] ${nodesWithoutPosition.length} node(s) missing position:`,
+      nodesWithoutPosition.map((n) => n.id)
+    );
+  }
+}
+const FlowDiagramInner = memo(function FlowDiagramInner2({
+  allowCopy = false,
+  allowFullscreen = true,
+  className,
+  edges,
+  fitView = true,
+  fitViewOptions,
+  height = 400,
+  nodes,
+  onNodeClick,
+  showControls = true,
+  title
+}) {
+  useEffect(() => {
+    validateFlowData(nodes, edges);
+  }, [nodes, edges]);
+  const {
+    closeFullscreen,
+    copyStatus,
+    copyToClipboard,
+    fitView: handleFitView,
+    isFullscreen,
+    toggleFullscreen,
+    zoomIn,
+    zoomOut
+  } = useFlowDiagram({ allowCopy, allowFullscreen });
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      onNodeClick?.(node);
+    },
+    [onNodeClick]
+  );
+  const handleCopy = useCallback(() => {
+    void copyToClipboard();
+  }, [copyToClipboard]);
+  const canvasProps = {
+    allowCopy,
+    allowFullscreen,
+    className,
+    copyStatus,
+    edges,
+    fitView,
+    fitViewOptions,
+    height,
+    isFullscreen,
+    nodes,
+    onCopy: allowCopy ? handleCopy : void 0,
+    onFitView: handleFitView,
+    onFullscreen: allowFullscreen ? toggleFullscreen : void 0,
+    onNodeClick: onNodeClick ? handleNodeClick : void 0,
+    onZoomIn: zoomIn,
+    onZoomOut: zoomOut,
+    showControls,
+    title
+  };
+  if (isFullscreen) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-lg border border-border bg-muted/50",
+            className
+          ),
+          style: { height }
+        }
+      ),
+      /* @__PURE__ */ jsx(FlowFullscreen, { isOpen: isFullscreen, onClose: closeFullscreen, children: /* @__PURE__ */ jsx(FlowCanvas, { ...canvasProps }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(FlowCanvas, { ...canvasProps });
+});
+const FlowDiagram = memo(function FlowDiagram2(props) {
+  return /* @__PURE__ */ jsx(FlowErrorBoundary, { height: props.height, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowDiagramInner, { ...props }) }) });
+});
+export {
+  FlowDiagram
+};

package/dist/components/flow-diagram/flow-error-boundary.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { cn } from "../../lib/utils";
+class FlowErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.handleRetry = () => {
+      this.setState({ error: null, hasError: false });
+    };
+    this.state = { error: null, hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { error, hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[FlowDiagram] Error caught by boundary:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    const { children, className, fallback, height = 400 } = this.props;
+    const { error, hasError } = this.state;
+    if (hasError) {
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center justify-center gap-4 rounded-lg border border-border bg-muted/50 p-8 text-center",
+            className
+          ),
+          style: { height },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-6 w-6 text-destructive" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Failed to render diagram" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error?.message ?? "An unexpected error occurred while rendering the flow diagram." })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+                onClick: this.handleRetry,
+                type: "button",
+                children: [
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                  "Try again"
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    return children;
+  }
+}
+export {
+  FlowErrorBoundary
+};

package/dist/components/flow-diagram/flow-fullscreen.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect } from "react";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils";
+const FlowFullscreen = memo(function FlowFullscreen2({
+  children,
+  isOpen,
+  onClose
+}) {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": "Flow diagram fullscreen view",
+        "aria-modal": "true",
+        className: cn(
+          "fixed inset-0 z-[9999] flex flex-col bg-background",
+          "animate-in fade-in duration-200"
+        ),
+        role: "dialog",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-12 items-center justify-end border-b border-border px-4", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Close fullscreen",
+              className: "flex h-8 w-8 items-center justify-center rounded hover:bg-muted transition-colors",
+              onClick: onClose,
+              title: "Close fullscreen (Esc)",
+              type: "button",
+              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children })
+        ]
+      }
+    ),
+    document.body
+  );
+});
+export {
+  FlowFullscreen
+};

package/dist/components/flow-diagram/index.js

@@ -0,0 +1,12 @@
+import { FlowDiagram } from "./flow-diagram";
+import { FlowControls } from "./flow-controls";
+import { FlowErrorBoundary } from "./flow-error-boundary";
+import { FlowFullscreen } from "./flow-fullscreen";
+import { useFlowDiagram } from "./use-flow-diagram";
+export {
+  FlowControls,
+  FlowDiagram,
+  FlowErrorBoundary,
+  FlowFullscreen,
+  useFlowDiagram
+};

package/dist/components/flow-diagram/use-flow-diagram.js

@@ -0,0 +1,141 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import {
+  getNodesBounds,
+  getViewportForBounds,
+  useReactFlow
+} from "@xyflow/react";
+import { toPng } from "html-to-image";
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 2;
+const ZOOM_STEP = 0.2;
+function useZoomControls(reactFlow) {
+  const [zoom, setZoom] = useState(1);
+  const zoomIn = useCallback(() => {
+    const newZoom = Math.min(zoom + ZOOM_STEP, MAX_ZOOM);
+    setZoom(newZoom);
+    void reactFlow.zoomTo(newZoom, { duration: 200 });
+  }, [zoom, reactFlow]);
+  const zoomOut = useCallback(() => {
+    const newZoom = Math.max(zoom - ZOOM_STEP, MIN_ZOOM);
+    setZoom(newZoom);
+    void reactFlow.zoomTo(newZoom, { duration: 200 });
+  }, [zoom, reactFlow]);
+  const fitView = useCallback(() => {
+    void reactFlow.fitView({ duration: 200, padding: 0.2 });
+  }, [reactFlow]);
+  useEffect(() => {
+    const viewport = reactFlow.getViewport();
+    setZoom(viewport.zoom);
+  }, [reactFlow]);
+  return { fitView, zoom, zoomIn, zoomOut };
+}
+function useFullscreenState(allowFullscreen) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const toggleFullscreen = useCallback(() => {
+    if (!allowFullscreen) return;
+    setIsFullscreen((previous) => !previous);
+  }, [allowFullscreen]);
+  const closeFullscreen = useCallback(() => {
+    setIsFullscreen(false);
+  }, []);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        closeFullscreen();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isFullscreen, closeFullscreen]);
+  useEffect(() => {
+    document.body.style.overflow = isFullscreen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isFullscreen]);
+  return { closeFullscreen, isFullscreen, toggleFullscreen };
+}
+const IMAGE_WIDTH = 1024;
+const IMAGE_HEIGHT = 768;
+const COPY_SUCCESS_DURATION = 2e3;
+async function captureFlowImage(reactFlow) {
+  const nodes = reactFlow.getNodes();
+  if (nodes.length === 0) {
+    throw new Error("Cannot copy: no nodes in diagram");
+  }
+  const nodesBounds = getNodesBounds(nodes);
+  const viewport = getViewportForBounds(
+    nodesBounds,
+    IMAGE_WIDTH,
+    IMAGE_HEIGHT,
+    0.5,
+    2,
+    0.2
+  );
+  const flowElement = document.querySelector(".react-flow__viewport");
+  if (!flowElement || !(flowElement instanceof HTMLElement)) {
+    throw new Error("Cannot copy: flow viewport element not found");
+  }
+  const dataUrl = await toPng(flowElement, {
+    backgroundColor: "white",
+    height: IMAGE_HEIGHT,
+    style: {
+      height: String(IMAGE_HEIGHT),
+      transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+      width: String(IMAGE_WIDTH)
+    },
+    width: IMAGE_WIDTH
+  });
+  const response = await fetch(dataUrl);
+  if (!response.ok) {
+    throw new Error("Failed to fetch image data");
+  }
+  return response.blob();
+}
+function useCopyToClipboard(reactFlow) {
+  const [copyStatus, setCopyStatus] = useState("idle");
+  const copyToClipboard = useCallback(async () => {
+    setCopyStatus("copying");
+    try {
+      const blob = await captureFlowImage(reactFlow);
+      const clipboardItem = new ClipboardItem({ ["image/png"]: blob });
+      await navigator.clipboard.write([clipboardItem]);
+      setCopyStatus("success");
+      setTimeout(() => {
+        setCopyStatus("idle");
+      }, COPY_SUCCESS_DURATION);
+    } catch (error) {
+      console.error("[FlowDiagram] Copy failed:", error);
+      setCopyStatus("error");
+      setTimeout(() => {
+        setCopyStatus("idle");
+      }, COPY_SUCCESS_DURATION);
+    }
+  }, [reactFlow]);
+  return { copyStatus, copyToClipboard };
+}
+function useFlowDiagram(options = {}) {
+  const { allowFullscreen = true } = options;
+  const reactFlow = useReactFlow();
+  const { fitView, zoom, zoomIn, zoomOut } = useZoomControls(reactFlow);
+  const { closeFullscreen, isFullscreen, toggleFullscreen } = useFullscreenState(allowFullscreen);
+  const { copyStatus, copyToClipboard } = useCopyToClipboard(reactFlow);
+  return {
+    closeFullscreen,
+    copyStatus,
+    copyToClipboard,
+    fitView,
+    isFullscreen,
+    toggleFullscreen,
+    zoom,
+    zoomIn,
+    zoomOut
+  };
+}
+export {
+  useFlowDiagram
+};

package/dist/components/hover-card/hover-card.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../lib/utils";
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardContent = forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    align,
+    className: cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};

package/dist/components/hover-card/index.js

@@ -0,0 +1,6 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card";
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};