@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

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

@@ -0,0 +1,504 @@
+"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) {
+  if (axis === "x") {
+    if (element.scrollWidth <= element.clientWidth) {
+      return false;
+    }
+    return supportsScrollableOverflow(
+      window.getComputedStyle(element).overflowX
+    );
+  }
+  if (element.scrollHeight <= element.clientHeight) {
+    return false;
+  }
+  return supportsScrollableOverflow(window.getComputedStyle(element).overflowY);
+}
+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, container) {
+  if (isHtmlElement(event.target) && hasScrollableAncestor(event.target, container, {
+    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({
+  containerRef,
+  nudgeViewport,
+  resetViewport,
+  setViewport,
+  viewportRef,
+  zoomStep
+}) {
+  const [isSpacePressed, setIsSpacePressed] = useState(false);
+  useCanvasWheel({
+    containerRef,
+    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);
+      }
+    },
+    []
+  );
+  const handleBlur = useCallback(() => {
+    setIsSpacePressed(false);
+  }, []);
+  return { handleBlur, handleKeyDown, handleKeyUp, isSpacePressed };
+}
+function useCanvasWheel({
+  containerRef,
+  nudgeViewport,
+  setViewport,
+  viewportRef,
+  zoomStep
+}) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleWheel = (event) => {
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        setViewport({
+          ...viewportRef.current,
+          zoom: viewportRef.current.zoom + (event.deltaY > 0 ? -zoomStep : zoomStep)
+        });
+        return;
+      }
+      if (!shouldHandleCanvasWheelEvent(event, container)) {
+        return;
+      }
+      event.preventDefault();
+      nudgeViewport(-event.deltaX, -event.deltaY);
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [containerRef, nudgeViewport, setViewport, viewportRef, zoomStep]);
+}
+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,
+  containerRef,
+  instructionsId,
+  isDragging,
+  isSpacePressed,
+  onBlur,
+  onKeyDown,
+  onKeyUp,
+  onPointerCancel,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  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),
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      onPointerCancel,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      ref: containerRef,
+      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,
+  isDragging,
+  overlay,
+  viewport
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 origin-top-left",
+          isDragging ? "" : "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 interactionRef = useRef(null);
+    const viewportState = useViewportState({
+      defaultViewport,
+      maxZoom,
+      minZoom,
+      onViewportChange
+    });
+    const keyboard = useCanvasKeyboardInteractions({
+      containerRef: interactionRef,
+      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,
+          {
+            containerRef: interactionRef,
+            instructionsId,
+            isDragging: pointer.isDragging,
+            isSpacePressed: keyboard.isSpacePressed,
+            onBlur: keyboard.handleBlur,
+            onKeyDown: keyboard.handleKeyDown,
+            onKeyUp: keyboard.handleKeyUp,
+            onPointerCancel: pointer.handlePointerCancel,
+            onPointerDown: pointer.handlePointerDown,
+            onPointerMove: pointer.handlePointerMove,
+            onPointerUp: pointer.handlePointerUp,
+            viewport: viewportState.viewport,
+            children: /* @__PURE__ */ jsx(
+              CanvasContentLayer,
+              {
+                isDragging: pointer.isDragging,
+                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/carousel/carousel.js

@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 import useEmblaCarousel from "embla-carousel-react";
@@ -43,6 +44,10 @@ function useCarouselLogic({
     setCanScrollPrevious(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
+  const onSelectReference = useRef(onSelect);
+  useEffect(() => {
+    onSelectReference.current = onSelect;
+  }, [onSelect]);
   const scrollPrevious = useCallback(() => {
     api?.scrollPrev();
   }, [api]);
@@ -71,17 +76,20 @@ function useCarouselLogic({
     if (!api) {
       return;
     }
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    const notifySelection = (selectedApi) => {
+      onSelectReference.current(selectedApi);
+    };
+    api.on("reInit", notifySelection);
+    api.on("select", notifySelection);
     const rafId = requestAnimationFrame(() => {
-      onSelect(api);
+      notifySelection(api);
     });
     return () => {
-      api?.off("select", onSelect);
-      api?.off("reInit", onSelect);
+      api?.off("select", notifySelection);
+      api?.off("reInit", notifySelection);
       cancelAnimationFrame(rafId);
     };
-  }, [api, onSelect]);
+  }, [api]);
   return {
     api,
     canScrollNext,
@@ -188,7 +196,7 @@ const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outl
     Button,
     {
       className: cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute size-8 rounded-full",
         orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -199,7 +207,7 @@ const CarouselPrevious = forwardRef(({ className, size = "icon", variant = "outl
       variant,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
@@ -212,7 +220,7 @@ const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline"
     Button,
     {
       className: cn(
-        "absolute h-8 w-8 rounded-full",
+        "absolute size-8 rounded-full",
         orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       ),
@@ -223,7 +231,7 @@ const CarouselNext = forwardRef(({ className, size = "icon", variant = "outline"
       variant,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
       ]
     }

package/dist/components/category-filter/category-filter.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function slugify(text) {
   return text.toLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\s\w-]/g, "").trim().replaceAll(/\s+/g, "-").replaceAll(/-+/g, "-").replaceAll(/^-+|-+$/g, "");
 }

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/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_oklch(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 p-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/checkbox/checkbox.js

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
   CheckboxPrimitive.Root,
   {
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      "peer size-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
       className
     ),
     ref: reference,
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
       CheckboxPrimitive.Indicator,
       {
         className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
       }
     )
   }