@dfosco/storyboard-core 3.6.0 → 3.7.0

package/src/InspectorPanel.svelte

@@ -387,12 +387,9 @@
       requestAnimationFrame(() => {
         const el = sourceContainer.querySelector('.highlighted-line')
         if (el) {
-          // Jump near the target instantly, then smooth-scroll the last bit
-          const targetTop = el.offsetTop - sourceContainer.clientHeight / 2
-          sourceContainer.scrollTop = targetTop - 100
-          requestAnimationFrame(() => {
-            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
-          })
+          // Align the highlighted line to the top of the code viewport.
+          const targetTop = Math.max(el.offsetTop - 24, 0)
+          sourceContainer.scrollTo({ top: targetTop, behavior: 'smooth' })
         } else {
           sourceContainer.scrollTop = 0
         }
@@ -531,7 +528,7 @@
         </p>
         <button
           class="mt-2 px-4 py-1.5 text-xs font-medium rounded-md border-none cursor-pointer transition-colors"
-          style:background="var(--color-purple, #7655a4)"
+          style:background="var(--sb--color-purple, #7655a4)"
           style:color="#fff"
           onclick={startInspecting}
         >
@@ -552,7 +549,7 @@
           class="mt-2 px-4 py-1.5 text-xs font-medium rounded-md border cursor-pointer transition-colors"
           style:background="transparent"
           style:color="var(--fgColor-muted)"
-          style:border-color="var(--borderColor-default, var(--color-border, #d1d9e0))"
+          style:border-color="var(--borderColor-default, var(--sb--color-border, #d1d9e0))"
           onclick={stopInspecting}
         >
           Cancel
@@ -564,7 +561,7 @@
       <div class="flex flex-col flex-1 min-h-0 p-3 pt-0 gap-3">
         <!-- Component name -->
         <div>
-          <h3 class="text-base font-bold m-0 inspector-mono" style:color="var(--color-purple, #7655a4)">
+          <h3 class="text-base font-bold m-0 inspector-mono" style:color="var(--sb--color-purple, #7655a4)">
             {componentInfo.name}
           </h3>
         </div>
@@ -621,7 +618,7 @@
         <!-- Re-select button -->
         <button
           class="flex items-center justify-center gap-1.5 w-full px-3 py-1.5 text-xs font-medium rounded-md border-none cursor-pointer transition-colors shrink-0"
-          style:background="var(--color-purple, #7655a4)"
+          style:background="var(--sb--color-purple, #7655a4)"
           style:color="#fff"
           onclick={startInspecting}
         >
@@ -642,7 +639,7 @@
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: var(--color-purple, #7655a4);
+    background: var(--sb--color-purple, #7655a4);
     animation: inspector-pulse 1.5s ease-in-out infinite;
     flex-shrink: 0;
   }
@@ -681,8 +678,8 @@
   }
 
   .source-pre :global(.highlighted-line) {
-    background: color-mix(in srgb, var(--color-purple, #7655a4) 20%, transparent);
-    border-left: 2px solid var(--color-purple, #7655a4);
+    background: color-mix(in srgb, var(--sb--color-purple, #7655a4) 20%, transparent);
+    border-left: 2px solid var(--sb--color-purple, #7655a4);
     padding-left: 10px;
   }
 
@@ -734,8 +731,8 @@
   }
 
   .code-wrapper :global(.highlighted-line) {
-    background: color-mix(in srgb, var(--color-purple, #7655a4) 20%, transparent);
-    border-left: 2px solid var(--color-purple, #7655a4);
+    background: color-mix(in srgb, var(--sb--color-purple, #7655a4) 20%, transparent);
+    border-left: 2px solid var(--sb--color-purple, #7655a4);
     padding-left: 10px;
   }
 

package/src/SidePanel.svelte

@@ -52,14 +52,14 @@
   // Sync panel width to CSS custom property
   $effect(() => {
     if (typeof document !== 'undefined') {
-      document.documentElement.style.setProperty('--sidepanel-width', `${panelWidth}px`)
+      document.documentElement.style.setProperty('--sb--sidepanel-width', `${panelWidth}px`)
     }
   })
 
   // Sync panel height to CSS custom property
   $effect(() => {
     if (typeof document !== 'undefined') {
-      document.documentElement.style.setProperty('--sidepanel-height', `${panelHeight}px`)
+      document.documentElement.style.setProperty('--sb--sidepanel-height', `${panelHeight}px`)
     }
   })
 
@@ -272,15 +272,15 @@
     top: 0;
     right: 0;
     bottom: 0;
-    width: var(--sidepanel-width, 420px);
+    width: var(--sb--sidepanel-width, 420px);
     z-index: 9998;
     display: flex;
     flex-direction: column;
-    background-color: var(--bgColor-default, var(--color-background, #ffffff));
-    border-left: 1px solid var(--borderColor-default, var(--color-border, #d0d7de));
+    background-color: var(--bgColor-default, var(--sb--color-background, #ffffff));
+    border-left: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
     box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-    color: var(--fgColor-default, var(--color-foreground, #1f2328));
+    color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
     animation: sb-sidepanel-slide-in 0.25s ease;
   }
 
@@ -291,9 +291,9 @@
     bottom: 0;
     left: 0;
     width: 100% !important;
-    height: var(--sidepanel-height, 300px);
+    height: var(--sb--sidepanel-height, 300px);
     border-left: none;
-    border-top: 1px solid var(--borderColor-default, var(--color-border, #d0d7de));
+    border-top: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
     animation: sb-sidepanel-slide-up 0.25s ease;
   }
@@ -320,7 +320,7 @@
     left: 0;
     right: 0;
     height: 3px;
-    /* background: var(--mode-color, var(--borderColor-default, var(--color-border, #d0d7de))); */
+    /* background: var(--sb--mode-color, var(--borderColor-default, var(--sb--color-border, #d0d7de))); */
   }
 
   /* Drag handle — side mode (left edge, vertical) */
@@ -378,7 +378,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--fgColor-muted, var(--color-muted-foreground, #656d76));
+    color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
     padding-left: 4px;
   }
 
@@ -392,7 +392,7 @@
     appearance: none;
     border: none;
     background: transparent;
-    color: var(--fgColor-muted, var(--color-muted-foreground, #656d76));
+    color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
     cursor: pointer;
     padding: 6px;
     border-radius: 6px;
@@ -404,7 +404,7 @@
 
   .sb-sidepanel-action-btn:hover {
     background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-    color: var(--fgColor-default, var(--color-foreground, #1f2328));
+    color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
   }
 
   /* Body */
@@ -425,8 +425,8 @@
   .sb-sidepanel-spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--borderColor-default, var(--color-border, #d0d7de));
-    border-top-color: var(--fgColor-muted, var(--color-muted-foreground, #656d76));
+    border: 2px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
+    border-top-color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
     border-radius: 50%;
     animation: sb-spin 0.6s linear infinite;
   }

package/src/comments/ui/AuthModal.svelte

@@ -6,6 +6,7 @@
 <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'
@@ -15,17 +16,38 @@
   interface Props {
     onDone?: (user: { login: string; avatarUrl: string }) => void
     onClose?: () => void
+    initialError?: string | null
   }
 
-  let { onDone, onClose }: Props = $props()
+  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 | undefined = $state()
+  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(() => { inputEl?.focus() })
+  onMount(() => {
+    error = initialError
+    inputEl?.focus()
+  })
 
   async function submit() {
     const val = token.trim()
@@ -43,30 +65,41 @@
   }
 </script>
 
-<div class="bg-popover text-popover-foreground border border-border rounded-lg shadow-lg overflow-hidden max-w-[420px] w-full font-sans">
+<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-base font-semibold">Sign in for comments</h2>
+    <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="https://github.com/settings/personal-access-tokens/new" target="_blank" rel="noopener">GitHub Fine-Grained Personal Access Token</a> with <b>Discussions</b> read/write scope.
+      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:this={inputEl} onkeydown={handleKeydown} />
-    </div>
-    <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</strong> (recommended): <code class="px-1 bg-background rounded font-mono text-foreground">Discussions: Read and write</code></div>
-      <div><strong class="text-foreground">Classic</strong>: <code class="px-1 bg-background rounded font-mono text-foreground">repo</code></div>
+      <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 error}<Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>{/if}
     {#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>

package/src/comments/ui/authModal.js

@@ -7,15 +7,19 @@
 import { mount, unmount } from 'svelte'
 import AuthModal from './AuthModal.svelte'
 import { getCachedUser, clearToken } from '../auth.js'
+import './comment-layout.css'
 
 const MODAL_ID = 'sb-auth-modal'
 
 /**
  * Open the auth modal. Returns a promise that resolves with the user info
  * on successful sign-in, or null if cancelled.
+ * @param {{ initialError?: string|null }} [options]
  * @returns {Promise<{ login: string, avatarUrl: string }|null>}
  */
-export function openAuthModal() {
+export function openAuthModal(options = {}) {
+  const { initialError = null } = options
+
   return new Promise((resolve) => {
     const existing = document.getElementById(MODAL_ID)
     if (existing) existing.remove()
@@ -55,6 +59,7 @@ export function openAuthModal() {
     instance = mount(AuthModal, {
       target: backdrop,
       props: {
+        initialError,
         onDone: (user) => {
           cleanup()
           resolve(user)

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

@@ -28,7 +28,7 @@
 /* Comment pin */
 .sb-comment-pin {
   position: absolute;
-  border: 3px solid hsl(var(--pin-hue, 140), 50%, 38%);
+  border: 3px solid hsl(var(--sb--pin-hue, 140), 50%, 38%);
   border-radius: 50%;
   z-index: 100000;
   width: 32px; height: 32px;
@@ -38,21 +38,21 @@
   pointer-events: auto;
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-  background: var(--color-popover, #fff);
+  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(--color-muted-foreground, #848d97);
+  border-color: var(--sb--color-muted-foreground, #848d97);
   opacity: 0.5;
 }
 .sb-comment-pin-pending {
-  border-color: var(--color-muted-foreground, #848d97) !important;
+  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(--color-destructive, #d1242f) !important;
+  border-color: var(--sb--color-destructive, #d1242f) !important;
   cursor: pointer;
   animation: sb-pin-shake 0.4s ease-in-out;
 }
@@ -71,9 +71,9 @@
   position: absolute;
   width: 280px;
   z-index: 100001;
-  background: var(--color-popover, #fff);
-  color: var(--color-popover-foreground, #1f2328);
-  border: 1px solid var(--color-border, #d1d5db);
+  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;
@@ -86,9 +86,9 @@
   max-height: 480px;
   z-index: 100001;
   scrollbar-width: none;
-  background: var(--color-popover, #fff);
-  color: var(--color-popover-foreground, #1f2328);
-  border: 1px solid var(--color-border, #d1d5db);
+  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;
@@ -110,8 +110,8 @@
   z-index: 99998;
   width: 420px;
   max-width: 90vw;
-  background: var(--color-background, #fff);
-  color: var(--color-foreground, #1f2328);
+  background: var(--sb--color-background, #fff);
+  color: var(--sb--color-foreground, #1f2328);
 }
 
 /* Drawer animation */
@@ -126,8 +126,8 @@
   position: fixed;
   bottom: 12px; left: 50%; transform: translateX(-50%);
   z-index: 99999;
-  background: var(--color-popover, #fff);
-  color: var(--color-popover-foreground, #1f2328);
+  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;

package/src/comments/ui/commentWindow.js

@@ -10,6 +10,7 @@ import { mount, unmount } from 'svelte'
 import CommentWindowComponent from './CommentWindow.svelte'
 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
@@ -20,6 +21,7 @@ let activeWindow = null
  * @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 }}
@@ -32,8 +34,11 @@ export function showCommentWindow(container, comment, discussion, callbacks = {}
 
   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:${comment.meta?.x ?? 0}%;top:${comment.meta?.y ?? 0}%;transform:translate(12px,-50%)`
+  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())

package/src/comments/ui/comments.css

@@ -7,77 +7,77 @@
 
 /* --- 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;
+  --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;
+  --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-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-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);
+  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);
+  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-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);
+  border: 1px solid var(--sb--border);
   background: none;
-  color: var(--sb-fg-muted);
+  color: var(--sb--fg-muted);
   cursor: pointer;
   transition: border-color 100ms, background 100ms;
 }
-.sb-pill:hover { border-color: var(--sb-fg-accent); }
+.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);
+  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 --- */
@@ -162,15 +162,15 @@
 .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);
+  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);
+  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;
@@ -183,7 +183,7 @@
 
 /* Pin */
 .sb-comment-pin {
-  border: 3px solid hsl(var(--pin-hue, 140), 50%, 38%);
+  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;
@@ -193,16 +193,16 @@
 .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);
+  border-color: var(--sb--fg-muted);
   opacity: 0.5;
 }
 .sb-comment-pin-pending {
-  border-color: var(--sb-fg-muted) !important;
+  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;
+  border-color: var(--sb--fg-danger) !important;
   cursor: pointer;
   animation: sb-pin-shake 0.4s ease-in-out;
 }
@@ -218,14 +218,14 @@
 
 /* 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);
+  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);
+  background: color-mix(in srgb, var(--sb--fg-success) 10%, transparent);
 }
 
 /* Drawer button */

package/src/comments/ui/commentsDrawer.js

@@ -10,6 +10,8 @@ import { mount, unmount } from 'svelte'
 import CommentsDrawerComponent from './CommentsDrawer.svelte'
 import { isAuthenticated } from '../auth.js'
 import { setCommentMode } from '../commentMode.js'
+import './comment-layout.css'
+import './comments.css'
 
 let activeDrawer = null
 

package/src/comments/ui/composer.js

@@ -9,6 +9,7 @@ import { mount, unmount } from 'svelte'
 import ComposerComponent from './Composer.svelte'
 import { getCachedUser } from '../auth.js'
 import { saveDraft, clearDraft, composerDraftKey } from '../commentDrafts.js'
+import './comment-layout.css'
 
 /**
  * Show the comment composer at a given position within a container.
@@ -17,6 +18,7 @@ import { saveDraft, clearDraft, composerDraftKey } from '../commentDrafts.js'
  * @param {number} yPct - Y coordinate as percentage of container height
  * @param {string} route - Current route path
  * @param {object} [callbacks] - Optional callbacks
+ * @param {(xPct: number, yPct: number) => { left: string, top: string }} [callbacks.getAnchorPosition] - Resolve coordinates to overlay position
  * @param {() => void} [callbacks.onCancel] - Called when composer is dismissed
  * @param {(text: string) => void} [callbacks.onSubmitOptimistic] - Called with text for optimistic submission
  * @returns {{ el: HTMLElement, destroy: () => void }}
@@ -39,8 +41,11 @@ export function showComposer(container, xPct, yPct, route, callbacks = {}) {
   const draftKey = composerDraftKey(route)
 
   function applyPosition() {
-    composer.style.left = `${pos.x}%`
-    composer.style.top = `${pos.y}%`
+    const anchor = callbacks.getAnchorPosition
+      ? callbacks.getAnchorPosition(pos.x, pos.y)
+      : { left: `${pos.x}%`, top: `${pos.y}%` }
+    composer.style.left = anchor.left
+    composer.style.top = anchor.top
     composer.style.transform = 'translate(12px, -50%)'
 
     requestAnimationFrame(() => {