@dfosco/storyboard-react 4.2.0-beta.1 → 4.2.0-beta.17

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.0-beta.1",
+  "version": "4.2.0-beta.17",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.0-beta.1",
-    "@dfosco/tiny-canvas": "4.2.0-beta.1",
+    "@dfosco/storyboard-core": "4.2.0-beta.17",
+    "@dfosco/tiny-canvas": "4.2.0-beta.17",
     "@neodrag/react": "^2.3.1",
+    "ansi-to-html": "^0.7.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",

package/src/AuthModal/AuthModal.jsx

@@ -43,8 +43,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 +68,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,13 +1,20 @@
 /**
- * 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)
 
@@ -22,6 +29,7 @@ export default function BranchBar({ basePath }) {
     return m ? m[1] : 'main'
   }, [basePath])
 
+  const isLocalDev = checkLocalDev()
   const isOnBranch = currentBranch !== 'main'
 
   useEffect(() => {
@@ -32,7 +40,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 +50,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;