@dfosco/storyboard-react 1.12.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "type": "module",
   "dependencies": {
     "@dfosco/storyboard-core": "*",

package/src/Viewfinder.jsx

@@ -73,6 +73,15 @@ function PlaceholderGraphic({ name }) {
   )
 }
 
+/**
+ * Derive the current branch label from the base path.
+ * Branch deploy folders use the convention `branch--<name>/`.
+ */
+function getCurrentBranch(basePath) {
+  const match = (basePath || '').match(/\/branch--([^/]+)\/?$/)
+  return match ? match[1] : 'main'
+}
+
 /**
  * Viewfinder — scene index and branch preview dashboard.
  *
@@ -99,6 +108,8 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
     return base.replace(/\/branch--[^/]*\/$/, '/')
   }, [basePath])
 
+  const currentBranch = useMemo(() => getCurrentBranch(basePath), [basePath])
+
   useEffect(() => {
     const url = `${branchBasePath}branches.json`
     fetch(url)
@@ -107,13 +118,39 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
       .catch(() => setBranches([]))
   }, [branchBasePath])
 
+  const handleBranchChange = (e) => {
+    const folder = e.target.value
+    if (folder) {
+      window.location.href = `${branchBasePath}${folder}/`
+    }
+  }
+
   return (
     <div className={styles.container}>
       <header className={styles.header}>
-        <h1 className={styles.title}>{title}</h1>
+        <div className={styles.headerTop}>
+          <h1 className={styles.title}>{title}</h1>
+          {branches && branches.length > 0 && (
+            <div className={styles.branchDropdown}>
+              <label className={styles.branchLabel} htmlFor="branch-select">Branch</label>
+              <select
+                id="branch-select"
+                className={styles.branchSelect}
+                defaultValue=""
+                onChange={handleBranchChange}
+              >
+                <option value="" disabled>{currentBranch}</option>
+                {branches.map((b) => (
+                  <option key={b.folder} value={b.folder}>
+                    {b.branch}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
         <p className={styles.subtitle}>
           {sceneNames.length} scene{sceneNames.length !== 1 ? 's' : ''}
-          {branches && branches.length > 0 ? ` · ${branches.length} branch preview${branches.length !== 1 ? 's' : ''}` : ''}
         </p>
       </header>
 
@@ -149,29 +186,6 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
           </div>
         </section>
       )}
-
-      {branches && branches.length > 0 && (
-        <section className={styles.branchSection}>
-          <h2 className={styles.sectionTitle}>Branch Previews</h2>
-          <div className={styles.grid}>
-            {branches.map((b) => (
-              <a
-                key={b.folder}
-                href={`${branchBasePath}${b.folder}/`}
-                className={styles.card}
-              >
-                <div className={styles.thumbnail}>
-                  <PlaceholderGraphic name={b.branch} />
-                </div>
-                <div className={styles.cardBody}>
-                  <p className={styles.sceneName}>{b.branch}</p>
-                  <p className={styles.branchMeta}>{b.folder}</p>
-                </div>
-              </a>
-            ))}
-          </div>
-        </section>
-      )}
     </div>
   )
 }

package/src/Viewfinder.module.css

@@ -100,15 +100,50 @@
   max-width: 960px;
 }
 
-.branchSection {
-  margin-top: 40px;
+.headerTop {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.branchDropdown {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
 
-.branchMeta {
+.branchLabel {
   font-size: 12px;
+  font-weight: 500;
   color: var(--fgColor-muted, #848d97);
-  margin: 4px 0 0;
+  white-space: nowrap;
+}
+
+.branchSelect {
+  appearance: none;
+  background-color: var(--bgColor-muted, #161b22);
+  color: var(--fgColor-default, #e6edf3);
+  border: 1px solid var(--borderColor-default, #30363d);
+  border-radius: 6px;
+  padding: 4px 28px 4px 10px;
+  font-size: 13px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23848d97'%3E%3Cpath d='M6 8.5L1.5 4h9L6 8.5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  min-width: 140px;
+}
+
+.branchSelect:hover {
+  border-color: var(--borderColor-accent-emphasis, #1f6feb);
+}
+
+.branchSelect:focus-visible {
+  outline: 2px solid var(--borderColor-accent-emphasis, #1f6feb);
+  outline-offset: -1px;
 }
 
 .author {

package/src/context.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
 // Side-effect import: seeds the core data index via init()
 import 'virtual:storyboard-data-index'
-import { loadScene, sceneExists, findRecord, deepMerge, setSceneClass } from '@dfosco/storyboard-core'
+import { loadScene, sceneExists, findRecord, deepMerge, setSceneClass, installBodyClassSync } from '@dfosco/storyboard-core'
 import { StoryboardContext } from './StoryboardContext.js'
 
 export { StoryboardContext }
@@ -34,6 +34,9 @@ export default function StoryboardProvider({ sceneName, recordName, recordParam,
   const activeSceneName = sceneParam || sceneName || (sceneExists(pageScene) ? pageScene : 'default')
   const params = useParams()
 
+  // Auto-install body class sync (sb-key--value classes on <body>)
+  useEffect(() => installBodyClassSync(), [])
+
   const { data, error } = useMemo(() => {
     try {
       let sceneData = loadScene(activeSceneName)