@dfosco/storyboard-react 1.15.2 → 1.16.0

package/package.json

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

package/src/Viewfinder.jsx

@@ -90,8 +90,10 @@ function getCurrentBranch(basePath) {
  * @param {Record<string, unknown>} props.pageModules - import.meta.glob result for page files
  * @param {string} [props.basePath] - Base URL path (defaults to import.meta.env.BASE_URL)
  * @param {string} [props.title] - Header title (defaults to "Viewfinder")
+ * @param {string} [props.subtitle] - Optional subtitle displayed below the title
+ * @param {boolean} [props.showThumbnails] - Show thumbnail previews (defaults to false)
  */
-export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, title = 'Viewfinder' }) {
+export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, title = 'Viewfinder', subtitle, showThumbnails = false }) {
   const [branches, setBranches] = useState(null)
 
   const sceneNames = useMemo(() => Object.keys(scenes), [scenes])
@@ -110,13 +112,19 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
 
   const currentBranch = useMemo(() => getCurrentBranch(basePath), [basePath])
 
+  const MOCK_BRANCHES = useMemo(() => [
+    { branch: 'main', folder: '' },
+    { branch: 'feat/comments-v2', folder: 'branch--feat-comments-v2' },
+    { branch: 'fix/nav-overflow', folder: 'branch--fix-nav-overflow' },
+  ], [])
+
   useEffect(() => {
     const url = `${branchBasePath}branches.json`
     fetch(url)
-      .then(r => r.ok ? r.json() : [])
-      .then(data => setBranches(Array.isArray(data) ? data : []))
-      .catch(() => setBranches([]))
-  }, [branchBasePath])
+      .then(r => r.ok ? r.json() : null)
+      .then(data => setBranches(Array.isArray(data) && data.length > 0 ? data : MOCK_BRANCHES))
+      .catch(() => setBranches(MOCK_BRANCHES))
+  }, [branchBasePath, MOCK_BRANCHES])
 
   const handleBranchChange = (e) => {
     const folder = e.target.value
@@ -129,15 +137,21 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
     <div className={styles.container}>
       <header className={styles.header}>
         <div className={styles.headerTop}>
-          <h1 className={styles.title}>{title}</h1>
+          <div>
+            <h1 className={styles.title}>{title}</h1>
+            {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+          </div>
           {branches && branches.length > 0 && (
             <div className={styles.branchDropdown}>
-              <label className={styles.branchLabel} htmlFor="branch-select">Branch</label>
+              <svg className={styles.branchIcon} width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.492 2.492 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" />
+              </svg>
               <select
                 id="branch-select"
                 className={styles.branchSelect}
                 defaultValue=""
                 onChange={handleBranchChange}
+                aria-label="Switch branch"
               >
                 <option value="" disabled>{currentBranch}</option>
                 {branches.map((b) => (
@@ -149,7 +163,7 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
             </div>
           )}
         </div>
-        <p className={styles.subtitle}>
+        <p className={styles.sceneCount}>
           {sceneNames.length} scene{sceneNames.length !== 1 ? 's' : ''}
         </p>
       </header>
@@ -158,27 +172,37 @@ export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, ti
         <p className={styles.empty}>No scenes found. Add a <code>*.scene.json</code> file to get started.</p>
       ) : (
         <section>
-          <h2 className={styles.sectionTitle}>Scenes</h2>
-          <div className={styles.grid}>
+          {/* <h2 className={styles.sectionTitle}>Scenes</h2> */}
+          <div className={showThumbnails ? styles.grid : styles.list}>
             {sceneNames.map((name) => {
               const meta = getSceneMeta(name)
               return (
-                <a key={name} href={resolveSceneRoute(name, knownRoutes)} className={styles.card}>
-                  <div className={styles.thumbnail}>
-                    <PlaceholderGraphic name={name} />
-                  </div>
+                <a key={name} href={resolveSceneRoute(name, knownRoutes)} className={showThumbnails ? styles.card : styles.listItem}>
+                  {showThumbnails && (
+                    <div className={styles.thumbnail}>
+                      <PlaceholderGraphic name={name} />
+                    </div>
+                  )}
                   <div className={styles.cardBody}>
                     <p className={styles.sceneName}>{name}</p>
-                    {meta?.author && (
-                      <div className={styles.author}>
-                        <img
-                          src={`https://github.com/${meta.author}.png?size=32`}
-                          alt={meta.author}
-                          className={styles.authorAvatar}
-                        />
-                        <span className={styles.authorName}>{meta.author}</span>
-                      </div>
-                    )}
+                    {meta?.author && (() => {
+                      const authors = Array.isArray(meta.author) ? meta.author : [meta.author]
+                      return (
+                        <div className={styles.author}>
+                          <span className={styles.authorAvatars}>
+                            {authors.map((a) => (
+                              <img
+                                key={a}
+                                src={`https://github.com/${a}.png?size=32`}
+                                alt={a}
+                                className={styles.authorAvatar}
+                              />
+                            ))}
+                          </span>
+                          <span className={styles.authorName}>{authors.join(', ')}</span>
+                        </div>
+                      )
+                    })()}
                   </div>
                 </a>
               )

package/src/Viewfinder.module.css

@@ -2,36 +2,72 @@
   min-height: 100vh;
   background-color: var(--bgColor-default, #0d1117);
   color: var(--fgColor-default, #e6edf3);
-  padding: 48px 32px;
+  padding: 80px 32px 48px;
 }
 
 .header {
-  max-width: 960px;
-  margin: 0 auto 40px;
+  max-width: 720px;
+  margin: 0 auto 64px;
 }
 
 .title {
-  font-size: 28px;
-  font-weight: 600;
-  margin: 0 0 8px;
+  font-size: 72px;
+  font-weight: 400;
+  margin: 0 0 12px;
   color: var(--fgColor-default, #e6edf3);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
+  line-height: 1;
 }
 
 .subtitle {
-  font-size: 14px;
+  font-size: 15px;
   color: var(--fgColor-muted, #848d97);
-  margin: 0;
+  margin: 4px 0 0;
+  letter-spacing: 0.01em;
+}
+
+.sceneCount {
+  font-size: 13px;
+  color: var(--fgColor-muted, #848d97);
+  margin: 16px 0 0;
+  letter-spacing: 0.01em;
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 16px;
-  max-width: 960px;
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  max-width: 720px;
   margin: 0 auto;
 }
 
+.listItem {
+  display: block;
+  padding: 8px 0;
+  text-decoration: none;
+  color: inherit;
+  /* border-bottom: 1px solid var(--borderColor-muted, #21262d); */
+}
+
+.listItem:first-child {
+  /* border-top: 1px solid var(--borderColor-muted, #21262d); */
+}
+
+.listItem:hover {
+  text-decoration: none !important;
+}
+
+.listItem .author {
+  margin-top: 8px;
+}
+
 .card {
   display: block;
   border: 1px solid var(--borderColor-default, #30363d);
@@ -71,33 +107,39 @@
 
 .cardBody {
   padding: 12px 16px;
-  border-top: 1px solid var(--borderColor-default, #30363d);
+
+  &:hover {
+    background-color: var(--bgColor-muted);
+  }
 }
 
 .sceneName {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 28px;
+  font-weight: 400;
   color: var(--fgColor-default, #e6edf3);
   margin: 0;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  transition: font-style 0.15s ease;
 }
 
 .empty {
   text-align: center;
   padding: 80px 24px;
   color: var(--fgColor-muted, #848d97);
-  font-size: 14px;
-  max-width: 960px;
+  font-size: 15px;
+  max-width: 720px;
   margin: 0 auto;
 }
 
 .sectionTitle {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.12em;
   color: var(--fgColor-muted, #848d97);
-  margin: 0 auto 12px;
-  max-width: 960px;
+  margin: 0 auto 20px;
+  max-width: 720px;
 }
 
 .headerTop {
@@ -110,35 +152,38 @@
 .branchDropdown {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0;
   flex-shrink: 0;
+  position: relative;
 }
 
-.branchLabel {
-  font-size: 12px;
-  font-weight: 500;
+.branchIcon {
+  position: absolute;
+  left: 10px;
   color: var(--fgColor-muted, #848d97);
-  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .branchSelect {
   appearance: none;
-  background-color: var(--bgColor-muted, #161b22);
+  background-color: transparent;
   color: var(--fgColor-default, #e6edf3);
   border: 1px solid var(--borderColor-default, #30363d);
-  border-radius: 6px;
-  padding: 4px 28px 4px 10px;
+  border-radius: 20px;
+  padding: 6px 32px 6px 32px;
   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;
+  background-position: right 12px center;
   min-width: 140px;
+  transition: border-color 0.15s ease;
 }
 
 .branchSelect:hover {
-  border-color: var(--borderColor-accent-emphasis, #1f6feb);
+  border-color: var(--fgColor-muted, #848d97);
 }
 
 .branchSelect:focus-visible {
@@ -149,17 +194,39 @@
 .author {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   margin-top: 6px;
 }
 
+.authorAvatars {
+  display: flex;
+  flex-direction: row;
+}
+
+.authorAvatars:hover .authorAvatar {
+  margin-left: 2px;
+}
+
+.authorAvatars:hover .authorAvatar:first-child {
+  margin-left: 0;
+}
+
 .authorAvatar {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   border-radius: 50%;
+  margin-left: -6px;
+  transition: margin-left 0.15s ease;
+  outline: 2px solid var(--bgColor-default, #0d1117);
+  position: relative;
+}
+
+.authorAvatar:first-child {
+  margin-left: 0;
 }
 
 .authorName {
-  font-size: 12px;
+  font-size: 13px;
   color: var(--fgColor-muted, #848d97);
+  letter-spacing: 0.01em;
 }