@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/chunk-XRV5RSYH.js

@@ -1,569 +0,0 @@
-"use client";
-import '@xyflow/react/dist/style.css';
-import { memo, useEffect, useCallback, Component, useState } from 'react';
-import { ReactFlow, Background, BackgroundVariant, ReactFlowProvider, useReactFlow, getNodesBounds, getViewportForBounds } from '@xyflow/react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { useTheme } from 'next-themes';
-import { Plus, Minus, Move, Maximize2, X, Copy, Check, Loader2, AlertTriangle, RefreshCw } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
-import { toPng } from 'html-to-image';
-
-// src/components/flow-diagram/flow-diagram.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var 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";
-  }
-}
-var 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
-      ]
-    }
-  );
-});
-var 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(" ");
-var 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
-            ]
-          }
-        )
-      }
-    )
-  ] });
-});
-var FlowErrorBoundary = class 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;
-  }
-};
-var 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
-  );
-});
-var MIN_ZOOM = 0.1;
-var MAX_ZOOM = 2;
-var 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 };
-}
-var IMAGE_WIDTH = 1024;
-var IMAGE_HEIGHT = 768;
-var 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
-  };
-}
-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)
-    );
-  }
-}
-var 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({ 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 });
-});
-var FlowDiagram = memo(function FlowDiagram2(props) {
-  return /* @__PURE__ */ jsx(FlowErrorBoundary, { height: props.height, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowDiagramInner, { ...props }) }) });
-});
-
-export { FlowControls, FlowDiagram, FlowErrorBoundary, FlowFullscreen, cn, useFlowDiagram };

package/dist/flow-diagram-N3EHM6VB.js

@@ -1,2 +0,0 @@
-"use client";
-export { FlowControls, FlowDiagram, FlowErrorBoundary, FlowFullscreen, useFlowDiagram } from './chunk-XRV5RSYH.js';