@vllnt/ui 0.2.1-canary.ab2c69a → 0.2.1-canary.b3f1dff

package/dist/components/playback-ghost/playback-ghost.js

@@ -0,0 +1,83 @@
+"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",
+  input: "\u2198",
+  output: "\u2197",
+  run: "\u25B6",
+  task: "\u25A2"
+};
+const KIND_LABEL = {
+  agent: "Agent",
+  artifact: "Artifact",
+  input: "Input",
+  output: "Output",
+  run: "Run",
+  task: "Task"
+};
+const DEFAULT_LABELS = {
+  region: "Playback ghost"
+};
+const clamp01 = (v) => {
+  if (v < 0) {
+    return 0;
+  }
+  if (v > 1) {
+    return 1;
+  }
+  return v;
+};
+const PlaybackGhost = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      kind,
+      label,
+      labels,
+      opacity = 0.4,
+      size = 40,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const safeOpacity = clamp01(opacity);
+    const safeSize = size < 16 ? 16 : size;
+    const ariaLabel = kind ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}` : resolvedLabels.region;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
+          className
+        ),
+        "data-playback-ghost": true,
+        "data-playback-kind": kind ?? "unknown",
+        ref,
+        role: "img",
+        style: {
+          left: x,
+          minHeight: safeSize,
+          minWidth: safeSize,
+          opacity: safeOpacity,
+          top: y
+        },
+        ...rest,
+        children: [
+          kind ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: KIND_GLYPH[kind] }) : null,
+          label ? /* @__PURE__ */ jsx("span", { className: "truncate", "data-playback-ghost-label": true, children: label }) : null
+        ]
+      }
+    );
+  }
+);
+PlaybackGhost.displayName = "PlaybackGhost";
+export {
+  PlaybackGhost
+};

package/dist/components/presence-sync-indicator/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+export {
+  PresenceSyncIndicator
+};

package/dist/components/presence-sync-indicator/presence-sync-indicator.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_LABEL = {
+  error: "Sync error",
+  live: "Live",
+  offline: "Offline",
+  reconnecting: "Reconnecting",
+  syncing: "Syncing"
+};
+const STATE_DOT = {
+  error: "bg-red-500",
+  live: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  reconnecting: "bg-amber-500 animate-pulse",
+  syncing: "bg-blue-500 animate-pulse"
+};
+const STATE_TEXT = {
+  error: "text-red-700 dark:text-red-300",
+  live: "text-emerald-700 dark:text-emerald-300",
+  offline: "text-muted-foreground",
+  reconnecting: "text-amber-700 dark:text-amber-300",
+  syncing: "text-blue-700 dark:text-blue-300"
+};
+const DEFAULT_LABELS = {
+  region: "Presence sync"
+};
+const PresenceSyncIndicator = forwardRef((props, ref) => {
+  const { className, label, labels, state, status, ...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(
+        "inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-1 text-[11px] shadow-sm",
+        className
+      ),
+      "data-presence-state": state,
+      "data-presence-sync": true,
+      ref,
+      role: "status",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("h-1.5 w-1.5 rounded-full", STATE_DOT[state]),
+            "data-presence-sync-dot": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("font-medium", STATE_TEXT[state]), children: text }),
+        status ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[10px] text-muted-foreground",
+            "data-presence-sync-status": true,
+            children: status
+          }
+        ) : null
+      ]
+    }
+  );
+});
+PresenceSyncIndicator.displayName = "PresenceSyncIndicator";
+export {
+  PresenceSyncIndicator
+};

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

@@ -0,0 +1,6 @@
+import {
+  RunTimeline
+} from "./run-timeline";
+export {
+  RunTimeline
+};

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/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/timeline-scrubber/index.js

@@ -0,0 +1,6 @@
+import {
+  TimelineScrubber
+} from "./timeline-scrubber";
+export {
+  TimelineScrubber
+};

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

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useId
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_FILL = {
+  danger: "bg-red-500",
+  neutral: "bg-foreground",
+  primary: "bg-blue-500",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Timeline scrubber"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const Labels = (props) => {
+  const fmt = props.formatValue;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "data-timeline-scrubber-start": true, children: fmt ? fmt(props.start) : props.start }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-semibold text-foreground",
+        "data-timeline-scrubber-cursor": true,
+        children: fmt ? fmt(props.clamped) : props.clamped
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-timeline-scrubber-end": true, children: fmt ? fmt(props.end) : props.end })
+  ] });
+};
+const Track = (props) => /* @__PURE__ */ jsxs("div", { className: "relative h-6", children: [
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full",
+        TONE_FILL[props.tone]
+      ),
+      "data-timeline-scrubber-fill": true,
+      style: { width: `${props.ratio * 100}%` }
+    }
+  ),
+  props.ticks?.map((tick) => /* @__PURE__ */ jsx(
+    TickMark,
+    {
+      scrubberId: props.scrubberId,
+      span: props.span,
+      start: props.start,
+      tick
+    },
+    tick.id
+  )),
+  /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": props.ariaLabel,
+      className: "absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-timeline-scrubber-input": true,
+      id: props.inputId,
+      max: props.max,
+      min: props.min,
+      onChange: props.onChange,
+      step: props.step,
+      type: "range",
+      value: props.value
+    }
+  )
+] });
+const TickMark = (props) => {
+  const { scrubberId, span, start, tick } = props;
+  const ratio = clamp((tick.value - start) / span, 0, 1);
+  const tone = tick.tone ?? "neutral";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute top-1/2 h-2.5 w-px -translate-y-1/2 rounded-full",
+        TONE_FILL[tone]
+      ),
+      "data-scrubber-tick": tick.id,
+      "data-scrubber-tick-of": scrubberId,
+      "data-scrubber-tick-tone": tone,
+      style: { left: `${ratio * 100}%` },
+      title: typeof tick.label === "string" ? tick.label : void 0
+    }
+  );
+};
+const TimelineScrubber = forwardRef((props, ref) => {
+  const {
+    className,
+    end,
+    formatValue,
+    labels,
+    onValueChange,
+    start,
+    step = 1,
+    ticks,
+    tone = "primary",
+    value,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inputId = useId();
+  const safeEnd = end <= start ? start + 1 : end;
+  const span = safeEnd - start;
+  const clamped = clamp(value, start, safeEnd);
+  const ratio = clamp((clamped - start) / span, 0, 1);
+  const handleChange = (event) => {
+    onValueChange(clamp(Number(event.target.value), start, safeEnd));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 text-[11px] text-muted-foreground",
+        className
+      ),
+      "data-timeline-scrubber": true,
+      "data-timeline-tone": tone,
+      ref,
+      role: "group",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Labels,
+          {
+            clamped,
+            end: safeEnd,
+            formatValue,
+            start
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Track,
+          {
+            ariaLabel: resolvedLabels.region,
+            inputId,
+            max: safeEnd,
+            min: start,
+            onChange: handleChange,
+            ratio,
+            scrubberId: inputId,
+            span,
+            start,
+            step,
+            ticks,
+            tone,
+            value: clamped
+          }
+        )
+      ]
+    }
+  );
+});
+TimelineScrubber.displayName = "TimelineScrubber";
+export {
+  TimelineScrubber
+};