From db9a19f97921e46aa116a8b54398e353df75b787 Mon Sep 17 00:00:00 2001
From: Wes <wesb@block.xyz>
Date: Mon, 23 Feb 2026 13:59:19 -0700
Subject: [PATCH 1/2] refactor(mark): remove unused diff shim and scrollbar
 files

---
 .../features/diff/connectorRendererCanvas.ts  |   2 -
 .../src/lib/features/diff/diffKeyboard.ts     |   2 -
 apps/mark/src/lib/features/diff/diffUtils.ts  |  10 -
 .../lib/features/diff/diffViewerHelpers.ts    |  20 --
 .../lib/features/diff/markdownScrollSync.ts   |   2 -
 .../features/diff/scrollController.svelte.ts  |   2 -
 .../src/lib/shared/HorizontalScrollbar.svelte | 238 --------------
 apps/mark/src/lib/shared/Scrollbar.svelte     | 292 ------------------
 8 files changed, 568 deletions(-)
 delete mode 100644 apps/mark/src/lib/features/diff/connectorRendererCanvas.ts
 delete mode 100644 apps/mark/src/lib/features/diff/diffKeyboard.ts
 delete mode 100644 apps/mark/src/lib/features/diff/diffUtils.ts
 delete mode 100644 apps/mark/src/lib/features/diff/diffViewerHelpers.ts
 delete mode 100644 apps/mark/src/lib/features/diff/markdownScrollSync.ts
 delete mode 100644 apps/mark/src/lib/features/diff/scrollController.svelte.ts
 delete mode 100644 apps/mark/src/lib/shared/HorizontalScrollbar.svelte
 delete mode 100644 apps/mark/src/lib/shared/Scrollbar.svelte

diff --git a/apps/mark/src/lib/features/diff/connectorRendererCanvas.ts b/apps/mark/src/lib/features/diff/connectorRendererCanvas.ts
deleted file mode 100644
index a7bb3ca8..00000000
--- a/apps/mark/src/lib/features/diff/connectorRendererCanvas.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export from shared package
-export { ConnectorRendererCanvas, type CommentHighlightInfo } from '@builderbot/diff-viewer/utils';
diff --git a/apps/mark/src/lib/features/diff/diffKeyboard.ts b/apps/mark/src/lib/features/diff/diffKeyboard.ts
deleted file mode 100644
index 7f676549..00000000
--- a/apps/mark/src/lib/features/diff/diffKeyboard.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export from shared package
-export { setupDiffKeyboardNav } from '@builderbot/diff-viewer/utils';
diff --git a/apps/mark/src/lib/features/diff/diffUtils.ts b/apps/mark/src/lib/features/diff/diffUtils.ts
deleted file mode 100644
index 3f183a7e..00000000
--- a/apps/mark/src/lib/features/diff/diffUtils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Re-export from shared package
-export {
-  getDisplayPath,
-  getFilePath,
-  getLineBoundary,
-  getLanguageFromDiff,
-  isBinaryDiff,
-  getTextLines,
-  referenceFileAsDiff,
-} from '@builderbot/diff-viewer/utils';
diff --git a/apps/mark/src/lib/features/diff/diffViewerHelpers.ts b/apps/mark/src/lib/features/diff/diffViewerHelpers.ts
deleted file mode 100644
index 76f306bd..00000000
--- a/apps/mark/src/lib/features/diff/diffViewerHelpers.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Re-export from shared package
-export {
-  buildLineToAlignmentMap,
-  buildBeforeMarkers,
-  buildAfterMarkers,
-  findCommentById,
-  getCommentsForAlignment,
-  getTokensForLine,
-  isLineInChangedAlignment,
-  isLineInIndexedRange,
-  isLineSelected,
-  buildLineCommentEditorLayout,
-  buildLineSelectionToolbarLayout,
-  buildRangeCommentEditorLayout,
-  decideCommentPositionBySpace,
-  measureContentWidth,
-  measureLineHeight,
-  normalizeLineSelection,
-  resolveLineSelectionToolbarLeft,
-} from '@builderbot/diff-viewer/utils';
diff --git a/apps/mark/src/lib/features/diff/markdownScrollSync.ts b/apps/mark/src/lib/features/diff/markdownScrollSync.ts
deleted file mode 100644
index a11076be..00000000
--- a/apps/mark/src/lib/features/diff/markdownScrollSync.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export from shared package
-export { setupMarkdownScrollSync } from '@builderbot/diff-viewer/utils';
diff --git a/apps/mark/src/lib/features/diff/scrollController.svelte.ts b/apps/mark/src/lib/features/diff/scrollController.svelte.ts
deleted file mode 100644
index 902cd068..00000000
--- a/apps/mark/src/lib/features/diff/scrollController.svelte.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export from shared package
-export { createScrollController } from '@builderbot/diff-viewer/state';
diff --git a/apps/mark/src/lib/shared/HorizontalScrollbar.svelte b/apps/mark/src/lib/shared/HorizontalScrollbar.svelte
deleted file mode 100644
index 442cdf04..00000000
--- a/apps/mark/src/lib/shared/HorizontalScrollbar.svelte
+++ /dev/null
@@ -1,238 +0,0 @@
-<!--
-  HorizontalScrollbar.svelte - Custom horizontal scrollbar
-
-  A fully custom horizontal scrollbar for transform-based scrolling.
-  Handles drag, wheel, and track click interactions.
-  Fades out when inactive.
--->
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  interface Props {
-    /** Current scroll position in pixels */
-    scrollX: number;
-    /** Total content width in pixels */
-    contentWidth: number;
-    /** Visible viewport width in pixels */
-    viewportWidth: number;
-    /** Callback when user scrolls via this scrollbar */
-    onScroll: (deltaX: number) => void;
-  }
-
-  let { scrollX, contentWidth, viewportWidth, onScroll }: Props = $props();
-
-  // ==========================================================================
-  // State
-  // ==========================================================================
-
-  let trackEl: HTMLDivElement | null = $state(null);
-  let isDragging = $state(false);
-  let isHovered = $state(false);
-  let isActive = $state(false);
-  let fadeTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  // ==========================================================================
-  // Derived values
-  // ==========================================================================
-
-  /** Maximum scroll position */
-  let maxScroll = $derived(Math.max(0, contentWidth - viewportWidth));
-
-  /** Thumb width as percentage of track */
-  let thumbWidthPercent = $derived(
-    contentWidth > 0 ? Math.max(10, (viewportWidth / contentWidth) * 100) : 100
-  );
-
-  /** Thumb position as percentage of track */
-  let thumbLeftPercent = $derived(
-    maxScroll > 0 ? (scrollX / maxScroll) * (100 - thumbWidthPercent) : 0
-  );
-
-  /** Whether scrollbar should be visible (content overflows) */
-  let canScroll = $derived(contentWidth > viewportWidth);
-
-  /** Whether scrollbar is visible (can scroll and is active/hovered) */
-  let isVisible = $derived(canScroll && (isActive || isHovered || isDragging));
-
-  // ==========================================================================
-  // Activity tracking (for fade in/out)
-  // ==========================================================================
-
-  function showScrollbar() {
-    isActive = true;
-    if (fadeTimeout) clearTimeout(fadeTimeout);
-    fadeTimeout = setTimeout(() => {
-      isActive = false;
-    }, 1500);
-  }
-
-  // Show scrollbar when scroll position changes
-  $effect(() => {
-    const _ = scrollX;
-    if (canScroll) {
-      showScrollbar();
-    }
-  });
-
-  // ==========================================================================
-  // Drag handling
-  // ==========================================================================
-
-  let dragStartX = 0;
-  let dragStartScrollX = 0;
-
-  function handleThumbMouseDown(e: MouseEvent) {
-    if (e.button !== 0) return;
-    e.preventDefault();
-    e.stopPropagation();
-
-    isDragging = true;
-    dragStartX = e.clientX;
-    dragStartScrollX = scrollX;
-
-    document.addEventListener('mousemove', handleDragMove);
-    document.addEventListener('mouseup', handleDragEnd);
-  }
-
-  function handleDragMove(e: MouseEvent) {
-    if (!isDragging || !trackEl) return;
-
-    const trackWidth = trackEl.clientWidth;
-    const thumbWidth = (thumbWidthPercent / 100) * trackWidth;
-    const availableTrack = trackWidth - thumbWidth;
-
-    if (availableTrack <= 0) return;
-
-    const deltaX = e.clientX - dragStartX;
-    const scrollDelta = (deltaX / availableTrack) * maxScroll;
-    const newScrollX = Math.max(0, Math.min(maxScroll, dragStartScrollX + scrollDelta));
-
-    onScroll(newScrollX - scrollX);
-  }
-
-  function handleDragEnd() {
-    isDragging = false;
-    document.removeEventListener('mousemove', handleDragMove);
-    document.removeEventListener('mouseup', handleDragEnd);
-  }
-
-  // ==========================================================================
-  // Track click handling
-  // ==========================================================================
-
-  function handleTrackClick(e: MouseEvent) {
-    if (!trackEl || isDragging) return;
-
-    const target = e.target as HTMLElement;
-    if (target.classList.contains('thumb')) return;
-
-    const trackRect = trackEl.getBoundingClientRect();
-    const clickX = e.clientX - trackRect.left;
-    const trackWidth = trackRect.width;
-
-    // Jump so the thumb center is at the click position
-    const thumbWidthPx = (thumbWidthPercent / 100) * trackWidth;
-    const targetThumbLeft = clickX - thumbWidthPx / 2;
-    const availableTrack = trackWidth - thumbWidthPx;
-
-    if (availableTrack <= 0) return;
-
-    const targetScrollX = (targetThumbLeft / availableTrack) * maxScroll;
-    const clampedScrollX = Math.max(0, Math.min(maxScroll, targetScrollX));
-
-    onScroll(clampedScrollX - scrollX);
-  }
-
-  // ==========================================================================
-  // Wheel handling (when hovering the scrollbar itself)
-  // ==========================================================================
-
-  function handleWheel(e: WheelEvent) {
-    if (!canScroll) return;
-    e.preventDefault();
-    // Use deltaX if available, otherwise use deltaY (for shift+wheel)
-    const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY;
-    onScroll(delta);
-  }
-
-  // ==========================================================================
-  // Cleanup
-  // ==========================================================================
-
-  onMount(() => {
-    return () => {
-      if (fadeTimeout) clearTimeout(fadeTimeout);
-      document.removeEventListener('mousemove', handleDragMove);
-      document.removeEventListener('mouseup', handleDragEnd);
-    };
-  });
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="scrollbar-h"
-  class:visible={isVisible}
-  class:dragging={isDragging}
-  onmouseenter={() => (isHovered = true)}
-  onmouseleave={() => (isHovered = false)}
-  onwheel={handleWheel}
->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="track" bind:this={trackEl} onclick={handleTrackClick}>
-    <!-- Thumb -->
-    {#if canScroll}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="thumb"
-        style="left: {thumbLeftPercent}%; width: {thumbWidthPercent}%;"
-        onmousedown={handleThumbMouseDown}
-      ></div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .scrollbar-h {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 12px;
-    padding: 2px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    z-index: 10;
-  }
-
-  .scrollbar-h.visible {
-    opacity: 1;
-  }
-
-  .track {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    background: transparent;
-  }
-
-  .scrollbar-h:hover .track {
-    background: var(--scrollbar-track, rgba(128, 128, 128, 0.1));
-  }
-
-  .thumb {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    min-width: 20px;
-    border-radius: 4px;
-    background: var(--scrollbar-thumb-transparent);
-    cursor: pointer;
-    transition: background 0.1s ease;
-  }
-
-  .thumb:hover,
-  .scrollbar-h.dragging .thumb {
-    background: var(--scrollbar-thumb-hover-transparent);
-  }
-</style>
diff --git a/apps/mark/src/lib/shared/Scrollbar.svelte b/apps/mark/src/lib/shared/Scrollbar.svelte
deleted file mode 100644
index bdf4a1e2..00000000
--- a/apps/mark/src/lib/shared/Scrollbar.svelte
+++ /dev/null
@@ -1,292 +0,0 @@
-<!--
-  Scrollbar.svelte - Custom scrollbar with markers
-  
-  A fully custom scrollbar that can be positioned on either side.
-  Handles drag, wheel, and track click interactions.
-  Shows markers for changes and comments.
-  Fades out when inactive.
--->
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  interface Marker {
-    /** Position as percentage (0-100) */
-    top: number;
-    /** Height as percentage (0-100) */
-    height: number;
-    /** Type determines color */
-    type: 'change' | 'comment' | 'annotation';
-  }
-
-  interface Props {
-    /** Current scroll position in pixels */
-    scrollY: number;
-    /** Total content height in pixels */
-    contentHeight: number;
-    /** Visible viewport height in pixels */
-    viewportHeight: number;
-    /** Which side to render on */
-    side: 'left' | 'right';
-    /** Callback when user scrolls via this scrollbar */
-    onScroll: (deltaY: number) => void;
-    /** Markers to show (changes, comments) */
-    markers?: Marker[];
-  }
-
-  let { scrollY, contentHeight, viewportHeight, side, onScroll, markers = [] }: Props = $props();
-
-  // ==========================================================================
-  // State
-  // ==========================================================================
-
-  let trackEl: HTMLDivElement | null = $state(null);
-  let isDragging = $state(false);
-  let isHovered = $state(false);
-  let isActive = $state(false);
-  let fadeTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  // ==========================================================================
-  // Derived values
-  // ==========================================================================
-
-  /** Maximum scroll position */
-  let maxScroll = $derived(Math.max(0, contentHeight - viewportHeight));
-
-  /** Thumb height as percentage of track */
-  let thumbHeightPercent = $derived(
-    contentHeight > 0 ? Math.max(10, (viewportHeight / contentHeight) * 100) : 100
-  );
-
-  /** Thumb position as percentage of track */
-  let thumbTopPercent = $derived(
-    maxScroll > 0 ? (scrollY / maxScroll) * (100 - thumbHeightPercent) : 0
-  );
-
-  /** Whether scrollbar should be visible (content overflows) */
-  let canScroll = $derived(contentHeight > viewportHeight);
-
-  /** Whether scrollbar is visible (can scroll and is active/hovered) */
-  let isVisible = $derived(canScroll && (isActive || isHovered || isDragging));
-
-  // ==========================================================================
-  // Activity tracking (for fade in/out)
-  // ==========================================================================
-
-  function showScrollbar() {
-    isActive = true;
-    if (fadeTimeout) clearTimeout(fadeTimeout);
-    fadeTimeout = setTimeout(() => {
-      isActive = false;
-    }, 1500);
-  }
-
-  // Show scrollbar when scroll position changes
-  $effect(() => {
-    const _ = scrollY;
-    if (canScroll) {
-      showScrollbar();
-    }
-  });
-
-  // ==========================================================================
-  // Drag handling
-  // ==========================================================================
-
-  let dragStartY = 0;
-  let dragStartScrollY = 0;
-
-  function handleThumbMouseDown(e: MouseEvent) {
-    if (e.button !== 0) return;
-    e.preventDefault();
-    e.stopPropagation();
-
-    isDragging = true;
-    dragStartY = e.clientY;
-    dragStartScrollY = scrollY;
-
-    document.addEventListener('mousemove', handleDragMove);
-    document.addEventListener('mouseup', handleDragEnd);
-  }
-
-  function handleDragMove(e: MouseEvent) {
-    if (!isDragging || !trackEl) return;
-
-    const trackHeight = trackEl.clientHeight;
-    const thumbHeight = (thumbHeightPercent / 100) * trackHeight;
-    const availableTrack = trackHeight - thumbHeight;
-
-    if (availableTrack <= 0) return;
-
-    const deltaY = e.clientY - dragStartY;
-    const scrollDelta = (deltaY / availableTrack) * maxScroll;
-    const newScrollY = Math.max(0, Math.min(maxScroll, dragStartScrollY + scrollDelta));
-
-    onScroll(newScrollY - scrollY);
-  }
-
-  function handleDragEnd() {
-    isDragging = false;
-    document.removeEventListener('mousemove', handleDragMove);
-    document.removeEventListener('mouseup', handleDragEnd);
-  }
-
-  // ==========================================================================
-  // Track click handling
-  // ==========================================================================
-
-  function handleTrackClick(e: MouseEvent) {
-    if (!trackEl || isDragging) return;
-
-    const target = e.target as HTMLElement;
-    if (target.classList.contains('thumb')) return;
-
-    const trackRect = trackEl.getBoundingClientRect();
-    const clickY = e.clientY - trackRect.top;
-    const trackHeight = trackRect.height;
-
-    // Jump so the thumb center is at the click position
-    const thumbHeightPx = (thumbHeightPercent / 100) * trackHeight;
-    const targetThumbTop = clickY - thumbHeightPx / 2;
-    const availableTrack = trackHeight - thumbHeightPx;
-
-    if (availableTrack <= 0) return;
-
-    const targetScrollY = (targetThumbTop / availableTrack) * maxScroll;
-    const clampedScrollY = Math.max(0, Math.min(maxScroll, targetScrollY));
-
-    onScroll(clampedScrollY - scrollY);
-  }
-
-  // ==========================================================================
-  // Wheel handling (when hovering the scrollbar itself)
-  // ==========================================================================
-
-  function handleWheel(e: WheelEvent) {
-    if (!canScroll) return;
-    e.preventDefault();
-    onScroll(e.deltaY);
-  }
-
-  // ==========================================================================
-  // Cleanup
-  // ==========================================================================
-
-  onMount(() => {
-    return () => {
-      if (fadeTimeout) clearTimeout(fadeTimeout);
-      document.removeEventListener('mousemove', handleDragMove);
-      document.removeEventListener('mouseup', handleDragEnd);
-    };
-  });
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="scrollbar"
-  class:left={side === 'left'}
-  class:right={side === 'right'}
-  class:visible={isVisible}
-  class:dragging={isDragging}
-  onmouseenter={() => (isHovered = true)}
-  onmouseleave={() => (isHovered = false)}
-  onwheel={handleWheel}
->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="track" bind:this={trackEl} onclick={handleTrackClick}>
-    <!-- Markers layer (behind thumb) -->
-    {#each markers as marker}
-      <div
-        class="marker"
-        class:change={marker.type === 'change'}
-        class:comment={marker.type === 'comment'}
-        class:annotation={marker.type === 'annotation'}
-        style="top: {marker.top}%; height: {marker.height}%;"
-      ></div>
-    {/each}
-
-    <!-- Thumb -->
-    {#if canScroll}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="thumb"
-        style="top: {thumbTopPercent}%; height: {thumbHeightPercent}%;"
-        onmousedown={handleThumbMouseDown}
-      ></div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .scrollbar {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 12px;
-    padding: 2px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    z-index: 10;
-  }
-
-  .scrollbar.visible {
-    opacity: 1;
-  }
-
-  .scrollbar.left {
-    left: 0;
-  }
-
-  .scrollbar.right {
-    right: 0;
-  }
-
-  .track {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    background: transparent;
-  }
-
-  .scrollbar:hover .track {
-    background: var(--scrollbar-track, rgba(128, 128, 128, 0.1));
-  }
-
-  .thumb {
-    position: absolute;
-    left: 0;
-    right: 0;
-    min-height: 20px;
-    border-radius: 4px;
-    background: var(--scrollbar-thumb-transparent);
-    cursor: pointer;
-    transition: background 0.1s ease;
-  }
-
-  .thumb:hover,
-  .scrollbar.dragging .thumb {
-    background: var(--scrollbar-thumb-hover-transparent);
-  }
-
-  .marker {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 6px;
-    min-height: 2px;
-    border-radius: 1px;
-    pointer-events: none;
-  }
-
-  .marker.change {
-    background-color: var(--diff-range-border);
-  }
-
-  .marker.comment {
-    background-color: var(--diff-comment-highlight);
-  }
-
-  .marker.annotation {
-    background-color: var(--ui-accent);
-  }
-</style>

From 96c34babc8b8a307c2e2983f5aa7182dd335f2c7 Mon Sep 17 00:00:00 2001
From: Wes <wesb@block.xyz>
Date: Mon, 23 Feb 2026 14:06:17 -0700
Subject: [PATCH 2/2] refactor(mark): remove unused GitHub repo picker modal
 wrapper

---
 .../features/projects/GitHubRepoPicker.svelte |  3 +-
 .../projects/GitHubRepoPickerModal.svelte     | 59 -------------------
 2 files changed, 1 insertion(+), 61 deletions(-)
 delete mode 100644 apps/mark/src/lib/features/projects/GitHubRepoPickerModal.svelte

diff --git a/apps/mark/src/lib/features/projects/GitHubRepoPicker.svelte b/apps/mark/src/lib/features/projects/GitHubRepoPicker.svelte
index 1418e09c..3e56a867 100644
--- a/apps/mark/src/lib/features/projects/GitHubRepoPicker.svelte
+++ b/apps/mark/src/lib/features/projects/GitHubRepoPicker.svelte
@@ -2,8 +2,7 @@
   GitHubRepoPicker.svelte - Embeddable GitHub repo picker (no modal chrome)
 
   Standalone search + list for picking a GitHub repository.
-  Used inline inside NewProjectForm (with spring slide) and wrapped
-  by GitHubRepoPickerModal for standalone overlay usage.
+  Used inline inside NewProjectForm.
 -->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
diff --git a/apps/mark/src/lib/features/projects/GitHubRepoPickerModal.svelte b/apps/mark/src/lib/features/projects/GitHubRepoPickerModal.svelte
deleted file mode 100644
index 3a499c3a..00000000
--- a/apps/mark/src/lib/features/projects/GitHubRepoPickerModal.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<!--
-  GitHubRepoPickerModal.svelte - Overlay modal wrapper for the repo picker
-
-  Thin wrapper that renders GitHubRepoPicker inside a modal backdrop.
-  Used by ProjectHome for standalone "add repo" flows.
-  NewProjectForm uses GitHubRepoPicker directly with an inline slide.
--->
-<script lang="ts">
-  import { createBackdropDismissHandlers } from '../../shared/backdropDismiss';
-  import GitHubRepoPicker from './GitHubRepoPicker.svelte';
-
-  interface Props {
-    onSelect: (nameWithOwner: string, subpath?: string) => void;
-    onClose: () => void;
-    excludeRepos?: Set<string>;
-  }
-
-  let { onSelect, onClose, excludeRepos }: Props = $props();
-  const backdropDismiss = createBackdropDismissHandlers({ onDismiss: () => onClose() });
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  class="modal-backdrop"
-  role="dialog"
-  aria-modal="true"
-  tabindex="-1"
-  onpointerdown={backdropDismiss.handlePointerDown}
-  onclick={backdropDismiss.handleClick}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
->
-  <div class="modal">
-    <GitHubRepoPicker {onSelect} onBack={onClose} {excludeRepos} />
-  </div>
-</div>
-
-<style>
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: var(--shadow-overlay);
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-top: 12vh;
-    z-index: 1000;
-  }
-
-  .modal {
-    width: 520px;
-    max-width: 90vw;
-    max-height: 70vh;
-    background-color: var(--bg-chrome);
-    border-radius: 12px;
-    box-shadow: var(--shadow-elevated);
-    display: flex;
-    flex-direction: column;
-  }
-</style>