@dfosco/storyboard-core 1.13.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/bodyClasses.js

@@ -24,7 +24,7 @@ const SCENE_PREFIX = 'sb-scene--'
 function sanitize(str) {
   return String(str)
     .toLowerCase()
-    .replace(/[\.\s]+/g, '-')
+    .replace(/[.\s]+/g, '-')
     .replace(/[^a-z0-9-]/g, '')
     .replace(/-+/g, '-')
     .replace(/^-|-$/g, '')

package/src/comments/commentMode.test.js

@@ -35,7 +35,8 @@ describe('commentMode', () => {
 
   it('toggleCommentMode returns false when not authenticated', () => {
     initCommentsConfig({
-      comments: { repo: { owner: 'o', name: 'r' } },
+      comments: { discussions: { category: 'Test' } },
+      repository: { owner: 'o', name: 'r' },
     })
     const result = toggleCommentMode()
     expect(result).toBe(false)
@@ -44,7 +45,8 @@ describe('commentMode', () => {
 
   it('toggleCommentMode activates when enabled and authenticated', () => {
     initCommentsConfig({
-      comments: { repo: { owner: 'o', name: 'r' } },
+      comments: { discussions: { category: 'Test' } },
+      repository: { owner: 'o', name: 'r' },
     })
     setToken('ghp_test')
     const result = toggleCommentMode()
@@ -54,7 +56,8 @@ describe('commentMode', () => {
 
   it('toggleCommentMode toggles off when active', () => {
     initCommentsConfig({
-      comments: { repo: { owner: 'o', name: 'r' } },
+      comments: { discussions: { category: 'Test' } },
+      repository: { owner: 'o', name: 'r' },
     })
     setToken('ghp_test')
     toggleCommentMode() // on

package/src/comments/ui/authModal.js

@@ -8,6 +8,10 @@ import { setToken, validateToken, clearToken, getCachedUser } from '../auth.js'
 
 const MODAL_ID = 'sb-auth-modal'
 
+// Mutable ref updated on each openAuthModal() call so the Alpine factory
+// (registered once) always reaches the *current* modal's resolve/backdrop.
+const _ref = { resolve: null, onKeyDown: null, backdrop: null }
+
 /**
  * Open the auth modal. Returns a promise that resolves with the user info
  * on successful sign-in, or null if cancelled.
@@ -65,27 +69,34 @@ export function openAuthModal() {
 
     document.body.appendChild(backdrop)
 
-    // Close on backdrop click
-    backdrop.addEventListener('click', (e) => {
-      if (e.target === backdrop) {
-        backdrop.remove()
-        resolve(null)
-      }
-    })
-
     // Escape key
     function onKeyDown(e) {
       if (e.key === 'Escape') {
         e.preventDefault()
         e.stopPropagation()
-        window.removeEventListener('keydown', onKeyDown, true)
-        backdrop.remove()
-        resolve(null)
+        window.removeEventListener('keydown', _ref.onKeyDown, true)
+        _ref.backdrop.remove()
+        _ref.resolve(null)
       }
     }
+
+    // Update shared ref so Alpine callbacks always target the current modal
+    _ref.resolve = resolve
+    _ref.onKeyDown = onKeyDown
+    _ref.backdrop = backdrop
+
+    // Close on backdrop click
+    backdrop.addEventListener('click', (e) => {
+      if (e.target === backdrop) {
+        window.removeEventListener('keydown', _ref.onKeyDown, true)
+        _ref.backdrop.remove()
+        _ref.resolve(null)
+      }
+    })
+
     window.addEventListener('keydown', onKeyDown, true)
 
-    // Register Alpine component
+    // Register Alpine component once — reads _ref for current modal context
     if (!window.Alpine._sbAuthRegistered) {
       window.Alpine.data('sbAuthModal', () => ({
         token: '',
@@ -112,16 +123,16 @@ export function openAuthModal() {
         },
 
         done() {
-          window.removeEventListener('keydown', onKeyDown, true)
+          window.removeEventListener('keydown', _ref.onKeyDown, true)
           const user = this.user
-          backdrop.remove()
-          resolve(user)
+          _ref.backdrop.remove()
+          _ref.resolve(user)
         },
 
         close() {
-          window.removeEventListener('keydown', onKeyDown, true)
-          backdrop.remove()
-          resolve(null)
+          window.removeEventListener('keydown', _ref.onKeyDown, true)
+          _ref.backdrop.remove()
+          _ref.resolve(null)
         },
       }))
       window.Alpine._sbAuthRegistered = true

package/src/comments/ui/authModal.test.js

@@ -0,0 +1,166 @@
+/**
+ * Tests for authModal.js — PAT entry modal lifecycle.
+ *
+ * Alpine.js is stubbed: initTree triggers the Alpine component methods
+ * directly so we can test the modal's resolve/reject/close behavior
+ * without a real Alpine runtime.
+ */
+
+import { vi } from 'vitest'
+import { clearToken } from '../auth.js' // eslint-disable-line no-unused-vars -- kept for future test coverage
+
+// Store the Alpine component factory so tests can call done()/close()/submit()
+let alpineFactory = null
+let alpineInitTree = null
+
+vi.mock('alpinejs', () => ({
+  default: {
+    start: vi.fn(),
+    data: vi.fn((name, factory) => { alpineFactory = factory }),
+    initTree: vi.fn((el) => { alpineInitTree?.(el) }),
+  },
+}))
+
+describe('authModal.js', () => {
+  let openAuthModal, signOut
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+    localStorage.clear()
+    alpineFactory = null
+    alpineInitTree = null
+
+    vi.resetModules()
+
+    const mockAlpine = {
+      _sbAuthRegistered: false,
+      start: vi.fn(),
+      data: vi.fn((name, factory) => { alpineFactory = factory }),
+      initTree: vi.fn((el) => { alpineInitTree?.(el) }),
+    }
+
+    vi.doMock('alpinejs', () => ({ default: mockAlpine }))
+
+    // authModal.js reads window.Alpine directly (set by mount.js at runtime)
+    window.Alpine = mockAlpine
+
+    const mod = await import('./authModal.js')
+    openAuthModal = mod.openAuthModal
+    signOut = mod.signOut
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('creates a backdrop element in the DOM', () => {
+    openAuthModal()
+
+    const backdrop = document.getElementById('sb-auth-modal')
+    expect(backdrop).not.toBeNull()
+    expect(backdrop.classList.contains('sb-auth-backdrop')).toBe(true)
+  })
+
+  it('removes old modal before creating a new one', () => {
+    openAuthModal()
+    openAuthModal()
+
+    const modals = document.querySelectorAll('#sb-auth-modal')
+    expect(modals.length).toBe(1)
+  })
+
+  it('resolves null when Escape is pressed', async () => {
+    const promise = openAuthModal()
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+
+    const result = await promise
+    expect(result).toBeNull()
+    expect(document.getElementById('sb-auth-modal')).toBeNull()
+  })
+
+  it('resolves null when backdrop is clicked', async () => {
+    const promise = openAuthModal()
+
+    const backdrop = document.getElementById('sb-auth-modal')
+    backdrop.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    const result = await promise
+    expect(result).toBeNull()
+    expect(document.getElementById('sb-auth-modal')).toBeNull()
+  })
+
+  it('does not close when inner modal content is clicked', () => {
+    openAuthModal()
+
+    const inner = document.querySelector('.sb-auth-modal')
+    inner.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    // Modal should still be present
+    expect(document.getElementById('sb-auth-modal')).not.toBeNull()
+  })
+
+  it('registers Alpine component with sbAuthModal name', () => {
+    openAuthModal()
+    expect(alpineFactory).toBeTypeOf('function')
+  })
+
+  describe('Alpine component methods via _ref', () => {
+    it('done() resolves promise with user and removes modal', async () => {
+      const promise = openAuthModal()
+
+      // Simulate what Alpine does: create instance from factory, set user, call done()
+      const instance = alpineFactory()
+      instance.user = { login: 'testuser', avatarUrl: 'https://example.com/avatar.png' }
+      instance.done()
+
+      const result = await promise
+      expect(result).toEqual({ login: 'testuser', avatarUrl: 'https://example.com/avatar.png' })
+      expect(document.getElementById('sb-auth-modal')).toBeNull()
+    })
+
+    it('close() resolves promise with null and removes modal', async () => {
+      const promise = openAuthModal()
+
+      const instance = alpineFactory()
+      instance.close()
+
+      const result = await promise
+      expect(result).toBeNull()
+      expect(document.getElementById('sb-auth-modal')).toBeNull()
+    })
+
+    it('done() on second modal resolves the second promise, not the first', async () => {
+      // Open first modal, then close via Escape
+      const promise1 = openAuthModal()
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      const result1 = await promise1
+      expect(result1).toBeNull()
+
+      // Reset Alpine registration so factory is recaptured on next open
+      window.Alpine._sbAuthRegistered = false
+
+      // Open second modal
+      const promise2 = openAuthModal()
+      const instance2 = alpineFactory()
+      instance2.user = { login: 'user2', avatarUrl: 'https://example.com/u2.png' }
+      instance2.done()
+
+      const result2 = await promise2
+      expect(result2).toEqual({ login: 'user2', avatarUrl: 'https://example.com/u2.png' })
+      expect(document.getElementById('sb-auth-modal')).toBeNull()
+    })
+  })
+
+  describe('signOut', () => {
+    it('clears the stored token', () => {
+      localStorage.setItem('sb-comments-token', 'ghp_test')
+      localStorage.setItem('sb-comments-user', JSON.stringify({ login: 'test' }))
+
+      signOut()
+
+      expect(localStorage.getItem('sb-comments-token')).toBeNull()
+      expect(localStorage.getItem('sb-comments-user')).toBeNull()
+    })
+  })
+})

package/src/comments/ui/commentsDrawer.js

@@ -16,7 +16,7 @@ function timeAgo(dateStr) {
   return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
 }
 
-function esc(str) {
+function esc(str) { // eslint-disable-line no-unused-vars
   const d = document.createElement('div')
   d.textContent = str ?? ''
   return d.innerHTML

package/src/comments/ui/mount.js

@@ -28,14 +28,12 @@ function esc(str) {
 }
 
 function getContentContainer() {
-  return document.querySelector('main') || document.body
+  return document.body
 }
 
 function ensureOverlay() {
   if (overlay) return overlay
   const container = getContentContainer()
-  const pos = getComputedStyle(container).position
-  if (pos === 'static') container.style.position = 'relative'
 
   overlay = document.createElement('div')
   overlay.className = 'sb-comment-overlay absolute top-0 right-0 bottom-0 left-0 pe-none'

package/src/comments/ui/mount.test.js

@@ -0,0 +1,205 @@
+/**
+ * Tests for mount.js — comment overlay, banner, and body comment-mode logic.
+ *
+ * Alpine.js and heavy UI deps are mocked; we test DOM-level behavior of the
+ * exported mountComments() plus the internal helpers it exercises.
+ */
+
+import { vi } from 'vitest'
+
+// ---- Mocks (must be before importing mount.js) ----
+
+vi.mock('alpinejs', () => ({
+  default: {
+    start: vi.fn(),
+    data: vi.fn(),
+    initTree: vi.fn(),
+  },
+}))
+
+vi.mock('../api.js', () => ({
+  fetchRouteCommentsSummary: vi.fn(),
+  fetchCommentDetail: vi.fn(),
+  moveComment: vi.fn(),
+}))
+
+vi.mock('../commentCache.js', () => ({
+  getCachedComments: vi.fn(() => null),
+  setCachedComments: vi.fn(),
+  clearCachedComments: vi.fn(),
+}))
+
+vi.mock('./composer.js', () => ({
+  showComposer: vi.fn(),
+}))
+
+vi.mock('./authModal.js', () => ({
+  openAuthModal: vi.fn(),
+}))
+
+vi.mock('./commentWindow.js', () => ({
+  showCommentWindow: vi.fn(),
+  closeCommentWindow: vi.fn(),
+}))
+
+describe('mount.js', () => {
+  // mountComments() is idempotent via a module-level _mounted flag, so we
+  // must re-import the module fresh for each test to reset that flag.
+  // All sibling modules must also be re-imported so they share the same instances.
+  let mountComments
+  let setCommentMode
+  let isCommentModeActive // eslint-disable-line no-unused-vars
+  let initCommentsConfig
+  let setToken
+  let clearToken
+
+  beforeEach(async () => {
+    // Reset DOM
+    document.body.innerHTML = ''
+    document.body.className = ''
+    document.body.style.cssText = ''
+
+    // Fresh import to reset _mounted flag and all module-level state
+    vi.resetModules()
+
+    // Re-mock after resetModules
+    vi.doMock('alpinejs', () => ({
+      default: {
+        start: vi.fn(),
+        data: vi.fn(),
+        initTree: vi.fn(),
+      },
+    }))
+    vi.doMock('../api.js', () => ({
+      fetchRouteCommentsSummary: vi.fn(),
+      fetchCommentDetail: vi.fn(),
+      moveComment: vi.fn(),
+    }))
+    vi.doMock('../commentCache.js', () => ({
+      getCachedComments: vi.fn(() => null),
+      setCachedComments: vi.fn(),
+      clearCachedComments: vi.fn(),
+    }))
+    vi.doMock('./composer.js', () => ({ showComposer: vi.fn() }))
+    vi.doMock('./authModal.js', () => ({ openAuthModal: vi.fn() }))
+    vi.doMock('./commentWindow.js', () => ({
+      showCommentWindow: vi.fn(),
+      closeCommentWindow: vi.fn(),
+    }))
+
+    // Import everything fresh so mount.js and its deps share the same instances
+    const mountMod = await import('./mount.js')
+    const commentModeMod = await import('../commentMode.js')
+    const configMod = await import('../config.js')
+    const authMod = await import('../auth.js')
+
+    mountComments = mountMod.mountComments
+    setCommentMode = commentModeMod.setCommentMode
+    isCommentModeActive = commentModeMod.isCommentModeActive
+    initCommentsConfig = configMod.initCommentsConfig
+    setToken = authMod.setToken
+    clearToken = authMod.clearToken
+
+    // Reset storyboard state
+    setCommentMode(false)
+    clearToken()
+    initCommentsConfig(null)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('ensureOverlay (via setBodyCommentMode)', () => {
+    it('does not set position:relative on document.body', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      // Activate comment mode — triggers ensureOverlay internally
+      setCommentMode(true)
+
+      // body should NOT get position:relative forced on it
+      expect(document.body.style.position).not.toBe('relative')
+    })
+
+    it('appends overlay to document.body when comment mode activates', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+
+      const overlay = document.body.querySelector('.sb-comment-overlay')
+      expect(overlay).not.toBeNull()
+      expect(overlay.parentElement).toBe(document.body)
+    })
+
+    it('removes overlay when comment mode deactivates', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+      expect(document.body.querySelector('.sb-comment-overlay')).not.toBeNull()
+
+      setCommentMode(false)
+      expect(document.body.querySelector('.sb-comment-overlay')).toBeNull()
+    })
+  })
+
+  describe('banner', () => {
+    it('shows banner when comment mode activates', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+
+      const banner = document.body.querySelector('.sb-banner')
+      expect(banner).not.toBeNull()
+      expect(banner.textContent).toContain('Comment mode')
+    })
+
+    it('removes banner when comment mode deactivates', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+      setCommentMode(false)
+
+      expect(document.body.querySelector('.sb-banner')).toBeNull()
+    })
+  })
+
+  describe('body class', () => {
+    it('adds sb-comment-mode class when comment mode activates', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+      expect(document.body.classList.contains('sb-comment-mode')).toBe(true)
+    })
+
+    it('removes sb-comment-mode class when comment mode deactivates', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+      setCommentMode(false)
+      expect(document.body.classList.contains('sb-comment-mode')).toBe(false)
+    })
+  })
+
+  describe('mountComments idempotency', () => {
+    it('is safe to call multiple times', () => {
+      mountComments()
+      mountComments()
+      mountComments()
+      // No error thrown — _mounted guard prevents double init
+    })
+  })
+})

package/src/devtools.js

@@ -187,7 +187,7 @@ export function mountDevTools(options = {}) {
 
   let visible = true
   let menuOpen = false
-  let panelOpen = false
+  let panelOpen = false // eslint-disable-line no-unused-vars
 
   // Build DOM
   const wrapper = document.createElement('div')

package/src/hideMode.test.js

@@ -7,9 +7,6 @@ import {
   redo,
   getOverrideHistory,
   getCurrentIndex,
-  getNextIndex,
-  getCurrentSnapshot,
-  getCurrentRoute,
   canUndo,
   canRedo,
   getShadow,
@@ -17,7 +14,6 @@ import {
   removeShadow,
   getAllShadows,
   syncHashToHistory,
-  installHistorySync,
 } from './hideMode.js'
 
 // ── Hide Mode Toggle ──