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

package/dist/components/run-timeline/run-timeline.js

@@ -0,0 +1,221 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_FILL = {
+  complete: "bg-emerald-500/70",
+  failed: "bg-red-500/70",
+  queued: "bg-amber-500/70",
+  running: "bg-blue-500/70",
+  stopped: "bg-muted-foreground/40"
+};
+const STATE_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  queued: "Queued",
+  running: "Running",
+  stopped: "Stopped"
+};
+const DEFAULT_LABELS = {
+  empty: "No phases",
+  region: "Run timeline"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const Endpoints = (props) => {
+  const fmt = props.format;
+  const showCursor = typeof props.cursor === "number";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11px] text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "data-run-timeline-start": true, children: fmt ? fmt(props.start) : props.start }),
+    showCursor ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-semibold text-foreground",
+        "data-run-timeline-cursor-label": true,
+        children: fmt ? fmt(props.cursor ?? 0) : props.cursor
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { "data-run-timeline-end": true, children: fmt ? fmt(props.end) : props.end })
+  ] });
+};
+const PhaseBar = (props) => {
+  const { laneIndex, laneTotal, phase, span, start } = props;
+  const left = clamp((phase.start - start) / span, 0, 1) * 100;
+  const right = clamp((phase.end - start) / span, 0, 1) * 100;
+  const width = Math.max(right - left, 0.5);
+  const top = laneIndex / laneTotal * 100;
+  const height = 100 / laneTotal;
+  const state = phase.state ?? "running";
+  const sharedStyle = {
+    height: `${height}%`,
+    left: `${left}%`,
+    top: `${top}%`,
+    width: `${width}%`
+  };
+  const ariaLabel = `${STATE_LABEL[state]} ${phase.start} \u2192 ${phase.end}`;
+  if (phase.onActivate) {
+    const handleClick = () => {
+      phase.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute flex items-center justify-start overflow-hidden truncate rounded-sm border border-border/50 px-1 text-left text-[10px] text-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          STATE_FILL[state]
+        ),
+        "data-run-phase": phase.id,
+        "data-run-phase-state": state,
+        onClick: handleClick,
+        style: sharedStyle,
+        type: "button",
+        children: phase.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "absolute flex items-center justify-start overflow-hidden truncate rounded-sm border border-border/50 px-1 text-[10px] text-foreground",
+        STATE_FILL[state]
+      ),
+      "data-run-phase": phase.id,
+      "data-run-phase-state": state,
+      role: "img",
+      style: sharedStyle,
+      children: phase.label
+    }
+  );
+};
+const TrackBody = (props) => {
+  const { cursor, end, lanes, phases, start } = props;
+  const span = end - start;
+  const cursorRatio = typeof cursor === "number" ? clamp((cursor - start) / span, 0, 1) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex w-24 flex-col gap-px text-[10px] uppercase tracking-wide text-muted-foreground", children: lanes.map((lane) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-7 items-center px-2",
+        "data-run-timeline-lane": lane.id,
+        children: lane.label
+      },
+      lane.id
+    )) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex-1 overflow-hidden rounded-md border border-border bg-muted/20",
+        "data-run-timeline-track": true,
+        style: { height: `${lanes.length * 28}px` },
+        children: [
+          phases.map((phase) => {
+            const index = lanes.findIndex(
+              (lane) => lane.id === (phase.laneId ?? "default")
+            );
+            if (index === -1) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              PhaseBar,
+              {
+                laneIndex: index,
+                laneTotal: lanes.length,
+                phase,
+                span,
+                start
+              },
+              phase.id
+            );
+          }),
+          cursorRatio === null ? null : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-0 bottom-0 w-px bg-foreground",
+              "data-run-timeline-cursor": true,
+              style: { left: `${cursorRatio * 100}%` }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+const resolveLanes = (explicit) => {
+  if (explicit && explicit.length > 0) {
+    return explicit;
+  }
+  return [{ id: "default", label: "Run" }];
+};
+const RunTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      cursor,
+      end,
+      formatValue,
+      labels,
+      lanes,
+      phases,
+      start,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const safeEnd = end <= start ? start + 1 : end;
+    const resolvedLanes = resolveLanes(lanes);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("flex w-full flex-col gap-2", className),
+        "data-run-timeline": true,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Endpoints,
+            {
+              cursor,
+              end: safeEnd,
+              format: formatValue,
+              start
+            }
+          ),
+          phases.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground",
+              "data-run-timeline-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx(
+            TrackBody,
+            {
+              cursor,
+              end: safeEnd,
+              lanes: resolvedLanes,
+              phases,
+              start
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RunTimeline.displayName = "RunTimeline";
+export {
+  RunTimeline
+};

package/dist/components/segmented-control/index.js

@@ -0,0 +1,12 @@
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+} from "./segmented-control";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+};

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const segmentedControlVariants = cva(
+  "inline-flex w-full items-center rounded-lg bg-muted p-1 text-muted-foreground",
+  {
+    defaultVariants: {
+      size: "default"
+    },
+    variants: {
+      size: {
+        default: "min-h-10",
+        lg: "min-h-11",
+        sm: "min-h-9"
+      }
+    }
+  }
+);
+const segmentedControlItemVariants = cva(
+  "inline-flex flex-1 items-center justify-center rounded-md px-3 text-sm font-medium whitespace-nowrap transition-all outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
+  {
+    defaultVariants: {
+      size: "default"
+    },
+    variants: {
+      size: {
+        default: "min-h-8",
+        lg: "min-h-9 px-4",
+        sm: "min-h-7 px-2.5 text-xs"
+      }
+    }
+  }
+);
+const SegmentedControl = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    className: cn(segmentedControlVariants({ size }), className),
+    ref,
+    type: "single",
+    ...props
+  }
+));
+SegmentedControl.displayName = "SegmentedControl";
+const SegmentedControlItem = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Item,
+  {
+    className: cn(segmentedControlItemVariants({ size }), className),
+    ref,
+    ...props
+  }
+));
+SegmentedControlItem.displayName = "SegmentedControlItem";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+};

package/dist/components/selection-presence/index.js

@@ -0,0 +1,6 @@
+import {
+  SelectionPresence
+} from "./selection-presence";
+export {
+  SelectionPresence
+};

package/dist/components/selection-presence/selection-presence.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Selection presence"
+};
+const SelectionPresence = forwardRef((props, ref) => {
+  const { className, color, height, labels, name, width, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const accent = color ?? "var(--foreground)";
+  const ariaLabel = typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "pointer-events-none absolute z-20 rounded-md border-2 border-dashed",
+        className
+      ),
+      "data-selection-presence": true,
+      ref,
+      role: "img",
+      style: {
+        backgroundColor: `color-mix(in srgb, ${accent} 10%, transparent)`,
+        borderColor: accent,
+        height,
+        left: x,
+        top: y,
+        width
+      },
+      ...rest,
+      children: name === null || name === void 0 ? null : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute -top-5 left-0 inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+          "data-selection-presence-chip": true,
+          style: { backgroundColor: accent },
+          children: name
+        }
+      )
+    }
+  );
+});
+SelectionPresence.displayName = "SelectionPresence";
+export {
+  SelectionPresence
+};

package/dist/components/spinner/unicode-spinner.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/tags-input/index.js

@@ -0,0 +1,4 @@
+import { TagsInput } from "./tags-input";
+export {
+  TagsInput
+};

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+function normalizeTag(tag) {
+  return tag.trim();
+}
+function getNormalizedTags(tags) {
+  return tags.map(normalizeTag).filter(
+    (tag, index, values) => tag.length > 0 && values.indexOf(tag) === index
+  );
+}
+function shouldAddTagFromKey(key) {
+  return key === "Enter" || key === ",";
+}
+function useTagsInputState({
+  defaultValue,
+  onValueChange,
+  value
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => getNormalizedTags(defaultValue)
+  );
+  const isControlled = value !== void 0;
+  const tags = React.useMemo(
+    () => getNormalizedTags(value ?? uncontrolledValue),
+    [uncontrolledValue, value]
+  );
+  const updateTags = React.useCallback(
+    (nextTags) => {
+      const normalizedTags = getNormalizedTags(nextTags);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedTags);
+      }
+      onValueChange?.(normalizedTags);
+    },
+    [isControlled, onValueChange]
+  );
+  return { tags, updateTags };
+}
+function useTagsInputHandlers({
+  disabled,
+  inputValue,
+  onKeyDown,
+  setInputValue,
+  tags,
+  updateTags
+}) {
+  const removeTag = React.useCallback(
+    (tagToRemove) => {
+      updateTags(tags.filter((tag) => tag !== tagToRemove));
+    },
+    [tags, updateTags]
+  );
+  const commitTag = React.useCallback(() => {
+    const nextTag = normalizeTag(inputValue);
+    if (nextTag.length === 0 || tags.includes(nextTag)) {
+      setInputValue("");
+      return;
+    }
+    updateTags([...tags, nextTag]);
+    setInputValue("");
+  }, [inputValue, setInputValue, tags, updateTags]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      if (shouldAddTagFromKey(event.key)) {
+        event.preventDefault();
+        commitTag();
+        return;
+      }
+      if ((event.key === "Backspace" || event.key === "Delete") && inputValue.length === 0) {
+        const lastTag = tags.at(-1);
+        if (lastTag) {
+          event.preventDefault();
+          removeTag(lastTag);
+        }
+      }
+    },
+    [commitTag, disabled, inputValue.length, onKeyDown, removeTag, tags]
+  );
+  return { handleKeyDown, removeTag };
+}
+function TagList({ disabled, onRemove, tags }) {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-sm text-foreground",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: tag }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Remove ${tag}`,
+            className: "rounded-sm text-muted-foreground outline-none ring-offset-background transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            disabled,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(tag);
+            },
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    },
+    tag
+  )) });
+}
+const TagsInput = React.forwardRef(
+  ({
+    className,
+    defaultValue = [],
+    disabled = false,
+    onBlur,
+    onKeyDown,
+    onValueChange,
+    placeholder = "Add a tag",
+    value,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = React.useState("");
+    const { tags, updateTags } = useTagsInputState({
+      defaultValue,
+      onValueChange,
+      value
+    });
+    const { handleKeyDown, removeTag } = useTagsInputHandlers({
+      disabled,
+      inputValue,
+      onKeyDown,
+      setInputValue,
+      tags,
+      updateTags
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": disabled || void 0,
+        className: cn(
+          "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        "data-disabled": disabled ? "true" : void 0,
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx(TagList, { disabled, onRemove: removeTag, tags }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              className: "min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+              disabled,
+              onBlur,
+              onChange: (event) => {
+                setInputValue(event.target.value);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder,
+              ref,
+              type: "text",
+              value: inputValue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TagsInput.displayName = "TagsInput";
+export {
+  TagsInput
+};

package/dist/components/thread-bubble/index.js

@@ -0,0 +1,6 @@
+import {
+  ThreadBubble
+} from "./thread-bubble";
+export {
+  ThreadBubble
+};

package/dist/components/thread-bubble/thread-bubble.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No replies yet",
+  region: "Comment thread"
+};
+const Message = (props) => {
+  const { message } = props;
+  return /* @__PURE__ */ jsxs("li", { className: "space-y-0.5", "data-thread-bubble-message": message.id, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-2 text-[10px]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-semibold",
+          "data-thread-bubble-author": true,
+          style: message.authorColor ? { color: message.authorColor } : void 0,
+          children: message.author
+        }
+      ),
+      message.ts ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-thread-bubble-ts": true, children: message.ts }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground", "data-thread-bubble-body": true, children: message.body })
+  ] });
+};
+const ThreadBubble = forwardRef(
+  (props, ref) => {
+    const { className, footer, labels, messages, onResolve, title, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const handleResolve = () => {
+      onResolve?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+          className
+        ),
+        "data-thread-bubble": true,
+        ref,
+        ...rest,
+        children: [
+          title || onResolve ? /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground", children: [
+            title ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", "data-thread-bubble-title": true, children: title }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+            onResolve ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-thread-bubble-resolve": true,
+                onClick: handleResolve,
+                type: "button",
+                children: "Resolve"
+              }
+            ) : null
+          ] }) : null,
+          messages.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "px-1 py-2 text-center text-[11px] text-muted-foreground",
+              "data-thread-bubble-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx("ul", { className: "space-y-2 overflow-y-auto", "data-thread-bubble-list": true, children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) }),
+          footer ? /* @__PURE__ */ jsx(
+            "footer",
+            {
+              className: "border-t border-border pt-2",
+              "data-thread-bubble-footer": true,
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThreadBubble.displayName = "ThreadBubble";
+export {
+  ThreadBubble
+};

package/dist/components/top-bar/index.js

@@ -0,0 +1,4 @@
+import { TopBar } from "./top-bar";
+export {
+  TopBar
+};

package/dist/components/top-bar/top-bar.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const TopBar = forwardRef(
+  ({ children, className, leading, subtitle, title, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
+          title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: subtitle }) : null
+          ] }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+TopBar.displayName = "TopBar";
+export {
+  TopBar
+};

package/dist/components/usage-breakdown/usage-breakdown.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";

package/dist/components/viewport-bookmarks/index.js

@@ -0,0 +1,6 @@
+import {
+  ViewportBookmarks
+} from "./viewport-bookmarks";
+export {
+  ViewportBookmarks
+};