wip(app): line selection

2026-01-04 15:40:25 -06:00
parent 2e53697da0
commit 640d1f1ecc
7 changed files with 788 additions and 261 deletions
--- a/packages/ui/src/components/code.tsx
+++ b/packages/ui/src/components/code.tsx
@@ -9,6 +9,7 @@ export type CodeProps<T = {}> = FileOptions<T> & {
  file: FileContents
  annotations?: LineAnnotation<T>[]
  selectedLines?: SelectedLineRange | null
+  onRendered?: () => void
  class?: string
  classList?: ComponentProps<"div">["classList"]
 }
@@ -45,8 +46,32 @@ function findSide(node: Node | null): SelectionSide | undefined {

 export function Code<T>(props: CodeProps<T>) {
  let container!: HTMLDivElement
+  let observer: MutationObserver | undefined
+  let renderToken = 0
+  let selectionFrame: number | undefined
+  let dragFrame: number | undefined
+  let dragStart: number | undefined
+  let dragEnd: number | undefined
+  let dragMoved = false

-  const [local, others] = splitProps(props, ["file", "class", "classList", "annotations", "selectedLines"])
+  const [local, others] = splitProps(props, [
+    "file",
+    "class",
+    "classList",
+    "annotations",
+    "selectedLines",
+    "onRendered",
+  ])
+
+  const handleLineClick: FileOptions<T>["onLineClick"] = (info) => {
+    props.onLineClick?.(info)
+
+    if (props.enableLineSelection !== true) return
+    if (info.numberColumn) return
+    if (!local.selectedLines) return
+
+    file().setSelectedLines(null)
+  }

  const file = createMemo(
    () =>
@@ -54,6 +79,7 @@ export function Code<T>(props: CodeProps<T>) {
        {
          ...createDefaultOptions<T>("unified"),
          ...others,
+          onLineClick: props.enableLineSelection === true || props.onLineClick ? handleLineClick : undefined,
        },
        getWorkerPool("unified"),
      ),
@@ -69,37 +95,218 @@ export function Code<T>(props: CodeProps<T>) {
    return root
  }

-  const handleMouseUp = () => {
-    if (props.enableLineSelection !== true) return
+  const notifyRendered = () => {
+    if (!local.onRendered) return

+    observer?.disconnect()
+    observer = undefined
+    renderToken++
+
+    const token = renderToken
+
+    const lines = (() => {
+      const text = local.file.contents
+      const total = text.split("\n").length - (text.endsWith("\n") ? 1 : 0)
+      return Math.max(1, total)
+    })()
+
+    const isReady = (root: ShadowRoot) => root.querySelectorAll("[data-line]").length >= lines
+
+    const notify = () => {
+      if (token !== renderToken) return
+
+      observer?.disconnect()
+      observer = undefined
+      requestAnimationFrame(() => {
+        if (token !== renderToken) return
+        local.onRendered?.()
+      })
+    }
+
+    const root = getRoot()
+    if (root && isReady(root)) {
+      notify()
+      return
+    }
+
+    if (typeof MutationObserver === "undefined") return
+
+    const observeRoot = (root: ShadowRoot) => {
+      if (isReady(root)) {
+        notify()
+        return
+      }
+
+      observer?.disconnect()
+      observer = new MutationObserver(() => {
+        if (token !== renderToken) return
+        if (!isReady(root)) return
+
+        notify()
+      })
+
+      observer.observe(root, { childList: true, subtree: true })
+    }
+
+    if (root) {
+      observeRoot(root)
+      return
+    }
+
+    observer = new MutationObserver(() => {
+      if (token !== renderToken) return
+
+      const root = getRoot()
+      if (!root) return
+
+      observeRoot(root)
+    })
+
+    observer.observe(container, { childList: true, subtree: true })
+  }
+
+  const updateSelection = () => {
    const root = getRoot()
    if (!root) return

-    const selection = window.getSelection()
+    const selection =
+      (root as unknown as { getSelection?: () => Selection | null }).getSelection?.() ?? window.getSelection()
    if (!selection || selection.isCollapsed) return

-    const anchor = selection.anchorNode
-    const focus = selection.focusNode
-    if (!anchor || !focus) return
-    if (!root.contains(anchor) || !root.contains(focus)) return
+    const domRange =
+      (
+        selection as unknown as {
+          getComposedRanges?: (options?: { shadowRoots?: ShadowRoot[] }) => Range[]
+        }
+      ).getComposedRanges?.({ shadowRoots: [root] })?.[0] ??
+      (selection.rangeCount > 0 ? selection.getRangeAt(0) : undefined)

-    const start = findLineNumber(anchor)
-    const end = findLineNumber(focus)
+    const startNode = domRange?.startContainer ?? selection.anchorNode
+    const endNode = domRange?.endContainer ?? selection.focusNode
+    if (!startNode || !endNode) return
+
+    if (!root.contains(startNode) || !root.contains(endNode)) return
+
+    const start = findLineNumber(startNode)
+    const end = findLineNumber(endNode)
    if (start === undefined || end === undefined) return

-    const startSide = findSide(anchor)
-    const endSide = findSide(focus)
+    const startSide = findSide(startNode)
+    const endSide = findSide(endNode)
    const side = startSide ?? endSide

-    const range: SelectedLineRange = {
+    const selected: SelectedLineRange = {
      start,
      end,
    }

-    if (side) range.side = side
-    if (endSide && side && endSide !== side) range.endSide = endSide
+    if (side) selected.side = side
+    if (endSide && side && endSide !== side) selected.endSide = endSide

-    file().setSelectedLines(range)
+    file().setSelectedLines(selected)
+  }
+
+  const scheduleSelectionUpdate = () => {
+    if (selectionFrame !== undefined) return
+
+    selectionFrame = requestAnimationFrame(() => {
+      selectionFrame = undefined
+      updateSelection()
+    })
+  }
+
+  const updateDragSelection = () => {
+    if (dragStart === undefined || dragEnd === undefined) return
+
+    const start = Math.min(dragStart, dragEnd)
+    const end = Math.max(dragStart, dragEnd)
+
+    file().setSelectedLines({ start, end })
+  }
+
+  const scheduleDragUpdate = () => {
+    if (dragFrame !== undefined) return
+
+    dragFrame = requestAnimationFrame(() => {
+      dragFrame = undefined
+      updateDragSelection()
+    })
+  }
+
+  const lineFromMouseEvent = (event: MouseEvent) => {
+    const path = event.composedPath()
+
+    let numberColumn = false
+    let line: number | undefined
+
+    for (const item of path) {
+      if (!(item instanceof HTMLElement)) continue
+
+      numberColumn = numberColumn || item.dataset.columnNumber != null
+
+      if (line === undefined && item.dataset.line) {
+        const parsed = parseInt(item.dataset.line, 10)
+        if (!Number.isNaN(parsed)) line = parsed
+      }
+
+      if (numberColumn && line !== undefined) break
+    }
+
+    return { line, numberColumn }
+  }
+
+  const handleMouseDown = (event: MouseEvent) => {
+    if (props.enableLineSelection !== true) return
+    if (event.button !== 0) return
+
+    const { line, numberColumn } = lineFromMouseEvent(event)
+    if (numberColumn) return
+    if (line === undefined) return
+
+    dragStart = line
+    dragEnd = line
+    dragMoved = false
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (props.enableLineSelection !== true) return
+    if (dragStart === undefined) return
+
+    if ((event.buttons & 1) === 0) {
+      dragStart = undefined
+      dragEnd = undefined
+      dragMoved = false
+      return
+    }
+
+    const { line } = lineFromMouseEvent(event)
+    if (line === undefined) return
+
+    dragEnd = line
+    dragMoved = true
+    scheduleDragUpdate()
+  }
+
+  const handleMouseUp = () => {
+    if (props.enableLineSelection !== true) return
+
+    if (dragStart !== undefined) {
+      if (dragMoved) scheduleDragUpdate()
+      dragStart = undefined
+      dragEnd = undefined
+      dragMoved = false
+    }
+
+    scheduleSelectionUpdate()
+  }
+
+  const handleSelectionChange = () => {
+    if (props.enableLineSelection !== true) return
+
+    const selection = window.getSelection()
+    if (!selection || selection.isCollapsed) return
+
+    scheduleSelectionUpdate()
  }

  createEffect(() => {
@@ -111,12 +318,17 @@ export function Code<T>(props: CodeProps<T>) {
  })

  createEffect(() => {
+    observer?.disconnect()
+    observer = undefined
+
    container.innerHTML = ""
    file().render({
      file: local.file,
      lineAnnotations: local.annotations,
      containerWrapper: container,
    })
+
+    notifyRendered()
  })

  createEffect(() => {
@@ -126,13 +338,37 @@ export function Code<T>(props: CodeProps<T>) {
  createEffect(() => {
    if (props.enableLineSelection !== true) return

-    container.addEventListener("mouseup", handleMouseUp)
+    container.addEventListener("mousedown", handleMouseDown)
+    container.addEventListener("mousemove", handleMouseMove)
+    window.addEventListener("mouseup", handleMouseUp)
+    document.addEventListener("selectionchange", handleSelectionChange)

    onCleanup(() => {
-      container.removeEventListener("mouseup", handleMouseUp)
+      container.removeEventListener("mousedown", handleMouseDown)
+      container.removeEventListener("mousemove", handleMouseMove)
+      window.removeEventListener("mouseup", handleMouseUp)
+      document.removeEventListener("selectionchange", handleSelectionChange)
    })
  })

+  onCleanup(() => {
+    observer?.disconnect()
+
+    if (selectionFrame !== undefined) {
+      cancelAnimationFrame(selectionFrame)
+      selectionFrame = undefined
+    }
+
+    if (dragFrame !== undefined) {
+      cancelAnimationFrame(dragFrame)
+      dragFrame = undefined
+    }
+
+    dragStart = undefined
+    dragEnd = undefined
+    dragMoved = false
+  })
+
  return (
    <div
      data-component="code"
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -7,7 +7,10 @@ import { getWorkerPool } from "../pierre/worker"

 export function Diff<T>(props: DiffProps<T>) {
  let container!: HTMLDivElement
-  const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
+  let observer: MutationObserver | undefined
+  let renderToken = 0
+
+  const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations", "onRendered"])

  const mobile = createMediaQuery("(max-width: 640px)")

@@ -25,6 +28,95 @@ export function Diff<T>(props: DiffProps<T>) {

  let instance: FileDiff<T> | undefined

+  const getRoot = () => {
+    const host = container.querySelector("diffs-container")
+    if (!(host instanceof HTMLElement)) return
+
+    const root = host.shadowRoot
+    if (!root) return
+
+    return root
+  }
+
+  const notifyRendered = () => {
+    if (!local.onRendered) return
+
+    observer?.disconnect()
+    observer = undefined
+    renderToken++
+
+    const token = renderToken
+    let settle = 0
+
+    const isReady = (root: ShadowRoot) => root.querySelector("[data-line]") != null
+
+    const notify = () => {
+      if (token !== renderToken) return
+
+      observer?.disconnect()
+      observer = undefined
+      requestAnimationFrame(() => {
+        if (token !== renderToken) return
+        local.onRendered?.()
+      })
+    }
+
+    const schedule = () => {
+      settle++
+      const current = settle
+
+      requestAnimationFrame(() => {
+        if (token !== renderToken) return
+        if (current !== settle) return
+
+        requestAnimationFrame(() => {
+          if (token !== renderToken) return
+          if (current !== settle) return
+
+          notify()
+        })
+      })
+    }
+
+    const observeRoot = (root: ShadowRoot) => {
+      observer?.disconnect()
+      observer = new MutationObserver(() => {
+        if (token !== renderToken) return
+        if (!isReady(root)) return
+
+        schedule()
+      })
+
+      observer.observe(root, { childList: true, subtree: true })
+
+      if (!isReady(root)) return
+      schedule()
+    }
+
+    const root = getRoot()
+    if (typeof MutationObserver === "undefined") {
+      if (!root || !isReady(root)) return
+      local.onRendered()
+      return
+    }
+
+    if (root) {
+      observeRoot(root)
+      return
+    }
+
+    observer = new MutationObserver(() => {
+      if (token !== renderToken) return
+
+      const root = getRoot()
+      if (!root) return
+
+      observeRoot(root)
+    })
+
+    observer.observe(container, { childList: true, subtree: true })
+  }
+
  createEffect(() => {
    const opts = options()
    const workerPool = getWorkerPool(props.diffStyle)
@@ -50,9 +142,12 @@ export function Diff<T>(props: DiffProps<T>) {
      lineAnnotations: annotations,
      containerWrapper: container,
    })
+
+    notifyRendered()
  })

  onCleanup(() => {
+    observer?.disconnect()
    instance?.cleanUp()
  })

--- a/packages/ui/src/components/session-review.tsx
+++ b/packages/ui/src/components/session-review.tsx
@@ -22,6 +22,7 @@ export interface SessionReviewProps {
  split?: boolean
  diffStyle?: SessionReviewDiffStyle
  onDiffStyleChange?: (diffStyle: SessionReviewDiffStyle) => void
+  onDiffRendered?: () => void
  open?: string[]
  onOpenChange?: (open: string[]) => void
  scrollRef?: (el: HTMLDivElement) => void
@@ -346,6 +347,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                          component={diffComponent}
                          preloadedDiff={diff.preloaded}
                          diffStyle={diffStyle()}
+                          onRendered={props.onDiffRendered}
                          before={{
                            name: diff.file!,
                            contents: beforeText(),
--- a/packages/ui/src/pierre/index.ts
+++ b/packages/ui/src/pierre/index.ts
@@ -5,6 +5,7 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
  before: FileContents
  after: FileContents
  annotations?: DiffLineAnnotation<T>[]
+  onRendered?: () => void
  class?: string
  classList?: ComponentProps<"div">["classList"]
 }
@@ -18,9 +19,9 @@ const unsafeCSS = `
  --diffs-bg-separator: var(--diffs-bg-separator-override, light-dark( color-mix(in lab, var(--diffs-bg) 96%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-mixer))));
  --diffs-fg: light-dark(var(--diffs-light), var(--diffs-dark));
  --diffs-fg-number: var(--diffs-fg-number-override, light-dark(color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)), color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))));
-  --diffs-deletion-base: var(--diffs-deletion-color-override, light-dark(var(--diffs-light-deletion-color, var(--diffs-deletion-color, rgb(255, 0, 0))), var(--diffs-dark-deletion-color, var(--diffs-deletion-color, rgb(255, 0, 0)))));
-  --diffs-addition-base: var(--diffs-addition-color-override, light-dark(var(--diffs-light-addition-color, var(--diffs-addition-color, rgb(0, 255, 0))), var(--diffs-dark-addition-color, var(--diffs-addition-color, rgb(0, 255, 0)))));
-  --diffs-modified-base: var(--diffs-modified-color-override, light-dark(var(--diffs-light-modified-color, var(--diffs-modified-color, rgb(0, 0, 255))), var(--diffs-dark-modified-color, var(--diffs-modified-color, rgb(0, 0, 255)))));
+  --diffs-deletion-base: var(--syntax-diff-delete);
+  --diffs-addition-base: var(--syntax-diff-add);
+  --diffs-modified-base: var(--syntax-diff-unknown);
  --diffs-bg-deletion: var(--diffs-bg-deletion-override, light-dark( color-mix(in lab, var(--diffs-bg) 98%, var(--diffs-deletion-base)), color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-deletion-base))));
  --diffs-bg-deletion-number: var(--diffs-bg-deletion-number-override, light-dark( color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-deletion-base)), color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-deletion-base))));
  --diffs-bg-deletion-hover: var(--diffs-bg-deletion-hover-override, light-dark( color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-deletion-base)), color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-deletion-base))));
@@ -29,10 +30,15 @@ const unsafeCSS = `
  --diffs-bg-addition-number: var(--diffs-bg-addition-number-override, light-dark( color-mix(in lab, var(--diffs-bg) 91%, var(--diffs-addition-base)), color-mix(in lab, var(--diffs-bg) 85%, var(--diffs-addition-base))));
  --diffs-bg-addition-hover: var(--diffs-bg-addition-hover-override, light-dark( color-mix(in lab, var(--diffs-bg) 80%, var(--diffs-addition-base)), color-mix(in lab, var(--diffs-bg) 70%, var(--diffs-addition-base))));
  --diffs-bg-addition-emphasis: var(--diffs-bg-addition-emphasis-override, light-dark(rgb(from var(--diffs-addition-base) r g b / 0.07), rgb(from var(--diffs-addition-base) r g b / 0.1)));
-  --diffs-selection-base: var(--diffs-modified-base);
+  --diffs-selection-base: var(--text-interactive-base);
  --diffs-selection-number-fg: light-dark( color-mix(in lab, var(--diffs-selection-base) 65%, var(--diffs-mixer)), color-mix(in lab, var(--diffs-selection-base) 75%, var(--diffs-mixer)));
-  --diffs-bg-selection: var(--diffs-bg-selection-override, light-dark( color-mix(in lab, var(--diffs-bg) 82%, var(--diffs-selection-base)), color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base))));
-  --diffs-bg-selection-number: var(--diffs-bg-selection-number-override, light-dark( color-mix(in lab, var(--diffs-bg) 75%, var(--diffs-selection-base)), color-mix(in lab, var(--diffs-bg) 60%, var(--diffs-selection-base))));
+  --diffs-bg-selection: var(--diffs-bg-selection-override, rgb(from var(--diffs-selection-base) r g b / 0.18));
+  --diffs-bg-selection-number: var(--diffs-bg-selection-number-override, rgb(from var(--diffs-selection-base) r g b / 0.22));
+  --diffs-bg-selection-text: rgb(from var(--diffs-selection-base) r g b / 0.12);
+}
+
+[data-diffs] ::selection {
+  background-color: var(--diffs-bg-selection-text);
 }

 [data-diffs-header],
@@ -57,6 +63,9 @@ const unsafeCSS = `
  [data-separator-content] {
    height: 24px !important;
  }
+  [data-column-number] {
+    background-color: var(--background-stronger);
+  }
  [data-code] {
    overflow-x: auto !important;
  }