@dfosco/storyboard-react 4.0.0-beta.9 → 4.0.0

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.9",
-    "@dfosco/tiny-canvas": "4.0.0-beta.9",
+    "@base-ui/react": "^1.4.0",
+    "@dfosco/storyboard-core": "4.0.0",
+    "@dfosco/tiny-canvas": "4.0.0",
     "@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",
@@ -22,6 +24,7 @@
     "src"
   ],
   "peerDependencies": {
+    "@primer/octicons-react": ">=19",
     "react": ">=18",
     "react-router-dom": ">=6",
     "vite": ">=5"

package/src/AuthModal/AuthModal.jsx

@@ -0,0 +1,134 @@
+/**
+ * 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 { Dialog } from '@base-ui/react/dialog'
+import { Button } from '@base-ui/react/button'
+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])
+
+  const repo = getRepoInfo()
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <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.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.
+            </Dialog.Description>
+            <Dialog.Close className={css.closeBtn} aria-label="Close">×</Dialog.Close>
+
+            <hr className={css.separator} />
+
+            <div className={css.tokenCard}>
+              <p className={css.tokenCardTitle}>Fine-grained Personal Access Token</p>
+              <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} htmlFor="auth-modal-token">Personal Access Token</label>
+            <input
+              id="auth-modal-token"
+              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}>
+              <Dialog.Close className={css.btnSecondary}>Cancel</Dialog.Close>
+              <button className={css.btnPrimary} onClick={handleSignIn}>Sign in</button>
+            </div>
+          </Dialog.Popup>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/AuthModal/AuthModal.module.css

@@ -0,0 +1,221 @@
+/* AuthModal — PAT entry dialog (BaseUI Dialog) */
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-backdrop-bgColor, rgba(0, 0, 0, 0.4));
+  z-index: 10000;
+}
+
+.popupWrap {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.popupWrap > * {
+  pointer-events: auto;
+}
+
+.popup {
+  background: var(--bgColor-default);
+  border-radius: 12px;
+  box-shadow: var(--shadow-overlay, 0 16px 48px rgba(0, 0, 0, 0.12));
+  padding: 28px;
+  max-width: 620px;
+  max-height: 90vh;
+  overflow-y: auto;
+  color: var(--fgColor-default);
+  position: relative;
+}
+
+.closeBtn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  line-height: 1;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.closeBtn:hover {
+  background: var(--bgColor-neutral-muted);
+  color: var(--fgColor-default);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--fgColor-default);
+  padding-right: 32px;
+}
+
+.desc {
+  font-size: 15px;
+  color: var(--fgColor-muted);
+  margin-bottom: 16px;
+  line-height: 1.5;
+}
+
+.separator {
+  border: none;
+  border-top: 1px solid var(--borderColor-default);
+  margin: 16px 0;
+}
+
+/* Token config card — matches GitHub PAT settings screenshot */
+
+.tokenCard {
+  background: var(--bgColor-muted);
+  border: 1px solid var(--borderColor-default);
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+}
+
+.tokenCardTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fgColor-default);
+  margin-bottom: 8px;
+}
+
+.tokenCardRow {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--fgColor-muted);
+}
+
+.tokenCardLabel {
+  flex-shrink: 0;
+}
+
+.tokenCardCode {
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  color: var(--fgColor-default);
+  background: var(--bgColor-default);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.tokenCardHint {
+  color: var(--fgColor-muted);
+}
+
+.tokenLink {
+  display: inline-block;
+  font-size: 15px;
+  color: var(--fgColor-accent);
+  text-decoration: none;
+  margin-bottom: 4px;
+}
+
+.tokenLink:hover {
+  text-decoration: underline;
+}
+
+/* Input */
+
+.label {
+  display: block;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fgColor-default);
+  margin-bottom: 6px;
+}
+
+.input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--borderColor-default);
+  border-radius: 6px;
+  font-size: 15px;
+  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+  background: var(--bgColor-default);
+  color: var(--fgColor-default);
+}
+
+.input::placeholder {
+  color: var(--fgColor-muted);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--borderColor-accent-emphasis);
+  box-shadow: 0 0 0 3px var(--borderColor-accent-muted);
+}
+
+/* Warning banner */
+
+.warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--bgColor-attention-muted);
+  border: 1px solid var(--borderColor-attention-muted);
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--fgColor-attention);
+  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: transparent;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  color: var(--fgColor-muted);
+  cursor: pointer;
+}
+
+.btnSecondary:hover {
+  color: var(--fgColor-default);
+  background: var(--bgColor-neutral-muted);
+}
+
+.btnPrimary {
+  padding: 8px 20px;
+  background: var(--bgColor-accent-emphasis);
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fgColor-onEmphasis);
+  cursor: pointer;
+}
+
+.btnPrimary:hover {
+  background: var(--bgColor-accent-emphasis-hover, var(--bgColor-accent-emphasis));
+}

package/src/BranchBar/BranchBar.jsx

@@ -0,0 +1,56 @@
+/**
+ * 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 isHiddenByParam = useMemo(() => {
+    if (typeof window === 'undefined') return false
+    const params = new URLSearchParams(window.location.search)
+    return params.has('_sb_hide_branch_bar') || params.has('_sb_embed')
+  }, [])
+
+  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 || isHiddenByParam) 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;
+}