@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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

@@ -0,0 +1,221 @@
+"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",
+  failed: "bg-red-500/70",
+  queued: "bg-amber-500/70",
+  running: "bg-blue-500/70",
+  stopped: "bg-muted-foreground/40"
+};
+const STATE_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  queued: "Queued",
+  running: "Running",
+  stopped: "Stopped"
+};
+const DEFAULT_LABELS = {
+  empty: "No phases",
+  region: "Run timeline"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const Endpoints = (props) => {
+  const fmt = props.format;
+  const showCursor = typeof props.cursor === "number";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11px] text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "data-run-timeline-start": true, children: fmt ? fmt(props.start) : props.start }),
+    showCursor ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-semibold text-foreground",
+        "data-run-timeline-cursor-label": true,
+        children: fmt ? fmt(props.cursor ?? 0) : props.cursor
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { "data-run-timeline-end": true, children: fmt ? fmt(props.end) : props.end })
+  ] });
+};
+const PhaseBar = (props) => {
+  const { laneIndex, laneTotal, phase, span, start } = props;
+  const left = clamp((phase.start - start) / span, 0, 1) * 100;
+  const right = clamp((phase.end - start) / span, 0, 1) * 100;
+  const width = Math.max(right - left, 0.5);
+  const top = laneIndex / laneTotal * 100;
+  const height = 100 / laneTotal;
+  const state = phase.state ?? "running";
+  const sharedStyle = {
+    height: `${height}%`,
+    left: `${left}%`,
+    top: `${top}%`,
+    width: `${width}%`
+  };
+  const ariaLabel = `${STATE_LABEL[state]} ${phase.start} \u2192 ${phase.end}`;
+  if (phase.onActivate) {
+    const handleActivatePhase = () => {
+      phase.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute flex items-center justify-start overflow-hidden truncate rounded-sm border border-border/50 px-1 text-left text-[10px] text-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          STATE_FILL[state]
+        ),
+        "data-run-phase": phase.id,
+        "data-run-phase-state": state,
+        onClick: handleActivatePhase,
+        style: sharedStyle,
+        type: "button",
+        children: phase.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "absolute flex items-center justify-start overflow-hidden truncate rounded-sm border border-border/50 px-1 text-[10px] text-foreground",
+        STATE_FILL[state]
+      ),
+      "data-run-phase": phase.id,
+      "data-run-phase-state": state,
+      role: "img",
+      style: sharedStyle,
+      children: phase.label
+    }
+  );
+};
+const TrackBody = (props) => {
+  const { cursor, end, lanes, phases, start } = props;
+  const span = end - start;
+  const cursorRatio = typeof cursor === "number" ? clamp((cursor - start) / span, 0, 1) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex w-24 flex-col gap-px text-[10px] uppercase tracking-wide text-muted-foreground", children: lanes.map((lane) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-7 items-center px-2",
+        "data-run-timeline-lane": lane.id,
+        children: lane.label
+      },
+      lane.id
+    )) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex-1 overflow-hidden rounded-md border border-border bg-muted/20",
+        "data-run-timeline-track": true,
+        style: { height: `${lanes.length * 28}px` },
+        children: [
+          phases.map((phase) => {
+            const index = lanes.findIndex(
+              (lane) => lane.id === (phase.laneId ?? "default")
+            );
+            if (index === -1) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              PhaseBar,
+              {
+                laneIndex: index,
+                laneTotal: lanes.length,
+                phase,
+                span,
+                start
+              },
+              phase.id
+            );
+          }),
+          cursorRatio === null ? null : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-0 bottom-0 w-px bg-foreground",
+              "data-run-timeline-cursor": true,
+              style: { left: `${cursorRatio * 100}%` }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+const resolveLanes = (explicit) => {
+  if (explicit && explicit.length > 0) {
+    return 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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RunTimeline.displayName = "RunTimeline";
+export {
+  RunTimeline
+};

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

@@ -0,0 +1,6 @@
+import {
+  RuntimeOverviewPanel
+} from "./runtime-overview-panel";
+export {
+  RuntimeOverviewPanel
+};

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("size-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/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,257 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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 = React.forwardRef(
+  ({
+    className,
+    color = "currentColor",
+    height = DEFAULT_HEIGHT,
+    links,
+    nodePadding = DEFAULT_NODE_PADDING,
+    nodes,
+    nodeWidth = DEFAULT_NODE_WIDTH,
+    width = DEFAULT_WIDTH,
+    ...props
+  }, ref) => {
+    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
+};

package/dist/components/scope-selector/scope-selector.js

@@ -3,12 +3,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState } from "react";
 import { Check, ChevronRight, Search } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
-import { Button } from "../button";
-import { Input } from "../input";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-import { ScrollArea } from "../scroll-area";
-import { Separator } from "../separator";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
+import { ScrollArea } from "../scroll-area/scroll-area";
+import { Separator } from "../separator/separator";
 function flattenNodes(nodes, parentPath = []) {
   return nodes.flatMap((node) => {
     const path = [...parentPath, node];
@@ -57,7 +57,7 @@ function ScopeOptionButton({
     "button",
     {
       className: cn(
-        "flex w-full items-start justify-between rounded-md border px-3 py-3 text-left transition-colors hover:bg-accent hover:text-accent-foreground",
+        "flex w-full items-start justify-between rounded-md border p-3 text-left transition-colors hover:bg-accent hover:text-accent-foreground",
         selectedValue === node.id && "border-primary bg-accent",
         node.disabled && "cursor-not-allowed opacity-50"
       ),
@@ -79,7 +79,7 @@ function ScopeOptionButton({
           showPathLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: getPathLabel(path) }) : null,
           node.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: node.description }) : null
         ] }),
-        selectedValue === node.id ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-4 w-4 shrink-0 text-primary" }) : node.children && node.children.length > 0 ? /* @__PURE__ */ jsx(ChevronRight, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }) : null
+        selectedValue === node.id ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-primary" }) : node.children && node.children.length > 0 ? /* @__PURE__ */ jsx(ChevronRight, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }) : null
       ]
     },
     node.id
@@ -91,7 +91,7 @@ function ScopeSearchResults({
   results,
   selectedValue
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-2 px-1 py-1", children: results.map(({ node, path }) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 p-1", children: results.map(({ node, path }) => /* @__PURE__ */ jsx(
     ScopeOptionButton,
     {
       node,
@@ -111,7 +111,7 @@ function ScopeCurrentLevel({
   onSelect,
   selectedValue
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-2 px-1 py-1", children: nodes.map((node) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 p-1", children: nodes.map((node) => /* @__PURE__ */ jsx(
     ScopeOptionButton,
     {
       node,
@@ -169,7 +169,7 @@ function ScopeSelectorBreadcrumb({
   if (currentPath.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-muted-foreground", children: [
     /* @__PURE__ */ jsxs(Button, { className: "h-7 px-2", onClick: onBack, size: "sm", variant: "ghost", children: [
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 rotate-180" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 rotate-180" }),
       "Back"
     ] }),
     /* @__PURE__ */ jsx("span", { className: "truncate", children: getPathLabel(currentPath) })
@@ -183,7 +183,7 @@ function ScopeSelectorPopoverBody({
   return /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-[380px] p-0", sideOffset: 8, children: [
     /* @__PURE__ */ jsxs("div", { className: "border-b p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -315,7 +315,7 @@ const ScopeSelector = forwardRef(
           variant: "outline",
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: state.selectedPathLabel ?? placeholder }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 rotate-90 text-muted-foreground" })
+            /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 rotate-90 text-muted-foreground" })
           ]
         }
       ) }),

package/dist/components/scramble-text/index.js

@@ -0,0 +1,4 @@
+import { ScrambleText } from "./scramble-text";
+export {
+  ScrambleText
+};