@dfosco/storyboard 0.5.0-alpha.13 → 0.5.0-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.5.0-alpha.13",
+  "version": "0.5.0-alpha.14",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/internals/Icon.jsx

@@ -76,6 +76,21 @@ const customIcons = {
       'M2 19L11 12L2 5L2 19Z',
     ],
   },
+  // Component icon (puzzle piece / brick)
+  'component': {
+    viewBox: '0 0 24 24',
+    strokeWidth: '1.5',
+    strokePaths: [
+      'M3.5 10.5V5.5C3.5 4.94772 3.94772 4.5 4.5 4.5H9.5',
+      'M14.5 4.5H19.5C20.0523 4.5 20.5 4.94772 20.5 5.5V10.5',
+      'M20.5 13.5V18.5C20.5 19.0523 20.0523 19.5 19.5 19.5H14.5',
+      'M9.5 19.5H4.5C3.94772 19.5 3.5 19.0523 3.5 18.5V13.5',
+      'M12 4.5V7.5',
+      'M12 16.5V19.5',
+      'M20.5 12H17.5',
+      'M6.5 12H3.5',
+    ],
+  },
 }
 
 /* ─── Iconoir icons (stroke-based unless fill: true) ─── */

package/src/internals/Viewfinder.jsx

@@ -1051,6 +1051,10 @@ export default function Workspace({
   basePath,
   title = 'Storyboard',
   subtitle,
+  showAllArtifacts = false,
+  showPrototypes = true,
+  showCanvases = true,
+  showComponents = true,
 }) {
   const themeAttrs = useToolbarTheme()
   const ghUser = useGitHubUser(basePath)
@@ -1158,8 +1162,20 @@ export default function Workspace({
 
   const itemMap = useMemo(() => Object.fromEntries(allItems.map(i => [i.id, i])), [allItems])
 
-  // State
-  const [activeNav, setActiveNav] = useState('all')
+  // Filter nav items based on visibility props
+  const visibleNavItems = useMemo(() => {
+    const visibility = {
+      all: showAllArtifacts,
+      prototypes: showPrototypes,
+      canvases: showCanvases,
+      components: showComponents,
+    }
+    return NAV_ITEMS.filter(nav => visibility[nav.id])
+  }, [showAllArtifacts, showPrototypes, showCanvases, showComponents])
+
+  // State - default to first visible nav item
+  const defaultNav = visibleNavItems[0]?.id || 'prototypes'
+  const [activeNav, setActiveNav] = useState(defaultNav)
   const [activeTab, setActiveTab] = useState('All')
   const [showCreate, setShowCreate] = useState(false)
   const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
@@ -1307,7 +1323,7 @@ export default function Workspace({
         <aside className={`${css.sidebar}${sidebarOpen ? ` ${css.sidebarOpen}` : ''}`}>
           <div className={css.sidebarContent}>
           <nav className={css.navSection}>
-            {NAV_ITEMS.map(nav => (
+            {visibleNavItems.map(nav => (
               <button
                 key={nav.id}
                 className={activeNav === nav.id ? css.navItemActive : css.navItem}