@vvedantb/ui 0.26.0 → 0.27.0

package/src/ui/count-pop.tsx

@@ -0,0 +1,67 @@
+import { AnimatePresence, m } from "motion/react";
+import type { ReactNode } from "react";
+import { tokenTransition } from "../motion/presets";
+import { useCn } from "./ui-config";
+
+/**
+ * The entrance and exit for a live count badge (unread dots, a drafts pill, a
+ * running count). The number usually changes while the user looks elsewhere,
+ * so the badge says *that it changed*: it pops from `scale(0.5)` on an
+ * emphasized curve, and pops again on every change because `label` is the
+ * key (2 → 3 remounts). Exit is a plain shrink on `tokenTransition.fast`.
+ *
+ * `mode="popLayout"` takes the leaving badge out of flow, so 9 → 10 does not
+ * push its neighbours sideways during the crossfade. Only the motion lives
+ * here; the caller owns the look through `className`. Uses `m`, so the app
+ * must render it inside `LazyMotion`.
+ */
+export function CountPop({
+  label,
+  className,
+  children,
+}: {
+  /** Rendered content, and the remount key. `null` renders nothing. */
+  label: string | null;
+  className?: string;
+  /** Defaults to `label`; pass children for a badge with more than a number. */
+  children?: ReactNode;
+}) {
+  return (
+    <AnimatePresence mode="popLayout">
+      {label === null ? null : (
+        <m.span
+          key={label}
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.5, transition: tokenTransition.fast }}
+          transition={{ ...tokenTransition.base, ease: [0.2, 0.8, 0.2, 1] }}
+          className={className}
+        >
+          {children ?? label}
+        </m.span>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/** A count badge label: `null` for nothing to show, `"99+"` above 99. */
+export function countLabel(count: number | undefined): string | null {
+  if (count === undefined || count <= 0) return null;
+  return count > 99 ? "99+" : String(count);
+}
+
+/**
+ * The unread mark for rows, cards and tabs: a `bg-primary` dot, so it follows
+ * the theme accent. `CountPop` gives it the pop-in and the exit.
+ */
+export function UnreadDot({ show, className }: { show: boolean; className?: string }) {
+  const cn = useCn();
+  return (
+    <CountPop
+      label={show ? "unread" : null}
+      className={cn("size-1.5 shrink-0 rounded-full bg-primary", className)}
+    >
+      <span className="sr-only">Unread</span>
+    </CountPop>
+  );
+}

package/src/ui/error-boundary.tsx

@@ -0,0 +1,48 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  /**
+   * Rendered when a child throws (a failed query, a render bug). Pass a
+   * function to get a `retry` that clears the error and re-renders the
+   * children: a boundary with no way out stays broken until its parent
+   * remounts, which for a persistent pane means a full page reload.
+   */
+  fallback?: ReactNode | ((retry: () => void) => ReactNode);
+  /** Called with the error. Default: `console.error` with the component stack. */
+  onError?: (error: Error, info: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+/**
+ * Contains a failure to its own subtree, so one broken pane or subscription
+ * cannot swap the whole layout for an error page.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  override state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo) {
+    if (this.props.onError) this.props.onError(error, info);
+    else console.error("ErrorBoundary caught:", error, info.componentStack);
+  }
+
+  private readonly retry = () => {
+    this.setState({ hasError: false });
+  };
+
+  override render() {
+    if (this.state.hasError) {
+      const { fallback } = this.props;
+      if (typeof fallback === "function") return fallback(this.retry);
+      return fallback ?? null;
+    }
+    return this.props.children;
+  }
+}

package/src/ui/image-lightbox.tsx

@@ -0,0 +1,197 @@
+import { useRef } from "react";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import { animate, m, useMotionValue } from "motion/react";
+import { projectVelocity } from "../utils/gesture";
+import { Dialog, DialogContent, DialogTitle } from "./dialog";
+
+export type GalleryImage = { url: string; alt?: string };
+
+/**
+ * Controls (arrows, "open in new tab") opt out of the swipe surface: taking
+ * pointer capture on the container retargets the resulting `click` to the
+ * container, so a captured drag would swallow every button press.
+ */
+const CONTROL_SELECTOR = "[data-lightbox-control]";
+
+/**
+ * Fullscreen image viewer: cycles with the arrow keys, the arrow buttons or a
+ * 1:1 touch / pointer swipe (with velocity projection), wrapping at both ends.
+ * Controlled: `index` is `null` while closed. Uses `m`, so the app must render
+ * it inside `LazyMotion`.
+ */
+export function ImageLightbox({
+  images,
+  index,
+  onIndexChange,
+  onClose,
+}: {
+  images: GalleryImage[];
+  /** `null` while closed. */
+  index: number | null;
+  onIndexChange: (next: number) => void;
+  onClose: () => void;
+}) {
+  const offsetX = useMotionValue(0);
+  const draggingRef = useRef(false);
+  const startXRef = useRef(0);
+  const samplesRef = useRef<Array<{ x: number; t: number }>>([]);
+
+  const count = images.length;
+  const current = index === null ? null : images[index];
+
+  // Wrap-around so the user can circle through the set in either direction.
+  const step = (delta: number) => {
+    if (index === null || count === 0) return;
+    onIndexChange((index + delta + count) % count);
+    offsetX.set(0);
+  };
+
+  const sampleVelocity = (): number => {
+    const samples = samplesRef.current;
+    if (samples.length < 2) return 0;
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    if (first === undefined || last === undefined) return 0;
+    const dt = last.t - first.t;
+    if (dt <= 0) return 0;
+    return ((last.x - first.x) / dt) * 1000;
+  };
+
+  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (count <= 1 || event.button !== 0) return;
+    if (
+      event.target instanceof Element &&
+      event.target.closest(CONTROL_SELECTOR) !== null
+    ) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    draggingRef.current = true;
+    startXRef.current = event.clientX;
+    samplesRef.current = [{ x: event.clientX, t: performance.now() }];
+    offsetX.stop();
+  };
+
+  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    const dx = event.clientX - startXRef.current;
+    offsetX.set(dx);
+    samplesRef.current = [
+      ...samplesRef.current.slice(-4),
+      { x: event.clientX, t: performance.now() },
+    ];
+  };
+
+  const onPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+
+    const dx = offsetX.get();
+    const velocity = sampleVelocity();
+    const projected = dx + projectVelocity(velocity);
+    const goPrev = projected > 64 || velocity > 500;
+    const goNext = projected < -64 || velocity < -500;
+
+    if (goPrev || goNext) {
+      const target =
+        (goNext ? -1 : 1) * Math.max(280, window.innerWidth * 0.45);
+      void animate(offsetX, target, {
+        type: "spring",
+        bounce: 0,
+        duration: 0.35,
+        velocity,
+      }).then(() => step(goNext ? 1 : -1));
+      return;
+    }
+
+    void animate(offsetX, 0, {
+      type: "spring",
+      bounce: 0,
+      duration: 0.35,
+      velocity,
+    });
+  };
+
+  return (
+    <Dialog
+      open={index !== null}
+      onOpenChange={(open) => {
+        if (!open) {
+          offsetX.set(0);
+          onClose();
+        }
+      }}
+    >
+      <DialogContent
+        className="h-[92dvh] max-w-[96vw] overflow-hidden border-0 bg-black/90 p-0 shadow-none sm:max-w-[96vw]"
+        onKeyDown={(event) => {
+          if (event.key === "ArrowLeft") step(-1);
+          if (event.key === "ArrowRight") step(1);
+        }}
+      >
+        <DialogTitle className="sr-only">
+          {current?.alt ?? "Image"}
+        </DialogTitle>
+        {current ? (
+          <div
+            className="relative flex h-full w-full touch-pan-y items-center justify-center"
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerCancel={onPointerUp}
+          >
+            <m.img
+              src={current.url}
+              alt={current.alt ?? "Image"}
+              draggable={false}
+              style={{ x: offsetX }}
+              className="max-h-full max-w-full select-none object-contain"
+            />
+            {count > 1 ? (
+              <>
+                <button
+                  type="button"
+                  aria-label="Previous image"
+                  data-lightbox-control=""
+                  onClick={() => step(-1)}
+                  className="max-sm:hit-target absolute left-3 top-1/2 -translate-y-1/2 rounded-full border border-white/20 bg-black/50 p-2 text-white motion-press active:scale-[0.94] hover:bg-black/70"
+                >
+                  <IconChevronLeft size={22} />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Next image"
+                  data-lightbox-control=""
+                  onClick={() => step(1)}
+                  className="max-sm:hit-target absolute right-3 top-1/2 -translate-y-1/2 rounded-full border border-white/20 bg-black/50 p-2 text-white motion-press active:scale-[0.94] hover:bg-black/70"
+                >
+                  <IconChevronRight size={22} />
+                </button>
+                <span className="absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-black/60 px-3 py-1 text-xs tabular-nums text-white">
+                  {index === null ? 1 : index + 1} / {count}
+                </span>
+              </>
+            ) : null}
+            <a
+              href={current.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              data-lightbox-control=""
+              className="max-sm:hit-target absolute right-12 top-3 inline-flex items-center gap-1 rounded-md bg-black/60 px-2 py-1 text-xs text-white/80 transition-colors hover:text-white"
+            >
+              <IconExternalLink size={14} />
+              Open in new tab
+            </a>
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/ui/marquee-on-hover.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { useCn } from "./ui-config";
+
+/** Pixels per second the revealed text travels: constant speed, so long labels do not whip by. */
+const MARQUEE_SPEED_PX_PER_S = 60;
+/** Clamp the scroll duration so very short and very long overflows both stay readable. */
+const MIN_DURATION_S = 0.5;
+const MAX_DURATION_S = 5;
+
+interface MarqueeOnHoverProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Single-line label that scrolls its hidden tail into view on hover ("reveal
+ * and hold") and shows a plain ellipsis the rest of the time. It moves only
+ * when the text overflows. Needs `@vvedantb/ui/tokens/css/marquee.css`.
+ *
+ * Two spans: the outer `mq-host` clips and the inner `mq-inner` translates.
+ * One element cannot both ellipsis-clip itself and translate its own overflow
+ * into view. Hover is pure CSS; this component only measures the overflow on
+ * layout changes and writes it to custom properties, so hovering never
+ * re-renders. Text styles go on `className` (the host) and are inherited; drop
+ * any `truncate` / `line-clamp` class from the caller.
+ */
+export function MarqueeOnHover({ children, className }: MarqueeOnHoverProps) {
+  const cn = useCn();
+  const hostRef = useRef<HTMLSpanElement>(null);
+  const innerRef = useRef<HTMLSpanElement>(null);
+
+  // Re-measure after a content change, a host resize or the web font swap,
+  // since each changes how much (if at all) the text overflows.
+  useEffect(() => {
+    const host = hostRef.current;
+    const inner = innerRef.current;
+    if (!host || !inner) return;
+
+    let cancelled = false;
+    let raf = 0;
+    const recompute = () => {
+      if (cancelled) return;
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const shift = Math.max(0, inner.scrollWidth - host.clientWidth);
+        const overflows = shift > 1; // 1px guard against sub-pixel rounding jitter
+        host.dataset.mqOverflow = overflows ? "true" : "false";
+        // Native tooltip is the touch / long-hover fallback, only when truncated.
+        host.title = overflows ? (inner.textContent ?? "") : "";
+        if (overflows) {
+          const duration = Math.min(
+            MAX_DURATION_S,
+            Math.max(MIN_DURATION_S, shift / MARQUEE_SPEED_PX_PER_S),
+          );
+          host.style.setProperty("--mq-shift", `${shift}px`);
+          host.style.setProperty("--mq-dur", `${duration}s`);
+        }
+      });
+    };
+
+    recompute();
+    const observer = new ResizeObserver(recompute);
+    observer.observe(host);
+    void document.fonts.ready.then(() => recompute());
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [children]);
+
+  return (
+    <span ref={hostRef} className={cn("mq-host", className)}>
+      <span ref={innerRef} className="mq-inner">
+        {children}
+      </span>
+    </span>
+  );
+}

package/src/ui/media-preview.tsx

@@ -0,0 +1,173 @@
+import { useState } from "react";
+import {
+  VideoPlayer,
+  VideoPlayerContent,
+  VideoPlayerControlBar,
+  VideoPlayerFullscreenButton,
+  VideoPlayerMuteButton,
+  VideoPlayerPlayButton,
+  VideoPlayerPlaybackRateButton,
+  VideoPlayerSeekBackwardButton,
+  VideoPlayerSeekForwardButton,
+  VideoPlayerTimeDisplay,
+  VideoPlayerTimeRange,
+  VideoPlayerVolumeRange,
+} from "../kibo/video-player";
+import { ImageLightbox, type GalleryImage } from "./image-lightbox";
+import { useCn } from "./ui-config";
+
+/** Hairline ring that separates media from any surface, in light and dark. */
+const MEDIA_OUTLINE = "ring-1 ring-black/10 dark:ring-white/10";
+
+/**
+ * Twitter-style image gallery: up to a 2x2 grid of cropped
+ * tiles (a "+N" overlay on the fourth when more exist) instead of a long
+ * stack, opening `ImageLightbox`. Videos are rendered separately
+ * (VideoPreview) — this is images only.
+ */
+export function ImageGalleryPreview({ images }: { images: GalleryImage[] }) {
+  const cn = useCn();
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
+  const count = images.length;
+  if (count === 0) return null;
+
+  const tiles = images.slice(0, 4);
+  const overflow = count - tiles.length;
+
+  return (
+    <>
+      {count === 1 ? (
+        <button
+          type="button"
+          onClick={() => setLightboxIndex(0)}
+          className="block max-w-lg motion-press active:scale-[0.99]"
+        >
+          <img
+            src={images[0]?.url}
+            alt={images[0]?.alt ?? "Image"}
+            loading="lazy"
+            className={`${MEDIA_OUTLINE} rounded-surface max-h-96 max-w-full cursor-pointer transition-opacity hover:opacity-90`}
+          />
+        </button>
+      ) : (
+        <div
+          className={cn(
+            MEDIA_OUTLINE,
+            "rounded-surface grid max-w-lg gap-0.5 overflow-hidden",
+            "grid-cols-2",
+          )}
+        >
+          {tiles.map((image, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => setLightboxIndex(index)}
+              className={cn(
+                "relative block cursor-pointer motion-press active:scale-[0.99]",
+                // Three images: first tile spans the left column, Twitter-style.
+                count === 3 && index === 0 ? "row-span-2 h-full" : undefined,
+              )}
+            >
+              <img
+                src={image.url}
+                alt={image.alt ?? `Image ${index + 1}`}
+                loading="lazy"
+                className={cn(
+                  "h-full w-full object-cover transition-opacity hover:opacity-90",
+                  count === 3 && index === 0 ? "min-h-full" : "aspect-4/3",
+                )}
+              />
+              {overflow > 0 && index === tiles.length - 1 ? (
+                <span className="absolute inset-0 flex items-center justify-center bg-black/60 text-xl font-semibold text-white">
+                  +{overflow}
+                </span>
+              ) : null}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <ImageLightbox
+        images={images}
+        index={lightboxIndex}
+        onIndexChange={setLightboxIndex}
+        onClose={() => setLightboxIndex(null)}
+      />
+    </>
+  );
+}
+
+/** Video with the full control bar; rate and volume drop out below `sm`. */
+export function VideoPreview({
+  url,
+  className,
+}: {
+  url: string;
+  className?: string;
+}) {
+  const cn = useCn();
+  return (
+    <VideoPlayer className={cn("max-w-full", className)}>
+      <VideoPlayerContent
+        src={url}
+        playsInline
+        preload="metadata"
+        slot="media"
+      />
+      {/* Nine controls do not fit a phone-width bar. Playback rate and the
+          volume slider drop out below `sm` — a phone has hardware volume keys,
+          and everything essential (play, scrub, time, mute, fullscreen) stays. */}
+      <VideoPlayerControlBar>
+        <VideoPlayerPlayButton />
+        <VideoPlayerSeekBackwardButton />
+        <VideoPlayerSeekForwardButton />
+        <VideoPlayerTimeRange />
+        <VideoPlayerTimeDisplay showDuration />
+        <VideoPlayerPlaybackRateButton
+          rates={[1, 3, 5, 8]}
+          className="max-sm:hidden"
+        />
+        <VideoPlayerMuteButton />
+        <VideoPlayerVolumeRange className="max-sm:hidden" />
+        <VideoPlayerFullscreenButton />
+      </VideoPlayerControlBar>
+    </VideoPlayer>
+  );
+}
+
+/** One image that opens `ImageLightbox` on click. */
+export function ScreenshotPreview({
+  url,
+  alt = "Screenshot",
+  className,
+}: {
+  url: string;
+  alt?: string;
+  className?: string;
+}) {
+  const cn = useCn();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)} className="block">
+        <img
+          src={url}
+          alt={alt}
+          className={cn(
+            MEDIA_OUTLINE,
+            "rounded-surface max-w-full cursor-pointer transition-opacity hover:opacity-90",
+            className,
+          )}
+        />
+      </button>
+      <ImageLightbox
+        images={[{ url, alt }]}
+        index={open ? 0 : null}
+        onIndexChange={() => undefined}
+        onClose={() => setOpen(false)}
+      />
+    </>
+  );
+}

package/src/ui/relative-date-time.tsx

@@ -0,0 +1,42 @@
+import { formatCompactRelativeTime } from "../../app/src/time/compactRelativeTime";
+import dayjs from "../utils/dayjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+import { useCn } from "./ui-config";
+
+export interface RelativeDateTimeProps {
+  /** Unix ms. When omitted, renders `emptyLabel` with no tooltip. */
+  at?: number;
+  /** Shown when `at` is missing. Default `"—"`. */
+  emptyLabel?: string;
+  /** dayjs format for the tooltip. Default `"DD/MM/YYYY HH:mm"`. */
+  exactFormat?: string;
+  className?: string;
+}
+
+/**
+ * Compact relative time ("15m", "2d", calendar-aware like `dayjs().diff`) with
+ * the exact date and time in a hover tooltip. Needs a `TooltipProvider` above.
+ * It does not tick: the parent re-renders it (e.g. with a shared clock).
+ */
+export function RelativeDateTime({
+  at,
+  emptyLabel = "—",
+  exactFormat = "DD/MM/YYYY HH:mm",
+  className,
+}: RelativeDateTimeProps) {
+  const cn = useCn();
+  if (at === undefined) {
+    return <span className={cn("text-muted-foreground", className)}>{emptyLabel}</span>;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className={cn("cursor-default text-muted-foreground tabular-nums", className)}>
+          {formatCompactRelativeTime(at, { calendar: true })}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{dayjs(at).format(exactFormat)}</TooltipContent>
+    </Tooltip>
+  );
+}