@dfosco/storyboard-core 4.2.5 → 4.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "4.2.5",
+  "version": "4.2.6",
   "type": "module",
   "license": "MIT",
   "bin": {

package/src/CoreUIBar.jsx

@@ -147,6 +147,9 @@ export default function CoreUIBar({ basePath = '/', toolbarConfig, customHandler
   const [visible, setVisible] = useState(
     () => !document.documentElement.classList.contains('storyboard-chrome-hidden')
   )
+  const [completelyHidden, setCompletelyHidden] = useState(
+    () => document.documentElement.classList.contains('storyboard-chrome-completely-hidden')
+  )
   const [toolComponents, setToolComponents] = useState({})
   const [toolData, setToolData] = useState({})
   const [navVersion, setNavVersion] = useState(0)
@@ -338,10 +341,25 @@ export default function CoreUIBar({ basePath = '/', toolbarConfig, customHandler
     setVisible((v) => {
       const next = !v
       document.documentElement.classList.toggle('storyboard-chrome-hidden', !next)
+      // Always clear completely-hidden when toggling via cmd+.
+      document.documentElement.classList.remove('storyboard-chrome-completely-hidden')
       return next
     })
   }, [])
 
+  const toggleCompletelyHidden = useCallback(() => {
+    const isAnyHidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
+    if (isAnyHidden) {
+      document.documentElement.classList.remove('storyboard-chrome-hidden')
+      document.documentElement.classList.remove('storyboard-chrome-completely-hidden')
+      setVisible(true)
+    } else {
+      document.documentElement.classList.add('storyboard-chrome-hidden')
+      document.documentElement.classList.add('storyboard-chrome-completely-hidden')
+      setVisible(false)
+    }
+  }, [])
+
   function showFlowInfoDialog(name, json, error) {
     setFlowName(name)
     setFlowJson(json)
@@ -497,13 +515,15 @@ export default function CoreUIBar({ basePath = '/', toolbarConfig, customHandler
 
     setRoutingBasePath(basePath)
 
-    // Sync visible state when storyboard-chrome-hidden is toggled externally
+    // Sync visible + completelyHidden state when classes are toggled externally
     const chromeObserver = new MutationObserver(() => {
       const hidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
+      const fully = document.documentElement.classList.contains('storyboard-chrome-completely-hidden')
       setVisible((v) => {
         if (v === !hidden) return v
         return !hidden
       })
+      setCompletelyHidden(fully)
     })
     chromeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 
@@ -690,10 +710,21 @@ export default function CoreUIBar({ basePath = '/', toolbarConfig, customHandler
     function handleKeydown(e) {
       const hideKey = shortcutsConfig.hideChrome?.key || '.'
 
-      if (e.key === hideKey && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        toggleToolsVisibility()
+      if ((e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        // Alt+Cmd+. — completely hide (use e.code since alt changes e.key on macOS)
+        if (e.altKey && e.code === 'Period') {
+          e.preventDefault()
+          toggleCompletelyHidden()
+          return
+        }
+        // Cmd+. — regular hide/show
+        if (!e.altKey && e.key === hideKey) {
+          e.preventDefault()
+          toggleToolsVisibility()
+          return
+        }
       }
+
       for (const menu of cleanedMenus) {
         const shortcut = menu.shortcut
         if (!shortcut?.key) continue
@@ -711,14 +742,14 @@ export default function CoreUIBar({ basePath = '/', toolbarConfig, customHandler
 
     window.addEventListener('keydown', handleKeydown)
     return () => window.removeEventListener('keydown', handleKeydown)
-  }, [shortcutsConfig, cleanedMenus, toggleToolsVisibility])
+  }, [shortcutsConfig, cleanedMenus, toggleToolsVisibility, toggleCompletelyHidden])
 
   if (isEmbed) return null
 
   return (
     <>
       {/* Canvas toolbar */}
-      {canvasActive && canvasMenus.length > 0 && (
+      {canvasActive && !completelyHidden && canvasMenus.length > 0 && (
         <div
           className="fixed bottom-6 left-6 z-[9999] font-sans flex items-center gap-3"
           role="toolbar"

package/src/HideChromeTrigger.jsx

@@ -2,6 +2,7 @@
  * HideChromeTrigger — toolbar button that toggles toolbar/branch bar visibility.
  * Always visible (even in hide mode). Uses the lightbulb icon.
  * In hide mode: goes 50% opacity.
+ * In completely-hidden mode: not rendered at all.
  */
 
 import { useState, useEffect, useCallback } from 'react'
@@ -12,10 +13,14 @@ export default function HideChromeTrigger({ config = {}, tabindex }) {
   const [hidden, setHidden] = useState(
     () => document.documentElement.classList.contains('storyboard-chrome-hidden')
   )
+  const [completelyHidden, setCompletelyHidden] = useState(
+    () => document.documentElement.classList.contains('storyboard-chrome-completely-hidden')
+  )
 
   useEffect(() => {
     const observer = new MutationObserver(() => {
       setHidden(document.documentElement.classList.contains('storyboard-chrome-hidden'))
+      setCompletelyHidden(document.documentElement.classList.contains('storyboard-chrome-completely-hidden'))
     })
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
     return () => observer.disconnect()
@@ -23,8 +28,11 @@ export default function HideChromeTrigger({ config = {}, tabindex }) {
 
   const toggle = useCallback(() => {
     document.documentElement.classList.toggle('storyboard-chrome-hidden')
+    document.documentElement.classList.remove('storyboard-chrome-completely-hidden')
   }, [])
 
+  if (completelyHidden) return null
+
   return (
     <span style={{ opacity: hidden ? 0.5 : 1, transition: 'opacity 0.15s' }}>
       <TriggerButton

package/src/mountStoryboardCore.js

@@ -28,6 +28,7 @@ import {
 let _mounted = false
 
 const CHROME_HIDDEN_KEY = 'sb-chrome-hidden'
+const CHROME_COMPLETELY_HIDDEN_KEY = 'sb-chrome-completely-hidden'
 
 /**
  * Migrate localStorage keys renamed in 4.3.0.
@@ -54,20 +55,26 @@ function migrateLocalStorageKeys() {
 function applyEarlyChromeState() {
   if (typeof document === 'undefined' || typeof localStorage === 'undefined') return
   const hidden = localStorage.getItem(CHROME_HIDDEN_KEY) === '1'
+  const completelyHidden = localStorage.getItem(CHROME_COMPLETELY_HIDDEN_KEY) === '1'
   if (hidden) {
     document.documentElement.classList.add('storyboard-chrome-hidden')
   }
+  if (completelyHidden) {
+    document.documentElement.classList.add('storyboard-chrome-completely-hidden')
+  }
 }
 
 /**
- * Watch for changes to the storyboard-chrome-hidden class and persist to
- * localStorage. Works regardless of which code path toggles the class.
+ * Watch for changes to chrome-hidden / chrome-completely-hidden classes
+ * and persist to localStorage. Works regardless of which code path toggles them.
  */
 function installChromeStatePersistence() {
   if (typeof document === 'undefined' || typeof localStorage === 'undefined') return
   const observer = new MutationObserver(() => {
     const hidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
+    const completelyHidden = document.documentElement.classList.contains('storyboard-chrome-completely-hidden')
     localStorage.setItem(CHROME_HIDDEN_KEY, hidden ? '1' : '0')
+    localStorage.setItem(CHROME_COMPLETELY_HIDDEN_KEY, completelyHidden ? '1' : '0')
   })
   observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 }

package/src/tools/handlers/hideToolbars.js

@@ -17,6 +17,7 @@ export async function handler() {
         execute: () => {
           const isHidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
           document.documentElement.classList.toggle('storyboard-chrome-hidden', !isHidden)
+          document.documentElement.classList.remove('storyboard-chrome-completely-hidden')
         },
       }]
     },