@dfosco/storyboard 0.11.3 → 0.11.4

package/package.json

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

package/src/internals/BranchesDropdown/BranchesDropdown.jsx

@@ -19,26 +19,37 @@ function branchLabel(entry, homeTitle, homeFolder) {
   return pieces.join(' ')
 }
 
-export default function BranchesDropdown({ branches, branchBasePath, currentBranch, homeTitle = '', homeFolder = null }) {
+export default function BranchesDropdown({ branches, branchBasePath, currentBranch, homeTitle = '', homeFolder = null, isBranchOnly = false }) {
   if (!currentBranch || isLocalDev() || !Array.isArray(branches)) return null
 
   const visibleBranches = branches.filter(entry => entry?.branch && entry.branch !== currentBranch)
   if (visibleBranches.length === 0) return null
 
+  // When the prototype is branch-only (i.e. the current branch doesn't
+  // have it), give the button a subtle accent so users can spot the
+  // affordance without painting the whole card. Tooltip text shifts to
+  // make the meaning explicit.
+  const btnClass = isBranchOnly ? `${css.iconBtn} ${css.iconBtnAccent}` : css.iconBtn
+  const label = isBranchOnly
+    ? 'Open on another branch'
+    : 'See branches'
+
   return (
     <Menu.Root>
       <Menu.Trigger
-        className={css.iconBtn}
+        className={btnClass}
         onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
-        aria-label="See branches"
-        title="See branches"
+        aria-label={label}
+        title={label}
       >
         <GitBranchIcon size={16} />
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner className={css.branchesPositioner} side="bottom" align="end" sideOffset={4}>
           <Menu.Popup className={css.branchesPopup}>
-            <div className={css.branchesTitle}>Branches</div>
+            <div className={css.branchesTitle}>
+              {isBranchOnly ? 'Available on' : 'Branches'}
+            </div>
             {visibleBranches.map(entry => {
               const href = entry.isExternal && entry.externalUrl
                 ? entry.externalUrl

package/src/internals/BranchesDropdown/BranchesDropdown.module.css

@@ -17,6 +17,22 @@
   color: var(--color-foreground-muted, #555);
 }
 
+/* Subtle accent applied when the current branch doesn't have the
+ * prototype (the card is "branch-only" elsewhere). Replaces the
+ * previous loud card-level blue background — now the only marker
+ * that a prototype lives on another branch is this single tinted
+ * button, plus an accent ring on hover/open. */
+.iconBtnAccent {
+  color: var(--color-foreground-accent, #0969da);
+  background: var(--color-background-accent-muted, #ddf4ff);
+}
+
+.iconBtnAccent:hover {
+  background: var(--color-background-accent-muted, #ddf4ff);
+  color: var(--color-foreground-accent, #0969da);
+  box-shadow: inset 0 0 0 1px var(--color-border-accent-muted, #54aeff66);
+}
+
 .branchesPositioner {
   z-index: 200;
 }

package/src/internals/BranchesDropdown/BranchesDropdown.test.jsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, cleanup } from '@testing-library/react'
+import BranchesDropdown from './BranchesDropdown.jsx'
+
+beforeEach(() => {
+  cleanup()
+  // BranchesDropdown bails out when window.__SB_LOCAL_DEV__ === true.
+  if (typeof window !== 'undefined') {
+    delete window.__SB_LOCAL_DEV__
+  }
+})
+
+const branches = [
+  { branch: 'main', folder: 'demos', route: '/Signup' },
+  { branch: 'feature-x', folder: 'demos', route: '/Signup' },
+]
+
+describe('BranchesDropdown', () => {
+  it('renders the trigger when other branches have the prototype', () => {
+    const { container } = render(
+      <BranchesDropdown branches={branches} branchBasePath="/" currentBranch="main" />,
+    )
+    const trigger = container.querySelector('button')
+    expect(trigger).toBeTruthy()
+    expect(trigger.getAttribute('aria-label')).toBe('See branches')
+  })
+
+  it('applies the accent class and re-labels when isBranchOnly is true', () => {
+    const { container } = render(
+      <BranchesDropdown
+        branches={branches}
+        branchBasePath="/"
+        currentBranch="main"
+        isBranchOnly
+      />,
+    )
+    const trigger = container.querySelector('button')
+    expect(trigger).toBeTruthy()
+    // CSS Modules hash class names — assert by suffix match.
+    expect(trigger.className).toMatch(/iconBtnAccent/)
+    expect(trigger.getAttribute('aria-label')).toBe('Open on another branch')
+  })
+
+  it('does NOT apply the accent class when isBranchOnly is false', () => {
+    const { container } = render(
+      <BranchesDropdown branches={branches} branchBasePath="/" currentBranch="main" />,
+    )
+    const trigger = container.querySelector('button')
+    expect(trigger.className).not.toMatch(/iconBtnAccent/)
+  })
+
+  it('returns null when only the current branch has the prototype', () => {
+    const { container } = render(
+      <BranchesDropdown
+        branches={[{ branch: 'main', folder: 'demos', route: '/Signup' }]}
+        branchBasePath="/"
+        currentBranch="main"
+      />,
+    )
+    expect(container.querySelector('button')).toBeNull()
+  })
+})

package/src/internals/Viewfinder.jsx

@@ -530,7 +530,12 @@ function ArtifactCard({ item, basePath, branchBasePath, currentBranch, starred,
   const dirName = item.id.split(':').slice(1).join(':')
   const typeLabel = item.type === 'canvas' ? 'Canvas' : item.type === 'prototype' ? 'Prototype' : 'Component'
   const canEditDelete = !isBranchOnly && (item.type === 'canvas' || item.type === 'prototype')
-  const cardClass = `${css.card}${item.isPrivate ? ' ' + css.cardPrivate : ''}${isBranchOnly ? ' ' + css.branchOnlyCard : ''}`
+  // Cards intentionally look identical regardless of `isBranchOnly`. The
+  // only marker that a prototype lives on another branch is now the
+  // subtle blue tint on the BranchesDropdown button (see below). The
+  // previous full-card .branchOnlyCard background drew the eye too
+  // strongly for what is effectively a "hint, not a blocker" state.
+  const cardClass = `${css.card}${item.isPrivate ? ' ' + css.cardPrivate : ''}`
 
   return (
     <>
@@ -538,7 +543,6 @@ function ArtifactCard({ item, basePath, branchBasePath, currentBranch, starred,
         <div className={css.cardHeader}>
           <div className={css.cardBadgeGroup}>
             <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
-            {isBranchOnly && <span className={css.branchOnlyBadge}>Branch-only</span>}
             {item.isPrivate && !isBranchOnly && (
               <Tooltip text={`${typeLabel} not published, only visible to you`} direction="n">
                 <button
@@ -562,6 +566,7 @@ function ArtifactCard({ item, basePath, branchBasePath, currentBranch, starred,
               currentBranch={currentBranch}
               homeTitle={item.name}
               homeFolder={item.folder}
+              isBranchOnly={isBranchOnly}
             />
             {canEditDelete && (
               <CardActionsMenu

package/src/internals/Viewfinder.module.css

@@ -650,15 +650,6 @@
   opacity: 1;
 }
 
-.branchOnlyCard {
-  background: var(--color-background-muted, #f6f8fa);
-  border-color: var(--color-border-muted, #d8dee4);
-}
-
-.branchOnlyCard:hover {
-  border-color: var(--color-border-accent-muted, #54aeff66);
-}
-
 .cardThumb {
   height: 140px;
   background: var(--color-background-muted, #f5f5f5);
@@ -680,17 +671,6 @@
   color: var(--color-foreground-muted, #555);
 }
 
-.branchOnlyBadge {
-  padding: 3px 8px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  background: var(--color-background-accent-muted, #ddf4ff);
-  color: var(--color-foreground-accent, #0969da);
-}
-
 .cardPrivateBadge {
   display: inline-flex;
   align-items: center;