polen 0.10.0-next.11 → 0.10.0-next.13

package/src/lib/graphql-document/hooks/use-tooltip-state.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Unit tests for tooltip state management hook
+ *
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { useTooltipState } from './use-tooltip-state.ts'
+
+describe('useTooltipState', () => {
+  it('shows tooltip after hover delay', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() => useTooltipState({ showDelay: 300 }))
+
+    act(() => {
+      result.current.onHoverStart('field-1')
+    })
+    expect(result.current.isOpen('field-1')).toBe(false)
+
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+    expect(result.current.isOpen('field-1')).toBe(true)
+    vi.useRealTimers()
+  })
+
+  it('hides tooltip after hover end delay', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() => useTooltipState())
+
+    // Show tooltip
+    act(() => {
+      result.current.onHoverStart('field-1')
+      vi.advanceTimersByTime(300)
+    })
+
+    // Trigger hide
+    act(() => {
+      result.current.onHoverEnd('field-1')
+    })
+    expect(result.current.isOpen('field-1')).toBe(true) // Still open during delay
+
+    act(() => {
+      vi.advanceTimersByTime(200)
+    })
+    expect(result.current.isOpen('field-1')).toBe(false)
+    vi.useRealTimers()
+  })
+
+  it('pins and unpins tooltip on toggle', () => {
+    const { result } = renderHook(() => useTooltipState())
+
+    act(() => {
+      result.current.onTogglePin('field-1')
+    })
+    expect(result.current.isPinned('field-1')).toBe(true)
+
+    act(() => {
+      result.current.onTogglePin('field-1')
+    })
+    expect(result.current.isPinned('field-1')).toBe(false)
+  })
+
+  it('allows multiple pins when enabled', () => {
+    const { result } = renderHook(() => useTooltipState())
+
+    act(() => {
+      result.current.onTogglePin('field-1')
+      result.current.onTogglePin('field-2')
+    })
+
+    expect(result.current.isPinned('field-1')).toBe(true)
+    expect(result.current.isPinned('field-2')).toBe(true)
+  })
+})

package/src/lib/graphql-document/hooks/use-tooltip-state.ts

@@ -0,0 +1,191 @@
+/**
+ * State management for GraphQL document tooltips
+ *
+ * Handles hover delays, pinning, and multiple tooltip coordination
+ */
+
+import { React } from '#dep/react/index'
+
+export interface TooltipState {
+  /** Currently visible tooltip (via hover) */
+  hoveredId: string | null
+  /** Set of pinned tooltip IDs */
+  pinnedIds: Set<string>
+  /** ID pending show (waiting for delay) */
+  pendingShowId: string | null
+  /** ID pending hide (waiting for grace period) */
+  pendingHideId: string | null
+}
+
+export interface UseTooltipStateOptions {
+  /** Delay before showing tooltip on hover (ms) */
+  showDelay?: number
+  /** Delay before hiding tooltip on mouse leave (ms) */
+  hideDelay?: number
+  /** Whether to allow multiple pinned tooltips */
+  allowMultiplePins?: boolean
+}
+
+export interface UseTooltipStateReturn {
+  /** Check if a tooltip should be visible */
+  isOpen: (id: string) => boolean
+  /** Check if a tooltip is pinned */
+  isPinned: (id: string) => boolean
+  /** Handle hover start */
+  onHoverStart: (id: string) => void
+  /** Handle hover end */
+  onHoverEnd: (id: string) => void
+  /** Handle click (toggle pin) */
+  onTogglePin: (id: string) => void
+  /** Handle tooltip content hover (cancels hide) */
+  onTooltipHover: (id: string) => void
+  /** Unpin a specific tooltip */
+  unpin: (id: string) => void
+  /** Unpin all tooltips */
+  unpinAll: () => void
+}
+
+export const useTooltipState = (options: UseTooltipStateOptions = {}): UseTooltipStateReturn => {
+  const {
+    showDelay = 300,
+    hideDelay = 200,
+    allowMultiplePins = true,
+  } = options
+
+  const [hoveredId, setHoveredId] = React.useState<string | null>(null)
+  const [pinnedIds, setPinnedIds] = React.useState<Set<string>>(new Set())
+  const [pendingShowId, setPendingShowId] = React.useState<string | null>(null)
+  const [pendingHideId, setPendingHideId] = React.useState<string | null>(null)
+
+  // Timer refs
+  const showTimerRef = React.useRef<NodeJS.Timeout | null>(null)
+  const hideTimerRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  // Clear any pending timers
+  const clearTimers = React.useCallback(() => {
+    if (showTimerRef.current) {
+      clearTimeout(showTimerRef.current)
+      showTimerRef.current = null
+    }
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current)
+      hideTimerRef.current = null
+    }
+    setPendingShowId(null)
+    setPendingHideId(null)
+  }, [])
+
+  // Check if tooltip should be visible
+  const isOpen = React.useCallback((id: string): boolean => {
+    return hoveredId === id || pinnedIds.has(id)
+  }, [hoveredId, pinnedIds])
+
+  // Check if tooltip is pinned
+  const isPinned = React.useCallback((id: string): boolean => {
+    return pinnedIds.has(id)
+  }, [pinnedIds])
+
+  // Handle hover start
+  const onHoverStart = React.useCallback((id: string) => {
+    // Don't show if already pinned
+    if (pinnedIds.has(id)) return
+
+    // Cancel any pending hide for this ID
+    if (pendingHideId === id) {
+      clearTimeout(hideTimerRef.current!)
+      hideTimerRef.current = null
+      setPendingHideId(null)
+      return
+    }
+
+    // Clear any other pending operations
+    clearTimers()
+
+    // Schedule show
+    setPendingShowId(id)
+    showTimerRef.current = setTimeout(() => {
+      setHoveredId(id)
+      setPendingShowId(null)
+    }, showDelay)
+  }, [pinnedIds, pendingHideId, clearTimers, showDelay])
+
+  // Handle hover end
+  const onHoverEnd = React.useCallback((id: string) => {
+    // Don't hide if pinned
+    if (pinnedIds.has(id)) return
+
+    // Cancel pending show if still waiting
+    if (pendingShowId === id) {
+      clearTimeout(showTimerRef.current!)
+      showTimerRef.current = null
+      setPendingShowId(null)
+      return
+    }
+
+    // Only hide if currently showing this tooltip
+    if (hoveredId === id) {
+      setPendingHideId(id)
+      hideTimerRef.current = setTimeout(() => {
+        // First set hovered to null to trigger close animation
+        setHoveredId(null)
+        setPendingHideId(null)
+      }, hideDelay)
+    }
+  }, [pinnedIds, pendingShowId, hoveredId, hideDelay])
+
+  // Handle tooltip content hover (cancels hide)
+  const onTooltipHover = React.useCallback((id: string) => {
+    if (pendingHideId === id) {
+      clearTimeout(hideTimerRef.current!)
+      hideTimerRef.current = null
+      setPendingHideId(null)
+    }
+  }, [pendingHideId])
+
+  // Toggle pin state
+  const onTogglePin = React.useCallback((id: string) => {
+    clearTimers()
+
+    setPinnedIds((prev: Set<string>) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        // Unpin
+        next.delete(id)
+        setHoveredId(null) // Also clear hover state
+      } else {
+        // Pin
+        if (!allowMultiplePins) {
+          next.clear() // Clear other pins
+        }
+        next.add(id)
+        setHoveredId(null) // Clear hover state since it's now pinned
+      }
+      return next
+    })
+  }, [clearTimers, allowMultiplePins])
+
+  // Unpin specific tooltip
+  const unpin = React.useCallback((id: string) => {
+    setPinnedIds((prev: Set<string>) => {
+      const next = new Set(prev)
+      next.delete(id)
+      return next
+    })
+  }, [])
+
+  // Unpin all tooltips
+  const unpinAll = React.useCallback(() => {
+    setPinnedIds(new Set())
+  }, [])
+
+  return {
+    isOpen,
+    isPinned,
+    onHoverStart,
+    onHoverEnd,
+    onTogglePin,
+    onTooltipHover,
+    unpin,
+    unpinAll,
+  }
+}

package/src/lib/graphql-document/positioning-simple.test.ts

@@ -0,0 +1,252 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createSimpleOverlay, createSimplePositionCalculator } from './positioning-simple.ts'
+import type { Identifier } from './types.ts'
+
+// Helper to create test identifier
+const createTestIdentifier = (
+  name: string,
+  line: number,
+  column: number,
+  kind: Identifier['kind'] = 'Field',
+): Identifier => ({
+  name,
+  kind,
+  position: {
+    start: column - 1,
+    end: column - 1 + name.length,
+    line,
+    column,
+  },
+  schemaPath: [name],
+  context: { selectionPath: [] },
+})
+
+describe('Simple Positioning Engine', () => {
+  describe('SimplePositionCalculator', () => {
+    const calculator = createSimplePositionCalculator()
+
+    it('should wrap identifiers in spans', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line">query GetUser {</span>
+            <span class="line">  user {</span>
+            <span class="line">    name</span>
+            <span class="line">  }</span>
+            <span class="line">}</span>
+          </code>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('query', 1, 1),
+        createTestIdentifier('user', 2, 3, 'Field'),
+        createTestIdentifier('name', 3, 5, 'Field'),
+      ]
+
+      calculator.prepareCodeBlock(container, identifiers)
+
+      // Check that identifiers were wrapped
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(3)
+
+      // Check first wrapped element
+      const firstWrapped = wrappedElements[0] as HTMLElement
+      expect(firstWrapped.textContent).toBe('query')
+      expect(firstWrapped.getAttribute('data-graphql-name')).toBe('query')
+      expect(firstWrapped.getAttribute('data-graphql-kind')).toBe('Field')
+    })
+
+    it('should handle multiple identifiers in same line', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line">query GetUserById($id: ID!) {</span>
+          </code>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('query', 1, 1),
+        createTestIdentifier('GetUserById', 1, 7),
+        createTestIdentifier('$id', 1, 19, 'Variable'),
+        createTestIdentifier('ID', 1, 24, 'Type'),
+      ]
+
+      calculator.prepareCodeBlock(container, identifiers)
+
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(4)
+    })
+
+    it('should get positions of wrapped identifiers', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line"><span data-graphql-id="0-user-Field" data-graphql-name="user" data-graphql-kind="Field" data-graphql-start="0" data-graphql-end="4" data-graphql-line="1" data-graphql-column="1" data-graphql-path="user">user</span> {</span>
+          </code>
+        </pre>
+      `
+
+      // Mock getBoundingClientRect
+      container.getBoundingClientRect = () => ({
+        top: 0,
+        left: 0,
+        right: 100,
+        bottom: 100,
+        width: 100,
+        height: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      })
+
+      const userSpan = container.querySelector('[data-graphql-id]') as HTMLElement
+      userSpan.getBoundingClientRect = () => ({
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 30,
+        width: 40,
+        height: 20,
+        x: 20,
+        y: 10,
+        toJSON: () => ({}),
+      })
+
+      const positions = calculator.getIdentifierPositions(container)
+
+      expect(positions.size).toBe(1)
+      const result = positions.get('0-user-Field')
+      expect(result).toBeDefined()
+      expect(result!.position).toEqual({
+        top: 10,
+        left: 20,
+        width: 40,
+        height: 20,
+      })
+      expect(result!.identifier.name).toBe('user')
+      expect(result!.identifier.kind).toBe('Field')
+    })
+
+    it('should skip already wrapped identifiers', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line"><span data-graphql-id="existing">user</span> {</span>
+          </code>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('user', 1, 1),
+      ]
+
+      calculator.prepareCodeBlock(container, identifiers)
+
+      // Should still only have one wrapped element
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(1)
+      expect(wrappedElements[0]!.getAttribute('data-graphql-id')).toBe('existing')
+    })
+
+    it('should handle empty lines gracefully', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <pre class="shiki">
+          <code>
+            <span class="line">query {</span>
+            <span class="line"></span>
+            <span class="line">  user</span>
+          </code>
+        </pre>
+      `
+
+      const identifiers = [
+        createTestIdentifier('query', 1, 1),
+        createTestIdentifier('user', 3, 3),
+      ]
+
+      expect(() => {
+        calculator.prepareCodeBlock(container, identifiers)
+      }).not.toThrow()
+
+      const wrappedElements = container.querySelectorAll('[data-graphql-id]')
+      expect(wrappedElements.length).toBe(2)
+    })
+  })
+
+  describe('createSimpleOverlay', () => {
+    it('should create positioned overlay element', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+
+      const overlay = createSimpleOverlay(position, identifier)
+
+      expect(overlay.style.position).toBe('absolute')
+      expect(overlay.style.top).toBe('10px')
+      expect(overlay.style.left).toBe('20px')
+      expect(overlay.style.width).toBe('40px')
+      expect(overlay.style.height).toBe('20px')
+      expect(overlay.style.cursor).toBe('pointer')
+      expect(overlay.getAttribute('data-graphql-overlay')).toBe('true')
+      expect(overlay.getAttribute('data-graphql-name')).toBe('user')
+      expect(overlay.getAttribute('data-graphql-kind')).toBe('Field')
+    })
+
+    it('should handle click events', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+      let clickedIdentifier: Identifier | null = null
+
+      const overlay = createSimpleOverlay(position, identifier, {
+        onClick: (id) => {
+          clickedIdentifier = id
+        },
+      })
+
+      // Simulate click
+      const event = new MouseEvent('click')
+      overlay.dispatchEvent(event)
+
+      expect(clickedIdentifier).toBe(identifier)
+    })
+
+    it('should handle hover events', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+      let hoveredIdentifier: Identifier | null = null
+
+      const overlay = createSimpleOverlay(position, identifier, {
+        onHover: (id) => {
+          hoveredIdentifier = id
+        },
+      })
+
+      // Simulate hover
+      const event = new MouseEvent('mouseenter')
+      overlay.dispatchEvent(event)
+
+      expect(hoveredIdentifier).toBe(identifier)
+    })
+
+    it('should apply custom className', () => {
+      const position = { top: 10, left: 20, width: 40, height: 20 }
+      const identifier = createTestIdentifier('user', 1, 1)
+
+      const overlay = createSimpleOverlay(position, identifier, {
+        className: 'custom-overlay-class',
+      })
+
+      expect(overlay.className).toBe('custom-overlay-class')
+    })
+  })
+})