polen 0.10.0 → 0.11.0-next.2

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

@@ -1,76 +0,0 @@
-/**
- * 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.js'
-
-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

@@ -1,191 +0,0 @@
-/**
- * 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

@@ -1,248 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { describe, expect, it } from 'vitest'
-import { createSimpleOverlay, createSimplePositionCalculator } from './positioning-simple.js'
-import type { Identifier } from './types.js'
-
-// 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="code-block">
-          <code>query GetUser {
-  user {
-    name
-  }
-}</code>
-        </pre>
-      `
-
-      const identifiers = [
-        createTestIdentifier('query', 1, 1),
-        createTestIdentifier('user', 2, 3, 'Field'),
-        createTestIdentifier('name', 3, 5, 'Field'),
-      ]
-
-      const codeElement = container.querySelector('code')!
-      calculator.prepareCodeBlock(codeElement, 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="code-block">
-          <code>query GetUserById($id: ID!) {</code>
-        </pre>
-      `
-
-      const identifiers = [
-        createTestIdentifier('query', 1, 1),
-        createTestIdentifier('GetUserById', 1, 7),
-        createTestIdentifier('$id', 1, 19, 'Variable'),
-        createTestIdentifier('ID', 1, 24, 'Type'),
-      ]
-
-      const codeElement = container.querySelector('code')!
-      calculator.prepareCodeBlock(codeElement, 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="code-block">
-          <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]')!
-      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="code-block">
-          <code><span data-graphql-id="existing">user</span> {</code>
-        </pre>
-      `
-
-      const identifiers = [
-        createTestIdentifier('user', 1, 1),
-      ]
-
-      const codeElement = container.querySelector('code')!
-      calculator.prepareCodeBlock(codeElement, 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="code-block">
-          <code>query {
-
-  user</code>
-        </pre>
-      `
-
-      const identifiers = [
-        createTestIdentifier('query', 1, 1),
-        createTestIdentifier('user', 3, 3),
-      ]
-
-      const codeElement = container.querySelector('code')!
-      expect(() => {
-        calculator.prepareCodeBlock(codeElement, 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')
-    })
-  })
-})