@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/reveal-text/reveal-text.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function useInView(nodeRef) {
+  const [inView, setInView] = React.useState(
+    () => typeof IntersectionObserver !== "function"
+  );
+  React.useEffect(() => {
+    const node = nodeRef.current;
+    if (!node || typeof IntersectionObserver !== "function") {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setInView(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [nodeRef]);
+  return inView;
+}
+const hiddenTransforms = {
+  down: "-translate-y-full",
+  left: "translate-x-full",
+  right: "-translate-x-full",
+  up: "translate-y-full"
+};
+const RevealText = ({
+  children,
+  className,
+  delay = 0,
+  direction = "up",
+  ref,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const nodeRef = React.useRef(null);
+  const inView = useInView(nodeRef);
+  const visible = reduced || inView;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("overflow-hidden", className),
+      ref: (node) => {
+        nodeRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "transition-[transform,opacity] duration-700 ease-out motion-reduce:transition-none",
+            visible ? "translate-x-0 translate-y-0 opacity-100" : cn("opacity-0", hiddenTransforms[direction])
+          ),
+          style: { transitionDelay: `${delay}ms` },
+          children
+        }
+      )
+    }
+  );
+};
+RevealText.displayName = "RevealText";
+export {
+  RevealText
+};

package/dist/components/right-dock/right-dock.js

@@ -1,26 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const RightDock = forwardRef(
-  ({ children, className, footer, header, title, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className: cn(
-        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
-        className
-      ),
-      ref,
-      ...props,
-      children: [
-        header || title ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border/60 px-4 py-3", children: [
-          title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) : null,
-          header ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: header }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children }),
-        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 p-4", children: footer }) : null
-      ]
-    }
-  )
+const RightDock = ({
+  children,
+  className,
+  footer,
+  header,
+  ref,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "aside",
+  {
+    className: cn(
+      "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      header || title ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border/60 px-4 py-3", children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        header ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: header }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children }),
+      footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 p-4", children: footer }) : null
+    ]
+  }
 );
 RightDock.displayName = "RightDock";
 export {

package/dist/components/role-badge/role-badge.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
 import { badgeVariants } from "../badge/badge";
 function getRoleLabel(accountRole) {
@@ -26,24 +25,28 @@ function getRoleClasses(accountRole) {
       return "border-primary/30 bg-primary/10 text-primary";
   }
 }
-const RoleBadge = React.forwardRef(
-  ({ accountRole, className, label, ...props }, reference) => {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          badgeVariants({ variant: "outline" }),
-          "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
-          getRoleClasses(accountRole),
-          className
-        ),
-        ref: reference,
-        ...props,
-        children: label ?? getRoleLabel(accountRole)
-      }
-    );
-  }
-);
+const RoleBadge = ({
+  accountRole,
+  className,
+  label,
+  ref: reference,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        badgeVariants({ variant: "outline" }),
+        "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+        getRoleClasses(accountRole),
+        className
+      ),
+      ref: reference,
+      ...props,
+      children: label ?? getRoleLabel(accountRole)
+    }
+  );
+};
 RoleBadge.displayName = "RoleBadge";
 export {
   RoleBadge

package/dist/components/route-map/route-map.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useId,
   useMemo
 } from "react";
@@ -276,7 +275,10 @@ function Stage(props) {
     }
   );
 }
-const RouteMap = forwardRef((props, ref) => {
+const RouteMap = ({
+  ref,
+  ...props
+}) => {
   const {
     animated = false,
     animationDurationSeconds = 4,
@@ -332,7 +334,7 @@ const RouteMap = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 RouteMap.displayName = "RouteMap";
 export {
   RouteMap

package/dist/components/routing-assignment-panel/routing-assignment-panel.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const ROLE_LABEL = {
   fallback: "Fallback",
@@ -88,7 +85,10 @@ const Row = (props) => {
     }
   );
 };
-const RoutingAssignmentPanel = forwardRef((props, ref) => {
+const RoutingAssignmentPanel = ({
+  ref,
+  ...props
+}) => {
   const { assignments, className, labels, title = "Routing", ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return /* @__PURE__ */ jsxs(
@@ -115,7 +115,7 @@ const RoutingAssignmentPanel = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 RoutingAssignmentPanel.displayName = "RoutingAssignmentPanel";
 export {
   RoutingAssignmentPanel

package/dist/components/run-timeline/run-timeline.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const STATE_FILL = {
   complete: "bg-emerald-500/70",
@@ -159,62 +156,63 @@ const resolveLanes = (explicit) => {
   }
   return [{ id: "default", label: "Run" }];
 };
-const RunTimeline = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      cursor,
-      end,
-      formatValue,
-      labels,
-      lanes,
-      phases,
-      start,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const safeEnd = end <= start ? start + 1 : end;
-    const resolvedLanes = resolveLanes(lanes);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        "aria-label": resolvedLabels.region,
-        className: cn("flex w-full flex-col gap-2", className),
-        "data-run-timeline": true,
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            Endpoints,
-            {
-              cursor,
-              end: safeEnd,
-              format: formatValue,
-              start
-            }
-          ),
-          phases.length === 0 ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: "rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground",
-              "data-run-timeline-state": "empty",
-              children: resolvedLabels.empty
-            }
-          ) : /* @__PURE__ */ jsx(
-            TrackBody,
-            {
-              cursor,
-              end: safeEnd,
-              lanes: resolvedLanes,
-              phases,
-              start
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const RunTimeline = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    cursor,
+    end,
+    formatValue,
+    labels,
+    lanes,
+    phases,
+    start,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const safeEnd = end <= start ? start + 1 : end;
+  const resolvedLanes = resolveLanes(lanes);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn("flex w-full flex-col gap-2", className),
+      "data-run-timeline": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Endpoints,
+          {
+            cursor,
+            end: safeEnd,
+            format: formatValue,
+            start
+          }
+        ),
+        phases.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground",
+            "data-run-timeline-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx(
+          TrackBody,
+          {
+            cursor,
+            end: safeEnd,
+            lanes: resolvedLanes,
+            phases,
+            start
+          }
+        )
+      ]
+    }
+  );
+};
 RunTimeline.displayName = "RunTimeline";
 export {
   RunTimeline

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

@@ -1,8 +1,5 @@
 "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",
@@ -55,7 +52,10 @@ const Tile = (props) => {
     }
   );
 };
-const RuntimeOverviewPanel = forwardRef((props, ref) => {
+const RuntimeOverviewPanel = ({
+  ref,
+  ...props
+}) => {
   const { className, labels, metrics, title = "Runtime", ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   return /* @__PURE__ */ jsxs(
@@ -82,7 +82,7 @@ const RuntimeOverviewPanel = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 RuntimeOverviewPanel.displayName = "RuntimeOverviewPanel";
 export {
   RuntimeOverviewPanel

package/dist/components/sankey-chart/index.js

@@ -0,0 +1,6 @@
+import {
+  SankeyChart
+} from "./sankey-chart";
+export {
+  SankeyChart
+};

package/dist/components/sankey-chart/sankey-chart.js

@@ -0,0 +1,255 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const DEFAULT_WIDTH = 480;
+const DEFAULT_HEIGHT = 280;
+const DEFAULT_NODE_WIDTH = 14;
+const DEFAULT_NODE_PADDING = 12;
+const LABEL_GAP = 6;
+function computeDepths(ids, links) {
+  const incoming = links.reduce((map, link) => {
+    const sources = map.get(link.target) ?? [];
+    sources.push(link.source);
+    map.set(link.target, sources);
+    return map;
+  }, /* @__PURE__ */ new Map());
+  const depth = /* @__PURE__ */ new Map();
+  const visiting = /* @__PURE__ */ new Set();
+  const resolve = (id) => {
+    const cached = depth.get(id);
+    if (cached !== void 0) return cached;
+    if (visiting.has(id)) return 0;
+    visiting.add(id);
+    const sources = incoming.get(id) ?? [];
+    const value = sources.length === 0 ? 0 : Math.max(...sources.map((source) => resolve(source) + 1));
+    visiting.delete(id);
+    depth.set(id, value);
+    return value;
+  };
+  return new Map(ids.map((id) => [id, resolve(id)]));
+}
+function nodeValues(ids, links) {
+  const sum = (key) => links.reduce((map, link) => {
+    map.set(link[key], (map.get(link[key]) ?? 0) + link.value);
+    return map;
+  }, /* @__PURE__ */ new Map());
+  const outgoing = sum("source");
+  const incoming = sum("target");
+  return new Map(
+    ids.map((id) => [
+      id,
+      Math.max(incoming.get(id) ?? 0, outgoing.get(id) ?? 0, 1)
+    ])
+  );
+}
+function groupByDepth(ids, depth) {
+  return ids.reduce((map, id) => {
+    const column = depth.get(id) ?? 0;
+    const bucket = map.get(column) ?? [];
+    bucket.push(id);
+    map.set(column, bucket);
+    return map;
+  }, /* @__PURE__ */ new Map());
+}
+function computeScale(columns, values, dims) {
+  const scales = [...columns.values()].map((bucket) => {
+    const total = bucket.reduce((sum, id) => sum + (values.get(id) ?? 0), 0);
+    const available = dims.height - (bucket.length - 1) * dims.nodePadding;
+    return total > 0 && available > 0 ? available / total : Number.POSITIVE_INFINITY;
+  });
+  const scale = Math.min(...scales);
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+function positionNodes(nodes, columns, options) {
+  const { dims, maxDepth, scale, values } = options;
+  const xStep = maxDepth > 0 ? (dims.width - dims.nodeWidth) / maxDepth : 0;
+  const labelOf = (id) => nodes.find((node) => node.id === id)?.label ?? id;
+  const perColumn = [...columns.entries()].map(([column, bucket]) => {
+    const used = bucket.reduce((sum, id) => sum + (values.get(id) ?? 0) * scale, 0) + (bucket.length - 1) * dims.nodePadding;
+    const startY = Math.max(0, (dims.height - used) / 2);
+    return bucket.reduce(
+      (accumulator, id) => {
+        const value = values.get(id) ?? 0;
+        const height = Math.max(value * scale, 1);
+        accumulator.out.push([
+          id,
+          {
+            height,
+            id,
+            label: labelOf(id),
+            value,
+            x: column * xStep,
+            y: accumulator.cursor
+          }
+        ]);
+        accumulator.cursor += height + dims.nodePadding;
+        return accumulator;
+      },
+      { cursor: startY, out: [] }
+    ).out;
+  });
+  return new Map(perColumn.flat());
+}
+function orderLinks(links, laid) {
+  const sorted = [...links].sort(
+    (a, b) => (laid.get(a.target)?.y ?? 0) - (laid.get(b.target)?.y ?? 0)
+  );
+  const bySource = sorted.reduce((map, link) => {
+    const bucket = map.get(link.source) ?? [];
+    bucket.push(link);
+    map.set(link.source, bucket);
+    return map;
+  }, /* @__PURE__ */ new Map());
+  return [...bySource.values()].flat();
+}
+function ribbon(from, to) {
+  const xc = (from.x + to.x) / 2;
+  return `M ${from.x.toFixed(2)} ${from.y.toFixed(2)} C ${xc.toFixed(2)} ${from.y.toFixed(2)} ${xc.toFixed(2)} ${to.y.toFixed(2)} ${to.x.toFixed(2)} ${to.y.toFixed(2)}`;
+}
+function computeLinks(options) {
+  const { dims, laid, orderedLinks, scale } = options;
+  const sourceOffset = /* @__PURE__ */ new Map();
+  const targetOffset = /* @__PURE__ */ new Map();
+  return orderedLinks.reduce((accumulator, link) => {
+    const source = laid.get(link.source);
+    const target = laid.get(link.target);
+    if (!source || !target) return accumulator;
+    const thickness = Math.max(link.value * scale, 1);
+    const sOffset = sourceOffset.get(link.source) ?? 0;
+    const tOffset = targetOffset.get(link.target) ?? 0;
+    sourceOffset.set(link.source, sOffset + thickness);
+    targetOffset.set(link.target, tOffset + thickness);
+    const from = {
+      x: source.x + dims.nodeWidth,
+      y: source.y + sOffset + thickness / 2
+    };
+    const to = { x: target.x, y: target.y + tOffset + thickness / 2 };
+    accumulator.push({
+      path: ribbon(from, to),
+      source: link.source,
+      target: link.target,
+      thickness,
+      value: link.value
+    });
+    return accumulator;
+  }, []);
+}
+function computeLayout(nodes, links, dims) {
+  const ids = nodes.map((node) => node.id);
+  const known = new Set(ids);
+  const validLinks = links.filter(
+    (link) => link.value > 0 && known.has(link.source) && known.has(link.target)
+  );
+  const depth = computeDepths(ids, validLinks);
+  const values = nodeValues(ids, validLinks);
+  const maxDepth = Math.max(0, ...ids.map((id) => depth.get(id) ?? 0));
+  const columns = groupByDepth(ids, depth);
+  const scale = computeScale(columns, values, dims);
+  const laid = positionNodes(nodes, columns, { dims, maxDepth, scale, values });
+  const orderedLinks = orderLinks(validLinks, laid);
+  const computedLinks = computeLinks({ dims, laid, orderedLinks, scale });
+  return { links: computedLinks, nodes: [...laid.values()] };
+}
+function SankeyLinks({ color, links }) {
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeOpacity: 0.25, children: links.map((link, index) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: link.path,
+      strokeWidth: link.thickness,
+      children: /* @__PURE__ */ jsx("title", { children: `${link.source} \u2192 ${link.target}: ${link.value.toLocaleString()}` })
+    },
+    `${link.source}-${link.target}-${index}`
+  )) });
+}
+function SankeyNodes({
+  color,
+  nodes,
+  nodeWidth,
+  width
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => {
+    const isLast = node.x + nodeWidth >= width - 1;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill: color,
+          height: node.height,
+          rx: 2,
+          width: nodeWidth,
+          x: node.x,
+          y: node.y,
+          children: /* @__PURE__ */ jsx("title", { children: `${node.label}: ${node.value.toLocaleString()}` })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "fill-foreground text-[10px]",
+          dominantBaseline: "middle",
+          textAnchor: isLast ? "end" : "start",
+          x: isLast ? node.x - LABEL_GAP : node.x + nodeWidth + LABEL_GAP,
+          y: node.y + node.height / 2,
+          children: node.label
+        }
+      )
+    ] }, node.id);
+  }) });
+}
+const SankeyChart = ({
+  className,
+  color = "currentColor",
+  height = DEFAULT_HEIGHT,
+  links,
+  nodePadding = DEFAULT_NODE_PADDING,
+  nodes,
+  nodeWidth = DEFAULT_NODE_WIDTH,
+  ref,
+  width = DEFAULT_WIDTH,
+  ...props
+}) => {
+  if (nodes.length === 0) return null;
+  const layout = computeLayout(nodes, links, {
+    height,
+    nodePadding,
+    nodeWidth,
+    width
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-background/40 p-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-label": "Sankey chart",
+          className: "h-full w-full",
+          height,
+          role: "img",
+          viewBox: `0 0 ${width} ${height}`,
+          width,
+          children: [
+            /* @__PURE__ */ jsx(SankeyLinks, { color, links: layout.links }),
+            /* @__PURE__ */ jsx(
+              SankeyNodes,
+              {
+                color,
+                nodes: layout.nodes,
+                nodeWidth,
+                width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+SankeyChart.displayName = "SankeyChart";
+export {
+  SankeyChart
+};