@dfosco/storyboard-react 4.2.0-beta.4 → 4.2.1

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.0-beta.4",
+  "version": "4.2.1",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.0-beta.4",
-    "@dfosco/tiny-canvas": "4.2.0-beta.4",
+    "@dfosco/storyboard-core": "4.2.1",
+    "@dfosco/tiny-canvas": "4.2.1",
     "@neodrag/react": "^2.3.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "ansi-to-html": "^0.7.2",
+    "cmdk": "^1.1.1",
+    "feather-icons": "^4.29.2",
+    "ghostty-web": "^0.4.0",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
-    "react-cmdk": "^1.3.9",
     "remark-html": "^16.0.1"
   },
   "license": "MIT",
@@ -27,13 +32,7 @@
     "@primer/octicons-react": ">=19",
     "react": ">=18",
     "react-router-dom": ">=6",
-    "vite": ">=5",
-    "ghostty-web": ">=0.4.0"
-  },
-  "peerDependenciesMeta": {
-    "ghostty-web": {
-      "optional": true
-    }
+    "vite": ">=5"
   },
   "exports": {
     ".": "./src/index.js",

package/src/AuthModal/AuthModal.jsx

@@ -6,7 +6,6 @@
  */
 import { useState, useEffect, useCallback } from 'react'
 import { Dialog } from '@base-ui/react/dialog'
-import { Button } from '@base-ui/react/button'
 import css from './AuthModal.module.css'
 
 const COMMENTS_TOKEN_KEY = 'sb-comments-token'
@@ -31,11 +30,6 @@ export default function AuthModal() {
     return () => document.removeEventListener('storyboard:open-auth-modal', handleOpen)
   }, [])
 
-  const handleClose = useCallback(() => {
-    setOpen(false)
-    setTokenValue('')
-  }, [])
-
   const handleSignIn = useCallback(() => {
     const trimmed = tokenValue.trim()
     if (!trimmed) return
@@ -43,8 +37,12 @@ export default function AuthModal() {
     try { localStorage.setItem(COMMENTS_TOKEN_KEY, trimmed) } catch { /* ignore */ }
 
     try {
-      import('@dfosco/storyboard-core/comments').then(({ setToken }) => {
+      import('@dfosco/storyboard-core/comments').then(({ setToken, validateToken }) => {
         setToken(trimmed)
+        // Validate to cache user info (login + avatar), then notify Viewfinder
+        validateToken(trimmed)
+          .then(() => document.dispatchEvent(new CustomEvent('storyboard:auth-changed')))
+          .catch(() => document.dispatchEvent(new CustomEvent('storyboard:auth-changed')))
       }).catch(() => {})
     } catch { /* comments module may not be initialized */ }
 
@@ -64,7 +62,7 @@ export default function AuthModal() {
         <Dialog.Backdrop className={css.backdrop} />
         <div className={css.popupWrap}>
           <Dialog.Popup className={css.popup}>
-            <Dialog.Title className={css.title}>Sign in for comments</Dialog.Title>
+            <Dialog.Title className={css.title}>Sign in with GitHub</Dialog.Title>
             <Dialog.Description className={css.desc}>
               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.

package/src/BranchBar/BranchBar.jsx

@@ -1,15 +1,24 @@
 /**
- * BranchBar — dark top bar showing current branch on non-main routes.
+ * BranchBar — blue accent bar showing current branch and local dev status.
  *
- * Dev: shows branch name as a static label (use CLI to switch branches).
- * Prod: same label (dropdown switching deferred to ViewfinderNew).
+ * Dev: always visible (main or branch). Shows "Local development" label.
+ * Prod: shows on non-main branches only.
  */
 import { useState, useEffect, useMemo } from 'react'
 import { GitBranchIcon } from '@primer/octicons-react'
 import css from './BranchBar.module.css'
 
+/** Check if we're in local dev mode (respects ?prodMode simulation). */
+function checkLocalDev() {
+  if (typeof window === 'undefined') return false
+  if (new URLSearchParams(window.location.search).has('prodMode')) return false
+  return window.__SB_LOCAL_DEV__ === true
+}
+
 export default function BranchBar({ basePath }) {
-  const [hidden, setHidden] = useState(false)
+  const [hidden, setHidden] = useState(
+    () => typeof document !== 'undefined' && document.documentElement.classList.contains('storyboard-chrome-hidden')
+  )
 
   const isHiddenByParam = useMemo(() => {
     if (typeof window === 'undefined') return false
@@ -22,6 +31,7 @@ export default function BranchBar({ basePath }) {
     return m ? m[1] : 'main'
   }, [basePath])
 
+  const isLocalDev = checkLocalDev()
   const isOnBranch = currentBranch !== 'main'
 
   useEffect(() => {
@@ -32,7 +42,7 @@ export default function BranchBar({ basePath }) {
     return () => observer.disconnect()
   }, [])
 
-  if (!isOnBranch || hidden || isHiddenByParam) return null
+  if ((!isOnBranch && !isLocalDev) || hidden || isHiddenByParam) return null
 
   function hideChrome() {
     window.dispatchEvent(new KeyboardEvent('keydown', {
@@ -42,10 +52,14 @@ export default function BranchBar({ basePath }) {
 
   return (
     <div className={css.bar} data-branch-bar>
-      <div className={css.barInner}>
+      <div className={`${css.barInner}${isLocalDev ? '' : ` ${css.barProd}`}`}>
         <span className={css.barLabel}>
           <GitBranchIcon size={12} />
           <span className={css.barBranchName}>{currentBranch}</span>
+          {isLocalDev && <>
+            <span className={css.barSeparator}>·</span>
+            <span>Local development</span>
+          </>}
         </span>
         <div className={css.barActions}>
           <button className={css.barAction} onClick={hideChrome}>Hide</button>

package/src/BranchBar/BranchBar.module.css

@@ -16,12 +16,16 @@
   justify-content: center;
   gap: 8px;
   height: 32px;
-  background: var(--bgColor-emphasis, #1a1a1a);
-  color: var(--fgColor-onEmphasis, #ccc);
+  background: hsl(212, 92%, 45%);
+  color: #fff;
   padding: 4px 12px;
   position: relative;
 }
 
+.barProd {
+  background: #1c2128;
+}
+
 .barTrigger {
   display: flex;
   align-items: center;
@@ -68,6 +72,11 @@
   white-space: nowrap;
 }
 
+.barSeparator {
+  opacity: 0.6;
+  margin: 0 2px;
+}
+
 .barAction {
   background: none;
   border: none;
@@ -87,11 +96,11 @@
 }
 
 /* Push page content down */
-:global(html:has([data-branch-bar])) {
+:global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden)) {
   --sb-branch-bar-height: 32px;
 }
 
-:global(html:has([data-branch-bar]) body) {
+:global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden) body) {
   padding-top: 32px;
 }
 

package/src/BranchBar/useBranches.js

@@ -15,27 +15,41 @@ export function useBranches(basePath) {
   })
 
   const [gitUser, setGitUser] = useState(null)
+  const branchBasePath = (basePath || '/').replace(/\/branch--[^/]*\/?$/, '/')
 
   useEffect(() => {
     const apiBase = (basePath || '/').replace(/\/$/, '')
+    const branchManifestUrl = `${branchBasePath.replace(/\/$/, '')}/branches.json`
 
     fetch(`${apiBase}/_storyboard/git-user`).then(r => r.ok ? r.json() : null)
       .then(data => { if (data?.name) setGitUser(data.name) })
       .catch(() => {})
 
-    // Always fetch live branch list
+    // Keep dev behavior: prefer live branch list from server API.
+    // On static deployments (GitHub Pages), fallback to branches.json.
     fetch(`${apiBase}/_storyboard/worktrees`).then(r => r.ok ? r.json() : null)
-      .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
-      .catch(() => {})
-  }, [basePath])
+      .then(data => {
+        if (Array.isArray(data) && data.length > 0) {
+          setBranches(data)
+          return true
+        }
+        return false
+      })
+      .catch(() => false)
+      .then((hasLiveData) => {
+        if (hasLiveData || isLocalDev) return
+        return fetch(branchManifestUrl)
+          .then(r => r.ok ? r.json() : null)
+          .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
+          .catch(() => {})
+      })
+  }, [basePath, branchBasePath])
 
   const currentBranch = useMemo(() => {
     const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
     return m ? m[1] : 'main'
   }, [basePath])
 
-  const branchBasePath = (basePath || '/').replace(/\/branch--[^/]*\/$/, '/')
-
   return { branches, currentBranch, branchBasePath, gitUser }
 }
 

package/src/BranchBar/useBranches.test.js

@@ -0,0 +1,68 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { useBranches } from './useBranches.js'
+
+describe('useBranches', () => {
+  afterEach(() => {
+    delete window.__SB_BRANCHES__
+    vi.unstubAllGlobals()
+  })
+
+  it('loads branches from branches.json when worktrees API is unavailable on branch deploys', async () => {
+    const branchesFromManifest = [
+      { folder: 'branch--4.3.0-prompt-widget', branch: '4.3.0-prompt-widget' },
+      { folder: 'branch--main', branch: 'main' },
+    ]
+
+    const fetchMock = vi.fn((url) => {
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/git-user') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/worktrees') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branches.json') {
+        return Promise.resolve({ ok: true, json: async () => branchesFromManifest })
+      }
+      return Promise.reject(new Error(`Unexpected fetch URL: ${url}`))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    const { result } = renderHook(() => useBranches('/storyboard/branch--4.3.0-prompt-widget/'))
+
+    await waitFor(() => {
+      expect(result.current.branches).toEqual(branchesFromManifest)
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith('/storyboard/branches.json')
+  })
+
+  it('resolves branches.json from repo root when basePath has no trailing slash', async () => {
+    const branchesFromManifest = [
+      { folder: 'branch--4.3.0-prompt-widget', branch: '4.3.0-prompt-widget' },
+    ]
+
+    const fetchMock = vi.fn((url) => {
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/git-user') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branch--4.3.0-prompt-widget/_storyboard/worktrees') {
+        return Promise.resolve({ ok: false, json: async () => null })
+      }
+      if (url === '/storyboard/branches.json') {
+        return Promise.resolve({ ok: true, json: async () => branchesFromManifest })
+      }
+      return Promise.reject(new Error(`Unexpected fetch URL: ${url}`))
+    })
+
+    vi.stubGlobal('fetch', fetchMock)
+
+    const { result } = renderHook(() => useBranches('/storyboard/branch--4.3.0-prompt-widget'))
+
+    await waitFor(() => {
+      expect(result.current.branches).toEqual(branchesFromManifest)
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith('/storyboard/branches.json')
+  })
+})