@dfosco/storyboard 0.5.0-alpha.7 → 0.5.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/scaffold/manifest.json +10 -0
  3. package/src/internals/BranchBar/BranchBar.jsx +22 -2
  4. package/src/internals/BranchBar/BranchBar.module.css +3 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dfosco/storyboard",
3
- "version": "0.5.0-alpha.7",
3
+ "version": "0.5.0-alpha.9",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "description": "Storyboard prototyping framework — core engine, React integration, and canvas",
package/scaffold/manifest.json CHANGED
@@ -47,6 +47,16 @@
47
47
  "target": ".agents/terminal-agent.agent.md",
48
48
  "mode": "updateable"
49
49
  },
50
+ {
51
+ "source": "scaffold/prompt-agent.agent.md",
52
+ "target": ".github/agents/prompt-agent.agent.md",
53
+ "mode": "updateable"
54
+ },
55
+ {
56
+ "source": "scaffold/terminal-agent.agent.md",
57
+ "target": ".github/agents/terminal-agent.agent.md",
58
+ "mode": "updateable"
59
+ },
50
60
  {
51
61
  "source": "scaffold/deploy.yml",
52
62
  "target": ".github/workflows/deploy.yml",
package/src/internals/BranchBar/BranchBar.jsx CHANGED
@@ -3,8 +3,12 @@
3
3
  *
4
4
  * Dev: always visible (main or branch). Shows "Local development" label.
5
5
  * Prod: shows on non-main branches only.
6
+ *
7
+ * Renders via portal as the first child of <body> so that its sticky
8
+ * positioning pushes the entire page (including absolutely positioned items) down.
6
9
  */
7
10
  import { useState, useEffect, useMemo } from 'react'
11
+ import { createPortal } from 'react-dom'
8
12
  import { GitBranchIcon } from '@primer/octicons-react'
9
13
  import css from './BranchBar.module.css'
10
14
 
@@ -24,6 +28,18 @@ function getDevDomainColor() {
24
28
  return color
25
29
  }
26
30
 
31
+ /** Get or create the portal container at the top of body. */
32
+ function getPortalContainer() {
33
+ if (typeof document === 'undefined') return null
34
+ let el = document.getElementById('sb-branch-bar-root')
35
+ if (!el) {
36
+ el = document.createElement('div')
37
+ el.id = 'sb-branch-bar-root'
38
+ document.body.prepend(el)
39
+ }
40
+ return el
41
+ }
42
+
27
43
  export default function BranchBar({ basePath }) {
28
44
  const [hidden, setHidden] = useState(
29
45
  () => typeof document !== 'undefined' && document.documentElement.classList.contains('storyboard-chrome-hidden')
@@ -54,13 +70,16 @@ export default function BranchBar({ basePath }) {
54
70
 
55
71
  if ((!isOnBranch && !isLocalDev) || hidden || isHiddenByParam) return null
56
72
 
73
+ const portalContainer = getPortalContainer()
74
+ if (!portalContainer) return null
75
+
57
76
  function hideChrome() {
58
77
  window.dispatchEvent(new KeyboardEvent('keydown', {
59
78
  key: '.', metaKey: true, bubbles: true,
60
79
  }))
61
80
  }
62
81
 
63
- return (
82
+ return createPortal(
64
83
  <div className={css.bar} data-branch-bar>
65
84
  <div
66
85
  className={`${css.barInner}${isLocalDev ? '' : ` ${css.barProd}`}`}
@@ -82,6 +101,7 @@ export default function BranchBar({ basePath }) {
82
101
  <button className={css.barAction} onClick={hideChrome}>Hide</button>
83
102
  </div>
84
103
  </div>
85
- </div>
104
+ </div>,
105
+ portalContainer
86
106
  )
87
107
  }
package/src/internals/BranchBar/BranchBar.module.css CHANGED
@@ -1,10 +1,8 @@
1
- /* ─── BranchBar (fixed top bar) ─── */
1
+ /* ─── BranchBar (sticky top bar — pushes all content including abs-positioned items) ─── */
2
2
 
3
3
  .bar {
4
- position: fixed;
4
+ position: sticky;
5
5
  top: 0;
6
- left: 0;
7
- right: 0;
8
6
  z-index: 10000;
9
7
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
8
  font-size: 12px;
@@ -103,15 +101,11 @@
103
101
  background: rgba(255, 255, 255, 0.1);
104
102
  }
105
103
 
106
- /* Push page content down */
104
+ /* Expose bar height as CSS variable for consumers */
107
105
  :global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden)) {
108
106
  --sb-branch-bar-height: 32px;
109
107
  }
110
108
 
111
- :global(html:has([data-branch-bar]):not(.storyboard-chrome-hidden) body) {
112
- padding-top: 32px;
113
- }
114
-
115
109
  :global(html.storyboard-chrome-hidden [data-branch-bar]) {
116
110
  display: none;
117
111
  }