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

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

@@ -0,0 +1,116 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No saved views",
+  region: "Viewport bookmarks"
+};
+const Row = (props) => {
+  const { active, bookmark, onSelect } = props;
+  const handleClick = () => {
+    onSelect?.(bookmark.id);
+  };
+  const rowClass = "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors";
+  const activeClass = active ? "bg-muted/60 text-foreground" : "text-muted-foreground hover:bg-muted/30 hover:text-foreground";
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-pressed": active,
+        className: cn(
+          rowClass,
+          activeClass,
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-viewport-bookmark": bookmark.id,
+        "data-viewport-bookmark-active": active,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(rowClass, activeClass),
+      "data-viewport-bookmark": bookmark.id,
+      "data-viewport-bookmark-active": active,
+      children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+    }
+  );
+};
+const RowBody = (props) => {
+  const { bookmark } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "h-1.5 w-1.5 rounded-full",
+        style: { backgroundColor: bookmark.color ?? "hsl(var(--foreground))" }
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: bookmark.label }),
+      bookmark.detail ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "truncate text-[10px] text-muted-foreground",
+          "data-viewport-bookmark-detail": true,
+          children: bookmark.detail
+        }
+      ) : null
+    ] })
+  ] });
+};
+const ViewportBookmarks = forwardRef((props, ref) => {
+  const {
+    activeId,
+    bookmarks,
+    className,
+    labels,
+    onSelect,
+    title = "Saved views",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 rounded-lg border border-border bg-background p-2 text-foreground",
+        className
+      ),
+      "data-viewport-bookmarks": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { className: "px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+        bookmarks.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-[11px] text-muted-foreground",
+            "data-viewport-bookmarks-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: bookmarks.map((bookmark) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Row,
+          {
+            active: activeId === bookmark.id,
+            bookmark,
+            onSelect
+          }
+        ) }, bookmark.id)) })
+      ]
+    }
+  );
+});
+ViewportBookmarks.displayName = "ViewportBookmarks";
+export {
+  ViewportBookmarks
+};

package/dist/components/workspace-switcher/index.js

@@ -0,0 +1,6 @@
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
+export {
+  WorkspaceSwitcher
+};

package/dist/components/workspace-switcher/workspace-switcher.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+const WorkspaceSwitcher = forwardRef(
+  ({ className, defaultValue, onValueChange, value, workspaces, ...props }, ref) => {
+    const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
+    const [internalValue, setInternalValue] = useState(fallbackValue);
+    const currentValue = value ?? internalValue;
+    const currentWorkspace = useMemo(
+      () => workspaces.find((workspace) => workspace.id === currentValue),
+      [currentValue, workspaces]
+    );
+    function handleSelect(nextValue) {
+      if (value === void 0) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
+          className
+        ),
+        ref,
+        role: "radiogroup",
+        ...props,
+        children: [
+          workspaces.map((workspace) => {
+            const isActive = workspace.id === currentValue;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-checked": isActive,
+                className: cn(
+                  "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+                  isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                onClick: () => {
+                  handleSelect(workspace.id);
+                },
+                role: "radio",
+                title: workspace.description,
+                type: "button",
+                children: workspace.label
+              },
+              workspace.id
+            );
+          }),
+          currentWorkspace?.description ? /* @__PURE__ */ jsx("span", { className: "hidden pl-2 pr-1 text-xs text-muted-foreground md:inline", children: currentWorkspace.description }) : null
+        ]
+      }
+    );
+  }
+);
+WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
+export {
+  WorkspaceSwitcher
+};

package/dist/components/world-breadcrumbs/index.js

@@ -0,0 +1,6 @@
+import {
+  WorldBreadcrumbs
+} from "./world-breadcrumbs";
+export {
+  WorldBreadcrumbs
+};

package/dist/components/world-breadcrumbs/world-breadcrumbs.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const KIND_GLYPH = {
+  agent: "\u25C7",
+  artifact: "\u25CC",
+  group: "\u25A4",
+  run: "\u25B6",
+  task: "\u25A2",
+  world: "\u2726"
+};
+const DEFAULT_LABELS = {
+  empty: "No location",
+  region: "World breadcrumbs"
+};
+const Crumb = (props) => {
+  const { crumb, isLast, onSelect } = props;
+  const glyph = crumb.kind ? KIND_GLYPH[crumb.kind] : null;
+  const handleClick = () => {
+    onSelect?.(crumb.id);
+  };
+  const text = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+    glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: glyph }) : null,
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: crumb.label })
+  ] });
+  if (isLast || !onSelect) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-current": isLast ? "location" : void 0,
+        className: cn(
+          "inline-flex items-center text-xs",
+          isLast ? "font-semibold text-foreground" : "text-muted-foreground"
+        ),
+        "data-world-breadcrumb": crumb.id,
+        "data-world-breadcrumb-active": isLast,
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "inline-flex items-center rounded-sm text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-world-breadcrumb": crumb.id,
+      "data-world-breadcrumb-active": "false",
+      onClick: handleClick,
+      type: "button",
+      children: text
+    }
+  );
+};
+const WorldBreadcrumbs = forwardRef(
+  (props, ref) => {
+    const { className, crumbs, labels, onSelect, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    if (crumbs.length === 0) {
+      return /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": resolvedLabels.region,
+          className: cn(
+            "inline-flex items-center text-xs text-muted-foreground",
+            className
+          ),
+          "data-world-breadcrumbs": true,
+          "data-world-breadcrumbs-state": "empty",
+          ref,
+          ...rest,
+          children: resolvedLabels.empty
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+          className
+        ),
+        "data-world-breadcrumbs": true,
+        ref,
+        ...rest,
+        children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            Crumb,
+            {
+              crumb,
+              isLast: index === crumbs.length - 1,
+              onSelect
+            }
+          ),
+          index < crumbs.length - 1 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "text-muted-foreground/60",
+              "data-world-breadcrumb-sep": true,
+              children: "\u203A"
+            }
+          ) : null
+        ] }, crumb.id))
+      }
+    );
+  }
+);
+WorldBreadcrumbs.displayName = "WorldBreadcrumbs";
+export {
+  WorldBreadcrumbs
+};

package/dist/components/zoom-hud/index.js

@@ -0,0 +1,4 @@
+import { ZoomHUD } from "./zoom-hud";
+export {
+  ZoomHUD
+};

package/dist/components/zoom-hud/zoom-hud.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Minus, Plus, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+const ZoomHUD = forwardRef(
+  ({ className, onReset, onZoomIn, onZoomOut, zoom, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Zoom out",
+            onClick: onZoomOut,
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Zoom in",
+            onClick: onZoomIn,
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Reset zoom",
+            onClick: onReset,
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  )
+);
+ZoomHUD.displayName = "ZoomHUD";
+export {
+  ZoomHUD
+};