@vllnt/ui 0.2.0 → 0.2.1-canary.73a93ee

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/checklist/checklist.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
+const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
 function ChecklistItemRow({
   isChecked,
   item,
@@ -133,6 +134,11 @@ function Checklist({
           `checklist:${persistKey}`,
           JSON.stringify([...newChecked])
         );
+        window.dispatchEvent(
+          new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
+            detail: { persistKey }
+          })
+        );
       } catch {
       }
     }
@@ -177,5 +183,6 @@ function Checklist({
   ] });
 }
 export {
+  CHECKLIST_PROGRESS_EVENT,
   Checklist
 };

package/dist/components/checklist/index.js

@@ -1,6 +1,8 @@
 import {
-  Checklist
+  Checklist,
+  CHECKLIST_PROGRESS_EVENT
 } from "./checklist";
 export {
+  CHECKLIST_PROGRESS_EVENT,
   Checklist
 };

package/dist/components/comment-pin/comment-pin.js

@@ -0,0 +1,104 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Comment",
+  unreadSuffix: "unread"
+};
+const STATE_FILL = {
+  open: "bg-foreground text-background",
+  resolved: "bg-muted text-muted-foreground"
+};
+const PinBody = (props) => {
+  const showBadge = typeof props.unread === "number" && props.unread > 0;
+  const useAccent = props.accent && props.state === "open";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "flex h-7 w-7 items-center justify-center rounded-full border border-background text-[11px] font-semibold shadow-sm",
+          STATE_FILL[props.state]
+        ),
+        "data-comment-pin-body": true,
+        style: useAccent ? { backgroundColor: props.accent, color: "white" } : void 0,
+        children: props.authorInitial ?? "\u2022"
+      }
+    ),
+    showBadge ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute -right-1 -top-1 inline-flex min-h-[14px] min-w-[14px] items-center justify-center rounded-full bg-red-500 px-1 text-[9px] font-medium text-white",
+        "data-comment-pin-unread": true,
+        children: props.unread
+      }
+    ) : null
+  ] });
+};
+const CommentPin = forwardRef(
+  (props, ref) => {
+    const {
+      authorInitial,
+      className,
+      color,
+      labels,
+      onActivate,
+      state = "open",
+      unread,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const showBadge = typeof unread === "number" && unread > 0;
+    const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
+    const handleClick = () => {
+      onActivate?.();
+    };
+    const body = /* @__PURE__ */ jsx(
+      PinBody,
+      {
+        accent: color,
+        authorInitial,
+        state,
+        unread
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+          className
+        ),
+        "data-comment-pin": true,
+        "data-comment-pin-state": state,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: onActivate ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": ariaLabel,
+            className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "data-comment-pin-trigger": true,
+            onClick: handleClick,
+            type: "button",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: body })
+      }
+    );
+  }
+);
+CommentPin.displayName = "CommentPin";
+export {
+  CommentPin
+};

package/dist/components/comment-pin/index.js

@@ -0,0 +1,6 @@
+import {
+  CommentPin
+} from "./comment-pin";
+export {
+  CommentPin
+};