@dfosco/storyboard-react 4.1.0 → 4.2.0-beta.1

package/src/canvas/PageSelector.jsx

@@ -1,7 +1,15 @@
 import { useCallback, useRef, useState, useEffect } from 'react'
-import { createCanvas } from './canvasApi.js'
+import { createCanvas, renamePage, reorderPages, getPageOrder, duplicateCanvas } from './canvasApi.js'
 import styles from './PageSelector.module.css'
 
+const DragGrip = () => (
+  <svg className={styles.dragHandle} width="8" height="14" viewBox="0 0 8 14" fill="currentColor" aria-hidden="true">
+    <circle cx="2" cy="2" r="1.2" /><circle cx="6" cy="2" r="1.2" />
+    <circle cx="2" cy="7" r="1.2" /><circle cx="6" cy="7" r="1.2" />
+    <circle cx="2" cy="12" r="1.2" /><circle cx="6" cy="12" r="1.2" />
+  </svg>
+)
+
 /**
  * In-canvas page selector — shows sibling pages in the same canvas group.
  * Only renders when 2+ sibling pages exist.
@@ -24,33 +32,294 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
   const [creating, setCreating] = useState(false)
   const [pages, setPages] = useState(initialPages)
   const [successMsg, setSuccessMsg] = useState(null)
+  const [editingPage, setEditingPage] = useState(null)
+  const [editValue, setEditValue] = useState('')
+  const [orderedItems, setOrderedItems] = useState(() => initialPages.map(p => ({ type: 'page', ...p })))
+  const [dragIndex, setDragIndex] = useState(null)
+  const [dropTarget, setDropTarget] = useState(null)
   const containerRef = useRef(null)
   const inputRef = useRef(null)
+  const editInputRef = useRef(null)
+  const clickTimerRef = useRef(null)
+  const didDragRef = useRef(false)
 
   // Sync pages when prop changes (e.g. HMR reload)
   useEffect(() => { setPages(initialPages) }, [initialPages])
 
-  const currentPage = pages.find((p) => p.name === currentName)
-  const currentLabel = currentPage?.title || currentName.split('/').pop()
-  const currentIndex = pages.findIndex((p) => p.name === currentName)
+  // Keep orderedItems in sync with pages when dropdown is closed
+  useEffect(() => {
+    setOrderedItems(prev => {
+      // If we have order with separators, preserve it but update page data
+      if (prev.some(i => i.type === 'separator')) return prev
+      return initialPages.map(p => ({ type: 'page', ...p }))
+    })
+  }, [initialPages])
 
   // Derive folder from currentName (e.g. "Examples/Design Overview" → "Examples")
   const folder = currentName.includes('/') ? currentName.split('/')[0] : ''
 
+  // Build ordered items from pages + saved order (with separators).
+  // Load eagerly (not just when open) so the trigger badge shows correct index.
+  useEffect(() => {
+    let cancelled = false
+    async function loadOrder() {
+      if (!folder) {
+        setOrderedItems(pages.map(p => ({ type: 'page', ...p })))
+        return
+      }
+      try {
+        const result = await getPageOrder(folder)
+        if (cancelled) return
+        if (result?.order) {
+          const items = []
+          const pageMap = new Map(pages.map(p => [p.name, p]))
+          const seen = new Set()
+          for (const entry of result.order) {
+            if (typeof entry === 'string' && entry.startsWith('sep-')) {
+              items.push({ type: 'separator', id: entry })
+            } else if (pageMap.has(entry)) {
+              items.push({ type: 'page', ...pageMap.get(entry) })
+              seen.add(entry)
+            }
+          }
+          // Append pages not in saved order
+          for (const p of pages) {
+            if (!seen.has(p.name)) items.push({ type: 'page', ...p })
+          }
+          setOrderedItems(items)
+        } else {
+          setOrderedItems(pages.map(p => ({ type: 'page', ...p })))
+        }
+      } catch {
+        setOrderedItems(pages.map(p => ({ type: 'page', ...p })))
+      }
+    }
+    loadOrder()
+    return () => { cancelled = true }
+  }, [pages, folder])
+
+  // Derived values from ordered items
+  const realPages = orderedItems.filter(i => i.type === 'page')
+  const currentPage = realPages.find(p => p.name === currentName)
+  const currentLabel = currentPage?.title || currentName.split('/').pop()
+  const currentIndex = realPages.findIndex(p => p.name === currentName)
+
+  const navigateTo = useCallback((page) => {
+    const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    window.location.href = base + page.route
+  }, [])
+
   const handleSelect = useCallback(
     (page) => {
       if (page.name !== currentName) {
-        const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-        window.location.href = base + page.route
+        navigateTo(page)
       }
       setOpen(false)
     },
-    [currentName],
+    [currentName, navigateTo],
   )
 
+  // Click handler with 300ms delay (mouse only) to distinguish from dblclick
+  const handleItemClick = useCallback((page, e) => {
+    if (didDragRef.current) {
+      didDragRef.current = false
+      return
+    }
+    if (editingPage) return
+    // Keyboard Enter/Space → navigate immediately
+    if (!e?.nativeEvent || e.nativeEvent instanceof KeyboardEvent) {
+      handleSelect(page)
+      return
+    }
+    // Mouse click → delay to allow dblclick
+    if (clickTimerRef.current) clearTimeout(clickTimerRef.current)
+    clickTimerRef.current = setTimeout(() => {
+      clickTimerRef.current = null
+      handleSelect(page)
+    }, 300)
+  }, [editingPage, handleSelect])
+
+  // Double-click to rename
+  const handleItemDblClick = useCallback((page) => {
+    if (!isLocalDev) return
+    if (clickTimerRef.current) {
+      clearTimeout(clickTimerRef.current)
+      clickTimerRef.current = null
+    }
+    setEditingPage(page.name)
+    setEditValue(page.title)
+  }, [isLocalDev])
+
+  // Focus edit input when entering edit mode
+  useEffect(() => {
+    if (editingPage && editInputRef.current) {
+      editInputRef.current.focus()
+      editInputRef.current.select()
+    }
+  }, [editingPage])
+
+  // Commit rename
+  const handleRenameCommit = useCallback(async () => {
+    const trimmed = editValue.trim()
+    const oldName = editingPage
+    setEditingPage(null)
+    if (!trimmed || !oldName) return
+
+    const oldPage = realPages.find(p => p.name === oldName)
+    if (!oldPage || trimmed === oldPage.title) return
+
+    // Validate no duplicates (case-insensitive)
+    const lower = trimmed.toLowerCase()
+    if (realPages.some(p => p.name !== oldName && p.title.toLowerCase() === lower)) {
+      console.warn('Duplicate page name:', trimmed)
+      return
+    }
+
+    try {
+      const result = await renamePage(oldName, trimmed)
+      if (result?.error) {
+        console.error('Failed to rename page:', result.error)
+        return
+      }
+      const route = result?.route
+      if (route) {
+        const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+        const targetUrl = base + route
+        try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
+        if (import.meta.hot) {
+          const timer = setTimeout(() => { window.location.href = targetUrl }, 3000)
+          import.meta.hot.on('vite:beforeFullReload', () => {
+            clearTimeout(timer)
+            sessionStorage.setItem('sb-pending-navigate', targetUrl)
+          })
+        } else {
+          setTimeout(() => { window.location.href = targetUrl }, 1000)
+        }
+      }
+    } catch (err) {
+      console.error('Failed to rename page:', err)
+    }
+  }, [editValue, editingPage, realPages])
+
+  // Duplicate a page
+  const handleDuplicate = useCallback(async (page, e) => {
+    e.stopPropagation()
+
+    // Smart copy naming: if title ends with ` N` or `vN`, increment the number.
+    // Skip `#N` (could be issue refs) and years (2000-2099).
+    const numberedMatch = page.title.match(/^(.+?)(\s+|v)(\d+)$/)
+    let copyTitle
+    const num = numberedMatch ? parseInt(numberedMatch[3], 10) : null
+    const isYear = num !== null && num >= 2000 && num <= 2099
+    if (numberedMatch && !isYear) {
+      const [, base, sep, numStr] = numberedMatch
+      let next = parseInt(numStr, 10) + 1
+      const titles = new Set(realPages.map(p => p.title))
+      while (titles.has(`${base}${sep}${next}`)) next++
+      copyTitle = `${base}${sep}${next}`
+    } else {
+      const baseTitle = page.title.replace(/ Copy( \d+)?$/, '')
+      const existingCopies = realPages
+        .filter(p => {
+          const t = p.title
+          return t === `${baseTitle} Copy` || (/^.+ Copy \d+$/.test(t) && t.startsWith(baseTitle))
+        })
+        .length
+      copyTitle = existingCopies === 0
+        ? `${baseTitle} Copy`
+        : `${baseTitle} Copy ${existingCopies + 1}`
+    }
+
+    try {
+      const result = await duplicateCanvas(page.name, copyTitle)
+      if (result?.error) {
+        console.error('Failed to duplicate page:', result.error)
+        return
+      }
+      const route = result?.route
+      const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+      const targetUrl = base + route
+
+      // Optimistically add the new page to the list
+      const pageName = result.name || copyTitle
+      setPages(prev => [...prev, { name: pageName, route, title: copyTitle }])
+      setSuccessMsg(`"${copyTitle}" created`)
+
+      try { sessionStorage.setItem('sb-open-page-selector', '1') } catch { /* ignore */ }
+
+      if (import.meta.hot) {
+        const timer = setTimeout(() => { window.location.href = targetUrl }, 3000)
+        import.meta.hot.on('vite:beforeFullReload', () => {
+          clearTimeout(timer)
+          sessionStorage.setItem('sb-pending-navigate', targetUrl)
+        })
+      } else {
+        setTimeout(() => { window.location.href = targetUrl }, 1000)
+      }
+    } catch (err) {
+      console.error('Failed to duplicate page:', err)
+    }
+  }, [realPages])
+
+  // Drag and drop handlers
+  const handleDragStart = useCallback((index, e) => {
+    didDragRef.current = true
+    setDragIndex(index)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', String(index))
+  }, [])
+
+  const handleDragOver = useCallback((index, e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDropTarget(index)
+  }, [])
+
+  const handleDragEnd = useCallback(() => {
+    setDragIndex(null)
+    setDropTarget(null)
+  }, [])
+
+  const handleDrop = useCallback(async (toIndex, e) => {
+    e.preventDefault()
+    const fromIndex = dragIndex
+    setDragIndex(null)
+    setDropTarget(null)
+    if (fromIndex == null || fromIndex === toIndex) return
+
+    const newItems = [...orderedItems]
+    const [moved] = newItems.splice(fromIndex, 1)
+    newItems.splice(toIndex, 0, moved)
+    setOrderedItems(newItems)
+
+    if (folder) {
+      const order = newItems.map(i => i.type === 'separator' ? i.id : i.name)
+      try { await reorderPages(folder, order) } catch (err) {
+        console.error('Failed to persist page order:', err)
+      }
+    }
+  }, [dragIndex, orderedItems, folder])
+
   const handleAddPage = useCallback(async () => {
     const trimmed = newName.trim()
     if (!trimmed || creating) return
+
+    // Separator shortcut
+    if (trimmed === '---') {
+      const sepId = `sep-${Date.now()}`
+      const newItems = [...orderedItems, { type: 'separator', id: sepId }]
+      setOrderedItems(newItems)
+      setAdding(false)
+      setNewName('')
+      if (folder) {
+        const order = newItems.map(i => i.type === 'separator' ? i.id : i.name)
+        try { await reorderPages(folder, order) } catch (err) {
+          console.error('Failed to persist separator:', err)
+        }
+      }
+      return
+    }
+
     setCreating(true)
     try {
       // Single-page canvas (no folder) → convert to multi-page folder
@@ -98,7 +367,7 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
       console.error('Failed to create canvas page:', err)
       setCreating(false)
     }
-  }, [newName, currentName, folder, creating])
+  }, [newName, currentName, folder, creating, orderedItems])
 
   // Focus input when entering add mode
   useEffect(() => {
@@ -114,6 +383,7 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
         setAdding(false)
         setNewName('')
         setSuccessMsg(null)
+        setEditingPage(null)
       }
     }
     document.addEventListener('mousedown', handleClick)
@@ -125,7 +395,9 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
     if (!open) return
     function handleKey(e) {
       if (e.key === 'Escape') {
-        if (adding) {
+        if (editingPage) {
+          setEditingPage(null)
+        } else if (adding) {
           setAdding(false)
           setNewName('')
         } else {
@@ -135,7 +407,7 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
     }
     document.addEventListener('keydown', handleKey)
     return () => document.removeEventListener('keydown', handleKey)
-  }, [open, adding])
+  }, [open, adding, editingPage])
 
   // Show selector when there are multiple pages, or in dev mode (to allow adding pages)
   if (!pages || (pages.length < 2 && !isLocalDev)) return null
@@ -151,7 +423,7 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
       >
         <span className={styles.label}>{currentLabel}</span>
         <span className={styles.badge}>
-          {currentIndex + 1}/{pages.length}
+          {currentIndex + 1}/{realPages.length}
         </span>
         <svg
           className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
@@ -166,29 +438,96 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
       </button>
       {open && (
         <ul className={styles.menu} role="listbox" aria-label="Canvas pages">
-          {pages.map((page) => (
+          {orderedItems.map((item, index) => {
+            if (item.type === 'separator') {
+              return (
+                <li
+                  key={item.id}
+                  className={`${styles.separatorRow} ${dragIndex === index ? styles.itemDragging : ''}`}
+                  role="separator"
+                  draggable={isLocalDev}
+                  onDragStart={(e) => handleDragStart(index, e)}
+                  onDragOver={(e) => handleDragOver(index, e)}
+                  onDrop={(e) => handleDrop(index, e)}
+                  onDragEnd={handleDragEnd}
+                >
+                  {dropTarget === index && dragIndex !== index && <div className={styles.dropIndicator} />}
+                  {isLocalDev && <DragGrip />}
+                  <div className={styles.separatorLine} />
+                </li>
+              )
+            }
+            const page = item
+            const isEditing = editingPage === page.name
+            return (
+              <li
+                key={page.name}
+                role="option"
+                aria-selected={page.name === currentName}
+                className={`${styles.item} ${page.name === currentName ? styles.itemActive : ''} ${dragIndex === index ? styles.itemDragging : ''}`}
+                onClick={(e) => handleItemClick(page, e)}
+                onDoubleClick={() => handleItemDblClick(page)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    handleSelect(page)
+                  }
+                }}
+                tabIndex={0}
+                draggable={isLocalDev && !isEditing}
+                onDragStart={(e) => handleDragStart(index, e)}
+                onDragOver={(e) => handleDragOver(index, e)}
+                onDrop={(e) => handleDrop(index, e)}
+                onDragEnd={handleDragEnd}
+              >
+                {dropTarget === index && dragIndex !== index && <div className={styles.dropIndicator} />}
+                {isLocalDev && <DragGrip />}
+                {isEditing ? (
+                  <input
+                    ref={editInputRef}
+                    className={styles.addInput}
+                    type="text"
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') { e.preventDefault(); handleRenameCommit() }
+                      if (e.key === 'Escape') { e.preventDefault(); setEditingPage(null) }
+                      e.stopPropagation()
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    onDoubleClick={(e) => e.stopPropagation()}
+                    onBlur={handleRenameCommit}
+                  />
+                ) : (
+                  <>
+                    <span className={styles.itemContent}>{page.title}</span>
+                    {isLocalDev && (
+                      <button
+                        className={styles.duplicateBtn}
+                        onClick={(e) => handleDuplicate(page, e)}
+                        onDoubleClick={(e) => e.stopPropagation()}
+                        title="Duplicate page"
+                        aria-label="Duplicate page"
+                      >
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                          <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25ZM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
+                        </svg>
+                      </button>
+                    )}
+                  </>
+                )}
+              </li>
+            )
+          })}
+          {isLocalDev && (
             <li
-              key={page.name}
-              role="option"
-              aria-selected={page.name === currentName}
-              className={`${styles.item} ${page.name === currentName ? styles.itemActive : ''}`}
-              onClick={() => handleSelect(page)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  handleSelect(page)
-                }
-              }}
-              tabIndex={0}
+              className={styles.dropZoneEnd}
+              onDragOver={(e) => handleDragOver(orderedItems.length, e)}
+              onDrop={(e) => handleDrop(orderedItems.length, e)}
             >
-              {page.title}
-            </li>
-          ))}
-          {isLocalDev && (
-            <>
-              <li className={styles.separator} role="separator" />
+              {dropTarget === orderedItems.length && dragIndex != null && <div className={styles.dropIndicator} />}
               {adding ? (
-                <li className={styles.addForm}>
+                <div className={styles.addForm}>
                   <input
                     ref={inputRef}
                     className={styles.addInput}
@@ -211,9 +550,9 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
                   >
                     {creating ? '…' : 'Add'}
                   </button>
-                </li>
+                </div>
               ) : (
-                <li
+                <div
                   className={styles.addItem}
                   onClick={() => setAdding(true)}
                   tabIndex={0}
@@ -224,13 +563,13 @@ export default function PageSelector({ currentName, pages: initialPages, isLocal
                     }
                   }}
                 >
-                  + Add new page
-                </li>
+                  + Add page
+                </div>
               )}
               {successMsg && (
-                <li className={styles.successMsg}>✓ {successMsg}</li>
+                <div className={styles.successMsg}>✓ {successMsg}</div>
               )}
-            </>
+            </li>
           )}
         </ul>
       )}

package/src/canvas/PageSelector.module.css

@@ -51,12 +51,12 @@
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
-  min-width: 180px;
-  max-width: 300px;
+  min-width: 260px;
+  max-width: 360px;
   max-height: 320px;
   overflow-y: auto;
   margin: 0;
-  padding: 4px;
+  padding: 6px;
   list-style: none;
   background: var(--bgColor-default, #fff);
   border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
@@ -65,13 +65,78 @@
 }
 
 .item {
-  padding: 6px 10px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px 8px 4px;
   border-radius: 4px;
   cursor: pointer;
-  white-space: nowrap;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.itemContent {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dragHandle {
+  opacity: 0;
+  color: var(--fgColor-muted, #656d76);
+  cursor: grab;
+  flex-shrink: 0;
+  padding: 2px;
+}
+
+.item:hover .dragHandle {
+  opacity: 1;
+}
+
+.duplicateBtn {
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fgColor-muted, #656d76);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.duplicateBtn:hover {
   color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-neutral-muted, rgba(0, 0, 0, 0.06));
+}
+
+.item:hover .duplicateBtn {
+  opacity: 1;
+}
+
+.itemDragging {
+  opacity: 0.5;
+}
+
+.dropIndicator {
+  position: absolute;
+  top: -1px;
+  left: 4px;
+  right: 4px;
+  height: 2px;
+  background: var(--focus-outlineColor, #0969da);
+  border-radius: 1px;
+  pointer-events: none;
+}
+
+.dropZoneEnd {
+  position: relative;
+  padding-top: 8px;
+  list-style: none;
 }
 
 .item:hover {
@@ -99,6 +164,27 @@
   list-style: none;
 }
 
+.separatorRow {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px 6px 4px;
+  border-radius: 4px;
+  list-style: none;
+  cursor: default;
+}
+
+.separatorRow:hover .dragHandle {
+  opacity: 1;
+}
+
+.separatorLine {
+  flex: 1;
+  height: 1px;
+  background: var(--borderColor-default, rgba(0, 0, 0, 0.15));
+}
+
 .addItem {
   padding: 6px 10px;
   border-radius: 4px;
@@ -106,10 +192,11 @@
   white-space: nowrap;
   color: var(--fgColor-muted, #656d76);
   font-size: 12px;
+  background: var(--bgColor-muted, #f6f8fa);
 }
 
 .addItem:hover {
-  background: var(--bgColor-muted, #f6f8fa);
+  background: var(--bgColor-neutral-muted, rgba(0, 0, 0, 0.08));
   color: var(--fgColor-default, #1f2328);
 }
 

package/src/canvas/canvasApi.js

@@ -61,3 +61,38 @@ export function checkGitHubCliAvailable() {
 export function fetchGitHubEmbed(url) {
   return request('/github/embed', 'POST', { url })
 }
+
+export function renamePage(canvasId, newTitle) {
+  return request('/rename-page', 'PUT', { name: canvasId, newTitle })
+}
+
+export function reorderPages(folder, order) {
+  return request('/reorder-pages', 'PUT', { folder, order })
+}
+
+export function getPageOrder(folder) {
+  return request(`/page-order?folder=${encodeURIComponent(folder)}`, 'GET')
+}
+
+export function updateFolderMeta(folder, title) {
+  return request('/update-folder-meta', 'PUT', { folder, title })
+}
+
+export function duplicateCanvas(canvasId, newTitle) {
+  return request('/duplicate', 'POST', { name: canvasId, newTitle })
+}
+
+export function addConnector(canvasId, { startWidgetId, startAnchor, endWidgetId, endAnchor, connectorType }) {
+  return request('/connector', 'POST', {
+    name: canvasId,
+    startWidgetId,
+    startAnchor,
+    endWidgetId,
+    endAnchor,
+    connectorType,
+  })
+}
+
+export function removeConnector(canvasId, connectorId) {
+  return request('/connector', 'DELETE', { name: canvasId, connectorId })
+}