proto-plugin 0.1.0

package/src/lib/prototype-comments/ui/CommentsListPage.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { useCommentStore } from "../react/CommentProvider";
+import { CommentsGrid } from "./CommentsGrid";
+
+type CommentsListPageProps = {
+  basePath?: string;
+};
+
+export function CommentsListPage({ basePath = "/canvas" }: CommentsListPageProps) {
+  const router = useRouter();
+  const { annotations, deleteAnnotation, updateAnnotation, resolveAnnotation } = useCommentStore();
+
+  return (
+    <CommentsGrid
+      annotations={annotations}
+      onSelect={(id) => router.push(`${basePath}/${id}`)}
+      onDelete={deleteAnnotation}
+      onUpdateComment={updateAnnotation}
+      onResolve={resolveAnnotation}
+    />
+  );
+}

package/src/lib/prototype-comments/ui/CommentsSidebar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { countUnresolvedAnnotations } from "../core/annotation-status";
+import { useCommentStore } from "../react/CommentProvider";
+import { CommentHeaderCount } from "./CommentHeaderCount";
+import { CommentsGrid } from "./CommentsGrid";
+import {
+  SIDEBAR_ICON_BUTTON_CLASS,
+  Sidebar,
+} from "@prototype/components/platform-ui/sidebar";
+import { IconButton } from "@prototype/components/platform-ui/icon-button";
+import { cn } from "@prototype/lib/utils";
+import { MessageSquarePlus } from "lucide-react";
+
+type CommentsSidebarProps = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (id: string) => void;
+  selectedId?: string | null;
+  isCommentModeActive?: boolean;
+  onToggleCommentMode?: () => void;
+};
+
+export function CommentsSidebar({
+  open,
+  onClose,
+  onSelect,
+  selectedId,
+  isCommentModeActive = false,
+  onToggleCommentMode,
+}: CommentsSidebarProps) {
+  const { annotations, deleteAnnotation, updateAnnotation, resolveAnnotation } =
+    useCommentStore();
+  const unresolvedCount = countUnresolvedAnnotations(annotations);
+  const totalCount = annotations.length;
+
+  return (
+    <Sidebar
+      open={open}
+      text="Comments"
+      titleAddon={
+        <CommentHeaderCount unresolved={unresolvedCount} total={totalCount} />
+      }
+      onClose={onClose}
+      ariaLabel="Comments"
+      dataAttribute="data-comments-sidebar"
+      widthCssVar="--comments-sidebar-width"
+      headerActions={
+        onToggleCommentMode ? (
+          <IconButton
+            type="button"
+            onClick={onToggleCommentMode}
+            onMouseDown={(event) => event.preventDefault()}
+            aria-label={isCommentModeActive ? "Exit comment mode" : "Add comment"}
+            aria-pressed={isCommentModeActive}
+            className={cn(
+              SIDEBAR_ICON_BUTTON_CLASS,
+              isCommentModeActive && "bg-accent text-accent-foreground",
+            )}
+          >
+            <MessageSquarePlus size={16} strokeWidth={2} />
+          </IconButton>
+        ) : null
+      }
+    >
+      <CommentsGrid
+        annotations={annotations}
+        layout="sidebar"
+        onSelect={onSelect}
+        onDelete={deleteAnnotation}
+        onUpdateComment={updateAnnotation}
+        onResolve={resolveAnnotation}
+        selectedId={selectedId}
+      />
+    </Sidebar>
+  );
+}

package/src/lib/prototype-comments/ui/annotation-marker/index.tsx

@@ -0,0 +1,200 @@
+import type { CommentAnnotationFields } from "../../core/types";
+import { IconEdit, IconPlus, IconXmark } from "../icons";
+
+type MarkerAnnotation = CommentAnnotationFields & {
+  status?: "pending" | "acknowledged" | "resolved" | "dismissed";
+};
+import styles from "./styles.module.scss";
+
+type MarkerClickBehavior = "edit" | "delete";
+
+// =============================================================================
+// AnnotationMarker
+// =============================================================================
+
+type AnnotationMarkerProps = {
+  annotation: MarkerAnnotation;
+  globalIndex: number;
+  /** Display index within this layer (for staggered animation delays) */
+  layerIndex: number;
+  layerSize: number;
+  isExiting: boolean;
+  isClearing: boolean;
+  isAnimated: boolean;
+  isHovered: boolean;
+  isDeleting: boolean;
+  isEditingAny: boolean;
+  renumberFrom: number | null;
+  markerClickBehavior: MarkerClickBehavior;
+  tooltipStyle?: React.CSSProperties;
+  positionStyle?: { left: string; top: number };
+  onHoverEnter: (annotation: MarkerAnnotation) => void;
+  onHoverLeave: () => void;
+  onClick: (annotation: MarkerAnnotation) => void;
+  onContextMenu?: (annotation: MarkerAnnotation) => void;
+};
+
+export function AnnotationMarker({
+  annotation,
+  globalIndex,
+  layerIndex,
+  layerSize,
+  isExiting,
+  isClearing,
+  isAnimated,
+  isHovered,
+  isDeleting,
+  isEditingAny,
+  renumberFrom,
+  markerClickBehavior,
+  tooltipStyle,
+  positionStyle,
+  onHoverEnter,
+  onHoverLeave,
+  onClick,
+  onContextMenu,
+}: AnnotationMarkerProps) {
+  const showDeleteState = (isHovered || isDeleting) && !isEditingAny;
+  const showDeleteHover = showDeleteState && markerClickBehavior === "delete";
+  const isMulti = annotation.isMultiSelect;
+
+  const markerColor = isMulti
+    ? "var(--prototype-comment-color-green)"
+    : "var(--prototype-comment-color-accent)";
+
+  const animClass = isExiting
+    ? styles.exit
+    : isClearing
+      ? styles.clearing
+      : !isAnimated
+        ? styles.enter
+        : "";
+
+  const animationDelay = isExiting
+    ? `${(layerSize - 1 - layerIndex) * 20}ms`
+    : `${layerIndex * 20}ms`;
+
+  return (
+    <div
+      className={`${styles.marker} ${isMulti ? styles.multiSelect : ""} ${animClass} ${showDeleteHover ? styles.hovered : ""}`}
+      data-annotation-marker
+      style={{
+        left: positionStyle?.left ?? `${annotation.x}%`,
+        top: positionStyle?.top ?? annotation.y,
+        backgroundColor: showDeleteHover ? undefined : markerColor,
+        animationDelay,
+      }}
+      onMouseEnter={() => onHoverEnter(annotation)}
+      onMouseLeave={onHoverLeave}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!isExiting) onClick(annotation);
+      }}
+      onContextMenu={
+        onContextMenu
+          ? (e) => {
+              if (markerClickBehavior === "delete") {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!isExiting) onContextMenu(annotation);
+              }
+            }
+          : undefined
+      }
+    >
+      {showDeleteState ? (
+        showDeleteHover ? (
+          <IconXmark size={isMulti ? 18 : 16} />
+        ) : (
+          <IconEdit size={16} />
+        )
+      ) : (
+        <span
+          className={
+            renumberFrom !== null && globalIndex >= renumberFrom
+              ? styles.renumber
+              : undefined
+          }
+        >
+          {globalIndex + 1}
+        </span>
+      )}
+
+      {isHovered && !isEditingAny && (
+        <div
+          className={`${styles.markerTooltip} ${styles.enter}`}
+          style={tooltipStyle}
+        >
+          <span className={styles.markerQuote}>
+            {annotation.element}
+            {annotation.selectedText &&
+              ` "${annotation.selectedText.slice(0, 30)}${annotation.selectedText.length > 30 ? "..." : ""}"`}
+          </span>
+          <span className={styles.markerNote}>{annotation.comment}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// PendingMarker
+// =============================================================================
+
+type PendingMarkerProps = {
+  x: number;
+  y: number;
+  isMultiSelect?: boolean;
+  isExiting: boolean;
+  positionStyle?: { left: string; top: number };
+};
+
+export function PendingMarker({
+  x,
+  y,
+  isMultiSelect,
+  isExiting,
+  positionStyle,
+}: PendingMarkerProps) {
+  return (
+    <div
+      className={`${styles.marker} ${styles.pending} ${isMultiSelect ? styles.multiSelect : ""} ${isExiting ? styles.exit : styles.enter}`}
+      data-annotation-marker
+      style={{
+        left: positionStyle?.left ?? `${x}%`,
+        top: positionStyle?.top ?? y,
+        backgroundColor: isMultiSelect
+          ? "var(--prototype-comment-color-green)"
+          : "var(--prototype-comment-color-accent)",
+      }}
+    >
+      <IconPlus size={12} />
+    </div>
+  );
+}
+
+// =============================================================================
+// ExitingMarker
+// =============================================================================
+
+type ExitingMarkerProps = {
+  annotation: MarkerAnnotation;
+  fixed?: boolean;
+  positionStyle?: { left: string; top: number };
+};
+
+export function ExitingMarker({ annotation, fixed, positionStyle }: ExitingMarkerProps) {
+  const isMulti = annotation.isMultiSelect;
+  return (
+    <div
+      className={`${styles.marker} ${fixed ? styles.fixed : ""} ${styles.hovered} ${isMulti ? styles.multiSelect : ""} ${styles.exit}`}
+      data-annotation-marker
+      style={{
+        left: positionStyle?.left ?? `${annotation.x}%`,
+        top: positionStyle?.top ?? annotation.y,
+      }}
+    >
+      <IconXmark size={isMulti ? 12 : 10} />
+    </div>
+  );
+}

package/src/lib/prototype-comments/ui/annotation-marker/styles.module.scss

@@ -0,0 +1,194 @@
+@keyframes markerIn {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.3);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes markerOut {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.3);
+  }
+}
+
+@keyframes tooltipIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(2px) scale(0.891);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(0.909);
+  }
+}
+
+@keyframes renumberRoll {
+  0% {
+    transform: translateX(-40%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.marker {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  background: var(--prototype-comment-color-blue);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  cursor: pointer;
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.2),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+  user-select: none;
+  will-change: transform, opacity;
+  contain: layout style;
+  z-index: 1;
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:not(.enter):not(.exit):not(.clearing) {
+    transition:
+      background-color 0.15s ease,
+      transform 0.1s ease;
+  }
+
+  &.enter {
+    animation: markerIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  &.exit {
+    animation: markerOut 0.2s ease-out both;
+    pointer-events: none;
+  }
+
+  &.clearing {
+    animation: markerOut 0.15s ease-out both;
+    pointer-events: none;
+  }
+
+  &:not(.enter):not(.exit):not(.clearing):hover {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  &.pending {
+    position: fixed;
+    background-color: var(--prototype-comment-color-blue);
+    cursor: default;
+  }
+
+  &.fixed {
+    position: fixed;
+  }
+
+  &.multiSelect {
+    background-color: var(--prototype-comment-color-green);
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+
+    &.pending {
+      background-color: var(--prototype-comment-color-green);
+    }
+  }
+
+  &.hovered {
+    background-color: var(--prototype-comment-color-red);
+  }
+}
+
+.renumber {
+  display: block;
+  animation: renumberRoll 0.2s ease-out;
+}
+
+.markerTooltip {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.909);
+  z-index: 100002;
+  background: #1e1e1e;
+  padding: 8px 0.75rem;
+  border-radius: 0.75rem;
+  font-family:
+    var(--tool-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
+  font-weight: 400;
+  color: #fff;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.08);
+  min-width: 120px;
+  max-width: 200px;
+  pointer-events: none;
+  cursor: default;
+
+  &.enter {
+    animation: tooltipIn 0.1s ease-out forwards;
+  }
+}
+
+.markerQuote {
+  display: block;
+  font-size: 12px;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 0.3125rem;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.markerNote {
+  display: block;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-bottom: 2px;
+}
+
+// Light mode overrides
+[data-prototype-comment-theme="light"] {
+  .markerTooltip {
+    background: #fff;
+    box-shadow:
+      0 4px 20px rgba(0, 0, 0, 0.12),
+      0 0 0 1px rgba(0, 0, 0, 0.06);
+
+    .markerQuote {
+      color: rgba(0, 0, 0, 0.5);
+    }
+
+    .markerNote {
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}