@hilum/ui 3.3.4 → 3.5.0

package/src/components/file-thumbnail.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn } from "../lib/utils";
+import { useShape } from "../lib/shape-context";
+
+// ─── Lazy pdfjs loader ────────────────────────────────────────────────────
+// Imports pdfjs-dist on first PDF, caches the module, and points the worker
+// at the matching CDN build. Consumers don't need bundler-side worker config.
+type PdfjsModule = typeof import("pdfjs-dist");
+let pdfjsPromise: Promise<PdfjsModule> | null = null;
+
+async function loadPdfjs(): Promise<PdfjsModule> {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import("pdfjs-dist").then((mod) => {
+      if (!mod.GlobalWorkerOptions.workerSrc) {
+        mod.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`;
+      }
+      return mod;
+    });
+  }
+  return pdfjsPromise;
+}
+
+async function renderPdfFirstPage(file: File, targetWidth: number): Promise<string> {
+  const pdfjs = await loadPdfjs();
+  const buffer = await file.arrayBuffer();
+  const pdf = await pdfjs.getDocument({ data: buffer }).promise;
+  const page = await pdf.getPage(1);
+  const baseViewport = page.getViewport({ scale: 1 });
+  const scale = (targetWidth * 2) / baseViewport.width; // 2× for retina
+  const viewport = page.getViewport({ scale });
+  const canvas = document.createElement("canvas");
+  canvas.width = viewport.width;
+  canvas.height = viewport.height;
+  await page.render({ canvas, viewport }).promise;
+  return canvas.toDataURL("image/png");
+}
+
+// ─── File thumbnail ───────────────────────────────────────────────────────
+// Read-only square preview of a File. Images use object-cover via
+// `URL.createObjectURL`; PDFs render the first page via pdfjs; while either is
+// resolving a spinner is shown. Self-contained (border + surface + sizing) so
+// it can be reused both inside the composer's preview row and to render
+// already-sent attachments in a chat transcript.
+interface FileThumbnailProps {
+  file?: File;
+  name?: string;
+  type?: string;
+  /** Side length of the square thumbnail in pixels. */
+  size?: number | string;
+  className?: string;
+}
+
+function FileThumbnail({ file, name, type, size = 48, className }: FileThumbnailProps) {
+  const shape = useShape();
+  const numericSize = typeof size === "number" ? size : 48;
+
+  if (!file) {
+    return (
+      <div className={cn("flex items-center gap-3 rounded-lg border border-border p-2", className)}>
+        <div
+          className={cn(
+            "flex shrink-0 items-center justify-center bg-accent text-[11px] text-muted-foreground",
+            shape.item,
+          )}
+          style={{ width: numericSize, height: numericSize }}
+        >
+          {type ?? "File"}
+        </div>
+        <div className="min-w-0">
+          <div className="truncate text-[13px] text-foreground">{name ?? "Untitled file"}</div>
+          <div className="text-[12px] text-muted-foreground">
+            {typeof size === "string" ? size : (type ?? "File")}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const isImage = file.type.startsWith("image/");
+  const isPdf = file.type === "application/pdf";
+
+  // Create blob URL inside an effect (NOT useMemo) so the cleanup-revoke
+  // and the URL-creation stay in sync. In React 18 StrictMode dev, a
+  // useMemo-created URL gets revoked by the simulated effect-cleanup but
+  // useMemo doesn't re-run on the simulated re-mount (no re-render happens),
+  // leaving the DOM with a stale, revoked `blob:` URL — broken image.
+  // Putting both in the same effect means the simulated re-mount creates a
+  // fresh URL and updates state. The one-frame "before URL" state is
+  // covered by the bg-accent (no fallback icon shown for images), so the
+  // transition is visually clean.
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (!isImage) return;
+    const url = URL.createObjectURL(file);
+    setImageUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [isImage, file]);
+
+  // PDFs need async rendering — loading flash is unavoidable for the first
+  // ~100–300ms while pdfjs loads. Falls back to the generic icon on error.
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  useEffect(() => {
+    if (!isPdf) return;
+    let cancelled = false;
+    renderPdfFirstPage(file, numericSize)
+      .then((url) => {
+        if (!cancelled) setPdfUrl(url);
+      })
+      .catch(() => {
+        /* fall through to spinner */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [file, isPdf, numericSize]);
+
+  const previewUrl = imageUrl ?? pdfUrl;
+
+  return (
+    <div
+      className={cn(
+        "relative shrink-0 overflow-hidden bg-accent border border-border",
+        shape.bg,
+        className,
+      )}
+      style={{ width: numericSize, height: numericSize }}
+    >
+      {previewUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={previewUrl}
+          alt={file.name}
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+      ) : (
+        // Circular spinner while we wait for the preview to be ready.
+        // Used for both images (brief URL-creation gap) and PDFs (longer
+        // pdfjs render). The thin ring is mostly subtle (border-border)
+        // with one quadrant accented (border-t-muted-foreground) so the
+        // `animate-spin` rotation reads as a moving arc.
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div
+            className="w-6 h-6 rounded-full border-2 border-border border-t-muted-foreground animate-spin"
+            aria-label="Loading preview"
+            role="status"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { FileThumbnail, loadPdfjs, renderPdfFirstPage };
+export type { FileThumbnailProps };

package/src/components/hover-card.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { HoverCard } from "radix-ui";
 import { cn } from "../lib/utils";
+import { motionClasses } from "../lib/interaction";
 
 const HoverCardRoot = HoverCard.Root;
 const HoverCardTrigger = HoverCard.Trigger;
@@ -18,6 +19,7 @@ const HoverCardContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-64 rounded-xl border border-border bg-card p-4 shadow-elevated outline-none",
+        motionClasses,
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

package/src/components/input-copy.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { forwardRef, useState, useCallback, useRef, useEffect, type HTMLAttributes } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../lib/utils";
+import { useIcon } from "../lib/icon-context";
+import { fontWeights } from "../lib/font-weight";
+import { useShape } from "../lib/shape-context";
+import { spring } from "../lib/springs";
+import { Tooltip } from "./tooltip";
+
+type InputCopyVariant = "icon" | "button";
+type InputCopyAlign = "right" | "left";
+
+interface InputCopyProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The value to display and copy to clipboard. */
+  value: string;
+  /** Optional label displayed above the input. */
+  label?: string;
+  /** Callback fired after the value is copied. */
+  onCopy?: () => void;
+  /** Whether the component is disabled. */
+  disabled?: boolean;
+  /** Display variant: icon-only with tooltip, or button with label. */
+  variant?: InputCopyVariant;
+  /** Position of the copy action relative to the value. */
+  align?: InputCopyAlign;
+}
+
+const InputCopy = forwardRef<HTMLDivElement, InputCopyProps>(
+  (
+    { value, label, onCopy, disabled, variant = "icon", align = "right", className, ...props },
+    ref,
+  ) => {
+    const CopyIcon = useIcon("copy");
+    const [copied, setCopied] = useState(false);
+    const [copyCount, setCopyCount] = useState(0);
+    // "idle" = normal tooltip behavior, "copied" = force open, "suppressed" = force closed
+    const [tooltipState, setTooltipState] = useState<"idle" | "copied" | "suppressed">("idle");
+    const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+    const tooltipVisibleRef = useRef(false);
+    const tooltipWasVisibleRef = useRef(false);
+    const shape = useShape();
+
+    const handlePointerDown = useCallback(() => {
+      // Capture tooltip visibility before Radix closes it on pointer down
+      tooltipWasVisibleRef.current = tooltipVisibleRef.current;
+    }, []);
+
+    const handleCopy = useCallback(async () => {
+      if (disabled) return;
+      try {
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        setCopyCount((c) => c + 1);
+        setTooltipState(tooltipWasVisibleRef.current ? "copied" : "suppressed");
+        onCopy?.();
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+          setCopied(false);
+          setTooltipState("suppressed");
+        }, 2000);
+      } catch {
+        // Clipboard API not available — silently fail
+      }
+    }, [value, disabled, onCopy]);
+
+    const handleTooltipOpenChange = useCallback((open: boolean) => {
+      tooltipVisibleRef.current = open;
+    }, []);
+
+    useEffect(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+
+    const handleMouseEnter = useCallback(() => {
+      setTooltipState((prev) => (prev === "suppressed" ? "idle" : prev));
+    }, []);
+
+    const handleMouseLeave = useCallback(() => {
+      setTooltipState((prev) => (prev === "copied" ? "suppressed" : prev));
+    }, []);
+
+    const iconSwitch = (
+      <AnimatePresence mode="wait" initial={false}>
+        {copied ? (
+          <motion.span
+            key={`check-${copyCount}`}
+            initial={{ opacity: 0, scale: 0.6 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={spring.fast}
+            className="flex items-center justify-center [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-80 group-hover:[&_svg]:stroke-[2]"
+          >
+            <svg
+              width={14}
+              height={14}
+              viewBox="2 4 20 16"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <motion.path
+                d="M6 12L10 16L18 8"
+                initial={{ pathLength: 0 }}
+                animate={{
+                  pathLength: 1,
+                  transition: { duration: 0.08, ease: "easeOut" },
+                }}
+              />
+            </svg>
+          </motion.span>
+        ) : (
+          <motion.span
+            key="copy"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={spring.fast}
+            className="flex items-center justify-center"
+          >
+            <CopyIcon
+              size={14}
+              strokeWidth={1.5}
+              className="transition-[stroke-width] duration-80 group-hover:stroke-[2]"
+            />
+          </motion.span>
+        )}
+      </AnimatePresence>
+    );
+
+    const actionElement =
+      variant === "button" ? (
+        <span
+          className={cn(
+            "shrink-0 flex items-center gap-1.5 px-1.5 py-2 text-[13px] transition-colors duration-80",
+            "text-muted-foreground group-hover:text-foreground",
+          )}
+          style={{ fontVariationSettings: fontWeights.normal }}
+        >
+          <AnimatePresence mode="wait" initial={false}>
+            {copied ? (
+              <motion.span
+                key={`check-label-${copyCount}`}
+                className="flex items-center gap-1.5"
+                initial={{ opacity: 0, scale: 0.6 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={spring.fast}
+              >
+                <span className="flex items-center justify-center">
+                  <svg
+                    width={14}
+                    height={14}
+                    viewBox="2 4 20 16"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <motion.path
+                      d="M6 12L10 16L18 8"
+                      initial={{ pathLength: 0 }}
+                      animate={{
+                        pathLength: 1,
+                        transition: { duration: 0.08, ease: "easeOut" },
+                      }}
+                    />
+                  </svg>
+                </span>
+                <span className="select-none inline-grid text-left">
+                  <span className="col-start-1 row-start-1 invisible" aria-hidden="true">
+                    Copied
+                  </span>
+                  <span className="col-start-1 row-start-1">Copied</span>
+                </span>
+              </motion.span>
+            ) : (
+              <motion.span
+                key="copy-label"
+                className="flex items-center gap-1.5"
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={spring.fast}
+              >
+                <span className="flex items-center justify-center">
+                  <CopyIcon
+                    size={14}
+                    strokeWidth={1.5}
+                    className="transition-[stroke-width] duration-80 group-hover:stroke-[2]"
+                  />
+                </span>
+                <span className="select-none inline-grid text-left">
+                  <span className="col-start-1 row-start-1 invisible" aria-hidden="true">
+                    Copied
+                  </span>
+                  <span className="col-start-1 row-start-1">Copy</span>
+                </span>
+              </motion.span>
+            )}
+          </AnimatePresence>
+        </span>
+      ) : (
+        <span
+          className={cn(
+            "shrink-0 px-1.5 py-2 transition-colors duration-80",
+            "text-muted-foreground group-hover:text-foreground",
+          )}
+        >
+          {iconSwitch}
+        </span>
+      );
+
+    const valueElement = (
+      <span
+        className={cn(
+          "flex-1 min-w-0 text-left text-[13px] text-foreground font-mono py-2 select-none truncate",
+          align === "left" ? "pl-1" : "pl-0",
+        )}
+        style={{ fontVariationSettings: fontWeights.normal }}
+      >
+        <mark className="bg-transparent text-foreground transition-colors duration-80 group-hover:bg-[#6B97FF]/20 group-hover:text-foreground">
+          {value}
+        </mark>
+      </span>
+    );
+
+    const buttonContent =
+      align === "left" ? (
+        <>
+          {actionElement}
+          {valueElement}
+        </>
+      ) : (
+        <>
+          {valueElement}
+          {actionElement}
+        </>
+      );
+
+    const button = (
+      <button
+        type="button"
+        onPointerDown={handlePointerDown}
+        onClick={handleCopy}
+        disabled={disabled}
+        aria-label={copied ? "Copied" : "Copy to clipboard"}
+        className={cn(
+          "group flex items-center w-full cursor-pointer outline-none transition-all duration-80",
+          "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+          shape.input,
+        )}
+      >
+        {buttonContent}
+      </button>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col gap-0.5",
+          disabled && "opacity-50 pointer-events-none",
+          className,
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {label && (
+          <span
+            className={cn("text-[13px] text-muted-foreground", align === "left" ? "pl-1" : "pl-0")}
+            style={{ fontVariationSettings: fontWeights.normal }}
+          >
+            {label}
+          </span>
+        )}
+        {variant === "icon" ? (
+          <Tooltip
+            content={tooltipState === "idle" ? "Copy to clipboard" : "Copied"}
+            delayDuration={500}
+            sideOffset={2}
+            forceOpen={
+              tooltipState === "copied" ? true : tooltipState === "suppressed" ? false : undefined
+            }
+            onOpenChange={handleTooltipOpenChange}
+          >
+            {button}
+          </Tooltip>
+        ) : (
+          button
+        )}
+      </div>
+    );
+  },
+);
+
+InputCopy.displayName = "InputCopy";
+
+export { InputCopy };
+export type { InputCopyProps };
+export default InputCopy;