@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/expandUtils.test.js

@@ -0,0 +1,155 @@
+import { describe, it, expect } from 'vitest'
+import { assignToQuadrants, buildSplitLayout } from './expandUtils.js'
+
+describe('assignToQuadrants', () => {
+  it('assigns 2 items to left/right columns', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 200, data: 'A' },
+      { x: 500, y: 200, data: 'B' },
+    ])
+    // centroid.y = 200 = both y values, so both get 'b' row (>= centroid)
+    expect(result.bl).toBe('A')
+    expect(result.br).toBe('B')
+    expect(result.tl).toBeNull()
+    expect(result.tr).toBeNull()
+  })
+
+  it('assigns 2 items stacked vertically to top/bottom in same column', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'A' },
+      { x: 100, y: 500, data: 'B' },
+    ])
+    // Both same x → degenerate x, but different y
+    // centroid = (100, 300). A.y=100 < 300 → top, B.y=500 >= 300 → bottom
+    // A.x=100 is NOT < centroid.x=100, so both go to 'r'
+    // → tr='A', br='B'
+    expect(result.tr).toBe('A')
+    expect(result.br).toBe('B')
+  })
+
+  it('assigns 4 items to all quadrants', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'TL' },
+      { x: 500, y: 100, data: 'TR' },
+      { x: 100, y: 500, data: 'BL' },
+      { x: 500, y: 500, data: 'BR' },
+    ])
+    expect(result.tl).toBe('TL')
+    expect(result.tr).toBe('TR')
+    expect(result.bl).toBe('BL')
+    expect(result.br).toBe('BR')
+  })
+
+  it('assigns 3 items: 2 in left column, 1 in right', () => {
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'TL' },
+      { x: 100, y: 500, data: 'BL' },
+      { x: 500, y: 300, data: 'R' },
+    ])
+    // centroid x = (100+100+500)/3 ≈ 233, y = (100+500+300)/3 = 300
+    // TL: x=100 < 233 → l, y=100 < 300 → t → tl
+    // BL: x=100 < 233 → l, y=500 >= 300 → b → bl
+    // R: x=500 >= 233 → r, y=300 >= 300 → b → br
+    expect(result.tl).toBe('TL')
+    expect(result.bl).toBe('BL')
+    expect(result.br).toBe('R')
+  })
+
+  it('cycles TL→TR→BL→BR when all positions are identical', () => {
+    const result = assignToQuadrants([
+      { x: 0, y: 0, data: 'A' },
+      { x: 0, y: 0, data: 'B' },
+      { x: 0, y: 0, data: 'C' },
+    ])
+    expect(result.tl).toBe('A')
+    expect(result.tr).toBe('B')
+    expect(result.bl).toBe('C')
+    expect(result.br).toBeNull()
+  })
+
+  it('handles overflow: 2 items in same quadrant', () => {
+    // Two items very close, both land in same quadrant → overflow redistributes
+    const result = assignToQuadrants([
+      { x: 100, y: 100, data: 'A' },
+      { x: 110, y: 110, data: 'B' },
+      { x: 500, y: 500, data: 'C' },
+    ])
+    // centroid = (236, 236). A: x<236 y<236 → tl. B: x<236 y<236 → tl (overflow!)
+    // C: x>=236 y>=236 → br
+    // A wins tl, B overflows to first empty slot (tr)
+    expect(result.tl).toBe('A')
+    expect(result.br).toBe('C')
+    // B goes to overflow → first empty slot (tr)
+    expect(result.tr).toBe('B')
+  })
+
+  it('returns all nulls for empty input', () => {
+    const result = assignToQuadrants([])
+    expect(result.tl).toBeNull()
+    expect(result.tr).toBeNull()
+    expect(result.bl).toBeNull()
+    expect(result.br).toBeNull()
+  })
+})
+
+describe('buildSplitLayout', () => {
+  function mockPaneFn(widget) {
+    return { id: widget.id, label: widget.id, kind: 'react', render: () => null }
+  }
+
+  it('returns single column for 1 widget (no connected)', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const layout = buildSplitLayout(primary, [], mockPaneFn)
+    expect(layout.length).toBe(1)
+    expect(layout[0].length).toBe(1)
+    expect(layout[0][0].id).toBe('a')
+  })
+
+  it('returns 2 columns for 2 horizontally-spaced widgets', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 100 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'prototype', position: { x: 500, y: 100 }, props: {} },
+    ]
+    const layout = buildSplitLayout(primary, connected, mockPaneFn)
+    expect(layout.length).toBe(2)
+    expect(layout[0].length).toBe(1) // left column
+    expect(layout[1].length).toBe(1) // right column
+  })
+
+  it('returns 2 columns with row split for 3 widgets', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'prototype', position: { x: 500, y: 0 }, props: {} },
+      { id: 'c', type: 'markdown', position: { x: 500, y: 500 }, props: {} },
+    ]
+    const layout = buildSplitLayout(primary, connected, mockPaneFn)
+    const totalPanes = layout.flat().length
+    expect(totalPanes).toBe(3)
+    // One column should have 2 panes (row split)
+    const hasRowSplit = layout.some((col) => col.length === 2)
+    expect(hasRowSplit).toBe(true)
+  })
+
+  it('returns 2×2 grid for 4 widgets', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'prototype', position: { x: 500, y: 0 }, props: {} },
+      { id: 'c', type: 'markdown', position: { x: 0, y: 500 }, props: {} },
+      { id: 'd', type: 'agent', position: { x: 500, y: 500 }, props: {} },
+    ]
+    const layout = buildSplitLayout(primary, connected, mockPaneFn)
+    expect(layout.length).toBe(2)
+    expect(layout[0].length).toBe(2)
+    expect(layout[1].length).toBe(2)
+  })
+
+  it('skips widgets where buildPaneFn returns null', () => {
+    const primary = { id: 'a', type: 'terminal', position: { x: 0, y: 0 }, props: {} }
+    const connected = [
+      { id: 'b', type: 'unknown', position: { x: 500, y: 0 }, props: {} },
+    ]
+    const paneFn = (w) => w.id === 'a' ? mockPaneFn(w) : null
+    const layout = buildSplitLayout(primary, connected, paneFn)
+    expect(layout.flat().length).toBe(1)
+  })
+})

package/src/internals/canvas/widgets/figmaUrl.js

@@ -0,0 +1,118 @@
+/**
+ * Figma URL utilities — detection, sanitization, and embed URL transformation.
+ *
+ * Supports three Figma link types:
+ *   - Board:  figma.com/board/{key}/{name}
+ *   - Design: figma.com/design/{key}/{name}
+ *   - Proto:  figma.com/proto/{key}/{name}
+ */
+
+const FIGMA_HOST_RE = /^(www\.)?figma\.com$/
+const FIGMA_PATH_RE = /^\/(board|design|proto)\/[A-Za-z0-9]+/
+
+/** Params to strip from stored/embed URLs (session/tracking tokens). */
+const STRIP_PARAMS = new Set(['t'])
+
+/**
+ * Check whether a URL string is a Figma board, design, or prototype link.
+ * @param {string} url
+ * @returns {boolean}
+ */
+export function isFigmaUrl(url) {
+  try {
+    const parsed = new URL(url)
+    return FIGMA_HOST_RE.test(parsed.hostname) && FIGMA_PATH_RE.test(parsed.pathname)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Return the Figma link type: 'board', 'design', or 'proto'.
+ * Returns null for non-Figma URLs.
+ * @param {string} url
+ * @returns {'board' | 'design' | 'proto' | null}
+ */
+export function getFigmaType(url) {
+  try {
+    const parsed = new URL(url)
+    if (!FIGMA_HOST_RE.test(parsed.hostname)) return null
+    const match = parsed.pathname.match(FIGMA_PATH_RE)
+    if (!match) return null
+    return match[1]
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Sanitize a Figma URL for storage — strips tracking params like `t`.
+ * Returns a canonical www.figma.com URL safe to persist in canvas data.
+ * @param {string} url — raw pasted Figma URL
+ * @returns {string} sanitized URL
+ */
+export function sanitizeFigmaUrl(url) {
+  try {
+    const parsed = new URL(url)
+    if (!FIGMA_HOST_RE.test(parsed.hostname)) return url
+    // Normalize to www.figma.com
+    parsed.hostname = 'www.figma.com'
+    for (const key of STRIP_PARAMS) {
+      parsed.searchParams.delete(key)
+    }
+    return parsed.toString()
+  } catch {
+    return url
+  }
+}
+
+/**
+ * Transform a Figma URL into its embed counterpart.
+ *
+ * - Replaces host with `embed.figma.com`
+ * - Strips tracking params (`t`)
+ * - Appends `embed-host=share`
+ *
+ * @param {string} url — original Figma URL
+ * @returns {string} embed URL, or the original URL if it can't be transformed
+ */
+export function toFigmaEmbedUrl(url) {
+  try {
+    const parsed = new URL(url)
+    if (!FIGMA_HOST_RE.test(parsed.hostname)) return url
+
+    parsed.hostname = 'embed.figma.com'
+
+    // Strip tracking/session params
+    for (const key of STRIP_PARAMS) {
+      parsed.searchParams.delete(key)
+    }
+
+    // Ensure embed-host is set
+    parsed.searchParams.set('embed-host', 'share')
+
+    return parsed.toString()
+  } catch {
+    return url
+  }
+}
+
+/**
+ * Extract a human-readable title from a Figma URL.
+ * Uses the name segment from the path (e.g. "Security-Products-HQ").
+ * @param {string} url
+ * @returns {string}
+ */
+export function getFigmaTitle(url) {
+  try {
+    const parsed = new URL(url)
+    // Path: /board|design|proto/{key}/{name}
+    const segments = parsed.pathname.split('/').filter(Boolean)
+    if (segments.length >= 3) {
+      return segments[2].replace(/-/g, ' ')
+    }
+    return 'Figma'
+  } catch {
+    return 'Figma'
+  }
+}

package/src/internals/canvas/widgets/figmaUrl.test.js

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest'
+import { isFigmaUrl, getFigmaType, toFigmaEmbedUrl, getFigmaTitle, sanitizeFigmaUrl } from './figmaUrl.js'
+
+describe('isFigmaUrl', () => {
+  it('detects board URLs', () => {
+    expect(isFigmaUrl('https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ?node-id=0-1&t=XBF45Am0VgicAITG-0')).toBe(true)
+  })
+
+  it('detects design URLs', () => {
+    expect(isFigmaUrl('https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=103-4739')).toBe(true)
+  })
+
+  it('detects proto URLs', () => {
+    expect(isFigmaUrl('https://www.figma.com/proto/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=122-9632&p=f&t=9XSi047pSbt81sZS-0&scaling=min-zoom')).toBe(true)
+  })
+
+  it('works without www prefix', () => {
+    expect(isFigmaUrl('https://figma.com/board/abc123/My-Board')).toBe(true)
+  })
+
+  it('rejects non-Figma URLs', () => {
+    expect(isFigmaUrl('https://example.com/board/abc')).toBe(false)
+    expect(isFigmaUrl('https://www.figma.com/file/abc')).toBe(false)
+    expect(isFigmaUrl('not a url')).toBe(false)
+    expect(isFigmaUrl('')).toBe(false)
+  })
+})
+
+describe('getFigmaType', () => {
+  it('returns board for board URLs', () => {
+    expect(getFigmaType('https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Name')).toBe('board')
+  })
+
+  it('returns design for design URLs', () => {
+    expect(getFigmaType('https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Name')).toBe('design')
+  })
+
+  it('returns proto for proto URLs', () => {
+    expect(getFigmaType('https://www.figma.com/proto/i8jI8RuxPnGQGp2QllfAr7/Name')).toBe('proto')
+  })
+
+  it('returns null for non-Figma URLs', () => {
+    expect(getFigmaType('https://example.com')).toBeNull()
+  })
+})
+
+describe('toFigmaEmbedUrl', () => {
+  it('transforms board URL', () => {
+    const input = 'https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ?node-id=0-1&t=XBF45Am0VgicAITG-0'
+    const result = toFigmaEmbedUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('embed.figma.com')
+    expect(parsed.pathname).toBe('/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ')
+    expect(parsed.searchParams.get('node-id')).toBe('0-1')
+    expect(parsed.searchParams.get('embed-host')).toBe('share')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('transforms design URL', () => {
+    const input = 'https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=103-4739'
+    const result = toFigmaEmbedUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('embed.figma.com')
+    expect(parsed.pathname).toBe('/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox')
+    expect(parsed.searchParams.get('node-id')).toBe('103-4739')
+    expect(parsed.searchParams.get('embed-host')).toBe('share')
+  })
+
+  it('transforms proto URL and preserves relevant params', () => {
+    const input = 'https://www.figma.com/proto/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox?node-id=122-9632&p=f&t=9XSi047pSbt81sZS-0&scaling=min-zoom&content-scaling=fixed&page-id=103%3A4739&starting-point-node-id=140%3A5949'
+    const result = toFigmaEmbedUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('embed.figma.com')
+    expect(parsed.pathname).toBe('/proto/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox')
+    expect(parsed.searchParams.get('node-id')).toBe('122-9632')
+    expect(parsed.searchParams.get('p')).toBe('f')
+    expect(parsed.searchParams.get('scaling')).toBe('min-zoom')
+    expect(parsed.searchParams.get('content-scaling')).toBe('fixed')
+    expect(parsed.searchParams.get('page-id')).toBe('103:4739')
+    expect(parsed.searchParams.get('starting-point-node-id')).toBe('140:5949')
+    expect(parsed.searchParams.get('embed-host')).toBe('share')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('returns original URL for non-Figma URLs', () => {
+    expect(toFigmaEmbedUrl('https://example.com')).toBe('https://example.com')
+  })
+})
+
+describe('getFigmaTitle', () => {
+  it('extracts title from board URL', () => {
+    expect(getFigmaTitle('https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ')).toBe('Security Products HQ')
+  })
+
+  it('extracts title from design URL', () => {
+    expect(getFigmaTitle('https://www.figma.com/design/i8jI8RuxPnGQGp2QllfAr7/Darby-s-copilot-metric-sandbox')).toBe("Darby s copilot metric sandbox")
+  })
+
+  it('returns Figma for URLs without name segment', () => {
+    expect(getFigmaTitle('https://www.figma.com/board/abc')).toBe('Figma')
+  })
+})
+
+describe('sanitizeFigmaUrl', () => {
+  it('strips tracking param and normalizes to www.figma.com', () => {
+    const input = 'https://www.figma.com/board/QlwxSiYxYQsHmnLNYpQRtR/Security-Products-HQ?node-id=0-1&t=XBF45Am0VgicAITG-0'
+    const result = sanitizeFigmaUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.hostname).toBe('www.figma.com')
+    expect(parsed.searchParams.get('node-id')).toBe('0-1')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('normalizes figma.com to www.figma.com', () => {
+    const input = 'https://figma.com/board/abc/Name?node-id=0-1'
+    const result = sanitizeFigmaUrl(input)
+    expect(new URL(result).hostname).toBe('www.figma.com')
+  })
+
+  it('preserves all non-tracking params for proto URLs', () => {
+    const input = 'https://www.figma.com/proto/abc/Name?node-id=1-2&p=f&t=TOKEN&scaling=min-zoom&page-id=103%3A4739'
+    const result = sanitizeFigmaUrl(input)
+    const parsed = new URL(result)
+
+    expect(parsed.searchParams.get('node-id')).toBe('1-2')
+    expect(parsed.searchParams.get('p')).toBe('f')
+    expect(parsed.searchParams.get('scaling')).toBe('min-zoom')
+    expect(parsed.searchParams.get('page-id')).toBe('103:4739')
+    expect(parsed.searchParams.has('t')).toBe(false)
+  })
+
+  it('returns non-Figma URLs unchanged', () => {
+    expect(sanitizeFigmaUrl('https://example.com')).toBe('https://example.com')
+  })
+})

package/src/internals/canvas/widgets/githubUrl.js

@@ -0,0 +1,82 @@
+const GH_HOST_RE = /^(www\.)?github\.com$/i
+const ISSUE_PATH_RE = /^\/([^/]+)\/([^/]+)\/issues\/(\d+)\/?$/
+const DISCUSSION_PATH_RE = /^\/([^/]+)\/([^/]+)\/discussions\/(\d+)\/?$/
+const PULL_REQUEST_PATH_RE = /^\/([^/]+)\/([^/]+)\/pull\/(\d+)\/?$/
+const ISSUE_COMMENT_HASH_RE = /^#issuecomment-(\d+)$/i
+const DISCUSSION_COMMENT_HASH_RE = /^#discussioncomment-(\d+)$/i
+
+function toNumber(raw) {
+  const value = Number.parseInt(raw, 10)
+  return Number.isFinite(value) ? value : null
+}
+
+/**
+ * Parse supported GitHub embed URLs (issues, discussions, comments).
+ * @param {string} rawUrl
+ * @returns {null | {
+ *   kind: 'issue' | 'discussion' | 'comment',
+ *   parentKind: 'issue' | 'discussion',
+ *   owner: string,
+ *   repo: string,
+ *   number: number,
+ *   commentId?: number
+ * }}
+ */
+export function parseGitHubUrl(rawUrl) {
+  try {
+    const parsed = new URL(rawUrl)
+    if (!GH_HOST_RE.test(parsed.hostname)) return null
+
+    const issueMatch = parsed.pathname.match(ISSUE_PATH_RE)
+    if (issueMatch) {
+      const [, owner, repo, numberRaw] = issueMatch
+      const number = toNumber(numberRaw)
+      if (!number) return null
+
+      const commentMatch = parsed.hash.match(ISSUE_COMMENT_HASH_RE)
+      if (commentMatch) {
+        const commentId = toNumber(commentMatch[1])
+        if (!commentId) return null
+        return { kind: 'comment', parentKind: 'issue', owner, repo, number, commentId }
+      }
+
+      if (parsed.hash) return null
+      return { kind: 'issue', parentKind: 'issue', owner, repo, number }
+    }
+
+    const discussionMatch = parsed.pathname.match(DISCUSSION_PATH_RE)
+    if (discussionMatch) {
+      const [, owner, repo, numberRaw] = discussionMatch
+      const number = toNumber(numberRaw)
+      if (!number) return null
+
+      const commentMatch = parsed.hash.match(DISCUSSION_COMMENT_HASH_RE)
+      if (commentMatch) {
+        const commentId = toNumber(commentMatch[1])
+        if (!commentId) return null
+        return { kind: 'comment', parentKind: 'discussion', owner, repo, number, commentId }
+      }
+
+      if (parsed.hash) return null
+      return { kind: 'discussion', parentKind: 'discussion', owner, repo, number }
+    }
+
+    const prMatch = parsed.pathname.match(PULL_REQUEST_PATH_RE)
+    if (prMatch) {
+      const [, owner, repo, numberRaw] = prMatch
+      const number = toNumber(numberRaw)
+      if (!number) return null
+
+      if (parsed.hash) return null
+      return { kind: 'pull_request', parentKind: 'pull_request', owner, repo, number }
+    }
+  } catch {
+    return null
+  }
+
+  return null
+}
+
+export function isGitHubEmbedUrl(rawUrl) {
+  return parseGitHubUrl(rawUrl) !== null
+}

package/src/internals/canvas/widgets/githubUrl.test.js

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { isGitHubEmbedUrl, parseGitHubUrl } from './githubUrl.js'
+
+describe('parseGitHubUrl', () => {
+  it('classifies issue URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/issues/12')).toEqual({
+      kind: 'issue',
+      parentKind: 'issue',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 12,
+    })
+  })
+
+  it('classifies discussion URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/discussions/99')).toEqual({
+      kind: 'discussion',
+      parentKind: 'discussion',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 99,
+    })
+  })
+
+  it('classifies issue comment URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/issues/12#issuecomment-345')).toEqual({
+      kind: 'comment',
+      parentKind: 'issue',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 12,
+      commentId: 345,
+    })
+  })
+
+  it('classifies discussion comment URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/discussions/99#discussioncomment-888')).toEqual({
+      kind: 'comment',
+      parentKind: 'discussion',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 99,
+      commentId: 888,
+    })
+  })
+
+  it('classifies pull request URLs', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/pull/12')).toEqual({
+      kind: 'pull_request',
+      parentKind: 'pull_request',
+      owner: 'dfosco',
+      repo: 'storyboard',
+      number: 12,
+    })
+  })
+
+  it('rejects unsupported paths and hashes', () => {
+    expect(parseGitHubUrl('https://github.com/dfosco/storyboard/issues/12#random')).toBeNull()
+    expect(parseGitHubUrl('https://example.com/dfosco/storyboard/issues/12')).toBeNull()
+    expect(parseGitHubUrl('not a url')).toBeNull()
+  })
+})
+
+describe('isGitHubEmbedUrl', () => {
+  it('returns true for supported GitHub URLs', () => {
+    expect(isGitHubEmbedUrl('https://github.com/dfosco/storyboard/issues/12')).toBe(true)
+    expect(isGitHubEmbedUrl('https://github.com/dfosco/storyboard/discussions/99#discussioncomment-888')).toBe(true)
+    expect(isGitHubEmbedUrl('https://github.com/dfosco/storyboard/pull/1')).toBe(true)
+  })
+
+  it('returns false for unsupported URLs', () => {
+    expect(isGitHubEmbedUrl('https://example.com')).toBe(false)
+  })
+})

package/src/internals/canvas/widgets/iframeDevLogs.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+
+let loadedIframeCount = 0
+
+function isDevRuntime() {
+  return typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+}
+
+function toText(value) {
+  return value ? String(value) : '(no src)'
+}
+
+function logIframeEvent(event, count, meta) {
+  console.log(`[storyboard][iframe] ${event} | count=${count} | ${meta.widget}`, {
+    event,
+    count,
+    widget: meta.widget,
+    src: toText(meta.src),
+  })
+}
+
+/**
+ * Dev-only iframe load/unload logging with a live count of mounted iframes.
+ */
+export function useIframeDevLogs({ widget, loaded, src }) {
+  const metaRef = useRef({ widget, src })
+
+  useEffect(() => {
+    metaRef.current = { widget, src }
+  }, [widget, src])
+
+  useEffect(() => {
+    if (!loaded) return
+
+    loadedIframeCount += 1
+    if (isDevRuntime()) {
+      const meta = metaRef.current
+      logIframeEvent('loaded', loadedIframeCount, meta)
+    }
+
+    return () => {
+      loadedIframeCount = Math.max(0, loadedIframeCount - 1)
+      if (isDevRuntime()) {
+        const meta = metaRef.current
+        logIframeEvent('unloaded', loadedIframeCount, meta)
+      }
+    }
+  }, [loaded])
+}