@vllnt/ui 0.2.0 → 0.2.1-canary.9c473e0

package/dist/components/canvas-shell/index.js

@@ -0,0 +1,4 @@
+import { CanvasShell } from "./canvas-shell";
+export {
+  CanvasShell
+};

package/dist/components/canvas-view/canvas-view.js

@@ -0,0 +1,461 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
+const INTERACTIVE_ELEMENT_SELECTOR = [
+  "a[href]",
+  "button",
+  'input:not([type="hidden"])',
+  "select",
+  "textarea",
+  "summary",
+  '[contenteditable=""]',
+  '[contenteditable="true"]',
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="option"]',
+  '[role="radio"]',
+  '[role="slider"]',
+  '[role="spinbutton"]',
+  '[role="switch"]',
+  '[role="tab"]',
+  '[role="textbox"]'
+].join(", ");
+function clampZoom(value, minZoom, maxZoom) {
+  return Math.min(maxZoom, Math.max(minZoom, Number(value.toFixed(2))));
+}
+function isHtmlElement(target) {
+  return target instanceof HTMLElement;
+}
+function isInteractiveDescendant(element, container) {
+  const interactiveAncestor = element.closest(INTERACTIVE_ELEMENT_SELECTOR);
+  return interactiveAncestor !== null && container.contains(interactiveAncestor);
+}
+function supportsScrollableOverflow(value) {
+  return value === "auto" || value === "overlay" || value === "scroll";
+}
+function hasScrollableAxis(element, axis) {
+  const style = window.getComputedStyle(element);
+  if (axis === "x") {
+    return supportsScrollableOverflow(style.overflowX) && element.scrollWidth > element.clientWidth;
+  }
+  return supportsScrollableOverflow(style.overflowY) && element.scrollHeight > element.clientHeight;
+}
+function hasScrollableAncestor(element, container, delta) {
+  if (!container.contains(element) || element === container) {
+    return false;
+  }
+  if (delta.x !== 0 && hasScrollableAxis(element, "x") || delta.y !== 0 && hasScrollableAxis(element, "y")) {
+    return true;
+  }
+  return element.parentElement === null ? false : hasScrollableAncestor(element.parentElement, container, delta);
+}
+function shouldHandleCanvasKeyboardEvent(event) {
+  if (isHtmlElement(event.target) && event.target !== event.currentTarget && isInteractiveDescendant(event.target, event.currentTarget)) {
+    return false;
+  }
+  return true;
+}
+function shouldHandleCanvasWheelEvent(event) {
+  if (isHtmlElement(event.target) && hasScrollableAncestor(event.target, event.currentTarget, {
+    x: event.deltaX,
+    y: event.deltaY
+  })) {
+    return false;
+  }
+  return true;
+}
+function isPanGesture(event, isSpacePressed) {
+  return event.button === 1 || event.button === 0 && isSpacePressed;
+}
+function createViewportKeyHandler({
+  nudgeViewport,
+  resetViewport,
+  setViewport,
+  viewportRef,
+  zoomStep
+}) {
+  return (event) => {
+    if (event.key === "+" || event.key === "=") {
+      event.preventDefault();
+      setViewport({
+        ...viewportRef.current,
+        zoom: viewportRef.current.zoom + zoomStep
+      });
+      return;
+    }
+    if (event.key === "-") {
+      event.preventDefault();
+      setViewport({
+        ...viewportRef.current,
+        zoom: viewportRef.current.zoom - zoomStep
+      });
+      return;
+    }
+    if (event.key === "0") {
+      event.preventDefault();
+      resetViewport();
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      nudgeViewport(40, 0);
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      nudgeViewport(-40, 0);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      nudgeViewport(0, 40);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      nudgeViewport(0, -40);
+    }
+  };
+}
+function useViewportState({
+  defaultViewport,
+  maxZoom,
+  minZoom,
+  onViewportChange
+}) {
+  const defaultViewportRef = useRef(defaultViewport);
+  const viewportRef = useRef(defaultViewport);
+  const [viewport, setViewport] = useState(defaultViewport);
+  useEffect(() => {
+    defaultViewportRef.current = defaultViewport;
+  }, [defaultViewport]);
+  const applyViewport = useCallback(
+    (nextViewport) => {
+      const resolvedViewport = {
+        x: Math.round(nextViewport.x),
+        y: Math.round(nextViewport.y),
+        zoom: clampZoom(nextViewport.zoom, minZoom, maxZoom)
+      };
+      viewportRef.current = resolvedViewport;
+      setViewport(resolvedViewport);
+      onViewportChange?.(resolvedViewport);
+    },
+    [maxZoom, minZoom, onViewportChange]
+  );
+  const resetViewport = useCallback(() => {
+    applyViewport(defaultViewportRef.current);
+  }, [applyViewport]);
+  const nudgeViewport = useCallback(
+    (deltaX, deltaY) => {
+      const currentViewport = viewportRef.current;
+      applyViewport({
+        x: currentViewport.x + deltaX,
+        y: currentViewport.y + deltaY,
+        zoom: currentViewport.zoom
+      });
+    },
+    [applyViewport]
+  );
+  return {
+    nudgeViewport,
+    resetViewport,
+    setViewport: applyViewport,
+    viewport,
+    viewportRef
+  };
+}
+function useCanvasKeyboardInteractions({
+  nudgeViewport,
+  resetViewport,
+  setViewport,
+  viewportRef,
+  zoomStep
+}) {
+  const [isSpacePressed, setIsSpacePressed] = useState(false);
+  const handleWheel = useCallback(
+    (event) => {
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        setViewport({
+          ...viewportRef.current,
+          zoom: viewportRef.current.zoom + (event.deltaY > 0 ? -zoomStep : zoomStep)
+        });
+        return;
+      }
+      if (!shouldHandleCanvasWheelEvent(event)) {
+        return;
+      }
+      event.preventDefault();
+      nudgeViewport(-event.deltaX, -event.deltaY);
+    },
+    [nudgeViewport, setViewport, viewportRef, zoomStep]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!shouldHandleCanvasKeyboardEvent(event)) {
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        setIsSpacePressed(true);
+        return;
+      }
+      createViewportKeyHandler({
+        nudgeViewport,
+        resetViewport,
+        setViewport,
+        viewportRef,
+        zoomStep
+      })(event);
+    },
+    [nudgeViewport, resetViewport, setViewport, viewportRef, zoomStep]
+  );
+  const handleKeyUp = useCallback(
+    (event) => {
+      if (!shouldHandleCanvasKeyboardEvent(event)) {
+        return;
+      }
+      if (event.key === " ") {
+        setIsSpacePressed(false);
+      }
+    },
+    []
+  );
+  return { handleKeyDown, handleKeyUp, handleWheel, isSpacePressed };
+}
+function endCanvasDrag(event, dragOriginRef, setIsDragging) {
+  dragOriginRef.current = null;
+  setIsDragging(false);
+  if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  }
+}
+function useCanvasPointerInteractions({
+  isSpacePressed,
+  setViewport,
+  viewportRef
+}) {
+  const dragOriginRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const handlePointerDown = useCallback(
+    (event) => {
+      if (!isPanGesture(event, isSpacePressed)) {
+        return;
+      }
+      if (event.button === 1) {
+        event.preventDefault();
+      }
+      dragOriginRef.current = {
+        pointerX: event.clientX,
+        pointerY: event.clientY,
+        viewport: viewportRef.current
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setIsDragging(true);
+    },
+    [isSpacePressed, viewportRef]
+  );
+  const handlePointerMove = useCallback(
+    (event) => {
+      const dragOrigin = dragOriginRef.current;
+      if (!dragOrigin) {
+        return;
+      }
+      setViewport({
+        x: dragOrigin.viewport.x + (event.clientX - dragOrigin.pointerX),
+        y: dragOrigin.viewport.y + (event.clientY - dragOrigin.pointerY),
+        zoom: dragOrigin.viewport.zoom
+      });
+    },
+    [setViewport]
+  );
+  const handlePointerCancel = useCallback(
+    (event) => {
+      endCanvasDrag(event, dragOriginRef, setIsDragging);
+    },
+    []
+  );
+  const handlePointerUp = useCallback(
+    (event) => {
+      endCanvasDrag(event, dragOriginRef, setIsDragging);
+    },
+    []
+  );
+  return {
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    isDragging
+  };
+}
+function usePreventBodySelection(disabled) {
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const { body } = document;
+    const previousUserSelect = body.style.userSelect;
+    if (disabled) {
+      body.style.userSelect = "none";
+    }
+    return () => {
+      body.style.userSelect = previousUserSelect;
+    };
+  }, [disabled]);
+}
+function useCanvasViewHandle(ref, viewportState) {
+  useImperativeHandle(
+    ref,
+    () => ({
+      resetViewport: viewportState.resetViewport,
+      setViewport: viewportState.setViewport
+    }),
+    [viewportState.resetViewport, viewportState.setViewport]
+  );
+}
+function CanvasInteractionLayer({
+  children,
+  instructionsId,
+  isDragging,
+  isSpacePressed,
+  onKeyDown,
+  onKeyUp,
+  onPointerCancel,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onWheel,
+  viewport
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-describedby": instructionsId,
+      "aria-label": "Canvas workspace",
+      "aria-roledescription": "canvas",
+      className: cn(
+        "relative h-full w-full select-none touch-none outline-none",
+        isDragging || isSpacePressed ? "cursor-grab active:cursor-grabbing" : "cursor-default"
+      ),
+      "data-viewport": JSON.stringify(viewport),
+      onKeyDown,
+      onKeyUp,
+      onPointerCancel,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onWheel,
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", id: instructionsId, children: "Hold space and drag or use the middle mouse button to pan. Use plus, minus, or control wheel to zoom. Press zero to reset the viewport." }),
+        children
+      ]
+    }
+  );
+}
+function CanvasContentLayer({
+  children,
+  overlay,
+  viewport
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 origin-top-left transition-transform duration-150 ease-out",
+        style: {
+          transform: `translate3d(${viewport.x}px, ${viewport.y}px, 0) scale(${viewport.zoom})`
+        },
+        children
+      }
+    ),
+    overlay ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20", children: overlay }) : null
+  ] });
+}
+const CanvasView = forwardRef(
+  ({
+    children,
+    className,
+    defaultViewport = DEFAULT_VIEWPORT,
+    maxZoom = 2,
+    minZoom = 0.5,
+    onViewportChange,
+    overlay,
+    zoomStep = 0.1,
+    ...props
+  }, ref) => {
+    const instructionsId = useId();
+    const viewportState = useViewportState({
+      defaultViewport,
+      maxZoom,
+      minZoom,
+      onViewportChange
+    });
+    const keyboard = useCanvasKeyboardInteractions({
+      nudgeViewport: viewportState.nudgeViewport,
+      resetViewport: viewportState.resetViewport,
+      setViewport: viewportState.setViewport,
+      viewportRef: viewportState.viewportRef,
+      zoomStep
+    });
+    const pointer = useCanvasPointerInteractions({
+      isSpacePressed: keyboard.isSpacePressed,
+      setViewport: viewportState.setViewport,
+      viewportRef: viewportState.viewportRef
+    });
+    usePreventBodySelection(pointer.isDragging);
+    useCanvasViewHandle(ref, viewportState);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative h-full min-h-[32rem] overflow-hidden rounded-sm border border-border bg-background",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          CanvasInteractionLayer,
+          {
+            instructionsId,
+            isDragging: pointer.isDragging,
+            isSpacePressed: keyboard.isSpacePressed,
+            onKeyDown: keyboard.handleKeyDown,
+            onKeyUp: keyboard.handleKeyUp,
+            onPointerCancel: pointer.handlePointerCancel,
+            onPointerDown: pointer.handlePointerDown,
+            onPointerMove: pointer.handlePointerMove,
+            onPointerUp: pointer.handlePointerUp,
+            onWheel: keyboard.handleWheel,
+            viewport: viewportState.viewport,
+            children: /* @__PURE__ */ jsx(
+              CanvasContentLayer,
+              {
+                overlay,
+                viewport: viewportState.viewport,
+                children
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+CanvasView.displayName = "CanvasView";
+export {
+  CanvasView
+};

package/dist/components/canvas-view/index.js

@@ -0,0 +1,6 @@
+import {
+  CanvasView
+} from "./canvas-view";
+export {
+  CanvasView
+};

package/dist/components/chart/area-chart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/chart/line-chart.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/chat-dock-section/chat-dock-section.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ArrowUpRight, MessageSquareText } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+const ChatDockSection = forwardRef(
+  ({
+    className,
+    composerPlaceholder = "Ask about runs, errors, or pending work\u2026",
+    contextLabel,
+    messages,
+    title = "Assistant",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-2xl border border-border/70 bg-background/75 p-4 shadow-[0_10px_35px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+              /* @__PURE__ */ jsx(MessageSquareText, { className: "size-4 text-primary" }),
+              title
+            ] }),
+            contextLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-[0.24em] text-muted-foreground", children: contextLabel }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", type: "button", variant: "ghost", children: [
+            "Open thread",
+            /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: messages.map((message) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "rounded-xl border border-border/60 bg-background/85 px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground", children: message.speaker }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-6 text-foreground", children: message.body })
+            ]
+          },
+          message.id
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 px-3 py-3 text-sm text-muted-foreground", children: composerPlaceholder })
+      ]
+    }
+  )
+);
+ChatDockSection.displayName = "ChatDockSection";
+export {
+  ChatDockSection
+};

package/dist/components/chat-dock-section/index.js

@@ -0,0 +1,6 @@
+import {
+  ChatDockSection
+} from "./chat-dock-section";
+export {
+  ChatDockSection
+};

package/dist/components/connector-edge/connector-edge.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { EdgeLabel } from "../edge-label";
+const strokeClasses = {
+  active: "stroke-sky-500",
+  blocked: "stroke-amber-500",
+  idle: "stroke-muted-foreground/60"
+};
+const ConnectorEdge = forwardRef(
+  ({ className, end, label, start, state = "idle", ...props }, ref) => {
+    const width = Math.max(Math.abs(end.x - start.x), 32);
+    const height = Math.max(Math.abs(end.y - start.y), 32);
+    const midX = width / 2;
+    const startX = start.x <= end.x ? 4 : width - 4;
+    const endX = start.x <= end.x ? width - 4 : 4;
+    const startY = start.y <= end.y ? 4 : height - 4;
+    const endY = start.y <= end.y ? height - 4 : 4;
+    const path = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+    const style = {
+      height,
+      width
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative inline-flex", className),
+        ref,
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "overflow-visible",
+              height,
+              viewBox: `0 0 ${width} ${height}`,
+              width,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn("fill-none stroke-[2.5]", strokeClasses[state]),
+                  d: path,
+                  strokeDasharray: state === "blocked" ? "4 4" : void 0,
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          label ? /* @__PURE__ */ jsx(
+            EdgeLabel,
+            {
+              className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              emphasis: state === "active" ? "active" : "subtle",
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ConnectorEdge.displayName = "ConnectorEdge";
+export {
+  ConnectorEdge
+};

package/dist/components/connector-edge/index.js

@@ -0,0 +1,6 @@
+import {
+  ConnectorEdge
+} from "./connector-edge";
+export {
+  ConnectorEdge
+};

package/dist/components/data-list/data-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";

package/dist/components/edge-label/edge-label.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const emphasisClasses = {
+  active: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+  subtle: "border-border/60 bg-background/90 text-muted-foreground"
+};
+const EdgeLabel = forwardRef(
+  ({ className, emphasis = "subtle", ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
+        emphasisClasses[emphasis],
+        className
+      ),
+      "data-emphasis": emphasis,
+      ref,
+      ...props
+    }
+  )
+);
+EdgeLabel.displayName = "EdgeLabel";
+export {
+  EdgeLabel
+};

package/dist/components/edge-label/index.js

@@ -0,0 +1,4 @@
+import { EdgeLabel } from "./edge-label";
+export {
+  EdgeLabel
+};