@dfosco/storyboard-react 4.0.0-beta.43 → 4.0.0-beta.45

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.43",
+  "version": "4.0.0-beta.45",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.0.0-beta.43",
-    "@dfosco/tiny-canvas": "4.0.0-beta.43",
+    "@dfosco/storyboard-core": "4.0.0-beta.45",
+    "@dfosco/tiny-canvas": "4.0.0-beta.45",
     "@neodrag/react": "^2.3.1",
     "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

@@ -0,0 +1,128 @@
+/**
+ * AuthModal — Global PAT entry dialog for comments authentication.
+ * Mounted at app root, triggered by:
+ *   - Svelte CoreUIBar (comments tool / "C" shortcut) via 'storyboard:open-auth-modal' event
+ *   - ViewfinderNew sidebar login button via same event
+ */
+import { useState, useEffect, useCallback } from 'react'
+import css from './AuthModal.module.css'
+
+const COMMENTS_TOKEN_KEY = 'sb-comments-token'
+
+function getRepoInfo() {
+  try {
+    // eslint-disable-next-line no-undef
+    const cfg = typeof __STORYBOARD_CONFIG__ !== 'undefined' ? __STORYBOARD_CONFIG__ : null
+    const repo = cfg?.repository
+    if (repo?.owner && repo?.name) return repo
+  } catch { /* ignore */ }
+  return { owner: 'github', name: 'storyboard' }
+}
+
+export default function AuthModal() {
+  const [open, setOpen] = useState(false)
+  const [tokenValue, setTokenValue] = useState('')
+
+  useEffect(() => {
+    function handleOpen() { setOpen(true) }
+    document.addEventListener('storyboard:open-auth-modal', handleOpen)
+    return () => document.removeEventListener('storyboard:open-auth-modal', handleOpen)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    setOpen(false)
+    setTokenValue('')
+  }, [])
+
+  const handleSignIn = useCallback(() => {
+    const trimmed = tokenValue.trim()
+    if (!trimmed) return
+
+    try { localStorage.setItem(COMMENTS_TOKEN_KEY, trimmed) } catch { /* ignore */ }
+
+    try {
+      import('@dfosco/storyboard-core/comments').then(({ setToken }) => {
+        setToken(trimmed)
+      }).catch(() => {})
+    } catch { /* comments module may not be initialized */ }
+
+    setTokenValue('')
+    setOpen(false)
+  }, [tokenValue])
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'Enter') handleSignIn()
+  }, [handleSignIn])
+
+  if (!open) return null
+
+  const repo = getRepoInfo()
+
+  return (
+    <div className={css.overlay} onClick={handleClose}>
+      <div className={css.dialog} onClick={e => e.stopPropagation()}>
+        <button className={css.closeBtn} onClick={handleClose} aria-label="Close">×</button>
+
+        <div className={css.title}>Sign in for comments</div>
+        <div 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.
+        </div>
+
+        <hr className={css.separator} />
+
+        <div className={css.tokenCard}>
+          <div className={css.tokenCardTitle}>Fine-grained Personal Access Token</div>
+          <div className={css.tokenCardRow}>
+            <span className={css.tokenCardLabel}>Owner:</span>
+            <code className={css.tokenCardCode}>{repo.owner}</code>
+          </div>
+          <div className={css.tokenCardRow}>
+            <span className={css.tokenCardLabel}>Expiration:</span>
+            <code className={css.tokenCardCode}>366 days</code>
+            <span className={css.tokenCardHint}>(recommended)</span>
+          </div>
+          <div className={css.tokenCardRow}>
+            <span className={css.tokenCardLabel}>Repository access:</span>
+            <code className={css.tokenCardCode}>Only select repositories &gt; {repo.owner}/{repo.name}</code>
+          </div>
+          <div className={css.tokenCardRow}>
+            <span className={css.tokenCardLabel}>Permissions:</span>
+            <code className={css.tokenCardCode}>Repositories &gt; Discussions &gt; Access: Read and Write</code>
+          </div>
+        </div>
+
+        <a
+          className={css.tokenLink}
+          href="https://github.com/settings/personal-access-tokens/new"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Create a GitHub Fine-Grained Personal Access Token ↗
+        </a>
+
+        <hr className={css.separator} />
+
+        <label className={css.label}>Personal Access Token</label>
+        <input
+          className={css.input}
+          placeholder="github_pat_… or ghp_…"
+          type="password"
+          autoFocus
+          value={tokenValue}
+          onChange={e => setTokenValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+
+        <div className={css.warning}>
+          <span className={css.warningIcon}>⚠️</span>
+          <span>Comments are an experimental feature and may be unstable.</span>
+        </div>
+
+        <div className={css.actions}>
+          <button className={css.btnSecondary} onClick={handleClose}>Cancel</button>
+          <button className={css.btnPrimary} onClick={handleSignIn}>Sign in</button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/AuthModal/AuthModal.module.css

@@ -0,0 +1,200 @@
+/* AuthModal — PAT entry dialog */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.dialog {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px;
+  width: 480px;
+  max-width: 90vw;
+  position: relative;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  line-height: 1;
+  color: #999;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.closeBtn:hover {
+  background: #f0f0f0;
+  color: #555;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #1a1a1a;
+  padding-right: 32px;
+}
+
+.desc {
+  font-size: 15px;
+  color: #666;
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.separator {
+  border: none;
+  border-top: 1px solid #e5e5e5;
+  margin: 16px 0;
+}
+
+/* Token config card — matches GitHub PAT settings screenshot */
+
+.tokenCard {
+  background: #f6f8fa;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+
+.tokenCardTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+}
+
+.tokenCardRow {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #656d76;
+}
+
+.tokenCardLabel {
+  flex-shrink: 0;
+}
+
+.tokenCardCode {
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  color: #1a1a1a;
+  background: #fff;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.tokenCardHint {
+  color: #8b949e;
+}
+
+.tokenLink {
+  display: inline-block;
+  font-size: 15px;
+  color: #0969da;
+  text-decoration: none;
+  margin-bottom: 4px;
+}
+
+.tokenLink:hover {
+  text-decoration: underline;
+}
+
+/* Input */
+
+.label {
+  display: block;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 6px;
+}
+
+.input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  font-size: 15px;
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #999;
+}
+
+/* Warning banner */
+
+.warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: #fff8c5;
+  border: 1px solid #d4a72c;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #6a5300;
+  margin-bottom: 8px;
+}
+
+.warningIcon {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+/* Actions */
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.btnSecondary {
+  padding: 8px 16px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  font-size: 15px;
+  color: #555;
+  cursor: pointer;
+}
+
+.btnSecondary:hover {
+  background: #f5f5f5;
+}
+
+.btnPrimary {
+  padding: 8px 16px;
+  background: #1a1a1a;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+}
+
+.btnPrimary:hover {
+  background: #333;
+}

package/src/BranchBar/BranchBar.jsx

@@ -0,0 +1,50 @@
+/**
+ * BranchBar — dark top bar showing current branch on non-main routes.
+ *
+ * Dev: shows branch name as a static label (use CLI to switch branches).
+ * Prod: same label (dropdown switching deferred to ViewfinderNew).
+ */
+import { useState, useEffect, useMemo } from 'react'
+import { GitBranchIcon } from '@primer/octicons-react'
+import css from './BranchBar.module.css'
+
+export default function BranchBar({ basePath }) {
+  const [hidden, setHidden] = useState(false)
+
+  const currentBranch = useMemo(() => {
+    const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
+    return m ? m[1] : 'main'
+  }, [basePath])
+
+  const isOnBranch = currentBranch !== 'main'
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setHidden(document.documentElement.classList.contains('storyboard-chrome-hidden'))
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  if (!isOnBranch || hidden) return null
+
+  function hideChrome() {
+    window.dispatchEvent(new KeyboardEvent('keydown', {
+      key: '.', metaKey: true, bubbles: true,
+    }))
+  }
+
+  return (
+    <div className={css.bar} data-branch-bar>
+      <div className={css.barInner}>
+        <span className={css.barLabel}>
+          <GitBranchIcon size={12} />
+          <span className={css.barBranchName}>{currentBranch}</span>
+        </span>
+        <div className={css.barActions}>
+          <button className={css.barAction} onClick={hideChrome}>Hide</button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/BranchBar/BranchBar.module.css

@@ -0,0 +1,230 @@
+/* ─── BranchBar (fixed top bar) ─── */
+
+.bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+}
+
+.barInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 32px;
+  background: var(--bgColor-emphasis, #1a1a1a);
+  color: var(--fgColor-onEmphasis, #ccc);
+  padding: 4px 12px;
+  position: relative;
+}
+
+.barTrigger {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  color: var(--fgColor-onEmphasis, #ddd);
+  font-size: 11px;
+  font-weight: 400;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+
+.barTrigger:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.barActions {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.barLabel {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--fgColor-onEmphasis, #ddd);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.barBranchName {
+  font-weight: 500;
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.barAction {
+  background: none;
+  border: none;
+  color: var(--fgColor-onEmphasis, #777);
+  font-size: 11px;
+  font-weight: 400;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 3px;
+  transition: all 0.1s;
+}
+
+.barAction:hover {
+  color: var(--fgColor-onEmphasis, #fff);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Push page content down */
+:global(html:has([data-branch-bar])) {
+  --sb-branch-bar-height: 32px;
+}
+
+:global(html:has([data-branch-bar]) body) {
+  padding-top: 32px;
+}
+
+:global(html.storyboard-chrome-hidden [data-branch-bar]) {
+  display: none;
+}
+
+/* ─── Shared dropdown (used by both BranchBar and ViewfinderNew) ─── */
+
+.branchBtn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  background: #fff;
+  color: #555;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+
+.branchBtn:hover {
+  background: #f5f5f5;
+  border-color: #ccc;
+}
+
+.branchBtnText {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid rgba(255, 255, 255, 0.15);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.branchPositioner {
+  z-index: 10001;
+}
+
+.branchPopup {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  min-width: 240px;
+  max-width: 320px;
+  padding: 6px 0;
+  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.branchSectionLabel {
+  padding: 8px 14px 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.branchItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 14px;
+  font-size: 16px;
+  color: #555;
+  cursor: pointer;
+  transition: background 0.1s;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+}
+
+.branchItem:hover,
+.branchItem[data-highlighted] {
+  background: #f5f5f5;
+}
+
+.branchItemActive {
+  composes: branchItem;
+  color: #1a1a1a;
+  font-weight: 600;
+}
+
+.branchSeparator {
+  height: 1px;
+  background: #e5e5e5;
+  margin: 4px 10px;
+}
+
+.branchViewport {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.branchShowAll {
+  display: block;
+  width: 100%;
+  padding: 8px 14px;
+  font-size: 16px;
+  color: #2563eb;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+}
+
+.branchShowAll:hover {
+  background: #f5f5f5;
+}
+
+.branchError {
+  padding: 6px 14px;
+  font-size: 12px;
+  color: #ef4444;
+  background: #fef2f2;
+  border-bottom: 1px solid #fecaca;
+}

package/src/BranchBar/useBranches.js

@@ -0,0 +1,79 @@
+/**
+ * useBranches — shared hook for branch data across BranchBar and BranchDropdown.
+ * Fetches live branch list from /_storyboard/worktrees API on mount.
+ */
+import { useState, useEffect, useMemo, useCallback } from 'react'
+
+const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+
+export function useBranches(basePath) {
+  const [branches, setBranches] = useState(() => {
+    if (typeof window !== 'undefined' && Array.isArray(window.__SB_BRANCHES__)) {
+      return window.__SB_BRANCHES__
+    }
+    return null
+  })
+
+  const [gitUser, setGitUser] = useState(null)
+
+  useEffect(() => {
+    const apiBase = (basePath || '/').replace(/\/$/, '')
+
+    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
+    fetch(`${apiBase}/_storyboard/worktrees`).then(r => r.ok ? r.json() : null)
+      .then(data => { if (Array.isArray(data) && data.length > 0) setBranches(data) })
+      .catch(() => {})
+  }, [basePath])
+
+  const currentBranch = useMemo(() => {
+    const m = (basePath || '').match(/\/branch--([^/]+)\/?$/)
+    return m ? m[1] : 'main'
+  }, [basePath])
+
+  const branchBasePath = (basePath || '/').replace(/\/branch--[^/]*\/$/, '/')
+
+  return { branches, currentBranch, branchBasePath, gitUser }
+}
+
+export function useSwitchBranch(basePath, branchBasePath) {
+  const [switching, setSwitching] = useState(null)
+  const [switchError, setSwitchError] = useState(null)
+
+  const switchBranch = useCallback(async (branch, folder) => {
+    if (switching) return
+    setSwitching(branch)
+    setSwitchError(null)
+
+    if (!isLocalDev) {
+      // Prod: direct navigation
+      window.location.href = `${branchBasePath}${folder || (branch === 'main' ? '' : `branch--${branch}/`)}`
+      return
+    }
+
+    // Dev: call switch-branch API to spin up server
+    const apiBase = (basePath || '/').replace(/\/$/, '')
+    try {
+      const res = await fetch(`${apiBase}/_storyboard/switch-branch`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ branch }),
+      })
+      const data = await res.json()
+      if (res.ok && data.url) {
+        window.location.href = data.url
+      } else {
+        setSwitchError(data.error || 'Failed to switch')
+        setSwitching(null)
+      }
+    } catch (e) {
+      setSwitchError(e.message || 'Server not reachable')
+      setSwitching(null)
+    }
+  }, [basePath, branchBasePath, switching])
+
+  return { switching, switchError, switchBranch }
+}