@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/runtime-overview-panel/runtime-overview-panel.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No runtime metrics",
+  region: "Runtime overview"
+};
+const TONE_DOT = {
+  danger: "bg-red-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const TREND_GLYPH = {
+  down: "\u2193",
+  flat: "\xB7",
+  up: "\u2191"
+};
+const Tile = (props) => {
+  const { metric } = props;
+  const tone = metric.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex flex-col gap-1 rounded-md border border-border/60 bg-muted/20 px-2.5 py-2",
+      "data-runtime-metric": metric.id,
+      "data-runtime-tone": tone,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone])
+            }
+          ),
+          metric.label
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: metric.value }),
+          metric.trend ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "text-[10px] text-muted-foreground",
+              children: TREND_GLYPH[metric.trend]
+            }
+          ) : null
+        ] }),
+        metric.detail ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: metric.detail }) : null
+      ]
+    }
+  );
+};
+const RuntimeOverviewPanel = forwardRef((props, ref) => {
+  const { className, labels, metrics, title = "Runtime", ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3 text-foreground",
+        className
+      ),
+      "data-runtime-overview-panel": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }) }),
+        metrics.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-xs text-muted-foreground",
+            "data-runtime-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-1.5", "data-runtime-grid": true, children: metrics.map((metric) => /* @__PURE__ */ jsx(Tile, { metric }, metric.id)) })
+      ]
+    }
+  );
+});
+RuntimeOverviewPanel.displayName = "RuntimeOverviewPanel";
+export {
+  RuntimeOverviewPanel
+};

package/dist/components/segmented-control/index.js

@@ -0,0 +1,12 @@
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+} from "./segmented-control";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+};

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const segmentedControlVariants = cva(
+  "inline-flex w-full items-center rounded-lg bg-muted p-1 text-muted-foreground",
+  {
+    defaultVariants: {
+      size: "default"
+    },
+    variants: {
+      size: {
+        default: "min-h-10",
+        lg: "min-h-11",
+        sm: "min-h-9"
+      }
+    }
+  }
+);
+const segmentedControlItemVariants = cva(
+  "inline-flex flex-1 items-center justify-center rounded-md px-3 text-sm font-medium whitespace-nowrap transition-all outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm",
+  {
+    defaultVariants: {
+      size: "default"
+    },
+    variants: {
+      size: {
+        default: "min-h-8",
+        lg: "min-h-9 px-4",
+        sm: "min-h-7 px-2.5 text-xs"
+      }
+    }
+  }
+);
+const SegmentedControl = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    className: cn(segmentedControlVariants({ size }), className),
+    ref,
+    type: "single",
+    ...props
+  }
+));
+SegmentedControl.displayName = "SegmentedControl";
+const SegmentedControlItem = React.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Item,
+  {
+    className: cn(segmentedControlItemVariants({ size }), className),
+    ref,
+    ...props
+  }
+));
+SegmentedControlItem.displayName = "SegmentedControlItem";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+};

package/dist/components/selection-halo/index.js

@@ -0,0 +1,6 @@
+import {
+  SelectionHalo
+} from "./selection-halo";
+export {
+  SelectionHalo
+};

package/dist/components/selection-halo/selection-halo.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Selection"
+};
+const SelectionHalo = forwardRef(
+  (props, ref) => {
+    const {
+      bounds,
+      className,
+      label,
+      labels,
+      pulsing = false,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
+          pulsing ? "animate-pulse" : "",
+          className
+        ),
+        "data-pulsing": pulsing ? "true" : void 0,
+        "data-selection-halo": true,
+        ref,
+        style: {
+          height: `${bounds.height.toString()}px`,
+          left: `${bounds.x.toString()}px`,
+          top: `${bounds.y.toString()}px`,
+          width: `${bounds.width.toString()}px`
+        },
+        ...rest,
+        children: [
+          ["nw", "ne", "se", "sw"].map((corner) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute h-2 w-2 rounded-sm border-2 border-primary bg-background",
+                corner === "nw" && "-left-1 -top-1",
+                corner === "ne" && "-right-1 -top-1",
+                corner === "se" && "-bottom-1 -right-1",
+                corner === "sw" && "-bottom-1 -left-1"
+              ),
+              "data-handle-corner": corner
+            },
+            corner
+          )),
+          label ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm",
+              "data-selection-label": true,
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+SelectionHalo.displayName = "SelectionHalo";
+export {
+  SelectionHalo
+};

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

@@ -0,0 +1,6 @@
+import {
+  SnapGuides
+} from "./snap-guides";
+export {
+  SnapGuides
+};

package/dist/components/snap-guides/snap-guides.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Snap guides"
+};
+const SnapGuides = forwardRef(
+  (props, ref) => {
+    const { className, guides, labels, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("pointer-events-none absolute inset-0 z-30", className),
+        "data-snap-guide-count": guides.length,
+        ref,
+        ...rest,
+        children: guides.map((guide) => {
+          const isVertical = guide.orientation === "vertical";
+          const offset = isVertical ? guide.x : guide.y;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute border-primary/70",
+                isVertical ? "inset-y-0 w-px border-l border-dashed" : "inset-x-0 h-px border-t border-dashed"
+              ),
+              "data-snap-guide-id": guide.id,
+              "data-snap-orientation": guide.orientation,
+              style: isVertical ? { left: `${offset.toString()}px` } : { top: `${offset.toString()}px` }
+            },
+            guide.id
+          );
+        })
+      }
+    );
+  }
+);
+SnapGuides.displayName = "SnapGuides";
+export {
+  SnapGuides
+};

package/dist/components/spinner/unicode-spinner.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";

package/dist/components/state-badge-overlay/index.js

@@ -0,0 +1,6 @@
+import {
+  StateBadgeOverlay
+} from "./state-badge-overlay";
+export {
+  StateBadgeOverlay
+};

package/dist/components/state-badge-overlay/state-badge-overlay.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  idle: "Idle",
+  queued: "Queued",
+  running: "Running",
+  stopped: "Stopped"
+};
+const STATE_TONE = {
+  complete: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+  failed: "border-red-500/40 bg-red-500/15 text-red-700 dark:text-red-300",
+  idle: "border-border bg-muted/40 text-muted-foreground",
+  queued: "border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  running: "border-blue-500/40 bg-blue-500/15 text-blue-700 dark:text-blue-300",
+  stopped: "border-border bg-background text-foreground"
+};
+const STATE_DOT = {
+  complete: "bg-emerald-500",
+  failed: "bg-red-500",
+  idle: "bg-muted-foreground",
+  queued: "bg-amber-500",
+  running: "bg-blue-500 animate-pulse",
+  stopped: "bg-muted-foreground"
+};
+const ANCHOR_TRANSFORM = {
+  "bottom-left": "translate(-100%, 100%)",
+  "bottom-right": "translate(0%, 100%)",
+  "top-left": "translate(-100%, -100%)",
+  "top-right": "translate(0%, -100%)"
+};
+const DEFAULT_LABELS = {
+  region: "State"
+};
+const StateBadgeOverlay = forwardRef((props, ref) => {
+  const {
+    anchor = "top-right",
+    className,
+    label,
+    labels,
+    state,
+    x,
+    y,
+    ...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(
+        "pointer-events-none absolute z-20 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide shadow-sm backdrop-blur",
+        STATE_TONE[state],
+        className
+      ),
+      "data-state-anchor": anchor,
+      "data-state-badge-overlay": true,
+      "data-state-name": state,
+      ref,
+      role: "status",
+      style: {
+        left: x,
+        top: y,
+        transform: ANCHOR_TRANSFORM[anchor]
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("h-1.5 w-1.5 rounded-full", STATE_DOT[state]),
+            "data-state-badge-dot": true
+          }
+        ),
+        text
+      ]
+    }
+  );
+});
+StateBadgeOverlay.displayName = "StateBadgeOverlay";
+export {
+  StateBadgeOverlay
+};

package/dist/components/sticky-metric/index.js

@@ -0,0 +1,6 @@
+import {
+  StickyMetric
+} from "./sticky-metric";
+export {
+  StickyMetric
+};

package/dist/components/sticky-metric/sticky-metric.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const ANCHOR_OFFSET = {
+  "bottom-left": { transform: "translate(-100%, 100%)" },
+  "bottom-right": { transform: "translate(0%, 100%)" },
+  "top-left": { transform: "translate(-100%, -100%)" },
+  "top-right": { transform: "translate(0%, -100%)" }
+};
+const DEFAULT_LABELS = {
+  region: "Sticky metric"
+};
+const StickyMetric = forwardRef(
+  (props, ref) => {
+    const {
+      anchor = "top-right",
+      className,
+      detail,
+      label,
+      labels,
+      tone = "neutral",
+      value,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
+          className
+        ),
+        "data-sticky-anchor": anchor,
+        "data-sticky-metric": true,
+        "data-sticky-tone": tone,
+        ref,
+        role: "status",
+        style: {
+          left: x,
+          top: y,
+          transform: ANCHOR_OFFSET[anchor].transform
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone]),
+              "data-sticky-metric-dot": true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: value }),
+          detail ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[10px] text-muted-foreground",
+              "data-sticky-metric-detail": true,
+              children: detail
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+StickyMetric.displayName = "StickyMetric";
+export {
+  StickyMetric
+};

package/dist/components/story-map/index.js

@@ -0,0 +1,8 @@
+import {
+  StoryMap,
+  StoryMapChapter
+} from "./story-map";
+export {
+  StoryMap,
+  StoryMapChapter
+};