@dfosco/storyboard-react 1.6.0 → 1.7.1

package/package.json

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

package/src/Viewfinder.jsx

@@ -0,0 +1,178 @@
+/* eslint-disable react/prop-types */
+import { useState, useEffect, useMemo } from 'react'
+import { hash, resolveSceneRoute, getSceneMeta } from '@dfosco/storyboard-core'
+import { Link } from 'react-router-dom'
+import styles from './Viewfinder.module.css'
+
+function PlaceholderGraphic({ name }) {
+  const seed = hash(name)
+  const rects = []
+
+  for (let i = 0; i < 12; i++) {
+    const s = seed * (i + 1)
+    const x = (s * 7 + i * 31) % 320
+    const y = (s * 13 + i * 17) % 200
+    const w = 20 + (s * (i + 3)) % 80
+    const h = 8 + (s * (i + 7)) % 40
+    const opacity = 0.06 + ((s * (i + 2)) % 20) / 100
+    const fill = i % 3 === 0 ? 'var(--placeholder-accent)' : i % 3 === 1 ? 'var(--placeholder-fg)' : 'var(--placeholder-muted)'
+
+    rects.push(
+      <rect
+        key={i}
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        rx={2}
+        fill={fill}
+        opacity={opacity}
+      />
+    )
+  }
+
+  const lines = []
+  for (let i = 0; i < 6; i++) {
+    const s = seed * (i + 5)
+    const y = 10 + (s % 180)
+    lines.push(
+      <line
+        key={`h${i}`}
+        x1={0}
+        y1={y}
+        x2={320}
+        y2={y}
+        stroke="var(--placeholder-grid)"
+        strokeWidth={0.5}
+        opacity={0.4}
+      />
+    )
+  }
+  for (let i = 0; i < 8; i++) {
+    const s = seed * (i + 9)
+    const x = 10 + (s % 300)
+    lines.push(
+      <line
+        key={`v${i}`}
+        x1={x}
+        y1={0}
+        x2={x}
+        y2={200}
+        stroke="var(--placeholder-grid)"
+        strokeWidth={0.5}
+        opacity={0.3}
+      />
+    )
+  }
+
+  return (
+    <svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <rect width="320" height="200" fill="var(--placeholder-bg)" />
+      {lines}
+      {rects}
+    </svg>
+  )
+}
+
+/**
+ * Viewfinder — scene index and branch preview dashboard.
+ *
+ * @param {Object} props
+ * @param {Record<string, unknown>} props.scenes - Scene index object (keys are scene names)
+ * @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")
+ */
+export default function Viewfinder({ scenes = {}, pageModules = {}, basePath, title = 'Viewfinder' }) {
+  const [branches, setBranches] = useState(null)
+
+  const sceneNames = useMemo(() => Object.keys(scenes), [scenes])
+
+  const knownRoutes = useMemo(() =>
+    Object.keys(pageModules)
+      .map(p => p.replace('/src/pages/', '').replace('.jsx', ''))
+      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'viewfinder'),
+    [pageModules]
+  )
+
+  const branchBasePath = useMemo(() => {
+    const base = basePath || '/storyboard-source/'
+    return base.replace(/\/[^/]*\/$/, '/')
+  }, [basePath])
+
+  useEffect(() => {
+    const url = `${branchBasePath}branches.json`
+    fetch(url)
+      .then(r => r.ok ? r.json() : [])
+      .then(data => setBranches(Array.isArray(data) ? data : []))
+      .catch(() => setBranches([]))
+  }, [branchBasePath])
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        <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>
+
+      {sceneNames.length === 0 ? (
+        <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}>
+            {sceneNames.map((name) => {
+              const meta = getSceneMeta(name)
+              return (
+                <Link key={name} to={resolveSceneRoute(name, knownRoutes)} className={styles.card}>
+                  <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>
+                    )}
+                  </div>
+                </Link>
+              )
+            })}
+          </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

@@ -0,0 +1,129 @@
+.container {
+  min-height: 100vh;
+  background-color: var(--bgColor-default, #0d1117);
+  color: var(--fgColor-default, #e6edf3);
+  padding: 48px 32px;
+}
+
+.header {
+  max-width: 960px;
+  margin: 0 auto 40px;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 600;
+  margin: 0 0 8px;
+  color: var(--fgColor-default, #e6edf3);
+  letter-spacing: -0.02em;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: var(--fgColor-muted, #848d97);
+  margin: 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 16px;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.card {
+  display: block;
+  border: 1px solid var(--borderColor-default, #30363d);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bgColor-muted, #161b22);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.card:hover {
+  border-color: var(--borderColor-accent-emphasis, #1f6feb);
+  box-shadow: 0 0 0 1px var(--borderColor-accent-emphasis, #1f6feb);
+}
+
+.thumbnail {
+  aspect-ratio: 16 / 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--bgColor-inset, #010409);
+
+  --placeholder-bg: var(--bgColor-inset, #010409);
+  --placeholder-grid: var(--borderColor-default, #30363d);
+  --placeholder-accent: var(--fgColor-accent, #58a6ff);
+  --placeholder-fg: var(--fgColor-default, #c9d1d9);
+  --placeholder-muted: var(--fgColor-muted, #484f58);
+}
+
+.thumbnail svg {
+  width: 100%;
+  height: 100%;
+}
+
+.cardBody {
+  padding: 12px 16px;
+  border-top: 1px solid var(--borderColor-default, #30363d);
+}
+
+.sceneName {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--fgColor-default, #e6edf3);
+  margin: 0;
+}
+
+.empty {
+  text-align: center;
+  padding: 80px 24px;
+  color: var(--fgColor-muted, #848d97);
+  font-size: 14px;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.sectionTitle {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fgColor-muted, #848d97);
+  margin: 0 auto 12px;
+  max-width: 960px;
+}
+
+.branchSection {
+  margin-top: 40px;
+}
+
+.branchMeta {
+  font-size: 12px;
+  color: var(--fgColor-muted, #848d97);
+  margin: 4px 0 0;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.author {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.authorAvatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.authorName {
+  font-size: 12px;
+  color: var(--fgColor-muted, #848d97);
+}

package/src/index.js

@@ -25,3 +25,6 @@ export { installHashPreserver } from './hashPreserver.js'
 
 // Form context (for design system packages to use)
 export { FormContext } from './context/FormContext.js'
+
+// Viewfinder dashboard
+export { default as Viewfinder } from './Viewfinder.jsx'

package/src/vite/data-plugin.js

@@ -107,6 +107,14 @@ export default function storyboardDataPlugin() {
     name: 'storyboard-data',
     enforce: 'pre',
 
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: ['@dfosco/storyboard-react'],
+        },
+      }
+    },
+
     configResolved(config) {
       root = config.root
     },

package/src/vite/data-plugin.test.js

@@ -47,6 +47,12 @@ describe('storyboardDataPlugin', () => {
     expect(plugin.enforce).toBe('pre')
   })
 
+  it('config() excludes @dfosco/storyboard-react from optimizeDeps', () => {
+    const plugin = storyboardDataPlugin()
+    const config = plugin.config()
+    expect(config.optimizeDeps.exclude).toContain('@dfosco/storyboard-react')
+  })
+
   it("resolveId returns resolved ID for 'virtual:storyboard-data-index'", () => {
     const plugin = createPlugin()
     expect(plugin.resolveId('virtual:storyboard-data-index')).toBe(RESOLVED_ID)