@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

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 handleSelectCrumb = () => {
+    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: handleSelectCrumb,
+      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/world-clock-bar/world-clock-bar.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function normalizeDate(input) {
   if (input instanceof Date) {
     return new Date(input.getTime());
@@ -29,20 +29,40 @@ function useLiveDate(now, updateIntervalMs) {
   }, [fixedNow, updateIntervalMs]);
   return liveNow;
 }
+const TIME_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getTimeFormatter(locale, timeZone) {
+  const key = `${locale}|${timeZone}`;
+  let formatter = TIME_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZone,
+      timeZoneName: "short"
+    });
+    TIME_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
+const DATE_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getDateFormatter(locale, timeZone) {
+  const key = `${locale}|${timeZone}`;
+  let formatter = DATE_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = Intl.DateTimeFormat(locale, {
+      day: "numeric",
+      month: "short",
+      timeZone,
+      weekday: "short"
+    });
+    DATE_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
 function formatZoneDateTime(zone, date, showDate) {
   const locale = zone.locale ?? "en-US";
-  const timeFormatter = new Intl.DateTimeFormat(locale, {
-    hour: "numeric",
-    minute: "2-digit",
-    timeZone: zone.timeZone,
-    timeZoneName: "short"
-  });
-  const dateFormatter = new Intl.DateTimeFormat(locale, {
-    day: "numeric",
-    month: "short",
-    timeZone: zone.timeZone,
-    weekday: "short"
-  });
+  const timeFormatter = getTimeFormatter(locale, zone.timeZone);
+  const dateFormatter = getDateFormatter(locale, zone.timeZone);
   return {
     date: showDate ? dateFormatter.format(date) : "",
     time: timeFormatter.format(date)
@@ -63,6 +83,7 @@ function WorldClockCard({
 }
 const WorldClockBar = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     now,
     showDate = true,
@@ -75,7 +96,7 @@ const WorldClockBar = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), ref, ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold tracking-tight", children: title }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Synchronized time across distributed teams and regions." })
         ] }),
         /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [

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