@vllnt/ui 0.2.0 → 0.2.1-canary.9c473e0

package/dist/components/form/form.js

@@ -0,0 +1,263 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils";
+import { Label } from "../label";
+const FormRootContext = React.createContext(
+  void 0
+);
+const FormItemContext = React.createContext(
+  void 0
+);
+function useFormRootContext(componentName) {
+  const context = React.useContext(FormRootContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within Form.`);
+  }
+  return context;
+}
+function useFormItemContext(componentName) {
+  const context = React.useContext(FormItemContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within FormItem.`);
+  }
+  return context;
+}
+function composeIds(...ids) {
+  const value = ids.filter((id) => id !== void 0 && id.length > 0).join(" ");
+  return value.length > 0 ? value : void 0;
+}
+function resolveItemId(baseId, generatedId, suffix) {
+  if (baseId === void 0) {
+    return `${generatedId}-${suffix}`;
+  }
+  return baseId.endsWith(`-${suffix}`) ? `${baseId}-${generatedId}` : `${baseId}-${suffix}-${generatedId}`;
+}
+function isNamedFormChild(child, name) {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+  const { type } = child;
+  if (typeof type === "string" || typeof type === "symbol") {
+    return false;
+  }
+  return "displayName" in type && type.displayName === name;
+}
+function hasVisibleContent(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return false;
+    }
+    if (typeof child === "string") {
+      return child.length > 0;
+    }
+    if (typeof child === "number") {
+      return true;
+    }
+    if (React.isValidElement(child)) {
+      const nestedChildren = child.props.children;
+      return nestedChildren === void 0 ? true : hasVisibleContent(nestedChildren);
+    }
+    return true;
+  });
+}
+function hasRenderedFormChild(children, name) {
+  return React.Children.toArray(children).some((child) => {
+    if (isNamedFormChild(child, name)) {
+      return name === "FormMessage" ? hasVisibleContent(child.props.children) : true;
+    }
+    if (React.isValidElement(child)) {
+      return hasRenderedFormChild(child.props.children, name);
+    }
+    return false;
+  });
+}
+const Form = React.forwardRef(
+  ({
+    className,
+    controlId,
+    descriptionId,
+    disabled = false,
+    invalid = false,
+    messageId,
+    required = false,
+    ...props
+  }, ref) => {
+    const value = React.useMemo(
+      () => ({
+        controlId,
+        descriptionId,
+        disabled,
+        invalid,
+        messageId,
+        required
+      }),
+      [controlId, descriptionId, disabled, invalid, messageId, required]
+    );
+    return /* @__PURE__ */ jsx(FormRootContext.Provider, { value, children: /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: cn("space-y-2", className),
+        "data-disabled": disabled ? "true" : void 0,
+        "data-invalid": invalid ? "true" : void 0,
+        ref,
+        ...props
+      }
+    ) });
+  }
+);
+Form.displayName = "Form";
+const FormItem = React.forwardRef(
+  ({
+    children,
+    className,
+    disabled: itemDisabled,
+    invalid: itemInvalid,
+    required: itemRequired,
+    ...props
+  }, ref) => {
+    const {
+      controlId: controlIdBase,
+      descriptionId: descriptionIdBase,
+      disabled,
+      invalid,
+      messageId: messageIdBase,
+      required
+    } = useFormRootContext("FormItem");
+    const generatedId = React.useId();
+    const hasDescription = hasRenderedFormChild(children, "FormDescription");
+    const hasMessage = hasRenderedFormChild(children, "FormMessage");
+    const effectiveDisabled = itemDisabled ?? disabled;
+    const effectiveInvalid = itemInvalid ?? invalid;
+    const effectiveRequired = itemRequired ?? required;
+    const value = React.useMemo(
+      () => ({
+        controlId: resolveItemId(controlIdBase, generatedId, "control"),
+        descriptionId: resolveItemId(
+          descriptionIdBase,
+          generatedId,
+          "description"
+        ),
+        disabled: effectiveDisabled,
+        hasDescription,
+        hasMessage,
+        invalid: effectiveInvalid,
+        messageId: resolveItemId(messageIdBase, generatedId, "message"),
+        required: effectiveRequired
+      }),
+      [
+        controlIdBase,
+        descriptionIdBase,
+        effectiveDisabled,
+        effectiveInvalid,
+        effectiveRequired,
+        generatedId,
+        hasDescription,
+        hasMessage,
+        messageIdBase
+      ]
+    );
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ref, ...props, children }) });
+  }
+);
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, htmlFor, ...props }, ref) => {
+  const { controlId, invalid } = useFormItemContext("FormLabel");
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(invalid && "text-destructive", className),
+      "data-invalid": invalid ? "true" : void 0,
+      htmlFor: htmlFor ?? controlId,
+      ref,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(
+  ({ disabled: controlDisabled, id: _id, required: controlRequired, ...props }, ref) => {
+    const {
+      controlId,
+      descriptionId,
+      disabled,
+      hasDescription,
+      hasMessage,
+      invalid,
+      messageId,
+      required
+    } = useFormItemContext("FormControl");
+    const describedBy = composeIds(
+      props["aria-describedby"],
+      hasDescription ? descriptionId : void 0,
+      invalid && hasMessage ? messageId : void 0
+    );
+    const effectiveDisabled = controlDisabled ?? disabled;
+    const effectiveRequired = controlRequired ?? required;
+    const nativeConstraintProps = {
+      disabled: effectiveDisabled || void 0,
+      required: effectiveRequired || void 0
+    };
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ...props,
+        ...nativeConstraintProps,
+        "aria-describedby": describedBy,
+        "aria-disabled": props["aria-disabled"] ?? (effectiveDisabled || void 0),
+        "aria-invalid": props["aria-invalid"] ?? (invalid || void 0),
+        "aria-required": props["aria-required"] ?? (effectiveRequired || void 0),
+        "data-disabled": effectiveDisabled ? "true" : void 0,
+        "data-invalid": invalid ? "true" : void 0,
+        id: controlId,
+        ref
+      }
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, id: _id, ...props }, ref) => {
+  const { descriptionId } = useFormItemContext("FormDescription");
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn("text-sm text-muted-foreground", className),
+      id: descriptionId,
+      ref
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ children, className, id: _id, ...props }, ref) => {
+  const { invalid, messageId } = useFormItemContext("FormMessage");
+  const hasChildren = hasVisibleContent(children);
+  if (!hasChildren) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn(
+        "text-sm font-medium",
+        invalid ? "text-destructive" : "text-foreground",
+        className
+      ),
+      id: messageId,
+      ref,
+      role: invalid ? "alert" : void 0,
+      children
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage
+};

package/dist/components/form/index.js

@@ -0,0 +1,16 @@
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from "./form";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage
+};

package/dist/components/glass-panel/glass-panel.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const GlassPanel = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_hsl(var(--foreground)/0.08)] backdrop-blur-xl",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+GlassPanel.displayName = "GlassPanel";
+export {
+  GlassPanel
+};

package/dist/components/glass-panel/index.js

@@ -0,0 +1,4 @@
+import { GlassPanel } from "./glass-panel";
+export {
+  GlassPanel
+};

package/dist/components/group-hull/group-hull.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const GroupHull = forwardRef(
+  ({ children, className, description, eyebrow, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-3 rounded-[1.5rem] border border-border/40" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative space-y-1", children: [
+          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: eyebrow }) : null,
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "max-w-[48ch] text-sm leading-6 text-muted-foreground", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex flex-1 flex-wrap items-start gap-4", children })
+      ]
+    }
+  )
+);
+GroupHull.displayName = "GroupHull";
+export {
+  GroupHull
+};

package/dist/components/group-hull/index.js

@@ -0,0 +1,4 @@
+import { GroupHull } from "./group-hull";
+export {
+  GroupHull
+};

package/dist/components/index.js

@@ -62,6 +62,24 @@ import { Label } from "./label";
 import { NumberInput } from "./number-input";
 import { PasswordInput } from "./password-input";
 import { Switch } from "./switch";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage
+} 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 +293,35 @@ 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 { 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 { ZoomHUD } from "./zoom-hud";
 import {
   ActivityLog
 } from "./activity-log";
@@ -385,6 +425,9 @@ import {
   Summary
 } from "./learning-objectives";
 import { ProgressBar } from "./progress-bar";
+import {
+  ProgressCard
+} from "./progress-card";
 import {
   CommonMistake,
   ProTip
@@ -459,6 +502,9 @@ import {
 import {
   ViewSwitcher
 } from "./view-switcher";
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
 import {
   FlowControls,
   FlowDiagram,
@@ -466,6 +512,16 @@ import {
   FlowFullscreen,
   useFlowDiagram
 } from "./flow-diagram";
+import { AnchorPort } from "./anchor-port";
+import {
+  ConnectorEdge
+} from "./connector-edge";
+import { EdgeLabel } from "./edge-label";
+import { GroupHull } from "./group-hull";
+import {
+  ObjectCard
+} from "./object-card";
+import { ObjectHandle } from "./object-handle";
 import { InlineInput } from "./inline-input";
 import {
   ModelSelector
@@ -498,6 +554,7 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertTitle,
+  AnchorPort,
   AnimatedText,
   Annotation,
   AreaChart,
@@ -511,11 +568,14 @@ export {
   BeforeAfter,
   BlogCard,
   BorderBeam,
+  BottomBar,
   Breadcrumb,
   Button,
   Calendar,
   Callout,
   CandlestickChart,
+  CanvasShell,
+  CanvasView,
   Card,
   CardContent,
   CardDescription,
@@ -528,6 +588,7 @@ export {
   CarouselNext,
   CarouselPrevious,
   CategoryFilter,
+  ChatDockSection,
   Checkbox,
   Checklist,
   CodeBlock,
@@ -548,6 +609,7 @@ export {
   CommonMistake,
   Comparison,
   CompletionDialog,
+  ConnectorEdge,
   ContentCard,
   ContentIntro,
   ContextMenu,
@@ -609,6 +671,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EdgeLabel,
   Exercise,
   FAQ,
   FAQItem,
@@ -621,7 +684,15 @@ export {
   FlowDiagram,
   FlowErrorBoundary,
   FlowFullscreen,
+  Form,
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  GlassPanel,
   Glossary,
+  GroupHull,
   Highlight,
   HorizontalScrollRow,
   HoverCard,
@@ -638,6 +709,7 @@ export {
   Label,
   LangProvider,
   LearningObjectives,
+  LeftRail,
   LineChart,
   LiveFeed,
   MDXContent,
@@ -660,7 +732,9 @@ export {
   MenubarSubTrigger,
   MenubarTrigger,
   MetricGauge,
+  MiniMapPanel,
   ModelSelector,
+  MultiSelect,
   NavbarSaas,
   NavigationMenu,
   NavigationMenuContent,
@@ -672,7 +746,11 @@ export {
   NavigationMenuViewport,
   NumberInput,
   NumberTicker,
+  ObjectCard,
+  ObjectHandle,
   OrderBook,
+  OverviewBoard,
+  OverviewCard,
   Pagination,
   PasswordInput,
   PlanBadge,
@@ -684,6 +762,7 @@ export {
   ProTip,
   ProfileSection,
   ProgressBar,
+  ProgressCard,
   Quiz,
   RadioGroup,
   RadioGroupItem,
@@ -691,12 +770,15 @@ export {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  RightDock,
   RoleBadge,
   ScopeSelector,
   ScrollArea,
   ScrollBar,
   SearchBar,
   SearchDialog,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   SelectContent,
   SelectGroup,
@@ -756,6 +838,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  TagsInput,
   Terminal,
   Textarea,
   ThemeProvider,
@@ -775,6 +858,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TopBar,
   Tour,
   TruncatedText,
   TutorialCard,
@@ -788,7 +872,9 @@ export {
   ViewSwitcher,
   WalletCard,
   Watchlist,
+  WorkspaceSwitcher,
   WorldClockBar,
+  ZoomHUD,
   alertVariants,
   avatarGroupVariants,
   avatarItemVariants,
@@ -800,6 +886,8 @@ export {
   dotVariants,
   mdxComponents,
   navigationMenuTriggerStyle,
+  segmentedControlItemVariants,
+  segmentedControlVariants,
   severityBadgeVariants,
   statCardVariants,
   statusIndicatorVariants,

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