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

package/dist/components/index.js

@@ -62,6 +62,26 @@ import { Label } from "./label";
 import { NumberInput } from "./number-input";
 import { PasswordInput } from "./password-input";
 import { Switch } from "./switch";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+} from "./form";
+import {
+  MultiSelect
+} from "./multi-select";
+import { TagsInput } from "./tags-input";
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+} from "./segmented-control";
 import {
   toast,
   Toast,
@@ -275,13 +295,44 @@ import {
 } from "./world-clock-bar";
 import { CodeBlock } from "./code-block";
 import { MDXContent } from "./mdx-content";
+import {
+  CanvasShell
+} from "./canvas-shell";
+import {
+  CanvasView
+} from "./canvas-view";
+import { BottomBar } from "./bottom-bar";
+import {
+  ChatDockSection
+} from "./chat-dock-section";
+import { GlassPanel } from "./glass-panel";
+import {
+  InfinitePlane
+} from "./infinite-plane";
+import { LeftRail } from "./left-rail";
+import {
+  MiniMapPanel
+} from "./mini-map-panel";
+import {
+  OverviewBoard,
+  OverviewCard
+} from "./overview-board";
 import {
   NavbarSaas,
   useMobile
 } from "./navbar-saas";
+import { RightDock } from "./right-dock";
 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
 } from "./activity-log";
@@ -384,7 +435,25 @@ import {
   Prerequisites,
   Summary
 } from "./learning-objectives";
+import {
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule
+} from "./curriculum";
 import { ProgressBar } from "./progress-bar";
+import {
+  ProgressCard
+} from "./progress-card";
+import {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+} from "./progress-tracker";
 import {
   CommonMistake,
   ProTip
@@ -459,6 +528,9 @@ import {
 import {
   ViewSwitcher
 } from "./view-switcher";
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
 import {
   FlowControls,
   FlowDiagram,
@@ -466,6 +538,47 @@ import {
   FlowFullscreen,
   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 {
+  RunTimeline
+} from "./run-timeline";
+import {
+  SelectionPresence
+} from "./selection-presence";
+import {
+  ThreadBubble
+} from "./thread-bubble";
+import {
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle
+} from "./conversation-thread";
 import { InlineInput } from "./inline-input";
 import {
   ModelSelector
@@ -498,6 +611,7 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertTitle,
+  AnchorPort,
   AnimatedText,
   Annotation,
   AreaChart,
@@ -511,11 +625,14 @@ export {
   BeforeAfter,
   BlogCard,
   BorderBeam,
+  BottomBar,
   Breadcrumb,
   Button,
   Calendar,
   Callout,
   CandlestickChart,
+  CanvasShell,
+  CanvasView,
   Card,
   CardContent,
   CardDescription,
@@ -528,6 +645,7 @@ export {
   CarouselNext,
   CarouselPrevious,
   CategoryFilter,
+  ChatDockSection,
   Checkbox,
   Checklist,
   CodeBlock,
@@ -545,9 +663,11 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  CommentPin,
   CommonMistake,
   Comparison,
   CompletionDialog,
+  ConnectorEdge,
   ContentCard,
   ContentIntro,
   ContextMenu,
@@ -565,9 +685,20 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle,
   CookieConsent,
   CountdownTimer,
   CreditBadge,
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule,
   DataList,
   DataListItem,
   DataListLabel,
@@ -609,6 +740,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EdgeLabel,
   Exercise,
   FAQ,
   FAQItem,
@@ -621,12 +753,22 @@ export {
   FlowDiagram,
   FlowErrorBoundary,
   FlowFullscreen,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  GlassPanel,
   Glossary,
+  GroupHull,
   Highlight,
   HorizontalScrollRow,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  InfinitePlane,
   InlineInput,
   Input,
   InputOTP,
@@ -638,7 +780,9 @@ export {
   Label,
   LangProvider,
   LearningObjectives,
+  LeftRail,
   LineChart,
+  LiveCursor,
   LiveFeed,
   MDXContent,
   MarketTreemap,
@@ -660,7 +804,9 @@ export {
   MenubarSubTrigger,
   MenubarTrigger,
   MetricGauge,
+  MiniMapPanel,
   ModelSelector,
+  MultiSelect,
   NavbarSaas,
   NavigationMenu,
   NavigationMenuContent,
@@ -672,7 +818,11 @@ export {
   NavigationMenuViewport,
   NumberInput,
   NumberTicker,
+  ObjectCard,
+  ObjectHandle,
   OrderBook,
+  OverviewBoard,
+  OverviewCard,
   Pagination,
   PasswordInput,
   PlanBadge,
@@ -681,9 +831,19 @@ export {
   PopoverContent,
   PopoverTrigger,
   Prerequisites,
+  PresenceStack,
+  PresenceSyncIndicator,
   ProTip,
   ProfileSection,
   ProgressBar,
+  ProgressCard,
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
   Quiz,
   RadioGroup,
   RadioGroupItem,
@@ -691,12 +851,16 @@ export {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  RightDock,
   RoleBadge,
+  RunTimeline,
   ScopeSelector,
   ScrollArea,
   ScrollBar,
   SearchBar,
   SearchDialog,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   SelectContent,
   SelectGroup,
@@ -707,6 +871,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  SelectionPresence,
   Separator,
   SeverityBadge,
   ShareDialog,
@@ -756,11 +921,13 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  TagsInput,
   Terminal,
   Textarea,
   ThemeProvider,
   ThemeToggle,
   ThinkingBlock,
+  ThreadBubble,
   TickerTape,
   Toast,
   ToastAction,
@@ -775,6 +942,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TopBar,
   Tour,
   TruncatedText,
   TutorialCard,
@@ -786,9 +954,13 @@ export {
   UsageBreakdown,
   VideoEmbed,
   ViewSwitcher,
+  ViewportBookmarks,
   WalletCard,
   Watchlist,
+  WorkspaceSwitcher,
+  WorldBreadcrumbs,
   WorldClockBar,
+  ZoomHUD,
   alertVariants,
   avatarGroupVariants,
   avatarItemVariants,
@@ -800,13 +972,17 @@ export {
   dotVariants,
   mdxComponents,
   navigationMenuTriggerStyle,
+  segmentedControlItemVariants,
+  segmentedControlVariants,
   severityBadgeVariants,
   statCardVariants,
   statusIndicatorVariants,
   toast,
   toggleVariants,
   useFlowDiagram,
+  useFormField,
   useMobile,
+  useProgressTrackerContext,
   useSidebar,
   useSocialFab
 };

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

@@ -0,0 +1,4 @@
+import { LeftRail } from "./left-rail";
+export {
+  LeftRail
+};

package/dist/components/left-rail/left-rail.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const LeftRail = forwardRef(
+  ({ children, className, footer, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 flex-col items-center gap-2", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col items-center gap-2", children: footer }) : null
+      ]
+    }
+  )
+);
+LeftRail.displayName = "LeftRail";
+export {
+  LeftRail
+};

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

@@ -0,0 +1,6 @@
+import {
+  MiniMapPanel
+} from "./mini-map-panel";
+export {
+  MiniMapPanel
+};

package/dist/components/mini-map-panel/mini-map-panel.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const MiniMapPanel = forwardRef(
+  ({ className, markers = [], title = "Overview", viewport, world, ...props }, ref) => {
+    const viewportWidth = Math.max(
+      viewport.width / viewport.zoom / world.width * 100,
+      8
+    );
+    const viewportHeight = Math.max(
+      viewport.height / viewport.zoom / world.height * 100,
+      8
+    );
+    const viewportLeft = Math.min(
+      Math.max(viewport.x / world.width * 100, 0),
+      100 - viewportWidth
+    );
+    const viewportTop = Math.min(
+      Math.max(viewport.y / world.height * 100, 0),
+      100 - viewportHeight
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
+              "Zoom ",
+              Math.round(viewport.zoom * 100),
+              "%"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background", children: [
+            markers.map((marker) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground",
+                style: {
+                  left: `${marker.x / world.width * 100}%`,
+                  top: `${marker.y / world.height * 100}%`
+                },
+                title: marker.label
+              },
+              marker.id
+            )),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute border border-foreground/80 bg-transparent",
+                style: {
+                  height: `${viewportHeight}%`,
+                  left: `${viewportLeft}%`,
+                  top: `${viewportTop}%`,
+                  width: `${viewportWidth}%`
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+MiniMapPanel.displayName = "MiniMapPanel";
+export {
+  MiniMapPanel
+};

package/dist/components/multi-select/index.js

@@ -0,0 +1,6 @@
+import {
+  MultiSelect
+} from "./multi-select";
+export {
+  MultiSelect
+};