"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon } from "@kineticui/icons"; export type PinComment = { id: string; author: string; color?: string; text: string; time?: string }; export type PinThread = { id: string; x: number; y: number; comments: PinComment[]; resolved?: boolean }; export type CommentLayerProps = { threads: PinThread[]; onThreadsChange: (threads: PinThread[]) => void; /** The current user, used for new comments. */ me: { name: string; color?: string }; /** When true, clicking empty space drops a new pin. */ commenting?: boolean; children: React.ReactNode; className?: string; }; const initials = (n: string) => n.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase(); function Pin({ thread, active, onClick }: { thread: PinThread; active: boolean; onClick: () => void }) { const first = thread.comments[0]; return ( ); } /** Figma-style comment pins: click to drop a pin, reply in a thread, resolve. Positions are 0–1 fractions. */ export function CommentLayer({ threads, onThreadsChange, me, commenting = true, children, className }: CommentLayerProps) { const [active, setActive] = React.useState(null); const [draft, setDraft] = React.useState(""); const thread = threads.find((t) => t.id === active); const post = () => { if (!draft.trim() || !thread) return; onThreadsChange(threads.map((t) => (t.id === thread.id ? { ...t, comments: [...t.comments, { id: `${Date.now()}`, author: me.name, color: me.color, text: draft.trim(), time: "now" }] } : t))); setDraft(""); }; return (

{ if (active) { const t = threads.find((x) => x.id === active); if (t && !t.comments.length) onThreadsChange(threads.filter((x) => x.id !== active)); setActive(null); return; } if (!commenting) return; const r = e.currentTarget.getBoundingClientRect(); const id = `t${Date.now()}`; onThreadsChange([...threads, { id, x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height, comments: [] }]); setActive(id); setDraft(""); }} > {children} {threads.map((t) => (

setActive(active === t.id ? null : t.id)} />

))} {thread ? ( e.stopPropagation()} className="absolute z-20 w-72 cursor-default rounded-2xl border border-border-strong bg-surface-raised text-sm shadow-overlay" style={{ left: thread.x > 0.6 ? undefined : `calc(${thread.x * 100}% + 40px)`, right: thread.x > 0.6 ? `calc(${(1 - thread.x) * 100}% + 12px)` : undefined, top: `calc(${thread.y * 100}% - 36px)`, }} > {thread.comments.length ? (

Thread

) : null}

{thread.comments.map((c) => (

{initials(c.author)}

{c.author} {c.time} {c.text}

))}

setDraft(e.target.value)} onKeyDown={(e) => e.key === "Enter" && post()} placeholder={thread.comments.length ? "Reply…" : "Add a comment…"} aria-label="Comment" className="h-8 flex-1 rounded-lg bg-background px-2.5 text-sm outline-none placeholder:text-subtle focus:ring-1 focus:ring-accent" />

) : null}

); }

Comment Pins

Installation

Exports