@dfosco/storyboard-react-primer 1.17.3 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-react-primer",
-  "version": "1.17.3",
+  "version": "1.18.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/DevTools/DevTools.jsx

@@ -1,8 +1,8 @@
 import { useState, useEffect, useCallback } from 'react'
-import { ActionMenu, ActionList } from '@primer/react'
-import { loadScene } from '@dfosco/storyboard-core'
-import { BeakerIcon, InfoIcon, SyncIcon, XIcon, ScreenFullIcon } from '@primer/octicons-react'
+import { loadScene, getFlagKeys } from '@dfosco/storyboard-core'
+import { BeakerIcon, InfoIcon, SyncIcon, XIcon, ScreenFullIcon, ZapIcon } from '@primer/octicons-react'
 import styles from './DevTools.module.css'
+import FeatureFlagsPanel from './FeatureFlagsPanel.jsx'
 
 function getSceneName() {
   return new URLSearchParams(window.location.search).get('scene') || 'default'
@@ -11,18 +11,30 @@ function getSceneName() {
 /**
  * Storyboard DevTools — a floating toolbar for development.
  *
- * Features:
- *  - Floating button (bottom-center) that opens a menu
- *  - "Show scene info" — translucent overlay panel with resolved scene JSON
- *  - "Reset all params" — clears all URL hash session params
- *  - Cmd+. (Mac) / Ctrl+. (other) toggles the toolbar visibility
+ * Uses a custom dropdown menu (no Primer ActionMenu) so that
+ * view-swapping and flag toggling don't auto-close the panel.
  */
 export default function DevTools() {
   const [visible, setVisible] = useState(true)
+  const [menuOpen, setMenuOpen] = useState(false)
   const [panelOpen, setPanelOpen] = useState(false)
+  const [flagsPanelOpen, setFlagsPanelOpen] = useState(false)
   const [sceneData, setSceneData] = useState(null)
   const [sceneError, setSceneError] = useState(null)
 
+  // Close menu on outside click — use mousedown so it fires before
+  // React re-renders remove the clicked element from the DOM
+  useEffect(() => {
+    if (!menuOpen) return
+    function handleMouseDown(e) {
+      if (!e.target.closest(`.${styles.wrapper}`)) {
+        setMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown)
+    return () => document.removeEventListener('mousedown', handleMouseDown)
+  }, [menuOpen])
+
   // Cmd+. keyboard shortcut to toggle toolbar
   useEffect(() => {
     function handleKeyDown(e) {
@@ -31,6 +43,8 @@ export default function DevTools() {
         setVisible((v) => !v)
         if (visible) {
           setPanelOpen(false)
+          setFlagsPanelOpen(false)
+          setMenuOpen(false)
         }
       }
     }
@@ -38,13 +52,16 @@ export default function DevTools() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [visible])
 
+  const openMenu = useCallback(() => {
+    setMenuOpen((v) => !v)
+  }, [])
+
   const handleShowSceneInfo = useCallback(() => {
-    const sceneName = getSceneName()
+    setMenuOpen(false)
     setPanelOpen(true)
     setSceneError(null)
-
     try {
-      setSceneData(loadScene(sceneName))
+      setSceneData(loadScene(getSceneName()))
     } catch (err) {
       setSceneError(err.message)
     }
@@ -52,88 +69,76 @@ export default function DevTools() {
 
   const handleResetParams = useCallback(() => {
     window.location.hash = ''
+    setMenuOpen(false)
   }, [])
 
   const handleViewfinder = useCallback(() => {
+    setMenuOpen(false)
     window.location.href = (document.querySelector('base')?.href || '/') + 'viewfinder'
   }, [])
 
+  const handleOpenFlagsPanel = useCallback(() => {
+    setMenuOpen(false)
+    setFlagsPanelOpen(true)
+  }, [])
+
   if (!visible) return null
 
+  const hasFlags = getFlagKeys().length > 0
+
   return (
     <>
       {/* Scene info overlay panel */}
       {panelOpen && (
         <div className={styles.overlay}>
-          <div
-            className={styles.overlayBackdrop}
-            onClick={() => setPanelOpen(false)}
-          />
+          <div className={styles.overlayBackdrop} onClick={() => setPanelOpen(false)} />
           <div className={styles.panel}>
             <div className={styles.panelHeader}>
-              <span className={styles.panelTitle}>
-                Scene: {getSceneName()}
-              </span>
-              <button
-                className={styles.panelClose}
-                onClick={() => setPanelOpen(false)}
-                aria-label="Close panel"
-              >
+              <span className={styles.panelTitle}>Scene: {getSceneName()}</span>
+              <button className={styles.panelClose} onClick={() => setPanelOpen(false)} aria-label="Close panel">
                 <XIcon size={16} />
               </button>
             </div>
             <div className={styles.panelBody}>
-              {sceneError && (
-                <span className={styles.error}>{sceneError}</span>
-              )}
+              {sceneError && <span className={styles.error}>{sceneError}</span>}
               {!sceneError && sceneData && (
-                <pre className={styles.codeBlock}>
-                  {JSON.stringify(sceneData, null, 2)}
-                </pre>
+                <pre className={styles.codeBlock}>{JSON.stringify(sceneData, null, 2)}</pre>
               )}
             </div>
           </div>
         </div>
       )}
+      <FeatureFlagsPanel open={flagsPanelOpen} onClose={() => setFlagsPanelOpen(false)} />
 
       {/* Floating toolbar */}
       <div className={styles.wrapper}>
-        <ActionMenu>
-          <ActionMenu.Anchor>
-            <button
-              className={styles.trigger}
-              aria-label="Storyboard DevTools"
-            >
-              <BeakerIcon className={styles.triggerIcon} size={16} />
+        {menuOpen && (
+          <div className={styles.menu}>
+            <button className={styles.menuItem} onClick={handleViewfinder}>
+              <ScreenFullIcon size={16} /> See viewfinder
+            </button>
+            <button className={styles.menuItem} onClick={handleShowSceneInfo}>
+              <InfoIcon size={16} /> Show scene info
             </button>
-          </ActionMenu.Anchor>
-          <ActionMenu.Overlay align="center" side="outside-top" sideOffset={16}>
-            <ActionList>
-              <ActionList.Item onSelect={handleViewfinder}>
-                <ActionList.LeadingVisual>
-                  <ScreenFullIcon size={16} />
-                </ActionList.LeadingVisual>
-                See viewfinder
-              </ActionList.Item>
-              <ActionList.Item onSelect={handleShowSceneInfo}>
-                <ActionList.LeadingVisual>
-                  <InfoIcon size={16} />
-                </ActionList.LeadingVisual>
-                Show scene info
-              </ActionList.Item>
-              <ActionList.Item onSelect={handleResetParams}>
-                <ActionList.LeadingVisual>
-                  <SyncIcon size={16} />
-                </ActionList.LeadingVisual>
-                Reset all params
-              </ActionList.Item>
-              <div className={styles.shortcutHint}>
-                Press <code>⌘ + .</code> to hide
-              </div>
-              
-            </ActionList>
-          </ActionMenu.Overlay>
-        </ActionMenu>
+            <button className={styles.menuItem} onClick={handleResetParams}>
+              <SyncIcon size={16} /> Reset all params
+            </button>
+            {hasFlags && (
+              <>
+                <div className={styles.separator} />
+                <button className={styles.menuItem} onClick={handleOpenFlagsPanel}>
+                  <ZapIcon size={16} /> Feature Flags
+                </button>
+              </>
+            )}
+            <div className={styles.shortcutHint}>
+              Press <code>⌘ + .</code> to hide
+            </div>
+          </div>
+        )}
+        <button className={styles.trigger} aria-label="Storyboard DevTools" onClick={openMenu}>
+          <BeakerIcon className={styles.triggerIcon} size={16} />
+        </button>
       </div>
     </>
   )

package/src/DevTools/DevTools.module.css

@@ -151,3 +151,96 @@ code {
   margin-left: auto;
   font-family: var(--fontStack-monospace);
 }
+
+/* Custom dropdown menu */
+.menu {
+  position: absolute;
+  bottom: 56px;
+  right: 0;
+  min-width: 200px;
+  background-color: var(--overlay-bgColor);
+  border: 1px solid var(--borderColor-default);
+  border-radius: var(--borderRadius-large);
+  box-shadow: var(--shadow-floating-large);
+  overflow: hidden;
+  padding: var(--base-size-4) 0;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  width: 100%;
+  padding: var(--base-size-8) var(--base-size-16);
+  background: none;
+  border: none;
+  color: var(--fgColor-default);
+  font-size: var(--text-body-size-medium);
+  font-family: var(--fontStack-system);
+  cursor: pointer;
+  text-align: left;
+}
+
+.menuItem:hover {
+  background-color: var(--control-transparent-bgColor-hover);
+}
+
+.menuItem svg {
+  flex-shrink: 0;
+  color: var(--fgColor-muted);
+}
+
+.separator {
+  height: 1px;
+  background-color: var(--borderColor-muted);
+  margin: var(--base-size-4) 0;
+}
+
+.flagIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+.flagsList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+
+.flagPanelItem {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  width: 100%;
+  padding: var(--base-size-8) var(--base-size-10);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--borderRadius-medium);
+  color: var(--fgColor-default);
+  font-size: var(--text-body-size-medium);
+  font-family: var(--fontStack-system);
+  text-align: left;
+  cursor: pointer;
+}
+
+.flagPanelItem:hover {
+  background-color: var(--control-transparent-bgColor-hover);
+  border-color: var(--borderColor-muted);
+}
+
+.flagPanelCheck {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--fgColor-accent);
+}
+
+.noFlags {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-small);
+}

package/src/DevTools/FeatureFlagsPanel.jsx

@@ -0,0 +1,43 @@
+import { useSyncExternalStore } from 'react'
+import { getAllFlags, getFlagKeys, toggleFlag, subscribeToHash, getHashSnapshot } from '@dfosco/storyboard-core'
+import { CheckIcon, XIcon } from '@primer/octicons-react'
+import styles from './DevTools.module.css'
+
+export default function FeatureFlagsPanel({ open, onClose }) {
+  useSyncExternalStore(subscribeToHash, getHashSnapshot)
+
+  if (!open) return null
+
+  const flagKeys = getFlagKeys()
+  const flags = getAllFlags()
+
+  return (
+    <div className={styles.overlay}>
+      <div className={styles.overlayBackdrop} onClick={onClose} />
+      <div className={styles.panel}>
+        <div className={styles.panelHeader}>
+          <span className={styles.panelTitle}>Feature Flags</span>
+          <button className={styles.panelClose} onClick={onClose} aria-label="Close feature flags panel">
+            <XIcon size={16} />
+          </button>
+        </div>
+        <div className={styles.panelBody}>
+          {flagKeys.length === 0 ? (
+            <div className={styles.noFlags}>No feature flags are configured.</div>
+          ) : (
+            <div className={styles.flagsList}>
+              {flagKeys.map((key) => (
+                <button key={key} className={styles.flagPanelItem} onClick={() => toggleFlag(key)}>
+                  <span className={styles.flagPanelCheck}>
+                    {flags[key]?.current ? <CheckIcon size={16} /> : null}
+                  </span>
+                  {key}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}