@dfosco/storyboard 0.5.0-alpha.0

package/src/core/comments/ui/comment-layout.css

@@ -0,0 +1,142 @@
+/*
+  Comment layout styles — positioning, pins, overlay, cursor, animations.
+  These support the vanilla DOM elements created by mount.js (pins, overlay, banner).
+  UI components (AuthModal, Composer, etc.) are styled via Tailwind/shadcn.
+*/
+
+/* Comment mode cursor */
+.sb-comment-mode {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%231f2328' stroke-width='1.5' d='M19.503 9.97c1.204.489 1.112 2.224-.137 2.583l-6.305 1.813-2.88 5.895c-.571 1.168-2.296.957-2.569-.314L4.677 6.257A1.369 1.369 0 0 1 6.53 4.7z' clip-rule='evenodd'/%3E%3C/svg%3E") 4 2, crosshair;
+  position: relative;
+}
+[data-sb-theme^="dark"] .sb-comment-mode,
+[data-sb-theme^="dark"].sb-comment-mode {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%231c2128' stroke='%23fff' stroke-width='1.5' d='M19.503 9.97c1.204.489 1.112 2.224-.137 2.583l-6.305 1.813-2.88 5.895c-.571 1.168-2.296.957-2.569-.314L4.677 6.257A1.369 1.369 0 0 1 6.53 4.7z' clip-rule='evenodd'/%3E%3C/svg%3E") 4 2, crosshair;
+}
+
+/* Comment overlay */
+.sb-comment-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 99998;
+  pointer-events: none;
+}
+.sb-comment-mode .sb-comment-overlay {
+  pointer-events: auto;
+}
+
+/* Comment pin */
+.sb-comment-pin {
+  position: absolute;
+  border: 3px solid hsl(var(--sb--pin-hue, 140), 50%, 38%);
+  border-radius: 50%;
+  z-index: 100000;
+  width: 32px; height: 32px;
+  margin-left: -16px; margin-top: -16px;
+  transition: transform 100ms ease-in-out;
+  cursor: grab;
+  pointer-events: auto;
+  overflow: hidden;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+  background: var(--sb--color-popover, #fff);
+}
+.sb-comment-pin:active { cursor: grabbing; }
+.sb-pin-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
+.sb-comment-pin[data-resolved="true"] {
+  border-color: var(--sb--color-muted-foreground, #848d97);
+  opacity: 0.5;
+}
+.sb-comment-pin-pending {
+  border-color: var(--sb--color-muted-foreground, #848d97) !important;
+  opacity: 0.6;
+  animation: sb-pin-pulse 1.2s ease-in-out infinite;
+}
+.sb-comment-pin-failed {
+  border-color: var(--sb--color-destructive, #d1242f) !important;
+  cursor: pointer;
+  animation: sb-pin-shake 0.4s ease-in-out;
+}
+@keyframes sb-pin-pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+@keyframes sb-pin-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+
+/* Comment composer positioning */
+.sb-composer {
+  position: absolute;
+  width: 280px;
+  z-index: 100001;
+  background: var(--sb--color-popover, #fff);
+  color: var(--sb--color-popover-foreground, #1f2328);
+  border: 1px solid var(--sb--color-border, #d1d5db);
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+  font-family: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+/* Comment window positioning */
+.sb-comment-window {
+  width: 360px;
+  max-height: 480px;
+  z-index: 100001;
+  scrollbar-width: none;
+  background: var(--sb--color-popover, #fff);
+  color: var(--sb--color-popover-foreground, #1f2328);
+  border: 1px solid var(--sb--color-border, #d1d5db);
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+}
+.sb-comment-window::-webkit-scrollbar { display: none; }
+.sb-comment-window * { scrollbar-width: none; }
+.sb-comment-window *::-webkit-scrollbar { display: none; }
+
+/* Auth modal positioning */
+.sb-auth-backdrop {
+  z-index: 100000;
+  background: rgba(0,0,0,0.5);
+  backdrop-filter: blur(4px);
+}
+
+/* Comments drawer */
+.sb-comments-drawer-backdrop { z-index: 99997; background: rgba(0,0,0,0.4); }
+.sb-comments-drawer {
+  z-index: 99998;
+  width: 420px;
+  max-width: 90vw;
+  background: var(--sb--color-background, #fff);
+  color: var(--sb--color-foreground, #1f2328);
+}
+
+/* Drawer animation */
+@keyframes sb-drawer-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.sb-drawer-animate { animation: sb-drawer-slide-in 150ms ease; }
+
+/* Banner */
+.sb-banner {
+  position: fixed;
+  bottom: 12px; left: 50%; transform: translateX(-50%);
+  z-index: 99999;
+  background: var(--sb--color-popover, #fff);
+  color: var(--sb--color-popover-foreground, #1f2328);
+  padding: 6px 16px; border-radius: 8px; font-size: 13px;
+  line-height: 1.4; backdrop-filter: blur(12px);
+  pointer-events: none;
+  display: flex; align-items: center;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  font-family: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+.sb-kbd {
+  display: inline-block; padding: 1px 6px; font-size: 11px;
+  font-family: inherit; border: 1px solid rgba(255,255,255,0.3);
+  border-radius: 4px; background: rgba(255,255,255,0.1);
+}

package/src/core/comments/ui/commentWindow.js

@@ -0,0 +1,121 @@
+/**
+ * Comment window — React popup that shows a comment thread with replies and reactions.
+ *
+ * Opens when clicking a comment pin. Shows comment body, author, replies,
+ * reply input, reactions, and supports drag-to-move.
+ * Styled with Tachyons + sb-* custom classes for light/dark mode support.
+ */
+
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import CommentWindowComponent from './CommentWindow.jsx'
+import { getCachedUser } from '../auth.js'
+import { saveDraft, replyDraftKey } from '../commentDrafts.js'
+import './comment-layout.css'
+
+// Track the currently open window so only one is open at a time
+let activeWindow = null
+
+/**
+ * Show a comment window for a given comment.
+ * @param {HTMLElement} container - The positioned container element (overlay)
+ * @param {object} comment - The parsed comment object (with meta, text, replies, reactionGroups, author, etc.)
+ * @param {object} discussion - The discussion object (id needed for replies)
+ * @param {object} [callbacks] - Optional callbacks
+ * @param {(xPct: number, yPct: number) => { left: string, top: string }} [callbacks.getAnchorPosition] - Resolve coordinates to overlay position
+ * @param {() => void} [callbacks.onClose] - Called when window is closed
+ * @param {() => void} [callbacks.onMove] - Called after comment is moved (for re-rendering pins)
+ * @returns {{ el: HTMLElement, destroy: () => void }}
+ */
+export function showCommentWindow(container, comment, discussion, callbacks = {}) {
+  if (activeWindow) {
+    activeWindow.destroy()
+    activeWindow = null
+  }
+
+  const user = getCachedUser()
+  const win = document.createElement('div')
+  const anchor = callbacks.getAnchorPosition
+    ? callbacks.getAnchorPosition(comment.meta?.x ?? 0, comment.meta?.y ?? 0)
+    : { left: `${comment.meta?.x ?? 0}%`, top: `${comment.meta?.y ?? 0}%` }
+  win.className = 'sb-comment-window absolute'
+  win.style.cssText = `z-index:100001;width:360px;max-height:480px;left:${anchor.left};top:${anchor.top};transform:translate(12px,-50%)`
+
+  // Stop click from propagating to overlay
+  win.addEventListener('click', (e) => e.stopPropagation())
+
+  // Set URL param for deep linking
+  const url = new URL(window.location.href)
+  url.searchParams.set('comment', comment.id)
+  window.history.replaceState(null, '', url.toString())
+
+  container.appendChild(win)
+
+  let root = null
+
+  function destroy() {
+    // Save reply draft from DOM before React unmounts
+    const textarea = win.querySelector('textarea[placeholder="Reply…"]')
+    const val = textarea?.value?.trim()
+    if (val) {
+      saveDraft(replyDraftKey(comment.id), { type: 'reply', text: textarea.value })
+    }
+
+    if (root) { root.unmount(); root = null }
+    win.remove()
+    if (activeWindow?.el === win) activeWindow = null
+    const currentUrl = new URL(window.location.href)
+    currentUrl.searchParams.delete('comment')
+    window.history.replaceState(null, '', currentUrl.toString())
+    callbacks.onClose?.()
+  }
+
+  root = createRoot(win)
+  root.render(createElement(CommentWindowComponent, {
+    comment,
+    discussion,
+    user,
+    winEl: win,
+    onClose: destroy,
+    onMove: () => callbacks.onMove?.(),
+  }))
+
+  // Adjust position to keep window within viewport
+  requestAnimationFrame(() => {
+    const rect = win.getBoundingClientRect()
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    const pad = 8
+
+    let tx = 12
+    let ty = -(rect.height / 2)
+
+    if (rect.left + rect.width > vw - pad) {
+      tx = -(rect.width + 12)
+    }
+
+    const anchorY = rect.top + rect.height / 2
+    const finalBottom = anchorY + ty + rect.height
+    if (finalBottom > vh - pad) {
+      ty -= (finalBottom - vh + pad)
+    }
+    if (anchorY + ty < pad) {
+      ty = pad - anchorY
+    }
+
+    win.style.transform = `translate(${tx}px, ${ty}px)`
+  })
+
+  activeWindow = { el: win, destroy }
+  return { el: win, destroy }
+}
+
+/**
+ * Close the currently open comment window, if any.
+ */
+export function closeCommentWindow() {
+  if (activeWindow) {
+    activeWindow.destroy()
+    activeWindow = null
+  }
+}

package/src/core/comments/ui/comments.css

@@ -0,0 +1,242 @@
+/*
+  Comments UI custom styles.
+  sb-* custom properties switch based on [data-sb-theme] attribute on <html>,
+  set by the host app's theme switcher. Themes starting with "dark" get dark
+  tokens; everything else gets light tokens.
+*/
+
+/* --- Light theme (default) --- */
+:root {
+  --sb--bg: #ffffff;
+  --sb--bg-inset: #f6f8fa;
+  --sb--bg-muted: #f3f4f6;
+  --sb--border: #d1d5db;
+  --sb--border-muted: #e5e7eb;
+  --sb--fg: #1f2328;
+  --sb--fg-muted: #656d76;
+  --sb--fg-accent: #0969da;
+  --sb--fg-success: #1a7f37;
+  --sb--fg-danger: #d1242f;
+  --sb--btn-success: #1a7f37;
+}
+
+/* --- Dark theme (any dark-* variant) --- */
+[data-sb-theme^="dark"] {
+  --sb--bg: #161b22;
+  --sb--bg-inset: #0d1117;
+  --sb--bg-muted: #21262d;
+  --sb--border: #30363d;
+  --sb--border-muted: #21262d;
+  --sb--fg: #e6edf3;
+  --sb--fg-muted: #8b949e;
+  --sb--fg-accent: #58a6ff;
+  --sb--fg-success: #3fb950;
+  --sb--fg-danger: #f85149;
+  --sb--btn-success: #238636;
+}
+
+/* --- Semantic utility classes (supplement Tachyons) --- */
+.sb-bg         { background-color: var(--sb--bg); }
+.sb-bg-inset   { background-color: var(--sb--bg-inset); }
+.sb-bg-muted   { background-color: var(--sb--bg-muted); }
+.sb-b-default  { border-color: var(--sb--border); }
+.sb-b-muted    { border-color: var(--sb--border-muted); }
+.sb-fg         { color: var(--sb--fg); }
+.sb-fg-muted   { color: var(--sb--fg-muted); }
+.sb-fg-accent  { color: var(--sb--fg-accent); }
+.sb-fg-success { color: var(--sb--fg-success); }
+.sb-fg-danger  { color: var(--sb--fg-danger); }
+.sb-btn-success { background-color: var(--sb--btn-success); color: #fff; }
+.sb-btn-success:hover { filter: brightness(1.15); }
+.sb-btn-cancel { background-color: var(--sb--bg-muted); border: 1px solid var(--sb--border); color: var(--sb--fg); }
+.sb-btn-cancel:hover { background-color: var(--sb--border-muted); }
+
+.sb-input {
+  background: var(--sb--bg-inset);
+  border: 1px solid var(--sb--border);
+  color: var(--sb--fg);
+  outline: none;
+}
+.sb-input:focus {
+  border-color: var(--sb--fg-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb--fg-accent) 15%, transparent);
+}
+.sb-input::placeholder { color: var(--sb--fg-muted); }
+
+.sb-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1); }
+[data-sb-theme^="dark"] .sb-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3); }
+
+.sb-pill {
+  border: 1px solid var(--sb--border);
+  background: none;
+  color: var(--sb--fg-muted);
+  cursor: pointer;
+  transition: border-color 100ms, background 100ms;
+}
+.sb-pill:hover { border-color: var(--sb--fg-accent); }
+.sb-pill-active {
+  border-color: color-mix(in srgb, var(--sb--fg-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--sb--fg-accent) 10%, transparent);
+  color: var(--sb--fg-accent);
+}
+
+/* --- Comment mode cursor --- */
+.sb-comment-mode {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%231f2328' stroke-width='1.5' d='M19.503 9.97c1.204.489 1.112 2.224-.137 2.583l-6.305 1.813-2.88 5.895c-.571 1.168-2.296.957-2.569-.314L4.677 6.257A1.369 1.369 0 0 1 6.53 4.7z' clip-rule='evenodd'/%3E%3C/svg%3E") 4 2, crosshair;
+}
+[data-sb-theme^="dark"] .sb-comment-mode,
+[data-sb-theme^="dark"].sb-comment-mode {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%231c2128' stroke='%23fff' stroke-width='1.5' d='M19.503 9.97c1.204.489 1.112 2.224-.137 2.583l-6.305 1.813-2.88 5.895c-.571 1.168-2.296.957-2.569-.314L4.677 6.257A1.369 1.369 0 0 1 6.53 4.7z' clip-rule='evenodd'/%3E%3C/svg%3E") 4 2, crosshair;
+}
+
+/* --- Drawer animation --- */
+@keyframes sb-drawer-slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.sb-drawer-animate { animation: sb-drawer-slide-in 150ms ease; }
+
+/* --- Utility classes (replace inline styles) --- */
+
+/* Font sizes */
+.sb-f-xs  { font-size: 11px; }
+.sb-f-sm  { font-size: 13px; }
+
+/* Sizing */
+.sb-avatar     { width: 24px; height: 24px; }
+.sb-avatar-sm  { width: 20px; height: 20px; }
+.sb-avatar-lg  { width: 40px; height: 40px; border-width: 2px; }
+.sb-icon-btn   { width: 28px; height: 28px; }
+
+/* Close button */
+.sb-close-btn  { width: 28px; height: 28px; font-size: 18px; line-height: 1; }
+.sb-close-btn-sm { width: 24px; height: 24px; font-size: 16px; line-height: 1; }
+
+/* Textarea */
+.sb-textarea    { min-height: 60px; max-height: 160px; resize: vertical; box-sizing: border-box; }
+.sb-textarea-sm { min-height: 40px; max-height: 100px; resize: vertical; box-sizing: border-box; }
+
+/* Drag handle */
+.sb-draggable { cursor: grab; user-select: none; }
+
+/* Layout helpers */
+.sb-min-w-0   { min-width: 0; }
+.gap-0        { gap: 0; }
+.gap-1        { gap: .25rem; }
+.gap-2        { gap: .5rem; }
+.gap-3        { gap: 1rem; }
+.gap-4        { gap: 2rem; }
+.gap-5        { gap: 4rem; }
+.gap-6        { gap: 8rem; }
+.gap-7        { gap: 16rem; }
+.sb-lh-1      { line-height: 1; }
+
+/* Comment-specific sizing/z-index */
+.sb-comment-window  { width: 360px; max-height: 480px; z-index: 100001; scrollbar-width: none; }
+.sb-comment-window::-webkit-scrollbar { display: none; }
+.sb-comment-window * { scrollbar-width: none; }
+.sb-comment-window *::-webkit-scrollbar { display: none; }
+.sb-composer        { width: 280px; z-index: 100001; }
+.sb-comment-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 99998;
+  pointer-events: none;
+}
+.sb-comment-mode {
+  position: relative;
+}
+.sb-comment-mode .sb-comment-overlay {
+  pointer-events: auto;
+}
+.sb-auth-backdrop   { z-index: 100000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
+.sb-comments-drawer-backdrop { z-index: 99997; background: rgba(0,0,0,0.4); }
+.sb-comments-drawer { z-index: 99998; width: 420px; max-width: 90vw; }
+.sb-auth-modal      { width: 420px; max-width: calc(100vw - 32px); }
+
+/* Reaction pill sizing */
+/* .sb-pill-size { padding-top: 2px; padding-bottom: 2px; font-size: 12px; } */
+
+/* Reaction picker */
+.sb-reaction-picker { bottom: 100%; margin-bottom: 4px; z-index: 10; }
+.sb-reaction-btn { width: 28px; height: 28px; transition: background 100ms; }
+.sb-reaction-btn-active {
+  width: 28px; height: 28px;
+  background: color-mix(in srgb, var(--sb--fg-accent) 10%, transparent);
+  box-shadow: inset 0 0 0 1px var(--sb--fg-accent);
+  transition: background 100ms;
+}
+
+/* Banner */
+.sb-banner {
+  bottom: 12px; left: 50%; transform: translateX(-50%);
+  z-index: 99999; background: var(--sb--bg); color: var(--sb--fg);
+  padding: 6px 16px; border-radius: 8px; font-size: 13px;
+  line-height: 1.4; backdrop-filter: blur(12px);
+  pointer-events: none;
+}
+.sb-kbd {
+  display: inline-block; padding: 1px 6px; font-size: 11px;
+  font-family: inherit; border: 1px solid rgba(255,255,255,0.3);
+  border-radius: 4px; background: rgba(255,255,255,0.1);
+}
+
+/* Pin */
+.sb-comment-pin {
+  border: 3px solid hsl(var(--sb--pin-hue, 140), 50%, 38%);
+  z-index: 100000; width: 32px; height: 32px;
+  margin-left: -16px; margin-top: -16px;
+  transition: transform 100ms ease-in-out;
+  cursor: grab;
+  pointer-events: auto;
+}
+.sb-comment-pin:active { cursor: grabbing; }
+.sb-pin-img { width: 100%; height: 100%; object-fit: cover; }
+.sb-comment-pin[data-resolved="true"] {
+  border-color: var(--sb--fg-muted);
+  opacity: 0.5;
+}
+.sb-comment-pin-pending {
+  border-color: var(--sb--fg-muted) !important;
+  opacity: 0.6;
+  animation: sb-pin-pulse 1.2s ease-in-out infinite;
+}
+.sb-comment-pin-failed {
+  border-color: var(--sb--fg-danger) !important;
+  cursor: pointer;
+  animation: sb-pin-shake 0.4s ease-in-out;
+}
+@keyframes sb-pin-pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+@keyframes sb-pin-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+
+/* Error alert */
+.sb-error-alert {
+  background: color-mix(in srgb, var(--sb--fg-danger) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--sb--fg-danger) 30%, transparent);
+}
+
+/* Resolved badge */
+.sb-badge-resolved {
+  font-size: 10px;
+  background: color-mix(in srgb, var(--sb--fg-success) 10%, transparent);
+}
+
+/* Drawer button */
+.sb-drawer-btn { font: inherit; transition: background 100ms; }
+.sb-drawer-btn-resolved { opacity: 0.6; }
+
+/* Min content helper */
+.sb-min-w-max { min-width: max-content; }
+
+/* Action button (header) */
+.sb-action-btn { font-size: 11px; line-height: 1; padding: 4px 8px; }
+
+/* Code badge */
+.sb-code-badge { font-size: 11px; padding-top: 1px; padding-bottom: 1px; }

package/src/core/comments/ui/commentsDrawer.js

@@ -0,0 +1,84 @@
+/**
+ * Comments drawer — React right-side panel listing all comments across all routes.
+ *
+ * Opened from the DevTools "See all comments" menu item.
+ * Clicking a comment navigates to its route and opens it.
+ * Styled with Tachyons + sb-* custom classes for light/dark mode support.
+ */
+
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import CommentsDrawerComponent from './CommentsDrawer.jsx'
+import { isAuthenticated } from '../auth.js'
+import { setCommentMode } from '../commentMode.js'
+import './comment-layout.css'
+import './comments.css'
+
+let activeDrawer = null
+
+/**
+ * Open the comments drawer, listing all comments across all routes.
+ */
+export async function openCommentsDrawer() {
+  if (!isAuthenticated()) return
+  if (activeDrawer) { closeCommentsDrawer(); return }
+
+  const backdrop = document.createElement('div')
+  backdrop.className = 'sb-comments-drawer-backdrop fixed top-0 right-0 bottom-0 left-0'
+  backdrop.addEventListener('click', closeCommentsDrawer)
+
+  const drawer = document.createElement('div')
+  drawer.className = 'sb-comments-drawer sb-drawer-animate fixed top-0 right-0 bottom-0 flex flex-column sb-bg bl sb-b-default sb-shadow sans-serif'
+
+  document.body.appendChild(backdrop)
+  document.body.appendChild(drawer)
+
+  let root = null
+
+  function onKeyDown(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      closeCommentsDrawer()
+      window.removeEventListener('keydown', onKeyDown, true)
+    }
+  }
+  window.addEventListener('keydown', onKeyDown, true)
+
+  root = createRoot(drawer)
+  root.render(createElement(CommentsDrawerComponent, {
+    onClose: closeCommentsDrawer,
+    onNavigate: (route, commentId) => {
+      closeCommentsDrawer()
+      if (window.location.pathname !== route) {
+        const navUrl = new URL(window.location.href)
+        navUrl.pathname = route
+        navUrl.searchParams.set('comment', commentId)
+        window.location.href = navUrl.toString()
+      } else {
+        const navUrl = new URL(window.location.href)
+        navUrl.searchParams.set('comment', commentId)
+        window.history.replaceState(null, '', navUrl.toString())
+        setCommentMode(true)
+      }
+    },
+  }))
+
+  activeDrawer = { backdrop, drawer, root, onKeyDown }
+}
+
+/**
+ * Close the comments drawer if open.
+ */
+export function closeCommentsDrawer() {
+  if (!activeDrawer) return
+  if (activeDrawer.onKeyDown) {
+    window.removeEventListener('keydown', activeDrawer.onKeyDown, true)
+  }
+  if (activeDrawer.root) {
+    activeDrawer.root.unmount()
+  }
+  activeDrawer.backdrop.remove()
+  activeDrawer.drawer.remove()
+  activeDrawer = null
+}