@dfosco/storyboard 0.7.0 → 0.7.1

package/assets/favicon.svg

@@ -0,0 +1,12 @@
+<svg width="1040" height="1040" viewBox="0 0 1040 1040" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_281_5346)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1040 520C1040 607.255 1040.14 680.911 1033.5 740.187C1026.63 801.432 1011.5 859.346 972.737 910.26C954.816 933.8 933.8 954.816 910.26 972.737C859.346 1011.5 801.432 1026.63 740.187 1033.5C680.911 1040.14 607.255 1040 520 1040C432.747 1040 359.09 1040.14 299.813 1033.5C238.568 1026.63 180.656 1011.5 129.74 972.737C106.201 954.816 85.1857 933.8 67.263 910.26C28.496 859.346 13.3667 801.432 6.50058 740.187C-0.144753 680.911 0.000253571 607.255 0.000253571 520C0.000253571 432.747 -0.144754 359.09 6.50058 299.813C13.3667 238.568 28.496 180.656 67.263 129.74C85.1857 106.201 106.201 85.1857 129.74 67.263C180.656 28.496 238.568 13.3667 299.813 6.50058C359.09 -0.144754 432.747 0.000253571 520 0.000253571C607.255 0.000253571 680.911 -0.144753 740.187 6.50058C801.432 13.3667 859.346 28.496 910.26 67.263C933.8 85.1857 954.816 106.201 972.737 129.74C1011.5 180.656 1026.63 238.568 1033.5 299.813C1040.14 359.09 1040 432.747 1040 520Z" fill="#170C1F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M984 520.5C984 325.013 984 226.507 933.401 158.522L932.197 156.924C918.393 138.793 902.207 122.608 884.078 108.804C816.039 56.9996 717.525 57 520.5 57C323.474 57 224.961 56.9996 156.924 108.804L155.229 110.105C137.784 123.621 122.176 139.36 108.804 156.924L107.6 158.522C57 226.507 57 325.013 57 520.5C57 717.525 56.9997 816.039 108.804 884.078C122.608 902.207 138.793 918.393 156.924 932.197C224.961 984 323.474 984 520.5 984C715.986 984 814.495 984 882.477 933.401L884.078 932.197C901.64 918.824 917.379 903.215 930.895 885.771L932.197 884.078C984 816.039 984 717.525 984 520.5Z" fill="#170C1F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M208.988 378.291C208.988 407.969 220.778 436.431 241.763 457.416C262.748 478.401 291.21 490.19 320.887 490.19C350.564 490.19 379.026 478.401 400.011 457.416C420.997 436.431 432.786 407.969 432.786 378.291C432.786 348.614 420.997 320.152 400.011 299.167C379.026 278.182 350.564 266.393 320.887 266.393C291.21 266.393 262.748 278.182 241.763 299.167C220.778 320.152 208.988 348.614 208.988 378.291ZM605.719 378.291C605.719 392.986 608.613 407.537 614.237 421.113C619.86 434.689 628.102 447.025 638.493 457.416C648.884 467.806 661.219 476.049 674.796 481.672C688.372 487.296 702.923 490.19 717.617 490.19C732.312 490.19 746.863 487.296 760.439 481.672C774.015 476.049 786.351 467.806 796.742 457.416C807.133 447.025 815.375 434.689 820.998 421.113C826.622 407.537 829.516 392.986 829.516 378.291C829.516 363.597 826.622 349.046 820.998 335.47C815.375 321.893 807.133 309.558 796.742 299.167C786.351 288.776 774.015 280.534 760.439 274.91C746.863 269.287 732.312 266.393 717.617 266.393C702.923 266.393 688.372 269.287 674.796 274.91C661.219 280.534 648.884 288.776 638.493 299.167C628.102 309.558 619.86 321.893 614.237 335.47C608.613 349.046 605.719 363.597 605.719 378.291ZM631.928 541.203C646.198 541.203 658.91 553.016 656.488 568.2C645.989 634.034 589.271 684.367 520.824 684.367C452.376 684.367 395.658 634.034 385.16 568.2C382.737 553.016 395.449 541.203 409.72 541.203C424.454 541.203 435.266 553.171 438.371 566.171C447.328 603.669 480.868 631.497 520.824 631.497C560.78 631.497 594.32 603.669 603.277 566.171C606.382 553.171 617.193 541.203 631.928 541.203Z" fill="#EBD7EF"/>
+</g>
+<defs>
+<clipPath id="clip0_281_5346">
+<rect width="1040" height="1040" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "license": "MIT",
   "description": "Storyboard prototyping framework — core engine, React integration, and canvas",
@@ -17,6 +17,7 @@
   "files": [
     "src",
     "dist",
+    "assets",
     "scaffold",
     "mascot",
     "toolbar.config.json",

package/src/core/canvas/githubEmbeds.js

@@ -153,6 +153,10 @@ function toContext(target) {
 
 function buildPullRequestSnapshot(target, pr) {
   const number = pr?.number ?? target.number
+  const merged = Boolean(pr?.merged_at || pr?.merged)
+  const draft = Boolean(pr?.draft)
+  const rawState = pr?.state === 'closed' ? 'closed' : 'open'
+  const state = merged ? 'merged' : (draft && rawState === 'open' ? 'draft' : rawState)
   return {
     kind: 'pull_request',
     parentKind: 'pull_request',
@@ -164,6 +168,14 @@ function buildPullRequestSnapshot(target, pr) {
     createdAt: pr?.created_at ?? null,
     updatedAt: pr?.updated_at ?? null,
     url: target.url,
+    state,
+    merged,
+    draft,
+    baseRef: typeof pr?.base?.ref === 'string' ? pr.base.ref : null,
+    headRef: typeof pr?.head?.ref === 'string' ? pr.head.ref : null,
+    additions: typeof pr?.additions === 'number' ? pr.additions : null,
+    deletions: typeof pr?.deletions === 'number' ? pr.deletions : null,
+    changedFiles: typeof pr?.changed_files === 'number' ? pr.changed_files : null,
   }
 }
 

package/src/core/canvas/githubEmbeds.test.js

@@ -202,6 +202,76 @@ describe('fetchGitHubEmbedSnapshot', () => {
     expect(graphqlArgs.slice(0, 2)).toEqual(['api', 'graphql'])
   })
 
+  it('hydrates pull request snapshot metadata (state, branches, diff)', () => {
+    ghExec
+      .mockReturnValueOnce('gh version 2.58.0')
+      .mockReturnValueOnce(JSON.stringify({
+        number: 79,
+        title: 'fix(viewfinder): eliminate FOUC',
+        body: 'A PR body',
+        state: 'closed',
+        merged: true,
+        merged_at: '2026-04-10T00:00:00Z',
+        draft: false,
+        user: { login: 'dfosco' },
+        created_at: '2026-04-01T00:00:00Z',
+        updated_at: '2026-04-10T00:00:00Z',
+        base: { ref: '3.11.0' },
+        head: { ref: '3.11.0--fix-viewfinder-fouc' },
+        additions: 63,
+        deletions: 18,
+        changed_files: 4,
+      }))
+
+    const snapshot = fetchGitHubEmbedSnapshot('https://github.com/dfosco/storyboard/pull/79')
+
+    expect(snapshot).toMatchObject({
+      kind: 'pull_request',
+      parentKind: 'pull_request',
+      title: '#79 fix(viewfinder): eliminate FOUC',
+      state: 'merged',
+      merged: true,
+      draft: false,
+      baseRef: '3.11.0',
+      headRef: '3.11.0--fix-viewfinder-fouc',
+      additions: 63,
+      deletions: 18,
+      changedFiles: 4,
+    })
+  })
+
+  it('marks draft PRs and unmerged closed PRs correctly', () => {
+    ghExec
+      .mockReturnValueOnce('gh version 2.58.0')
+      .mockReturnValueOnce(JSON.stringify({
+        number: 5,
+        title: 'WIP: refactor',
+        state: 'open',
+        draft: true,
+        merged: false,
+        user: { login: 'dfosco' },
+      }))
+
+    const draftSnap = fetchGitHubEmbedSnapshot('https://github.com/dfosco/storyboard/pull/5')
+    expect(draftSnap.state).toBe('draft')
+    expect(draftSnap.draft).toBe(true)
+    expect(draftSnap.merged).toBe(false)
+
+    ghExec
+      .mockReturnValueOnce('gh version 2.58.0')
+      .mockReturnValueOnce(JSON.stringify({
+        number: 6,
+        state: 'closed',
+        merged: false,
+        merged_at: null,
+        user: { login: 'dfosco' },
+      }))
+
+    const closedSnap = fetchGitHubEmbedSnapshot('https://github.com/dfosco/storyboard/pull/6')
+    expect(closedSnap.state).toBe('closed')
+    expect(closedSnap.merged).toBe(false)
+  })
+
   it('rejects issue comment URLs when comment parent does not match', () => {
     ghExec
       .mockReturnValueOnce('gh version 2.58.0')
@@ -270,8 +340,7 @@ describe('fetchGitHubEmbedSnapshot', () => {
     })
   })
 
-  it('hydrates PR top-level comment snapshot metadata', () => {
-    ghExec
+  it('hydrates PR top-level comment snapshot metadata', () => {    ghExec
       .mockReturnValueOnce('gh version 2.58.0')
       .mockReturnValueOnce(JSON.stringify({
         body: 'Looks good!',

package/src/core/vite/server-plugin.js

@@ -110,6 +110,18 @@ export default function storyboardServer() {
   const routeHandlers = new Map()
   const clientScripts = []
 
+  // Load packaged favicon once and cache as data URI so every consumer
+  // gets the storyboard brand favicon without shipping/copying any asset.
+  let faviconDataUri = ''
+  try {
+    const faviconPath = path.resolve(
+      path.dirname(new URL(import.meta.url).pathname),
+      '../../../assets/favicon.svg'
+    )
+    const svg = fs.readFileSync(faviconPath, 'utf8')
+    faviconDataUri = 'data:image/svg+xml;base64,' + Buffer.from(svg, 'utf8').toString('base64')
+  } catch { /* favicon missing — skip injection */ }
+
   return {
     name: 'storyboard-server',
 
@@ -872,6 +884,17 @@ export default function storyboardServer() {
         })
       }
 
+      // Inject the storyboard brand favicon as a data URI. Appending to
+      // head means it wins over any earlier <link rel="icon"> the consumer
+      // declared (browsers use the last declaration).
+      if (faviconDataUri) {
+        tags.push({
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/svg+xml', href: faviconDataUri },
+          injectTo: 'head',
+        })
+      }
+
       return tags
     },
 

package/src/internals/canvas/widgets/LinkPreview.jsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImper
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
-import { MarkGithubIcon } from '@primer/octicons-react'
+import { GitBranchIcon, GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestDraftIcon, GitPullRequestIcon, MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
@@ -119,6 +119,48 @@ function getCommentKindLabel(github) {
   return 'Comment'
 }
 
+const PR_STATE_META = {
+  merged: { label: 'Merged', Icon: GitMergeIcon, className: 'prStateMerged' },
+  closed: { label: 'Closed', Icon: GitPullRequestClosedIcon, className: 'prStateClosed' },
+  draft: { label: 'Draft', Icon: GitPullRequestDraftIcon, className: 'prStateDraft' },
+  open: { label: 'Open', Icon: GitPullRequestIcon, className: 'prStateOpen' },
+}
+
+function PullRequestMeta({ github }) {
+  if (github?.kind !== 'pull_request') return null
+  const stateKey = github?.state || 'open'
+  const stateMeta = PR_STATE_META[stateKey] || PR_STATE_META.open
+  const { Icon: StateIcon } = stateMeta
+  const baseRef = github?.baseRef || null
+  const headRef = github?.headRef || null
+  const additions = typeof github?.additions === 'number' ? github.additions : null
+  const deletions = typeof github?.deletions === 'number' ? github.deletions : null
+  const hasDiff = additions !== null || deletions !== null
+
+  return (
+    <div className={styles.prMeta}>
+      <span className={`${styles.prStateBadge} ${styles[stateMeta.className]}`}>
+        <StateIcon size={12} />
+        {stateMeta.label}
+      </span>
+      {(baseRef || headRef) && (
+        <span className={styles.prBranchRef} title={`${headRef || '?'} → ${baseRef || '?'}`}>
+          <GitBranchIcon size={12} />
+          <span className={styles.prBranchName}>{baseRef || '?'}</span>
+          <span className={styles.prBranchArrow}>←</span>
+          <span className={styles.prBranchName}>{headRef || '?'}</span>
+        </span>
+      )}
+      {hasDiff && (
+        <span className={styles.prDiffStat}>
+          {additions !== null && <span className={styles.prDiffAdd}>+{additions}</span>}
+          {deletions !== null && <span className={styles.prDiffDel}>-{deletions}</span>}
+        </span>
+      )}
+    </div>
+  )
+}
+
 function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, expandMode, onCloseExpand }) {
   const authors = Array.isArray(github?.authors)
     ? github.authors.filter((a) => typeof a === 'string' && a.trim())
@@ -209,6 +251,7 @@ function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, e
               {primaryAuthor && createdAgo ? ` opened ${createdAgo}` : createdAgo ? `Opened ${createdAgo}` : ''}
             </span>
           </div>
+          <PullRequestMeta github={github} />
         </div>
 
         {bodyHtml && (
@@ -243,6 +286,7 @@ function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, e
               )}
               {createdAgo && <span className={styles.expandedBylineText}>{primaryAuthor ? ` opened ${createdAgo}` : `Opened ${createdAgo}`}</span>}
             </div>
+            <PullRequestMeta github={github} />
           </header>
           {bodyHtml && <div className={styles.expandedIssueBody} dangerouslySetInnerHTML={{ __html: bodyHtml }} />}
         </div>

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

@@ -583,3 +583,74 @@
 .expandedUrl:hover {
   text-decoration: underline;
 }
+
+/* ── PR metadata (state badge + branch refs + diff stats) ──────────── */
+
+.prMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  min-width: 0;
+}
+
+.prStateBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 2em;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--fgColor-onEmphasis, #ffffff);
+  white-space: nowrap;
+}
+
+.prStateOpen { background: var(--bgColor-open-emphasis, #1f883d); }
+.prStateMerged { background: var(--bgColor-done-emphasis, #8250df); }
+.prStateClosed { background: var(--bgColor-closed-emphasis, #cf222e); }
+.prStateDraft {
+  background: var(--bgColor-neutral-emphasis, #59636e);
+}
+
+.prBranchRef {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--fgColor-default, #1f2328);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  max-width: 240px;
+  overflow: hidden;
+}
+
+.prBranchName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 96px;
+}
+
+.prBranchArrow {
+  color: var(--fgColor-muted, #656d76);
+  font-family: -apple-system, system-ui, sans-serif;
+  flex-shrink: 0;
+}
+
+.prDiffStat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.prDiffAdd { color: var(--fgColor-success, #1a7f37); }
+.prDiffDel { color: var(--fgColor-danger, #cf222e); }