@vllnt/ui 0.2.1-canary.4abeac1 → 0.2.1-canary.7fde2d1

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

@@ -306,6 +306,9 @@ import {
   ChatDockSection
 } from "./chat-dock-section";
 import { GlassPanel } from "./glass-panel";
+import {
+  InfinitePlane
+} from "./infinite-plane";
 import { LeftRail } from "./left-rail";
 import {
   MiniMapPanel
@@ -323,6 +326,12 @@ import { Sidebar } from "./sidebar";
 import { SidebarProvider, useSidebar } from "./sidebar-provider";
 import { TableOfContents } from "./table-of-contents";
 import { TopBar } from "./top-bar";
+import {
+  ViewportBookmarks
+} from "./viewport-bookmarks";
+import {
+  WorldBreadcrumbs
+} from "./world-breadcrumbs";
 import { ZoomHUD } from "./zoom-hud";
 import {
   ActivityLog
@@ -530,15 +539,33 @@ import {
   useFlowDiagram
 } from "./flow-diagram";
 import { AnchorPort } from "./anchor-port";
+import {
+  CommentPin
+} from "./comment-pin";
 import {
   ConnectorEdge
 } from "./connector-edge";
 import { EdgeLabel } from "./edge-label";
 import { GroupHull } from "./group-hull";
+import {
+  LiveCursor
+} from "./live-cursor";
 import {
   ObjectCard
 } from "./object-card";
 import { ObjectHandle } from "./object-handle";
+import {
+  PresenceStack
+} from "./presence-stack";
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+import {
+  SelectionPresence
+} from "./selection-presence";
+import {
+  ThreadBubble
+} from "./thread-bubble";
 import {
   ConversationEmpty,
   ConversationHeader,
@@ -633,6 +660,7 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  CommentPin,
   CommonMistake,
   Comparison,
   CompletionDialog,
@@ -737,6 +765,7 @@ export {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  InfinitePlane,
   InlineInput,
   Input,
   InputOTP,
@@ -750,6 +779,7 @@ export {
   LearningObjectives,
   LeftRail,
   LineChart,
+  LiveCursor,
   LiveFeed,
   MDXContent,
   MarketTreemap,
@@ -798,6 +828,8 @@ export {
   PopoverContent,
   PopoverTrigger,
   Prerequisites,
+  PresenceStack,
+  PresenceSyncIndicator,
   ProTip,
   ProfileSection,
   ProgressBar,
@@ -835,6 +867,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  SelectionPresence,
   Separator,
   SeverityBadge,
   ShareDialog,
@@ -890,6 +923,7 @@ export {
   ThemeProvider,
   ThemeToggle,
   ThinkingBlock,
+  ThreadBubble,
   TickerTape,
   Toast,
   ToastAction,
@@ -916,9 +950,11 @@ export {
   UsageBreakdown,
   VideoEmbed,
   ViewSwitcher,
+  ViewportBookmarks,
   WalletCard,
   Watchlist,
   WorkspaceSwitcher,
+  WorldBreadcrumbs,
   WorldClockBar,
   ZoomHUD,
   alertVariants,

package/dist/components/infinite-plane/index.js

@@ -0,0 +1,6 @@
+import {
+  InfinitePlane
+} from "./infinite-plane";
+export {
+  InfinitePlane
+};

package/dist/components/infinite-plane/infinite-plane.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Infinite plane"
+};
+const safeSpacing = (value) => value < 4 ? 4 : value;
+const safeZoom = (value) => {
+  if (value < 0.1) {
+    return 0.1;
+  }
+  if (value > 10) {
+    return 10;
+  }
+  return value;
+};
+const buildBackground = (input) => {
+  if (input.pattern === "blank") {
+    return {};
+  }
+  const size = safeSpacing(input.spacing) * safeZoom(input.zoom);
+  const pos = `${input.translate.x}px ${input.translate.y}px`;
+  if (input.pattern === "grid") {
+    return {
+      backgroundImage: "linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)",
+      backgroundPosition: pos,
+      backgroundSize: `${size}px ${size}px`
+    };
+  }
+  return {
+    backgroundImage: "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)",
+    backgroundPosition: pos,
+    backgroundSize: `${size}px ${size}px`
+  };
+};
+const InfinitePlane = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      labels,
+      pattern = "dot",
+      spacing = 32,
+      translate = { x: 0, y: 0 },
+      zoom = 1,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const background = buildBackground({ pattern, spacing, translate, zoom });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full overflow-hidden bg-background",
+          className
+        ),
+        "data-infinite-plane": true,
+        "data-infinite-plane-pattern": pattern,
+        ref,
+        role: "region",
+        style: background,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+InfinitePlane.displayName = "InfinitePlane";
+export {
+  InfinitePlane
+};

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/presence-stack/index.js

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

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

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATUS_DOT = {
+  active: "bg-emerald-500",
+  away: "bg-amber-500",
+  idle: "bg-muted-foreground",
+  offline: "bg-muted-foreground/40"
+};
+const DEFAULT_LABELS = {
+  overflowSuffix: "more",
+  region: "Live presence"
+};
+const Avatar = (props) => {
+  const { user } = props;
+  const status = user.status ?? "active";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative -ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full border-2 border-background text-[11px] font-semibold text-white shadow-sm first:ml-0",
+      "data-presence-stack-status": status,
+      "data-presence-stack-user": user.id,
+      style: { backgroundColor: user.color ?? "var(--foreground)" },
+      title: user.name,
+      children: [
+        user.initial,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-background",
+              STATUS_DOT[status]
+            ),
+            "data-presence-stack-dot": true
+          }
+        )
+      ]
+    }
+  );
+};
+const PresenceStack = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      max = 5,
+      onOverflowActivate,
+      users,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const visible = max >= users.length ? users : users.slice(0, max);
+    const hidden = users.length - visible.length;
+    const handleOverflow = () => {
+      onOverflowActivate?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("inline-flex items-center pl-2", className),
+        "data-presence-stack": true,
+        ref,
+        role: "group",
+        ...rest,
+        children: [
+          visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
+          hidden > 0 ? renderOverflow({
+            count: hidden,
+            handleClick: handleOverflow,
+            handlerProvided: Boolean(onOverflowActivate),
+            labels: resolvedLabels
+          }) : null
+        ]
+      }
+    );
+  }
+);
+PresenceStack.displayName = "PresenceStack";
+const renderOverflow = (input) => {
+  const text = `+${input.count}`;
+  const aria = `${input.count} ${input.labels.overflowSuffix}`;
+  const className = "relative -ml-2 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-background bg-muted px-1.5 text-[10px] font-semibold text-muted-foreground shadow-sm";
+  if (input.handlerProvided) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": aria,
+        className: cn(
+          className,
+          "transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-presence-stack-overflow": true,
+        onClick: input.handleClick,
+        type: "button",
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": aria, className, "data-presence-stack-overflow": true, children: text });
+};
+export {
+  PresenceStack
+};

package/dist/components/presence-sync-indicator/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+export {
+  PresenceSyncIndicator
+};

package/dist/components/presence-sync-indicator/presence-sync-indicator.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  error: "Sync error",
+  live: "Live",
+  offline: "Offline",
+  reconnecting: "Reconnecting",
+  syncing: "Syncing"
+};
+const STATE_DOT = {
+  error: "bg-red-500",
+  live: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  reconnecting: "bg-amber-500 animate-pulse",
+  syncing: "bg-blue-500 animate-pulse"
+};
+const STATE_TEXT = {
+  error: "text-red-700 dark:text-red-300",
+  live: "text-emerald-700 dark:text-emerald-300",
+  offline: "text-muted-foreground",
+  reconnecting: "text-amber-700 dark:text-amber-300",
+  syncing: "text-blue-700 dark:text-blue-300"
+};
+const DEFAULT_LABELS = {
+  region: "Presence sync"
+};
+const PresenceSyncIndicator = forwardRef((props, ref) => {
+  const { className, label, labels, state, status, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const text = label ?? STATE_LABEL[state];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `${resolvedLabels.region}: ${STATE_LABEL[state]}`,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-1 text-[11px] shadow-sm",
+        className
+      ),
+      "data-presence-state": state,
+      "data-presence-sync": true,
+      ref,
+      role: "status",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("h-1.5 w-1.5 rounded-full", STATE_DOT[state]),
+            "data-presence-sync-dot": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("font-medium", STATE_TEXT[state]), children: text }),
+        status ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[10px] text-muted-foreground",
+            "data-presence-sync-status": true,
+            children: status
+          }
+        ) : null
+      ]
+    }
+  );
+});
+PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
+export {
+  PresenceSyncIndicator
+};

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/thread-bubble/index.js

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