@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/CanvasPage.module.css

@@ -0,0 +1,187 @@
+.empty,
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - var(--sb-branch-bar-height, 0px));
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  color: var(--fgColor-muted, #656d76);
+  font-size: 16px;
+}
+
+.empty p,
+.loading p {
+  margin: 0;
+}
+
+.canvasScroll {
+  position: relative;
+  width: 100vw;
+  height: calc(100vh - var(--sb-branch-bar-height, 0px));
+  overflow: auto;
+  background-color: var(--sb--canvas-bg, var(--bgColor-muted, #f6f8fa));
+}
+
+@media (prefers-color-scheme: dark) {
+  .canvasScroll {
+    background-color: var(--sb--canvas-bg, var(--bgColor-muted, #161b22));
+  }
+}
+
+.canvasZoom {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+/* GPU compositing hint during active zoom gestures — applied imperatively
+   via data-zooming attribute and removed on zoom-end to avoid permanent
+   memory pressure on the large canvas surface. */
+.canvasZoom[data-zooming] {
+  will-change: transform;
+}
+
+/* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
+
+.canvasLogo {
+  width: 32px;
+  height: 32px;
+  background: var(--bgColor-emphasis, #313131);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fgColor-onEmphasis, #fff);
+  flex-shrink: 0;
+  text-decoration: none;
+  transform: rotate(-1deg);
+}
+
+.canvasTitle {
+  position: fixed;
+  top: calc(12px + var(--sb-branch-bar-height, 0px));
+  left: 16px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.canvasTitleStatic {
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  margin: 0;
+  padding: 4px 8px;
+  white-space: nowrap;
+}
+
+.canvasTitleEditing {
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+  margin: 0;
+  padding: 3px 7px;
+  white-space: nowrap;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  background: var(--bgColor-default, #fff);
+  outline: none;
+}
+
+.canvasTitleEditing:focus {
+  border-color: var(--focus-outlineColor, #0969da);
+  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
+}
+
+/* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */
+:global(.tc-draggable-inner) {
+  overflow: visible;
+}
+
+/* Each widget gets its own stacking context so internal z-index
+   (chrome toolbars, resize handles, overlays) never leaks to siblings.
+   z-index: 2 keeps widgets above the ConnectorLayer (z-index: 1).
+   Selected widgets are raised via z-index on the .tc-drag wrapper
+   (data-widget-raised) instead of DOM reordering — this prevents
+   iframe widgets from remounting when selection changes.
+   The actively dragged widget (.tc-on from neodrag) floats above
+   everything so it always passes over siblings during movement. */
+:global(.tc-drag) {
+  isolation: isolate;
+  z-index: 2;
+}
+
+:global(.tc-drag:has([data-widget-raised])) {
+  z-index: 3;
+}
+
+:global(.tc-drag.tc-on) {
+  z-index: 4;
+}
+
+.ghInstallBanner {
+  position: fixed;
+  left: 50%;
+  bottom: 12px;
+  transform: translateX(-50%);
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: color-mix(in srgb, var(--bgColor-default, #ffffff) 88%, transparent);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(8px);
+  font-size: 12px;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.ghInstallBannerText {
+  white-space: nowrap;
+}
+
+.ghInstallBannerText code {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.ghInstallBannerLink {
+  color: var(--fgColor-accent, #0969da);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.ghInstallBannerLink:hover {
+  text-decoration: underline;
+}
+
+.ghInstallBannerDismiss {
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  font-size: 11px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.ghInstallBannerDismiss:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+/* Marquee selection rectangle */
+.marqueeRect {
+  position: absolute;
+  background: rgba(56, 132, 255, 0.12);
+  border: 1.5px solid rgba(56, 132, 255, 0.6);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 9999;
+}

package/src/internals/canvas/CanvasPage.multiselect.test.jsx

@@ -0,0 +1,358 @@
+import { fireEvent, render, screen, act } from '@testing-library/react'
+import CanvasPage from './CanvasPage.jsx'
+import { updateCanvas, removeWidget } from './canvasApi.js'
+
+const MOCK_UNDO_REDO = {
+  snapshot: vi.fn(),
+  undo: vi.fn(),
+  redo: vi.fn(),
+  reset: vi.fn(),
+  canUndo: false,
+  canRedo: false,
+}
+
+vi.mock('./useUndoRedo.js', () => ({
+  default: () => MOCK_UNDO_REDO,
+}))
+
+// Expose drag callbacks so tests can trigger drags with specific IDs
+let capturedOnDragStart = null
+let capturedOnDrag = null
+let capturedOnDragEnd = null
+vi.mock('../../canvas/index.js', () => ({
+  Canvas: ({ children, onDragStart, onDrag, onDragEnd }) => {
+    capturedOnDragStart = onDragStart
+    capturedOnDrag = onDrag
+    capturedOnDragEnd = onDragEnd
+    return <div data-testid="tiny-canvas">{children}</div>
+  },
+}))
+
+const mockCanvas = {
+  title: 'Multi-Select Test',
+  widgets: [
+    { id: 'w1', type: 'sticky-note', position: { x: 100, y: 100 }, props: {} },
+    { id: 'w2', type: 'sticky-note', position: { x: 300, y: 100 }, props: {} },
+    { id: 'w3', type: 'markdown', position: { x: 500, y: 200 }, props: {} },
+  ],
+  sources: [],
+  centered: false,
+  dotted: false,
+  grid: false,
+  gridSize: 18,
+  colorMode: 'auto',
+}
+
+vi.mock('./useCanvas.js', () => ({
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: null,
+    loading: false,
+  }),
+}))
+
+vi.mock('./widgets/index.js', () => ({
+  getWidgetComponent: () => function MockWidget({ id }) {
+    return <div data-testid={`widget-content-${id}`}>widget</div>
+  },
+}))
+
+// WidgetChrome mock that exposes onSelect with shift parameter
+vi.mock('./widgets/WidgetChrome.jsx', () => ({
+  default: ({ children, onSelect, selected, multiSelected, widgetId }) => (
+    <div
+      data-testid={`chrome-${widgetId}`}
+      data-selected={selected || undefined}
+      data-multi-selected={multiSelected || undefined}
+    >
+      {children}
+      <button
+        className="tc-drag-handle"
+        data-testid={`select-${widgetId}`}
+        onClick={(e) => { e.stopPropagation(); onSelect?.(false) }}
+      >
+        select
+      </button>
+      <button
+        className="tc-drag-handle"
+        data-testid={`shift-select-${widgetId}`}
+        onClick={(e) => { e.stopPropagation(); onSelect?.(true) }}
+      >
+        shift-select
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('./widgets/widgetProps.js', () => ({
+  schemas: {},
+  getDefaults: () => ({}),
+}))
+
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    isExpandable: () => false,
+    isSplitScreenCapable: () => false,
+    getInteractGate: () => ({ enabled: false, label: 'Click to interact' }),
+    getWidgetMeta: () => null,
+    getConnectorConfig: actual.getConnectorConfig,
+    getAnchorState: actual.getAnchorState,
+    canAcceptConnection: () => true,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
+
+vi.mock('./widgets/figmaUrl.js', () => ({
+  isFigmaUrl: () => false,
+  sanitizeFigmaUrl: (url) => url,
+}))
+
+vi.mock('./canvasApi.js', () => ({
+  addWidget: vi.fn(),
+  checkGitHubCliAvailable: vi.fn(() => Promise.resolve({ available: true })),
+  fetchGitHubEmbed: vi.fn(() => Promise.resolve({ success: false })),
+  updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
+  removeWidget: vi.fn(() => Promise.resolve({ success: true })),
+  uploadImage: vi.fn(),
+}))
+
+describe('CanvasPage multi-select', () => {
+  beforeEach(() => {
+    delete window.__storyboardCanvasBridgeState
+    window.__SB_LOCAL_DEV__ = true
+    vi.clearAllMocks()
+    capturedOnDragStart = null
+    capturedOnDrag = null
+    capturedOnDragEnd = null
+  })
+
+  afterEach(() => {
+    delete window.__SB_LOCAL_DEV__
+  })
+
+  it('shift+click on select handle adds widget to selection', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Select first widget
+    fireEvent.click(screen.getByTestId('select-w1'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+
+    // Shift+select second widget
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+  })
+
+  it('shift+click on already selected widget removes it from selection', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Select both
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+
+    // Shift+click w1 again to remove it
+    fireEvent.click(screen.getByTestId('shift-select-w1'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeUndefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+  })
+
+  it('normal click replaces multi-selection with single', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Multi-select
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    fireEvent.click(screen.getByTestId('shift-select-w3'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Normal click on w1 clears multi-select
+    fireEvent.click(screen.getByTestId('select-w1'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeUndefined()
+    expect(screen.getByTestId('chrome-w3').dataset.selected).toBeUndefined()
+  })
+
+  it('sets multiSelected on all selected widgets when multiple are selected', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(screen.getByTestId('chrome-w1').dataset.multiSelected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.multiSelected).toBeDefined()
+    // Unselected widget should not have multiSelected
+    expect(screen.getByTestId('chrome-w3').dataset.multiSelected).toBeUndefined()
+  })
+
+  it('Escape clears all selection', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeUndefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeUndefined()
+  })
+
+  it('Delete removes all selected widgets and calls updateCanvas', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Press Delete
+    fireEvent.keyDown(document, { key: 'Delete' })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Should call updateCanvas with only w3 remaining
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: [expect.objectContaining({ id: 'w3' })],
+      })
+    )
+    // Should NOT use individual removeWidget API for multi-delete
+    expect(removeWidget).not.toHaveBeenCalled()
+    // Should snapshot for undo
+    expect(MOCK_UNDO_REDO.snapshot).toHaveBeenCalled()
+  })
+
+  it('single-select Delete uses removeWidget API', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.keyDown(document, { key: 'Backspace' })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(removeWidget).toHaveBeenCalledWith('test-canvas', 'w1')
+  })
+
+  it('multi-select move applies delta to all selected widgets', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Multi-select w1 (100,100) and w2 (300,100)
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+
+    // Wait for selectedIdsRef to sync
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Drag w1 to (150, 200) → delta is (+50, +100)
+    expect(capturedOnDragEnd).toBeTruthy()
+    act(() => {
+      capturedOnDragEnd('w1', { x: 150, y: 200 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // w1 → (150, 200), w2 → (300+50, 100+100) = (350, 200)
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: expect.arrayContaining([
+          expect.objectContaining({ id: 'w1', position: { x: 150, y: 200 } }),
+          expect.objectContaining({ id: 'w2', position: { x: 350, y: 200 } }),
+          // w3 unchanged
+          expect.objectContaining({ id: 'w3', position: { x: 500, y: 200 } }),
+        ]),
+      })
+    )
+  })
+
+  it('multi-select drag captures peer articles on drag start', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // All drag callbacks should be captured
+    expect(capturedOnDragStart).toBeTruthy()
+    expect(capturedOnDrag).toBeTruthy()
+
+    // Trigger drag start — should not throw
+    act(() => {
+      capturedOnDragStart('w1', { x: 100, y: 100 })
+    })
+
+    // Drag tick — peers stay put (no live preview), should not throw
+    act(() => {
+      capturedOnDrag('w1', { x: 150, y: 200 })
+    })
+  })
+
+  it('multi-select drag preserves selection after drag end', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+
+    // Simulate full drag: start → drag → end
+    act(() => {
+      capturedOnDragStart('w1', { x: 100, y: 100 })
+    })
+    act(() => {
+      capturedOnDragEnd('w1', { x: 150, y: 200 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Selection should still include both widgets (justDraggedRef prevents collapse)
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+  })
+
+  it('any selected widget can serve as drag handler for the group', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+
+    // Multi-select w1 (100,100), w2 (300,100), w3 (500,200)
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    fireEvent.click(screen.getByTestId('shift-select-w3'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Drag w2 (the middle one) to (350, 150) → delta (+50, +50)
+    act(() => {
+      capturedOnDragStart('w2', { x: 300, y: 100 })
+    })
+    act(() => {
+      capturedOnDragEnd('w2', { x: 350, y: 150 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // All selected widgets should move by the same delta (+50, +50)
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: expect.arrayContaining([
+          expect.objectContaining({ id: 'w1', position: { x: 150, y: 150 } }),
+          expect.objectContaining({ id: 'w2', position: { x: 350, y: 150 } }),
+          expect.objectContaining({ id: 'w3', position: { x: 550, y: 250 } }),
+        ]),
+      })
+    )
+  })
+})

package/src/internals/canvas/CanvasToolbar.jsx

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import { addWidget as addWidgetApi } from './canvasApi.js'
+import { schemas, getDefaults } from './widgets/widgetProps.js'
+import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
+import styles from './CanvasToolbar.module.css'
+
+const WIDGET_TYPES = getMenuWidgetTypes()
+
+/**
+ * Floating toolbar for adding widgets to a canvas.
+ */
+export default function CanvasToolbar({ canvasId, onWidgetAdded }) {
+  const [open, setOpen] = useState(false)
+  const [adding, setAdding] = useState(false)
+
+  async function handleAdd(type) {
+    if (adding) return
+    setAdding(true)
+    try {
+      const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
+      const result = await addWidgetApi(canvasId, {
+        type,
+        props: defaultProps,
+        position: { x: 0, y: 0 },
+      })
+      if (result.success) {
+        onWidgetAdded?.(result.widget)
+        setOpen(false)
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to add widget:', err)
+    } finally {
+      setAdding(false)
+    }
+  }
+
+  return (
+    <nav className={styles.toolbar}>
+      {open ? (
+        <div className={styles.menu}>
+          <header className={styles.menuHeader}>
+            <span>Add widget</span>
+            <button
+              className={styles.closeBtn}
+              onClick={() => setOpen(false)}
+              aria-label="Close"
+            >×</button>
+          </header>
+          {WIDGET_TYPES.map(({ type, label, icon }) => (
+            <button
+              key={type}
+              className={styles.menuItem}
+              onClick={() => handleAdd(type)}
+              disabled={adding}
+            >
+              <span className={styles.menuIcon}>{icon}</span>
+              {label}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <button
+          className={styles.addBtn}
+          onClick={() => setOpen(true)}
+          title="Add widget"
+          aria-label="Add widget"
+        >
+          +
+        </button>
+      )}
+    </nav>
+  )
+}

package/src/internals/canvas/CanvasToolbar.module.css

@@ -0,0 +1,92 @@
+.toolbar {
+  position: fixed;
+  bottom: 80px;
+  left: 24px;
+  z-index: 1000;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.addBtn {
+  all: unset;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  color: var(--fgColor-onEmphasis, #ffffff);
+  font-size: 28px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  transition: transform 150ms, background 150ms;
+}
+
+.addBtn:hover {
+  transform: scale(1.08);
+  background: var(--bgColor-accent-emphasis, #388bfd);
+}
+
+.menu {
+  background: var(--bgColor-default, #ffffff);
+  border: 1px solid var(--borderColor-muted, rgba(0, 0, 0, 0.15));
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  min-width: 180px;
+}
+
+.menuHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--fgColor-muted, #656d76);
+  border-bottom: 1px solid var(--borderColor-muted, rgba(0, 0, 0, 0.1));
+}
+
+.closeBtn {
+  all: unset;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--fgColor-muted, #656d76);
+  padding: 0 2px;
+  border-radius: 4px;
+}
+
+.closeBtn:hover {
+  color: var(--fgColor-default, #1f2328);
+}
+
+.menuItem {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  font-size: 14px;
+  color: var(--fgColor-default, #1f2328);
+  width: 100%;
+  box-sizing: border-box;
+  transition: background 100ms;
+}
+
+.menuItem:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.menuItem:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.menuIcon {
+  font-size: 18px;
+}