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

package/dist/components/alert-pulse/alert-pulse.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const SEVERITY_STROKE = {
+  error: "stroke-red-500",
+  info: "stroke-blue-500",
+  warn: "stroke-amber-500"
+};
+const SEVERITY_FILL = {
+  error: "fill-red-500/20",
+  info: "fill-blue-500/20",
+  warn: "fill-amber-500/20"
+};
+const SEVERITY_LABEL = {
+  error: "Error",
+  info: "Info",
+  warn: "Warning"
+};
+const safeRadius = (value) => value < 6 ? 6 : value;
+const AlertPulse = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      cx,
+      cy,
+      labels,
+      radius = 36,
+      reducedMotion = false,
+      severity = "warn",
+      ...rest
+    } = props;
+    const r = safeRadius(radius);
+    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+    const size = r * 2 + 24;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "pointer-events-none absolute z-20 overflow-visible",
+          className
+        ),
+        "data-alert-pulse": true,
+        "data-alert-severity": severity,
+        height: size,
+        ref,
+        role: "img",
+        style: {
+          left: cx - size / 2,
+          top: cy - size / 2
+        },
+        width: size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("origin-center", SEVERITY_STROKE[severity]),
+              cx: size / 2,
+              cy: size / 2,
+              fill: "none",
+              r,
+              strokeOpacity: 0.7,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn(
+                "origin-center",
+                SEVERITY_STROKE[severity],
+                SEVERITY_FILL[severity],
+                reducedMotion ? null : "animate-ping"
+              ),
+              cx: size / 2,
+              cy: size / 2,
+              "data-alert-pulse-ring": true,
+              r,
+              strokeOpacity: 0.4,
+              strokeWidth: 2
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertPulse.displayName = "AlertPulse";
+export {
+  AlertPulse
+};

package/dist/components/alert-pulse/index.js

@@ -0,0 +1,6 @@
+import {
+  AlertPulse
+} from "./alert-pulse";
+export {
+  AlertPulse
+};

package/dist/components/bottom-activity-strip/bottom-activity-strip.js

@@ -0,0 +1,91 @@
+"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",
+  info: "bg-blue-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  empty: "No recent activity",
+  region: "Recent activity"
+};
+const ChipBody = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone])
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", "data-strip-event-ts": true, children: event.ts })
+  ] });
+};
+const Chip = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  if (event.onActivate) {
+    const handleClick = () => {
+      event.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-strip-event": event.id,
+        "data-strip-event-tone": tone,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(ChipBody, { event })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px]",
+      "data-strip-event": event.id,
+      "data-strip-event-tone": tone,
+      children: /* @__PURE__ */ jsx(ChipBody, { event })
+    }
+  );
+};
+const BottomActivityStrip = forwardRef((props, ref) => {
+  const { className, events, labels, maxEvents, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = maxEvents === void 0 || maxEvents >= events.length ? events : events.slice(0, maxEvents);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full items-center gap-2 overflow-x-auto rounded-md border border-border bg-background/90 px-2 py-1 text-foreground",
+        className
+      ),
+      "data-bottom-activity-strip": true,
+      ref,
+      ...rest,
+      children: visible.length === 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "px-2 text-[11px] text-muted-foreground",
+          "data-strip-state": "empty",
+          children: resolvedLabels.empty
+        }
+      ) : visible.map((event) => /* @__PURE__ */ jsx(Chip, { event }, event.id))
+    }
+  );
+});
+BottomActivityStrip.displayName = "BottomActivityStrip";
+export {
+  BottomActivityStrip
+};

package/dist/components/bottom-activity-strip/index.js

@@ -0,0 +1,6 @@
+import {
+  BottomActivityStrip
+} from "./bottom-activity-strip";
+export {
+  BottomActivityStrip
+};

package/dist/components/comment-pin/comment-pin.js

@@ -0,0 +1,104 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Comment",
+  unreadSuffix: "unread"
+};
+const STATE_FILL = {
+  open: "bg-foreground text-background",
+  resolved: "bg-muted text-muted-foreground"
+};
+const PinBody = (props) => {
+  const showBadge = typeof props.unread === "number" && props.unread > 0;
+  const useAccent = props.accent && props.state === "open";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "flex h-7 w-7 items-center justify-center rounded-full border border-background text-[11px] font-semibold shadow-sm",
+          STATE_FILL[props.state]
+        ),
+        "data-comment-pin-body": true,
+        style: useAccent ? { backgroundColor: props.accent, color: "white" } : void 0,
+        children: props.authorInitial ?? "\u2022"
+      }
+    ),
+    showBadge ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute -right-1 -top-1 inline-flex min-h-[14px] min-w-[14px] items-center justify-center rounded-full bg-red-500 px-1 text-[9px] font-medium text-white",
+        "data-comment-pin-unread": true,
+        children: props.unread
+      }
+    ) : null
+  ] });
+};
+const CommentPin = forwardRef(
+  (props, ref) => {
+    const {
+      authorInitial,
+      className,
+      color,
+      labels,
+      onActivate,
+      state = "open",
+      unread,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const showBadge = typeof unread === "number" && unread > 0;
+    const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
+    const handleClick = () => {
+      onActivate?.();
+    };
+    const body = /* @__PURE__ */ jsx(
+      PinBody,
+      {
+        accent: color,
+        authorInitial,
+        state,
+        unread
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+          className
+        ),
+        "data-comment-pin": true,
+        "data-comment-pin-state": state,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: onActivate ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": ariaLabel,
+            className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "data-comment-pin-trigger": true,
+            onClick: handleClick,
+            type: "button",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: body })
+      }
+    );
+  }
+);
+CommentPin.displayName = "CommentPin";
+export {
+  CommentPin
+};

package/dist/components/comment-pin/index.js

@@ -0,0 +1,6 @@
+import {
+  CommentPin
+} from "./comment-pin";
+export {
+  CommentPin
+};

package/dist/components/context-lens/context-lens.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Context lens"
+};
+const clamp01 = (value) => {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const safeRadius = (value) => value < 0 ? 0 : value;
+const ContextLens = forwardRef(
+  (props, ref) => {
+    const { className, focus, labels, opacity = 0.55, ...rest } = props;
+    const maskId = useId();
+    if (!focus) {
+      return null;
+    }
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const inner = safeRadius(focus.inner);
+    const outer = safeRadius(Math.max(focus.outer, inner));
+    const fillOpacity = clamp01(opacity);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute inset-0 z-20 h-full w-full",
+          className
+        ),
+        "data-context-lens": true,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              cx: focus.cx,
+              cy: focus.cy,
+              "data-context-lens-gradient": true,
+              gradientUnits: "userSpaceOnUse",
+              id: maskId,
+              r: outer === 0 ? 1 : outer,
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "black", stopOpacity: 0 }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: outer === 0 ? "100%" : `${inner / outer * 100}%`,
+                    stopColor: "black",
+                    stopOpacity: 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black", stopOpacity: 1 })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-context-lens-dim": true,
+              fill: "black",
+              fillOpacity,
+              height: "100%",
+              mask: `url(#${maskId}-mask)`,
+              width: "100%",
+              x: 0,
+              y: 0
+            }
+          ),
+          /* @__PURE__ */ jsxs("mask", { id: `${maskId}-mask`, children: [
+            /* @__PURE__ */ jsx("rect", { fill: "white", height: "100%", width: "100%", x: 0, y: 0 }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: focus.cx,
+                cy: focus.cy,
+                fill: `url(#${maskId})`,
+                r: outer
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextLens.displayName = "ContextLens";
+export {
+  ContextLens
+};

package/dist/components/context-lens/index.js

@@ -0,0 +1,6 @@
+import {
+  ContextLens
+} from "./context-lens";
+export {
+  ContextLens
+};

package/dist/components/floating-toolbar/floating-toolbar.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const VARIANT_CLASSES = {
+  destructive: "border-red-300 bg-red-500/10 text-red-700 hover:bg-red-500/20 dark:text-red-300",
+  ghost: "border-border bg-background text-foreground hover:bg-accent",
+  primary: "border-primary bg-primary text-primary-foreground hover:bg-primary/90"
+};
+const DEFAULT_LABELS = {
+  region: "Selection actions"
+};
+const FloatingToolbar = forwardRef(
+  (props, ref) => {
+    const { actions, className, labels, x, y, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "absolute z-30 flex -translate-y-full items-center gap-1 rounded-md border border-border bg-background/95 p-1 shadow-md backdrop-blur",
+          className
+        ),
+        "data-floating-toolbar": true,
+        ref,
+        role: "toolbar",
+        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+        ...rest,
+        children: actions.map((action) => {
+          const variant = action.variant ?? "ghost";
+          const handleClick = () => {
+            action.onActivate();
+          };
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "aria-label": action.ariaLabel ?? void 0,
+              className: cn(
+                "inline-flex h-7 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                VARIANT_CLASSES[variant],
+                action.disabled ? "cursor-not-allowed opacity-50" : ""
+              ),
+              "data-action-id": action.id,
+              "data-variant": variant,
+              disabled: action.disabled,
+              onClick: handleClick,
+              type: "button",
+              children: [
+                action.glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-3 w-3", children: action.glyph }) : null,
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            },
+            action.id
+          );
+        })
+      }
+    );
+  }
+);
+FloatingToolbar.displayName = "FloatingToolbar";
+export {
+  FloatingToolbar
+};

package/dist/components/floating-toolbar/index.js

@@ -0,0 +1,6 @@
+import {
+  FloatingToolbar
+} from "./floating-toolbar";
+export {
+  FloatingToolbar
+};

package/dist/components/follow-mode/follow-mode.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const PALETTE = {
+  amber: { chip: "bg-amber-500 text-white", ring: "ring-amber-500" },
+  blue: { chip: "bg-blue-500 text-white", ring: "ring-blue-500" },
+  emerald: { chip: "bg-emerald-500 text-white", ring: "ring-emerald-500" },
+  purple: { chip: "bg-purple-500 text-white", ring: "ring-purple-500" },
+  red: { chip: "bg-red-500 text-white", ring: "ring-red-500" },
+  rose: { chip: "bg-rose-500 text-white", ring: "ring-rose-500" }
+};
+const DEFAULT_LABELS = {
+  region: "Follow mode",
+  stop: "Stop"
+};
+const FollowMode = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color = "blue",
+      labels,
+      name,
+      onStop,
+      ...rest
+    } = props;
+    const palette = PALETTE[color];
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full rounded-2xl ring-2 ring-inset",
+          palette.ring,
+          className
+        ),
+        "data-follow-color": color,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-auto absolute left-1/2 top-2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold shadow-sm",
+              "data-follow-chip": true,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5",
+                      palette.chip
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u25B8" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Following ",
+                        name
+                      ] })
+                    ]
+                  }
+                ),
+                onStop ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": resolvedLabels.stop,
+                    className: "inline-flex h-5 items-center rounded-full border border-border bg-background px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    onClick: onStop,
+                    type: "button",
+                    children: resolvedLabels.stop
+                  }
+                ) : null
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+FollowMode.displayName = "FollowMode";
+export {
+  FollowMode
+};

package/dist/components/follow-mode/index.js

@@ -0,0 +1,6 @@
+import {
+  FollowMode
+} from "./follow-mode";
+export {
+  FollowMode
+};

package/dist/components/handoff-beacon/handoff-beacon.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const LEVEL_RING = {
+  info: "ring-blue-500",
+  request: "ring-amber-500",
+  urgent: "ring-red-500 animate-pulse"
+};
+const LEVEL_DOT = {
+  info: "bg-blue-500",
+  request: "bg-amber-500",
+  urgent: "bg-red-500"
+};
+const DEFAULT_LABELS = {
+  region: "Attention"
+};
+const HandoffBeacon = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      level = "info",
+      message,
+      source,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
+          className
+        ),
+        "data-handoff-level": level,
+        ref,
+        role: "status",
+        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "block h-3 w-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
+                LEVEL_DOT[level],
+                LEVEL_RING[level]
+              )
+            }
+          ),
+          source || message ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md",
+              "data-handoff-card": true,
+              children: source ? /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: source }),
+                message ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " \xB7 " }) : null,
+                message ? /* @__PURE__ */ jsx("span", { children: message }) : null
+              ] }) : message ? /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }) : null
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+HandoffBeacon.displayName = "HandoffBeacon";
+export {
+  HandoffBeacon
+};

package/dist/components/handoff-beacon/index.js

@@ -0,0 +1,6 @@
+import {
+  HandoffBeacon
+} from "./handoff-beacon";
+export {
+  HandoffBeacon
+};