@vllnt/ui 0.2.1-canary.ab2c69a → 0.2.1-canary.b3f1dff

package/dist/components/bottom-activity-strip/bottom-activity-strip.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  empty: "No recent activity",
+  region: "Recent activity"
+};
+const ChipBody = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone])
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", "data-strip-event-ts": true, children: event.ts })
+  ] });
+};
+const Chip = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  if (event.onActivate) {
+    const handleClick = () => {
+      event.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-strip-event": event.id,
+        "data-strip-event-tone": tone,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(ChipBody, { event })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px]",
+      "data-strip-event": event.id,
+      "data-strip-event-tone": tone,
+      children: /* @__PURE__ */ jsx(ChipBody, { event })
+    }
+  );
+};
+const BottomActivityStrip = forwardRef((props, ref) => {
+  const { className, events, labels, maxEvents, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = maxEvents === void 0 || maxEvents >= events.length ? events : events.slice(0, maxEvents);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full items-center gap-2 overflow-x-auto rounded-md border border-border bg-background/90 px-2 py-1 text-foreground",
+        className
+      ),
+      "data-bottom-activity-strip": true,
+      ref,
+      ...rest,
+      children: visible.length === 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "px-2 text-[11px] text-muted-foreground",
+          "data-strip-state": "empty",
+          children: resolvedLabels.empty
+        }
+      ) : visible.map((event) => /* @__PURE__ */ jsx(Chip, { event }, event.id))
+    }
+  );
+});
+BottomActivityStrip.displayName = "BottomActivityStrip";
+export {
+  BottomActivityStrip
+};

package/dist/components/bottom-activity-strip/index.js

@@ -0,0 +1,6 @@
+import {
+  BottomActivityStrip
+} from "./bottom-activity-strip";
+export {
+  BottomActivityStrip
+};

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
+};

package/dist/components/heat-overlay/heat-overlay.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils";
+const TONE_FILL = {
+  cool: "fill-blue-500",
+  danger: "fill-red-500",
+  neutral: "fill-foreground",
+  warn: "fill-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Heat overlay"
+};
+const clamp01 = (v) => {
+  if (v < 0) {
+    return 0;
+  }
+  if (v > 1) {
+    return 1;
+  }
+  return v;
+};
+const HeatBlob = (props) => {
+  const { defaultTone, gradientId, intensity, point } = props;
+  const weight = clamp01(point.weight);
+  const tone = point.tone ?? defaultTone;
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      className: cn("mix-blend-multiply", TONE_FILL[tone]),
+      cx: point.x,
+      cy: point.y,
+      "data-heat-point": point.id,
+      "data-heat-tone": tone,
+      fill: `url(#${gradientId})`,
+      fillOpacity: weight * 0.6,
+      r: Math.max(8, intensity * weight)
+    }
+  );
+};
+const HeatOverlay = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      defaultTone = "warn",
+      intensity = 48,
+      labels,
+      points,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const gradientId = useId();
+    if (points.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full",
+          className
+        ),
+        "data-heat-overlay": true,
+        ref,
+        role: "img",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { cx: "50%", cy: "50%", id: gradientId, r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "currentColor", stopOpacity: "0.4" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+          ] }) }),
+          points.map((point) => /* @__PURE__ */ jsx(
+            HeatBlob,
+            {
+              defaultTone,
+              gradientId,
+              intensity,
+              point
+            },
+            point.id
+          ))
+        ]
+      }
+    );
+  }
+);
+HeatOverlay.displayName = "HeatOverlay";
+export {
+  HeatOverlay
+};

package/dist/components/heat-overlay/index.js

@@ -0,0 +1,6 @@
+import {
+  HeatOverlay
+} from "./heat-overlay";
+export {
+  HeatOverlay
+};

package/dist/components/index.js

@@ -539,24 +539,54 @@ import {
   useFlowDiagram
 } from "./flow-diagram";
 import { AnchorPort } from "./anchor-port";
+import {
+  BottomActivityStrip
+} from "./bottom-activity-strip";
+import {
+  CommentPin
+} from "./comment-pin";
 import {
   ConnectorEdge
 } from "./connector-edge";
 import { EdgeLabel } from "./edge-label";
 import { GroupHull } from "./group-hull";
+import {
+  HeatOverlay
+} from "./heat-overlay";
+import {
+  LiveCursor
+} from "./live-cursor";
+import {
+  MetricCluster
+} from "./metric-cluster";
 import {
   ObjectCard
 } from "./object-card";
 import { ObjectHandle } from "./object-handle";
+import {
+  PlaybackGhost
+} from "./playback-ghost";
 import {
   PresenceStack
 } from "./presence-stack";
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+import {
+  RunTimeline
+} from "./run-timeline";
 import {
   SelectionPresence
 } from "./selection-presence";
+import {
+  StateBadgeOverlay
+} from "./state-badge-overlay";
 import {
   ThreadBubble
 } from "./thread-bubble";
+import {
+  TimelineScrubber
+} from "./timeline-scrubber";
 import {
   ConversationEmpty,
   ConversationHeader,
@@ -613,6 +643,7 @@ export {
   BeforeAfter,
   BlogCard,
   BorderBeam,
+  BottomActivityStrip,
   BottomBar,
   Breadcrumb,
   Button,
@@ -651,6 +682,7 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  CommentPin,
   CommonMistake,
   Comparison,
   CompletionDialog,
@@ -750,6 +782,7 @@ export {
   GlassPanel,
   Glossary,
   GroupHull,
+  HeatOverlay,
   Highlight,
   HorizontalScrollRow,
   HoverCard,
@@ -769,6 +802,7 @@ export {
   LearningObjectives,
   LeftRail,
   LineChart,
+  LiveCursor,
   LiveFeed,
   MDXContent,
   MarketTreemap,
@@ -789,6 +823,7 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  MetricCluster,
   MetricGauge,
   MiniMapPanel,
   ModelSelector,
@@ -812,12 +847,14 @@ export {
   Pagination,
   PasswordInput,
   PlanBadge,
+  PlaybackGhost,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
   Prerequisites,
   PresenceStack,
+  PresenceSyncIndicator,
   ProTip,
   ProfileSection,
   ProgressBar,
@@ -838,6 +875,7 @@ export {
   ResizablePanelGroup,
   RightDock,
   RoleBadge,
+  RunTimeline,
   ScopeSelector,
   ScrollArea,
   ScrollBar,
@@ -881,6 +919,7 @@ export {
   SparklineGrid,
   Spinner,
   StatCard,
+  StateBadgeOverlay,
   StatusBoard,
   StatusIndicator,
   Step,
@@ -913,6 +952,7 @@ export {
   ThinkingBlock,
   ThreadBubble,
   TickerTape,
+  TimelineScrubber,
   Toast,
   ToastAction,
   ToastClose,

package/dist/components/live-cursor/index.js

@@ -0,0 +1,6 @@
+import {
+  LiveCursor
+} from "./live-cursor";
+export {
+  LiveCursor
+};

package/dist/components/live-cursor/live-cursor.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Live cursor"
+};
+const LiveCursor = forwardRef(
+  (props, ref) => {
+    const { className, color, labels, name, status, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const resolvedColor = color ?? "var(--foreground)";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-30 flex items-start gap-1",
+          className
+        ),
+        "data-live-cursor": true,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "-ml-1 -mt-1 drop-shadow-sm",
+              "data-live-cursor-pointer": true,
+              fill: resolvedColor,
+              height: 18,
+              viewBox: "0 0 16 18",
+              width: 16,
+              children: /* @__PURE__ */ jsx("path", { d: "M0 0 L0 14 L4 11 L7 17 L10 16 L7 10 L13 10 Z" })
+            }
+          ),
+          name === null || name === void 0 ? null : /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "ml-2 mt-2 inline-flex flex-col rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+              "data-live-cursor-chip": true,
+              style: { backgroundColor: resolvedColor },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: name }),
+                status ? /* @__PURE__ */ jsx("span", { className: "text-[9px] opacity-80", "data-live-cursor-status": true, children: status }) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LiveCursor.displayName = "LiveCursor";
+export {
+  LiveCursor
+};

package/dist/components/metric-cluster/index.js

@@ -0,0 +1,6 @@
+import {
+  MetricCluster
+} from "./metric-cluster";
+export {
+  MetricCluster
+};

package/dist/components/metric-cluster/metric-cluster.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const ANCHOR_TRANSFORM = {
+  "bottom-left": "translate(-100%, 100%)",
+  "bottom-right": "translate(0%, 100%)",
+  "top-left": "translate(-100%, -100%)",
+  "top-right": "translate(0%, -100%)"
+};
+const DEFAULT_LABELS = {
+  region: "Metric cluster"
+};
+const Row = (props) => {
+  const { entry } = props;
+  const tone = entry.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center justify-between gap-2 text-[11px]",
+      "data-metric-cluster-row": entry.id,
+      "data-metric-cluster-tone": tone,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone])
+            }
+          ),
+          entry.label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: entry.value })
+      ]
+    }
+  );
+};
+const MetricCluster = forwardRef(
+  (props, ref) => {
+    const {
+      anchor = "top-right",
+      className,
+      labels,
+      metrics,
+      title,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
+          className
+        ),
+        "data-metric-cluster": true,
+        "data-metric-cluster-anchor": anchor,
+        ref,
+        role: "status",
+        style: {
+          left: x,
+          top: y,
+          transform: ANCHOR_TRANSFORM[anchor]
+        },
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ jsx(
+            "header",
+            {
+              className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+              "data-metric-cluster-title": true,
+              children: title
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: metrics.map((entry) => /* @__PURE__ */ jsx(Row, { entry }, entry.id)) })
+        ]
+      }
+    );
+  }
+);
+MetricCluster.displayName = "MetricCluster";
+export {
+  MetricCluster
+};

package/dist/components/playback-ghost/index.js

@@ -0,0 +1,6 @@
+import {
+  PlaybackGhost
+} from "./playback-ghost";
+export {
+  PlaybackGhost
+};