@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/ThemeMenuButton.svelte

@@ -1,132 +0,0 @@
-<!--
-  ThemeMenuButton — toolbar dropdown for switching the app color scheme.
-
-  Renders a radio group of theme options (System, Light, Dark, etc.),
-  followed by a separator and "Theme settings" submenu with sync toggles.
--->
-
-<script lang="ts">
-  import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
-  import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
-  import Icon from './svelte-plugin-ui/components/Icon.svelte'
-  import { themeState, setTheme, THEMES, type ThemeValue, themeSyncState, setThemeSyncTarget, type ThemeSyncTargets } from './stores/themeStore.js'
-
-  interface Props {
-    config?: {
-      ariaLabel?: string
-      icon?: string
-      meta?: Record<string, any>
-      label?: string
-      menuWidth?: string
-    }
-    data?: any
-    localOnly?: boolean
-    tabindex?: number
-  }
-
-  let { config = {}, data, localOnly, tabindex = -1 }: Props = $props()
-
-  let menuOpen = $state(false)
-  let canvasActive = $state(false)
-
-  function handleSelect(value: ThemeValue) {
-    setTheme(value)
-    menuOpen = false
-  }
-
-  function handleSyncToggle(e: Event, target: keyof ThemeSyncTargets) {
-    e.preventDefault()
-    setThemeSyncTarget(target, !$themeSyncState[target])
-  }
-
-  $effect(() => {
-    function handleCanvasMounted() {
-      canvasActive = true
-    }
-    function handleCanvasUnmounted() {
-      canvasActive = false
-    }
-    document.addEventListener('storyboard:canvas:mounted', handleCanvasMounted)
-    document.addEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
-
-    const state = (window as any).__storyboardCanvasBridgeState
-    canvasActive = state?.active === true
-    if (!canvasActive) {
-      document.dispatchEvent(new CustomEvent('storyboard:canvas:status-request'))
-    }
-
-    return () => {
-      document.removeEventListener('storyboard:canvas:mounted', handleCanvasMounted)
-      document.removeEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
-    }
-  })
-</script>
-
-<DropdownMenu.Root bind:open={menuOpen}>
-  <DropdownMenu.Trigger>
-    {#snippet child({ props })}
-      <TriggerButton
-        active={menuOpen}
-        size="icon-xl"
-        aria-label={config.ariaLabel || 'Theme'}
-        {tabindex}
-        {...props}
-      >
-        <Icon name={config.icon || 'primer/sun'} size={16} {...(config.meta || {})} />
-      </TriggerButton>
-    {/snippet}
-  </DropdownMenu.Trigger>
-
-  <DropdownMenu.Content side="top" align="end" sideOffset={16} style={config.menuWidth ? `min-width: ${config.menuWidth}` : undefined} class="min-w-[200px]">
-    {#if config.label}
-      <DropdownMenu.Label>{config.label}</DropdownMenu.Label>
-    {/if}
-
-    <DropdownMenu.RadioGroup value={$themeState.theme}>
-      {#each THEMES as option (option.value)}
-        <DropdownMenu.RadioItem
-          value={option.value}
-          onclick={() => handleSelect(option.value)}
-        >
-          {option.name}
-        </DropdownMenu.RadioItem>
-      {/each}
-    </DropdownMenu.RadioGroup>
-
-    <DropdownMenu.Separator />
-
-    <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger>Theme settings</DropdownMenu.SubTrigger>
-      <DropdownMenu.SubContent class="min-w-[180px]">
-        <DropdownMenu.Label>Apply theme to</DropdownMenu.Label>
-        {#if canvasActive}
-          <DropdownMenu.CheckboxItem
-            checked={$themeSyncState.canvas}
-            onSelect={(e) => handleSyncToggle(e, 'canvas')}
-          >
-            Canvas
-          </DropdownMenu.CheckboxItem>
-        {:else}
-          <DropdownMenu.CheckboxItem
-            checked={$themeSyncState.prototype}
-            onSelect={(e) => handleSyncToggle(e, 'prototype')}
-          >
-            Prototype
-          </DropdownMenu.CheckboxItem>
-        {/if}
-        <DropdownMenu.CheckboxItem
-          checked={$themeSyncState.toolbar}
-          onSelect={(e) => handleSyncToggle(e, 'toolbar')}
-        >
-          Tools
-        </DropdownMenu.CheckboxItem>
-        <DropdownMenu.CheckboxItem
-          checked={$themeSyncState.codeBoxes}
-          onSelect={(e) => handleSyncToggle(e, 'codeBoxes')}
-        >
-          Code boxes
-        </DropdownMenu.CheckboxItem>
-      </DropdownMenu.SubContent>
-    </DropdownMenu.Sub>
-  </DropdownMenu.Content>
-</DropdownMenu.Root>

package/src/comments/ui/AuthModal.svelte

@@ -1,108 +0,0 @@
-<!--
-  AuthModal — PAT entry modal for comments authentication.
-  Uses shadcn Button, Input, Label, Alert, Avatar.
--->
-
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import { setToken, validateToken } from '../auth.js'
-  import { getCommentsConfig } from '../config.js'
-  import { Button } from '../../lib/components/ui/button/index.js'
-  import { Input } from '../../lib/components/ui/input/index.js'
-  import { Label } from '../../lib/components/ui/label/index.js'
-  import * as Alert from '../../lib/components/ui/alert/index.js'
-  import * as Avatar from '../../lib/components/ui/avatar/index.js'
-
-  interface Props {
-    onDone?: (user: { login: string; avatarUrl: string }) => void
-    onClose?: () => void
-    initialError?: string | null
-  }
-
-  let { onDone, onClose, initialError = null }: Props = $props()
-
-  let token = $state('')
-  let submitting = $state(false)
-  let error: string | null = $state(null)
-  let user: { login: string; avatarUrl: string } | null = $state(null)
-  let inputEl: HTMLInputElement | null = $state(null)
-  const commentsConfig = getCommentsConfig()
-  const repoOwner = commentsConfig?.repo?.owner || 'github'
-  const repoName = commentsConfig?.repo?.name || 'storyboard'
-  const repoSlug = `${repoOwner}/${repoName}`
-  const tokenTemplateName = 'Storyboard Comments'
-  const tokenTemplateDescription =
-    `Token for enabling comments on ${repoSlug} prototype. Configure as:\n\n` +
-    `Owner: ${repoOwner}\n` +
-    'Expiration: 366 days (recommended)\n' +
-    `Repository access: Only select repositories > ${repoSlug}\n` +
-    'Permissions: Repositories > Discussions > Access: Read and Write'
-  const tokenCreateUrl =
-    `https://github.com/settings/personal-access-tokens/new?` +
-    new URLSearchParams({
-      name: tokenTemplateName,
-      description: tokenTemplateDescription,
-    }).toString()
-
-  onMount(() => {
-    error = initialError
-    inputEl?.focus()
-  })
-
-  async function submit() {
-    const val = token.trim()
-    if (!val) return
-    submitting = true; error = null
-    try { const result = await validateToken(val); setToken(val); user = result }
-    catch (err: any) { error = err.message }
-    finally { submitting = false }
-  }
-
-  function done() { if (user) onDone?.(user) }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !user) submit()
-  }
-</script>
-
-<div class="bg-popover text-popover-foreground border border-border rounded-lg shadow-lg overflow-hidden max-w-[600px] w-full font-sans">
-  <div class="flex items-center justify-between px-4 py-3 border-b border-border">
-    <h2 class="text-medium font-semibold">Sign in for comments</h2>
-    <Button variant="ghost" size="icon" onclick={onClose} aria-label="Close" class="h-7 w-7 text-muted-foreground">&#215;</Button>
-  </div>
-  <div class="p-4 space-y-3">
-    {#if error}<Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>{/if}
-    <p class="text-sm text-muted-foreground leading-relaxed">
-      Leave comments for other users to see and respond, and react to! Storyboard comments use Discussions as a back-end and require a GitHub PAT to be enabled.
-    </p>
-    <p class="text-sm text-muted-foreground leading-relaxed">
-      Create a <a class="text-primary underline" href={tokenCreateUrl} target="_blank" rel="noopener">GitHub Fine-Grained Personal Access Token</a> with the settings below to get started:
-    </p>
-    <div class="px-3 py-2 bg-muted border border-border rounded text-xs text-muted-foreground leading-relaxed">
-      <div class="mb-1"><strong class="text-foreground">Fine-grained Personal Access Token</strong></div>
-      <div>Owner: <code class="px-1 bg-background rounded font-mono text-foreground">{repoOwner}</code></div>
-      <div>Expiration: <code class="px-1 bg-background rounded font-mono text-foreground">366 days</code> (recommended)</div>
-      <div>Repository access: <code class="px-1 bg-background rounded font-mono text-foreground">Only select repositories &gt; {repoSlug}</code></div>
-      <div>Permissions: <code class="px-1 bg-background rounded font-mono text-foreground">Repositories > Discussions > Access: Read and Write</code></div>
-    </div>
-    <div class="space-y-1">
-      <Label for="sb-auth-token-input">Personal Access Token</Label>
-      <Input id="sb-auth-token-input" type="password" placeholder="github_pat_\u2026 or ghp_\u2026" autocomplete="off" spellcheck="false" class="font-mono" bind:value={token} bind:ref={inputEl} onkeydown={handleKeydown} />
-    </div>
-    {#if user}
-      <div class="flex items-center py-1 gap-3">
-        <Avatar.Root class="h-10 w-10"><Avatar.Image src={user.avatarUrl} alt={user.login} /><Avatar.Fallback>{user.login[0]?.toUpperCase()}</Avatar.Fallback></Avatar.Root>
-        <div class="text-sm"><span class="text-foreground">{user.login}</span><span class="block text-xs text-success mt-0.5">&#10003; Signed in</span></div>
-      </div>
-    {/if}
-    <Alert.Root variant="warning" class="bg-amber-100 border-amber-300">
-      <Alert.Description class="text-amber-700">
-        ⚠️ Comments are an experimental feature and may be unstable.
-      </Alert.Description>
-    </Alert.Root>    
-  </div>
-  <div class="flex items-center justify-end px-4 py-3 border-t border-border gap-2">
-    <Button variant="outline" size="sm" onclick={onClose}>Cancel</Button>
-    <Button size="sm" disabled={submitting} onclick={user ? done : submit}>{user ? 'Done' : (submitting ? 'Validating\u2026' : 'Sign in')}</Button>
-  </div>
-</div>

package/src/comments/ui/CommentWindow.svelte

@@ -1,333 +0,0 @@
-<!--
-  CommentWindow — thread viewer popup showing a comment with replies and reactions.
-  Uses shadcn-svelte Button, Textarea, Avatar, Badge, Separator.
--->
-
-<script lang="ts">
-  import { replyToComment, addReaction, removeReaction, resolveComment, unresolveComment, editComment, editReply, deleteComment } from '../api.js'
-  import { saveDraft, getDraft, clearDraft, replyDraftKey } from '../commentDrafts.js'
-  import { Button } from '../../lib/components/ui/button/index.js'
-  import { Textarea } from '../../lib/components/ui/textarea/index.js'
-  import * as Avatar from '../../lib/components/ui/avatar/index.js'
-  import { Separator } from '../../lib/components/ui/separator/index.js'
-  import { cn } from '../../lib/utils/index.js'
-
-  const REACTION_EMOJI: Record<string, string> = {
-    THUMBS_UP: '👍', THUMBS_DOWN: '👎', LAUGH: '😄', HOORAY: '🎉',
-    CONFUSED: '😕', HEART: '❤️', ROCKET: '🚀', EYES: '👀',
-  }
-  const emojiEntries = Object.entries(REACTION_EMOJI)
-
-  interface Props {
-    comment: any
-    discussion: any
-    user?: any
-    onClose?: () => void
-    onMove?: () => void
-    winEl?: HTMLElement
-  }
-
-  let { comment, discussion, user = null, onClose, onMove, winEl }: Props = $props()
-
-  const draftKey = $derived(replyDraftKey(comment.id))
-
-  const resolved = $derived(!!comment.meta?.resolved)
-  let resolving = $state(false)
-  let copied = $state(false)
-  let editing = $state(false)
-  let editText = $state('')
-  let saving = $state(false)
-  const commentText = $derived(comment.text ?? '')
-  // svelte-ignore state_referenced_locally
-  let replyText = $state(getDraft(draftKey)?.text ?? '')
-  let submittingReply = $state(false)
-  let editingReply = $state(-1)
-  let editReplyText = $state('')
-  let savingReply = $state(false)
-  let pickerTarget: string | null = $state(null)
-  // svelte-ignore state_referenced_locally
-  let reactions: any[] = $state([...(comment.reactionGroups ?? [])])
-  // svelte-ignore state_referenced_locally
-  let replyReactions: any[][] = $state((comment.replies ?? []).map((r: any) => [...(r.reactionGroups ?? [])]))
-  // svelte-ignore state_referenced_locally
-  let replyTexts: string[] = $state((comment.replies ?? []).map((r: any) => r.text ?? r.body ?? ''))
-
-  const replies = $derived(comment.replies ?? [])
-  const canEdit = $derived(!!(user && comment.author?.login === user.login))
-  const canReply = $derived(!!(user && discussion))
-
-  function handleReplyBlur() {
-    if (replyText.trim()) {
-      saveDraft(draftKey, { type: 'reply', text: replyText })
-    } else {
-      clearDraft(draftKey)
-    }
-  }
-
-  function timeAgo(dateStr: string) {
-    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
-  }
-
-  function emojiFor(content: string) { return REACTION_EMOJI[content] ?? content }
-  function isReacted(content: string) { return reactions.some((r: any) => r.content === content && r.viewerHasReacted) }
-  function isReplyReacted(ri: number, content: string) { return (replyReactions[ri] ?? []).some((r: any) => r.content === content && r.viewerHasReacted) }
-
-  function pillClass(active: boolean) {
-    return cn(
-      'inline-flex items-center text-xs px-2 py-0.5 rounded-full border cursor-pointer transition-colors',
-      active ? 'border-primary bg-primary/10 text-primary' : 'border-border bg-transparent text-muted-foreground'
-    )
-  }
-
-  function emojiPickerBtnClass(active: boolean) {
-    return cn(
-      'flex items-center justify-center w-7 h-7 rounded border-none text-base cursor-pointer transition-colors',
-      active ? 'bg-primary/10' : 'bg-transparent hover:bg-muted'
-    )
-  }
-
-  async function toggleResolve() {
-    resolving = true
-    try {
-      if (resolved) {
-        await unresolveComment(comment.id, comment._rawBody ?? comment.body ?? '')
-        comment.meta = { ...comment.meta }; delete comment.meta.resolved
-        resolving = false; onMove?.()
-      } else {
-        await resolveComment(comment.id, comment._rawBody ?? comment.body ?? '')
-        comment.meta = { ...comment.meta, resolved: true }; onMove?.(); onClose?.()
-      }
-    } catch (err) { console.error('[storyboard] Failed to toggle resolve:', err); resolving = false }
-  }
-
-  function copyLink() {
-    const url = new URL(window.location.href); url.searchParams.set('comment', comment.id)
-    navigator.clipboard.writeText(url.toString()).then(() => { copied = true; setTimeout(() => { copied = false }, 2000) }).catch(() => {})
-  }
-
-  async function saveEdit() {
-    const t = editText.trim(); if (!t) return; saving = true
-    try { await editComment(comment.id, comment._rawBody ?? comment.body ?? '', t); comment.text = t; comment._rawBody = null; editing = false } catch (err) { console.error('[storyboard] Failed to edit:', err) } finally { saving = false }
-  }
-
-  async function toggleReaction(content: string, gi?: number) {
-    const group = gi !== undefined ? reactions[gi] : reactions.find((r: any) => r.content === content)
-    const was = group?.viewerHasReacted ?? false
-    if (was && group) {
-      group.users = { totalCount: Math.max(0, (group.users?.totalCount ?? 1) - 1) }; group.viewerHasReacted = false
-      reactions = group.users.totalCount === 0 ? reactions.filter((r: any) => r.content !== content) : [...reactions]
-    } else if (group) {
-      group.users = { totalCount: (group.users?.totalCount ?? 0) + 1 }; group.viewerHasReacted = true; reactions = [...reactions]
-    } else {
-      reactions = [...reactions, { content, users: { totalCount: 1 }, viewerHasReacted: true }]
-    }
-    comment.reactionGroups = reactions
-    try { if (was) await removeReaction(comment.id, content); else await addReaction(comment.id, content) } catch {}
-  }
-
-  async function toggleReplyReaction(ri: number, content: string, rgi?: number) {
-    const reply = replies[ri]; if (!reply) return
-    const groups = replyReactions[ri] ?? []
-    const group = rgi !== undefined ? groups[rgi] : groups.find((r: any) => r.content === content)
-    const was = group?.viewerHasReacted ?? false
-    if (was && group) {
-      group.users = { totalCount: Math.max(0, (group.users?.totalCount ?? 1) - 1) }; group.viewerHasReacted = false
-      if (group.users.totalCount === 0) replyReactions[ri] = groups.filter((r: any) => r.content !== content)
-    } else if (group) {
-      group.users = { totalCount: (group.users?.totalCount ?? 0) + 1 }; group.viewerHasReacted = true
-    } else {
-      groups.push({ content, users: { totalCount: 1 }, viewerHasReacted: true }); replyReactions[ri] = groups
-    }
-    replyReactions = [...replyReactions]; reply.reactionGroups = replyReactions[ri]
-    try { if (was) await removeReaction(reply.id, content); else await addReaction(reply.id, content) } catch {}
-  }
-
-  async function submitReply() {
-    const t = replyText.trim(); if (!t) return; submittingReply = true
-    try {
-      await replyToComment(discussion.id, comment.id, t)
-      replyText = ''
-      clearDraft(draftKey)
-      onMove?.()
-    } catch (err) { console.error('[storyboard] Reply failed:', err) } finally { submittingReply = false }
-  }
-
-  async function saveReply(ri: number) {
-    const t = editReplyText.trim(); if (!t) return
-    const reply = replies[ri]; if (!reply) return; savingReply = true
-    try { await editReply(reply.id, t); reply.text = t; reply.body = t; replyTexts[ri] = t; replyTexts = [...replyTexts]; editingReply = -1 } catch (err) { console.error('[storyboard] Edit reply failed:', err) } finally { savingReply = false }
-  }
-
-  async function deleteReplyAt(ri: number) {
-    const reply = replies[ri]; if (!reply || !confirm('Delete this reply?')) return
-    try { await deleteComment(reply.id); onMove?.() } catch (err) { console.error('[storyboard] Delete failed:', err) }
-  }
-
-  function startDrag(e: MouseEvent) {
-    const target = e.target as HTMLElement
-    if (target.closest('[data-no-drag]') || !winEl) return
-    const startX = e.clientX, startY = e.clientY, rect = winEl.getBoundingClientRect()
-    const sx = rect.left, sy = rect.top; target.style.cursor = 'grabbing'
-    const mv = (ev: MouseEvent) => { winEl!.style.position = 'fixed'; winEl!.style.left = `${sx + ev.clientX - startX}px`; winEl!.style.top = `${sy + ev.clientY - startY}px`; winEl!.style.transform = 'none' }
-    const up = () => { target.style.cursor = 'grab'; document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up) }
-    document.addEventListener('mousemove', mv); document.addEventListener('mouseup', up); e.preventDefault()
-  }
-
-  function handleReplyKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); submitReply() }
-  }
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="font-sans" onclick={(e) => e.stopPropagation()}>
-  <!-- Header -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="flex items-center justify-between px-3 py-3 border-b border-border cursor-grab select-none" onmousedown={startDrag}>
-    <div class="flex items-center gap-2">
-      {#if comment.author?.avatarUrl}
-        <Avatar.Root class="h-6 w-6">
-          <Avatar.Image src={comment.author.avatarUrl} alt={comment.author?.login} />
-          <Avatar.Fallback class="text-[10px]">{(comment.author?.login ?? '?')[0]?.toUpperCase()}</Avatar.Fallback>
-        </Avatar.Root>
-      {/if}
-      <div class="flex flex-col">
-        <span class="text-xs font-semibold">{comment.author?.login ?? 'unknown'}</span>
-        {#if comment.createdAt}
-          <span class="text-[11px] text-muted-foreground leading-tight">{timeAgo(comment.createdAt)}</span>
-        {/if}
-      </div>
-    </div>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="flex items-center shrink-0 gap-1.5" data-no-drag onmousedown={(e) => e.stopPropagation()}>
-      <Button variant="ghost" size="sm" class={cn('h-6 px-2 text-[11px]', resolved ? 'text-success' : 'text-muted-foreground')} disabled={resolving} onclick={toggleResolve}>
-        {resolving ? (resolved ? 'Unresolving…' : 'Resolving…') : (resolved ? 'Resolved ✓' : 'Resolve')}
-      </Button>
-      <Button variant="ghost" size="sm" class={cn('h-6 px-2 text-[11px]', copied ? 'text-success' : 'text-muted-foreground')} onclick={copyLink}>
-        {copied ? 'Copied!' : 'Copy link'}
-      </Button>
-      <Button variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground" aria-label="Close" onclick={onClose}>×</Button>
-    </div>
-  </div>
-
-  <!-- Body -->
-  <div class="flex-auto overflow-y-auto px-3 pt-3 no-scrollbar">
-    {#if !editing}
-      <p class="text-sm leading-relaxed m-0 mb-2 break-words">{commentText}</p>
-    {:else}
-      <div class="mb-2">
-        <Textarea class="min-h-[40px] max-h-[100px] text-xs mb-2" bind:value={editText} />
-        <div class="flex justify-end gap-1">
-          <Button variant="outline" size="sm" class="h-6 text-xs border border-input text-foreground" onclick={() => editing = false}>Cancel</Button>
-          <Button size="sm" class="h-6 text-xs" disabled={saving} onclick={saveEdit}>{saving ? 'Saving…' : 'Save'}</Button>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Reactions -->
-    <div class="flex items-center flex-wrap gap-1 mb-2">
-      {#each reactions as group, gi (group.content)}
-        {#if (group.users?.totalCount ?? 0) > 0}
-          <button class={pillClass(group.viewerHasReacted)}
-                  onclick={(e) => { e.stopPropagation(); toggleReaction(group.content, gi) }}>
-            <span class="mr-1">{emojiFor(group.content)}</span><span>{group.users?.totalCount ?? 0}</span>
-          </button>
-        {/if}
-      {/each}
-      <div class="relative">
-        <button class="inline-flex items-center text-xs px-2 py-0.5 rounded-full border border-border bg-transparent text-muted-foreground cursor-pointer hover:border-primary"
-                onclick={(e) => { e.stopPropagation(); pickerTarget = pickerTarget === 'comment' ? null : 'comment' }}>😀 +</button>
-        {#if pickerTarget === 'comment'}
-          <div class="absolute bottom-full left-0 mb-1 flex gap-0.5 p-1 bg-popover border border-border rounded-lg shadow-lg z-10">
-            {#each emojiEntries as [key, emoji] (key)}
-              <button class={emojiPickerBtnClass(isReacted(key))}
-                      onclick={(e) => { e.stopPropagation(); toggleReaction(key); pickerTarget = null }}>{emoji}</button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-      {#if !editing && canEdit}
-        <button class="ml-auto text-xs text-muted-foreground bg-transparent border-none cursor-pointer hover:underline" onclick={() => { editing = true; editText = commentText }}>Edit</button>
-      {/if}
-    </div>
-
-    <!-- Replies -->
-    {#if replies.length > 0}
-      <Separator class="my-2" />
-      <div class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">{replies.length} {replies.length === 1 ? 'Reply' : 'Replies'}</div>
-      {#each replies as reply, ri (reply.id ?? ri)}
-        <div class="flex mb-2 gap-2">
-          {#if reply.author?.avatarUrl}
-            <Avatar.Root class="h-5 w-5 shrink-0">
-              <Avatar.Image src={reply.author.avatarUrl} alt={reply.author?.login} />
-              <Avatar.Fallback class="text-[10px]">{(reply.author?.login ?? '?')[0]?.toUpperCase()}</Avatar.Fallback>
-            </Avatar.Root>
-          {/if}
-          <div class="flex-auto min-w-0">
-            <div class="flex items-start justify-between mb-0.5">
-              <div class="flex flex-col">
-                <span class="text-xs font-semibold">{reply.author?.login ?? 'unknown'}</span>
-                {#if reply.createdAt}<span class="text-[11px] text-muted-foreground leading-tight">{timeAgo(reply.createdAt)}</span>{/if}
-              </div>
-              {#if user && reply.author?.login === user.login}
-                <div class="flex gap-2 ml-auto shrink-0">
-                  {#if editingReply !== ri}
-                    <button class="text-[11px] text-muted-foreground bg-transparent border-none cursor-pointer hover:underline" onclick={() => { editingReply = ri; editReplyText = replyTexts[ri] }}>Edit</button>
-                    <button class="text-[11px] text-destructive bg-transparent border-none cursor-pointer hover:underline" onclick={() => deleteReplyAt(ri)}>Delete</button>
-                  {/if}
-                </div>
-              {/if}
-            </div>
-            {#if editingReply !== ri}
-              <p class="text-sm leading-relaxed m-0 break-words">{replyTexts[ri] ?? reply.text ?? reply.body}</p>
-            {:else}
-              <div>
-                <Textarea class="min-h-[40px] max-h-[100px] text-xs mb-1" bind:value={editReplyText} />
-                <div class="flex justify-end gap-1">
-                  <Button variant="outline" size="sm" class="h-6 text-xs border border-input text-foreground" onclick={() => editingReply = -1}>Cancel</Button>
-                  <Button size="sm" class="h-6 text-xs" disabled={savingReply} onclick={() => saveReply(ri)}>{savingReply ? 'Saving…' : 'Save'}</Button>
-                </div>
-              </div>
-            {/if}
-            <!-- Reply reactions -->
-            <div class="flex items-center flex-wrap gap-1 mt-1">
-              {#each (replyReactions[ri] ?? []) as rg, rgi (rg.content)}
-                {#if (rg.users?.totalCount ?? 0) > 0}
-                  <button class={pillClass(rg.viewerHasReacted)}
-                          onclick={(e) => { e.stopPropagation(); toggleReplyReaction(ri, rg.content, rgi) }}>
-                    <span class="mr-1">{emojiFor(rg.content)}</span><span>{rg.users?.totalCount ?? 0}</span>
-                  </button>
-                {/if}
-              {/each}
-              <div class="relative">
-                <button class="inline-flex items-center text-xs px-2 py-0.5 rounded-full border border-border bg-transparent text-muted-foreground cursor-pointer"
-                        onclick={(e) => { e.stopPropagation(); pickerTarget = pickerTarget === `reply-${ri}` ? null : `reply-${ri}` }}>😀 +</button>
-                {#if pickerTarget === `reply-${ri}`}
-                  <div class="absolute bottom-full left-0 mb-1 flex gap-0.5 p-1 bg-popover border border-border rounded-lg shadow-lg z-10">
-                    {#each emojiEntries as [key, emoji] (key)}
-                      <button class={emojiPickerBtnClass(isReplyReacted(ri, key))}
-                              onclick={(e) => { e.stopPropagation(); toggleReplyReaction(ri, key); pickerTarget = null }}>{emoji}</button>
-                    {/each}
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </div>
-        </div>
-      {/each}
-    {/if}
-  </div>
-
-  <!-- Reply form -->
-  {#if canReply}
-    <div class="border-t border-border px-3 py-3 flex flex-col">
-      <Textarea class="min-h-[40px] max-h-[100px] text-xs mb-1" placeholder="Reply…" bind:value={replyText} onkeydown={handleReplyKeydown} onblur={handleReplyBlur} />
-      <div class="flex justify-end mt-1">
-        <Button size="sm" class="text-xs" disabled={!replyText.trim() || submittingReply} onclick={submitReply}>
-          {submittingReply ? 'Posting…' : 'Reply'}
-        </Button>
-      </div>
-    </div>
-  {/if}
-</div>

package/src/comments/ui/CommentsDrawer.svelte

@@ -1,96 +0,0 @@
-<!--
-  CommentsDrawer — right-side panel listing all comments across all routes.
-  Uses shadcn Avatar, Badge, Button.
--->
-
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import { listDiscussions, fetchRouteDiscussion } from '../api.js'
-  import { getCommentsConfig } from '../config.js'
-  import * as Avatar from '../../lib/components/ui/avatar/index.js'
-  import { Badge } from '../../lib/components/ui/badge/index.js'
-  import { Button } from '../../lib/components/ui/button/index.js'
-
-  interface Props {
-    onClose?: () => void
-    onNavigate?: (route: string, commentId: string) => void
-  }
-  let { onClose, onNavigate }: Props = $props()
-
-  interface CommentGroup { route: string; comments: any[] }
-
-  let loading = $state(true)
-  let error: string | null = $state(null)
-  let groups: CommentGroup[] = $state([])
-
-  function timeAgo(dateStr: string) {
-    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-  }
-
-  onMount(async () => {
-    try {
-      const discussions = await listDiscussions()
-      if (!discussions || discussions.length === 0) { loading = false; return }
-      const basePath = getCommentsConfig()?.basePath ?? '/'
-      const result: CommentGroup[] = []
-      for (const disc of discussions) {
-        const routeMatch = disc.title?.match(/^Comments:\s*(.+)$/)
-        if (!routeMatch) continue
-        const route = routeMatch[1]
-        if (!route.startsWith(basePath)) continue
-        let discussion: any
-        try { discussion = await fetchRouteDiscussion(route) } catch { continue }
-        if (!discussion?.comments?.length) continue
-        result.push({ route, comments: discussion.comments })
-      }
-      groups = result
-    } catch (err: any) { error = err.message } finally { loading = false }
-  })
-</script>
-
-<div class="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
-  <h2 class="text-base font-semibold">All Comments</h2>
-  <Button variant="ghost" size="icon" class="h-7 w-7 text-muted-foreground" aria-label="Close" onclick={onClose}>&#215;</Button>
-</div>
-
-<div class="flex-auto overflow-y-auto">
-  {#if loading}
-    <div class="py-8 px-4 text-center text-sm text-muted-foreground">Loading comments&#8230;</div>
-  {:else if error}
-    <div class="py-8 px-4 text-center text-sm text-muted-foreground">Failed to load comments: {error}</div>
-  {:else if groups.length === 0}
-    <div class="py-8 px-4 text-center text-sm text-muted-foreground">No comments yet</div>
-  {:else}
-    {#each groups as group (group.route)}
-      <div class="border-b border-border">
-        <div class="flex items-center px-4 py-2 bg-muted/50 text-xs font-semibold text-muted-foreground">
-          <code class="text-primary">{group.route}</code>
-          <span class="ml-auto font-normal whitespace-nowrap">{group.comments.length} {group.comments.length !== 1 ? 'comments' : 'comment'}</span>
-        </div>
-        {#each group.comments as comment (comment.id)}
-          <button class="flex px-4 py-2 cursor-pointer border-none bg-transparent w-full text-left font-sans hover:bg-accent/50 transition-colors"
-                  class:opacity-60={comment.meta?.resolved}
-                  onclick={() => onNavigate?.(group.route, comment.id)}>
-            {#if comment.author?.avatarUrl}
-              <Avatar.Root class="h-6 w-6 shrink-0 mr-2">
-                <Avatar.Image src={comment.author.avatarUrl} alt={comment.author?.login ?? ''} />
-                <Avatar.Fallback class="text-[10px]">{(comment.author?.login ?? '?')[0]?.toUpperCase()}</Avatar.Fallback>
-              </Avatar.Root>
-            {/if}
-            <div class="flex flex-col flex-auto min-w-0 gap-0.5">
-              <div class="flex items-center gap-1">
-                <span class="text-xs font-semibold" class:text-foreground={!comment.meta?.resolved} class:text-muted-foreground={comment.meta?.resolved}>{comment.author?.login ?? 'unknown'}</span>
-                {#if comment.createdAt}<span class="text-[11px] text-muted-foreground">{timeAgo(comment.createdAt)}</span>{/if}
-                {#if comment.meta?.resolved}<Badge variant="outline" class="text-success text-[10px] px-1 py-0">Resolved</Badge>{/if}
-              </div>
-              <p class="text-sm leading-snug overflow-hidden whitespace-nowrap text-ellipsis m-0" class:text-foreground={!comment.meta?.resolved} class:text-muted-foreground={comment.meta?.resolved}>{(comment.text ?? '').slice(0, 100)}</p>
-              {#if (comment.replies?.length ?? 0) > 0}
-                <div class="text-[11px] text-muted-foreground mt-0.5">&#128172; {comment.replies.length} {comment.replies.length === 1 ? 'reply' : 'replies'}</div>
-              {/if}
-            </div>
-          </button>
-        {/each}
-      </div>
-    {/each}
-  {/if}
-</div>