proto-plugin 0.1.0

package/src/lib/prototype-comments/ui/comment-highlight.ts

@@ -0,0 +1,48 @@
+import type { AnnotationBoundingBox, CommentAnnotationFields } from "../core/types";
+
+type HighlightInput = Pick<
+  CommentAnnotationFields,
+  "viewportBoundingBox" | "boundingBox" | "isFixed" | "captureViewport"
+>;
+
+export function getViewportBoundingBox(annotation: HighlightInput): AnnotationBoundingBox | null {
+  if (annotation.viewportBoundingBox) {
+    return annotation.viewportBoundingBox;
+  }
+
+  if (!annotation.boundingBox) return null;
+
+  if (annotation.isFixed) {
+    return annotation.boundingBox;
+  }
+
+  if (annotation.captureViewport) {
+    return {
+      x: annotation.boundingBox.x,
+      y: annotation.boundingBox.y - annotation.captureViewport.scrollY,
+      width: annotation.boundingBox.width,
+      height: annotation.boundingBox.height,
+    };
+  }
+
+  return null;
+}
+
+export function getCaptureAspectRatio(
+  annotation: Pick<CommentAnnotationFields, "captureViewport">,
+): string | undefined {
+  const viewport = annotation.captureViewport;
+  if (!viewport?.width || !viewport?.height) return undefined;
+  return `${viewport.width} / ${viewport.height}`;
+}
+
+/** Centers the screenshot crop on the annotated element (sidebar card previews). */
+export function getScreenshotObjectPosition(
+  annotation: HighlightInput & Pick<CommentAnnotationFields, "captureViewport">,
+): string {
+  const box = getViewportBoundingBox(annotation);
+  const viewport = annotation.captureViewport;
+  if (!box || !viewport?.height) return "top";
+  const centerY = ((box.y + box.height / 2) / viewport.height) * 100;
+  return `50% ${centerY}%`;
+}

package/src/lib/prototype-comments/ui/comment-thread.module.scss

@@ -0,0 +1,203 @@
+.threadPanel {
+  padding: 0.625rem 0.875rem 0.75rem;
+  border-radius: 0 0 16px 16px;
+  margin-top: -6px;
+  background: #fff;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.12),
+    0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+
+.threadPanelDark {
+  padding: 0.625rem 0.875rem 0.75rem;
+  border-radius: 0 0 16px 16px;
+  margin-top: -6px;
+  background: #1e1e1e;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.35),
+    0 8px 32px rgba(0, 0, 0, 0.18),
+    0 0 0 1px #333333;
+}
+
+.replies {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 0.625rem;
+  border-left: 2px solid var(--border-solid, rgba(0, 0, 0, 0.08));
+}
+
+.repliesDark {
+  border-left-color: rgba(255, 255, 255, 0.12);
+}
+
+.replyRow {
+  position: relative;
+  padding-right: 3.25rem;
+}
+
+.replyMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font-size: 0.6875rem;
+  color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
+  margin-bottom: 0.125rem;
+}
+
+.replyMetaDark {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.replyText {
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: var(--text-secondary, rgba(0, 0, 0, 0.7));
+  margin: 0;
+}
+
+.replyTextDark {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.rowActions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  gap: 0.25rem;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.replyRow:hover .rowActions,
+.replyRow:focus-within .rowActions,
+.rowActionsVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.iconBtn {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--border-solid, rgba(0, 0, 0, 0.1));
+  background: var(--bg-main, #fff);
+  color: var(--text-secondary, rgba(0, 0, 0, 0.55));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.06));
+
+  &:hover {
+    border-color: var(--border-medium, rgba(0, 0, 0, 0.16));
+    color: var(--text-primary, rgba(0, 0, 0, 0.85));
+  }
+}
+
+.iconBtnDark {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.55);
+  box-shadow: none;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+
+.iconBtnDanger:hover {
+  color: var(--error, #dc2626);
+  border-color: color-mix(in srgb, var(--error, #dc2626) 35%, transparent);
+}
+
+.textarea {
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: var(--text-primary, #e0e0e0);
+  border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  outline: none;
+  resize: none;
+  width: 100%;
+  font-family: inherit;
+  box-sizing: border-box;
+  background: var(--bg-main, #fff);
+  min-height: 3.25rem;
+}
+
+.textareaDark {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.rowComposerActions,
+.composerActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  margin-top: 0.375rem;
+}
+
+.secondaryBtn,
+.primaryBtn {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.secondaryBtn {
+  border: 1px solid var(--border-solid, rgba(0, 0, 0, 0.1));
+  background: var(--bg-main, #fff);
+  color: var(--text-secondary, rgba(0, 0, 0, 0.55));
+}
+
+.primaryBtn {
+  border: none;
+  background: var(--color-active, #3c82f7);
+  color: var(--text-on-active, #fff);
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
+.replyLink {
+  align-self: flex-start;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary, rgba(0, 0, 0, 0.55));
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: var(--text-primary, rgba(0, 0, 0, 0.85));
+  }
+}
+
+.replyLinkDark {
+  color: rgba(255, 255, 255, 0.55);
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}

package/src/lib/prototype-comments/ui/comments-grid-card.module.scss

@@ -0,0 +1,253 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  transition:
+    border-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
+    background 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
+    opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardSidebar {
+  border-radius: 0.375rem;
+}
+
+.cardResolved {
+  opacity: 0.72;
+}
+
+.screenshotCollapse {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.28s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardCondensed .screenshotCollapse {
+  grid-template-rows: 0fr;
+}
+
+.screenshotInner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.screenshot {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-subtle);
+  border-bottom: 1px solid var(--border-solid);
+  transition: border-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.screenshotImgSidebar {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 220px;
+}
+
+.cardCondensed .screenshot {
+  border-bottom-color: transparent;
+}
+
+.body {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0;
+  padding: 6px 12px 10px;
+  flex: 1;
+  min-width: 0;
+  transition:
+    flex-direction 0.28s cubic-bezier(0.215, 0.61, 0.355, 1),
+    align-items 0.28s cubic-bezier(0.215, 0.61, 0.355, 1),
+    gap 0.28s cubic-bezier(0.215, 0.61, 0.355, 1),
+    padding 0.28s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardCondensed .body {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 56px 6px 10px;
+  min-height: 40px;
+}
+
+.statusIcon {
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  color: var(--success);
+}
+
+.cardCondensed .statusIcon {
+  display: flex;
+  margin-right: 8px;
+}
+
+.bodyMain {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  transition: gap 0.28s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardCondensed .bodyMain {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.comment {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  transition:
+    font-size 0.28s cubic-bezier(0.215, 0.61, 0.355, 1),
+    line-height 0.28s cubic-bezier(0.215, 0.61, 0.355, 1),
+    color 0.2s ease,
+    -webkit-line-clamp 0.28s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.commentExpanded {
+  display: block;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+  overflow-wrap: anywhere;
+}
+
+.cardCondensed .comment {
+  font-size: 13px;
+  line-height: 1.35;
+  color: var(--text-secondary);
+  -webkit-line-clamp: 1;
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-decoration: line-through;
+}
+
+.cardCondensed .commentExpanded {
+  white-space: normal;
+  text-overflow: unset;
+  -webkit-line-clamp: unset;
+}
+
+.resolvedBadgeCollapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.28s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.resolvedBadgeCollapseExpanded {
+  grid-template-rows: 1fr;
+}
+
+.cardCondensed .resolvedBadgeCollapse {
+  grid-template-rows: 0fr;
+}
+
+.resolvedBadgeInner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.threadCollapse {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.28s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardCondensed .threadCollapse {
+  grid-template-rows: 0fr;
+}
+
+.threadInner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.replyCount {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-tertiary);
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  transition:
+    max-width 0.28s cubic-bezier(0.215, 0.61, 0.355, 1),
+    opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardCondensed .replyCountVisible {
+  max-width: 80px;
+  opacity: 1;
+}
+
+.actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  z-index: 2;
+  transition:
+    gap 0.25s cubic-bezier(0.215, 0.61, 0.355, 1),
+    opacity 0.15s ease;
+}
+
+.cardCondensed .actions {
+  gap: 3px;
+}
+
+.secondaryAction {
+  display: flex;
+  overflow: hidden;
+  max-width: 28px;
+  opacity: 1;
+  transition:
+    max-width 0.25s cubic-bezier(0.215, 0.61, 0.355, 1),
+    opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
+    margin 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.cardCondensed .secondaryAction {
+  max-width: 0;
+  opacity: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+.actionBtnCompact {
+  width: 24px !important;
+  height: 24px !important;
+  border-radius: 5px !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .screenshotCollapse,
+  .body,
+  .statusIcon,
+  .comment,
+  .resolvedBadgeCollapse,
+  .threadCollapse,
+  .replyCount,
+  .actions,
+  .secondaryAction {
+    transition: none;
+  }
+}

package/src/lib/prototype-comments/ui/comments-sidebar.module.scss

@@ -0,0 +1,123 @@
+.sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 0;
+  max-width: min(var(--sidebar-width, var(--comments-sidebar-width, 400px)), 100vw);
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg-main);
+  border-left: 1px solid transparent;
+  color: var(--text-primary);
+  transition:
+    width 0.25s cubic-bezier(0.32, 0.72, 0, 1),
+    border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+
+  &.open {
+    width: min(var(--sidebar-width, var(--comments-sidebar-width, 400px)), 100vw);
+    border-left-color: var(--border-solid);
+  }
+
+  &.resizing {
+    transition: none;
+    user-select: none;
+  }
+}
+
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  left: -4px;
+  z-index: 1;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 3px;
+    width: 2px;
+    height: 100%;
+    background: transparent;
+    transition: background 0.15s;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover::before {
+      background: var(--border-medium);
+    }
+  }
+
+  .sidebar.resizing &::before {
+    background: var(--border-medium);
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: min(var(--sidebar-width, var(--comments-sidebar-width, 400px)), 100vw);
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid var(--border-solid);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.count {
+  margin-left: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.headerButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background: var(--bg-layered);
+      color: var(--text-primary);
+    }
+  }
+}
+
+.headerButtonActive {
+  background: color-mix(in srgb, var(--color-active) 12%, transparent);
+  color: var(--color-active);
+}
+
+.content {
+  flex: 1;
+  min-width: min(var(--sidebar-width, var(--comments-sidebar-width, 400px)), 100vw);
+  overflow-y: auto;
+  padding: 12px 12px 24px;
+}

package/src/lib/prototype-comments/ui/icon-transitions.module.scss

@@ -0,0 +1,51 @@
+// Scoped icon transition classes.
+// Replaces inline <style> tags that injected global class names (e.g. .copy-icon)
+// which could conflict with host page styles. CSS module class names are hashed,
+// so they're immune to host CSS collisions.
+// Using !important ensures host rules like `svg * { opacity: 1 !important }` can't
+// force both icon states visible simultaneously (class specificity 0,1,0 beats
+// element selectors like `svg *` at 0,0,1 even when both use !important).
+// See: https://github.com/prototype-comments/issues/58
+
+// Opacity + transform transitions (copy, send icons)
+.iconState {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform-origin: center;
+}
+
+.iconStateFast {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  transform-origin: center;
+}
+
+// Opacity-only transitions (eye, pause/play icons)
+.iconFade {
+  transition: opacity 0.2s ease;
+}
+
+.iconFadeFast {
+  transition: opacity 0.15s ease;
+}
+
+.visible {
+  opacity: 1 !important;
+}
+
+.visibleScaled {
+  opacity: 1 !important;
+  transform: scale(1);
+}
+
+.hidden {
+  opacity: 0 !important;
+}
+
+.hiddenScaled {
+  opacity: 0 !important;
+  transform: scale(0.8);
+}
+
+.sending {
+  opacity: 0.5 !important;
+  transform: scale(0.8);
+}