@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

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 handleClick = () => {
+      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: handleClick,
+        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/scope-selector/scope-selector.js

@@ -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/search-bar/search-bar.js

@@ -1,11 +1,33 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useDebounce } from "../../lib/use-debounce";
 import { Button } from "../button/button";
 import { Input } from "../input/input";
-function SearchBar({
+function SearchBar(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SearchBarFallback, { ...props }), children: /* @__PURE__ */ jsx(SearchBarInner, { ...props }) });
+}
+function SearchBarFallback({
+  className,
+  placeholder = "Search posts..."
+}) {
+  return /* @__PURE__ */ jsxs("form", { className: `flex gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": placeholder,
+        className: "flex-1",
+        disabled: true,
+        placeholder,
+        type: "text",
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { disabled: true, type: "submit", variant: "outline", children: "Search" })
+  ] });
+}
+function SearchBarInner({
   className,
   onSearch,
   placeholder = "Search posts..."

package/dist/components/search-dialog/search-dialog.js

@@ -65,7 +65,7 @@ function SearchDialog({
         },
         variant: "outline",
         children: [
-          /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx(Search, { className: "mr-2 size-4" }),
           /* @__PURE__ */ jsx("span", { className: "hidden lg:inline-flex", children: buttonText }),
           /* @__PURE__ */ jsx("span", { className: "inline-flex lg:hidden", children: buttonTextMobile }),
           /* @__PURE__ */ jsxs("kbd", { className: "pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex", children: [

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/select/select.js

@@ -18,7 +18,7 @@ const SelectTrigger = forwardRef(({ children, className, ...props }, ref) => /*
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" }) })
     ]
   }
 ));
@@ -32,7 +32,7 @@ const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__
     ),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -45,7 +45,7 @@ const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @
     ),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -96,7 +96,7 @@ const SelectItem = forwardRef(({ children, className, ...props }, ref) => /* @__
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
       /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
     ]
   }
@@ -105,7 +105,7 @@ SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-m-1 h-px bg-muted", className),
     ref,
     ...props
   }

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