@dfosco/storyboard 0.11.2 → 0.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dfosco/storyboard",
-    "version": "0.11.2",
+    "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;

package/src/internals/canvas/widgets/StickyNote.module.css

@@ -57,7 +57,7 @@
 .text > :last-child { margin-bottom: 0; }
 
 .text p {
-  margin: 0 0 0.5em;
+  margin: 0 0 0.4em;
 }
 
 .text h1,
@@ -76,13 +76,31 @@
 
 .text ul,
 .text ol {
-  margin: 0 0 0.5em;
+  margin: 0 0 0.4em;
   padding-left: 1.25em;
 }
 
 .text ul { list-style: disc; }
 .text ol { list-style: decimal; }
-.text li { margin: 0 0 0.15em; }
+.text li { margin: 0 0 0.1em; }
+
+/* CommonMark loose-list compatibility: blank lines between list items
+ * cause remark to wrap each item's content in <p>. Without these resets
+ * the `.text p` margin pushes the bullet's text down and away from its
+ * marker, and adds extra vertical gap between items. Mirror of the
+ * shared markdownContent.module.css fix — duplicated here because the
+ * sticky's `.text p` rule competes with the shared `.contentSmall p`
+ * rule at the same specificity, so we need a local override too. */
+.text li > p { margin: 0; }
+.text li > p + p { margin-top: 0.25em; }
+
+/* Em-relative <hr> margin so the rule scales with the sticky's
+ * autoScaleText (--sticky-text-scale). The shared
+ * markdownContent.module.css uses fixed `16px 0`, which produces
+ * visually huge gaps once the sticky scales its font-size up. */
+.text hr {
+  margin: 0.6em 0;
+}
 
 .text a {
   color: inherit;

package/src/internals/canvas/widgets/markdown/MarkdownView.test.jsx

@@ -29,4 +29,23 @@ describe('MarkdownView typography', () => {
     const cls = container.querySelector('div').className
     expect(cls).toMatch(/inert/)
   })
+
+  it('renders loose lists (blank lines between items) with <p>-wrapped items', () => {
+    // CommonMark turns a list with blank lines between items into a
+    // "loose list" — each <li> contains <p> rather than raw text. The
+    // shared markdownContent.module.css resets `li > p` margin so the
+    // bullet text stays aligned to its marker; without that the gap
+    // between items balloons. This test pins the HTML contract so the
+    // CSS reset has a stable shape to target.
+    const { container } = render(
+      <MarkdownView content={'- first\n\n- second\n\n- third'} />,
+    )
+    const items = container.querySelectorAll('li')
+    expect(items.length).toBe(3)
+    for (const li of items) {
+      const directParagraphs = Array.from(li.children).filter(c => c.tagName === 'P')
+      expect(directParagraphs.length).toBeGreaterThanOrEqual(1)
+    }
+  })
 })
+

package/src/internals/canvas/widgets/markdown/markdownContent.module.css

@@ -71,6 +71,13 @@
 .contentSmall ul { margin: 0 0 8px; padding-left: 20px; list-style-type: disc; }
 .contentSmall ol { margin: 0 0 8px; padding-left: 20px; list-style-type: decimal; }
 .contentSmall li { margin: 0 0 2px; display: list-item; }
+/* CommonMark loose-list compatibility: when items have blank lines between
+ * them, remark wraps each item's content in <p>. The global `.contentSmall p`
+ * margin (8px) would then blow up spacing inside the bullet and visually
+ * detach the text from its marker. Reset to zero inside <li>; restore a
+ * tighter rhythm only when an <li> contains multiple <p>s. */
+.contentSmall li > p { margin: 0; }
+.contentSmall li > p + p { margin-top: 4px; }
 .contentSmall input[type="checkbox"] {
   margin-right: 6px;
   accent-color: var(--sb--markdown-accent);
@@ -182,6 +189,9 @@
 .contentLarge ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
 .contentLarge ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
 .contentLarge li { margin: 0 0 4px; display: list-item; }
+/* CommonMark loose-list compatibility — see .contentSmall comment above. */
+.contentLarge li > p { margin: 0; }
+.contentLarge li > p + p { margin-top: 6px; }
 .contentLarge input[type="checkbox"] {
   margin-right: 6px;
   accent-color: var(--sb--markdown-accent);