@dfosco/storyboard-react 4.0.0-beta.41 → 4.0.0-beta.42

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.41",
+  "version": "4.0.0-beta.42",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.0.0-beta.41",
-    "@dfosco/tiny-canvas": "4.0.0-beta.41",
+    "@dfosco/storyboard-core": "4.0.0-beta.42",
+    "@dfosco/tiny-canvas": "4.0.0-beta.42",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/Icon.jsx

@@ -54,9 +54,10 @@ const customIcons = {
   },
   'flow': {
     viewBox: '0 0 24 24',
+    strokeWidth: '2.5',
     strokePaths: [
-      'M5.5 5l5.5 7-5.5 7',
-      'M13 5l5.5 7-5.5 7',
+      'M13 19L22 12L13 5L13 19Z',
+      'M2 19L11 12L2 5L2 19Z',
     ],
   },
 }
@@ -136,7 +137,7 @@ export default function Icon({ name, size = 16, label, color, strokeWeight, clas
     if (custom.strokePaths) {
       return (
         <span className={className} style={style}>
-          <svg width={size} height={size} viewBox={custom.viewBox} fill="none" stroke="currentColor" strokeWidth="1.5" {...ariaProps}>
+          <svg width={size} height={size} viewBox={custom.viewBox} fill="none" stroke="currentColor" strokeWidth={custom.strokeWidth || "1.5"} strokeLinecap="round" strokeLinejoin="round" {...ariaProps}>
             {custom.strokePaths.map((d, i) => <path key={i} d={d} />)}
           </svg>
         </span>

package/src/Viewfinder.jsx

@@ -11,6 +11,40 @@ import { Menu } from '@base-ui/react/menu'
 import Icon from './Icon.jsx'
 import css from './Viewfinder.module.css'
 
+/* ─── Theme sync: read toolbar theme from DOM and apply to Primer/BaseUI ─── */
+
+function getToolbarThemeAttrs() {
+  const theme = document.documentElement.getAttribute('data-sb-toolbar-theme') || 'light'
+  if (theme === 'dark_dimmed') {
+    return { 'data-color-mode': 'dark', 'data-dark-theme': 'dark_dimmed', 'data-light-theme': 'light' }
+  }
+  if (theme.startsWith('dark')) {
+    return { 'data-color-mode': 'dark', 'data-dark-theme': 'dark', 'data-light-theme': 'light' }
+  }
+  return { 'data-color-mode': 'light', 'data-light-theme': 'light', 'data-dark-theme': 'dark' }
+}
+
+function useToolbarTheme() {
+  const [attrs, setAttrs] = useState(getToolbarThemeAttrs)
+
+  useEffect(() => {
+    const update = () => setAttrs(getToolbarThemeAttrs())
+    const observer = new MutationObserver(update)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-sb-toolbar-theme'] })
+    update()
+    return () => observer.disconnect()
+  }, [])
+
+  // Sync to document.body so BaseUI portals inherit Primer theme
+  useEffect(() => {
+    for (const [key, value] of Object.entries(attrs)) {
+      document.body.setAttribute(key, value)
+    }
+  }, [attrs])
+
+  return attrs
+}
+
 /* ─── localStorage helpers ─── */
 
 const STARRED_KEY = 'sb-viewfinder-starred'
@@ -109,11 +143,12 @@ function AvatarStack({ authors }) {
         <img
           key={username}
           className={css.avatarImg}
-          src={`https://github.com/${username}.png`}
+          src={`https://github.com/${username}.png?size=48`}
           alt={username}
           width={24}
           height={24}
           loading="lazy"
+          onError={(e) => { e.target.style.display = 'none' }}
         />
       ))}
     </div>
@@ -692,6 +727,7 @@ export default function Viewfinder({
   hideDefaultScene = false,
 }) {
   const shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
+  const themeAttrs = useToolbarTheme()
 
   // Build data index from real prototype/canvas/story data
   const knownRoutes = useMemo(() =>
@@ -880,7 +916,7 @@ export default function Viewfinder({
   const pageTitle = NAV_ITEMS.find(n => n.id === activeNav)?.label || 'All artifacts'
 
   return (
-    <div className={css.layout}>
+    <div className={css.layout} {...themeAttrs}>
       {/* ─── Full-width Header ─── */}
       <header className={css.topBar}>
         <div className={css.topBarLeft}>