polen 0.10.0-next.12 → 0.10.0-next.14

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

@@ -33,13 +33,11 @@ describe('Simple Positioning Engine', () => {
       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>
+          <code>query GetUser {
+  user {
+    name
+  }
+}</code>
         </pre>
       `
 
@@ -49,7 +47,8 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('name', 3, 5, 'Field'),
       ]
 
-      calculator.prepareCodeBlock(container, identifiers)
+      const codeElement = container.querySelector('code')!
+      calculator.prepareCodeBlock(codeElement, identifiers)
 
       // Check that identifiers were wrapped
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')
@@ -66,9 +65,7 @@ describe('Simple Positioning Engine', () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pre class="shiki">
-          <code>
-            <span class="line">query GetUserById($id: ID!) {</span>
-          </code>
+          <code>query GetUserById($id: ID!) {</code>
         </pre>
       `
 
@@ -79,7 +76,8 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('ID', 1, 24, 'Type'),
       ]
 
-      calculator.prepareCodeBlock(container, identifiers)
+      const codeElement = container.querySelector('code')!
+      calculator.prepareCodeBlock(codeElement, identifiers)
 
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')
       expect(wrappedElements.length).toBe(4)
@@ -140,9 +138,7 @@ describe('Simple Positioning Engine', () => {
       const container = document.createElement('div')
       container.innerHTML = `
         <pre class="shiki">
-          <code>
-            <span class="line"><span data-graphql-id="existing">user</span> {</span>
-          </code>
+          <code><span data-graphql-id="existing">user</span> {</code>
         </pre>
       `
 
@@ -150,7 +146,8 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('user', 1, 1),
       ]
 
-      calculator.prepareCodeBlock(container, identifiers)
+      const codeElement = container.querySelector('code')!
+      calculator.prepareCodeBlock(codeElement, identifiers)
 
       // Should still only have one wrapped element
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')
@@ -162,11 +159,9 @@ describe('Simple Positioning Engine', () => {
       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>
+          <code>query {
+
+  user</code>
         </pre>
       `
 
@@ -175,8 +170,9 @@ describe('Simple Positioning Engine', () => {
         createTestIdentifier('user', 3, 3),
       ]
 
+      const codeElement = container.querySelector('code')!
       expect(() => {
-        calculator.prepareCodeBlock(container, identifiers)
+        calculator.prepareCodeBlock(codeElement, identifiers)
       }).not.toThrow()
 
       const wrappedElements = container.querySelectorAll('[data-graphql-id]')

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

@@ -50,21 +50,104 @@ export class SimplePositionCalculator {
     containerElement: Element,
     identifiers: Identifier[],
   ): void {
-    // Sort all identifiers by position (right to left, bottom to top)
-    const sortedIdentifiers = [...identifiers].sort((a, b) => {
-      // Sort by line first (bottom to top)
-      if (a.position.line !== b.position.line) {
-        return b.position.line - a.position.line
-      }
-      // Then by column (right to left)
-      return b.position.column - a.position.column
-    })
+    // Get the full text content of the container
+    const fullText = containerElement.textContent || ''
+    const lines = fullText.split('\n')
+
+    // Build a map of line start positions in the full text
+    const lineStartPositions: number[] = [0]
+    for (let i = 0; i < lines.length - 1; i++) {
+      const lineLength = lines[i]?.length ?? 0
+      lineStartPositions.push(lineStartPositions[i]! + lineLength + 1) // +1 for newline
+    }
+
+    // Process identifiers by line
+    for (const identifier of identifiers) {
+      const lineIndex = identifier.position.line - 1
+      if (lineIndex >= lines.length || lineIndex < 0) continue
+
+      const lineText = lines[lineIndex]
+      if (!lineText) continue
+
+      const columnIndex = identifier.position.column - 1
+
+      // Check if the identifier exists at the expected position
+      if (lineText.substring(columnIndex).startsWith(identifier.name)) {
+        // Calculate the absolute position in the full text
+        const lineStartPosition = lineStartPositions[lineIndex] ?? 0
+        const absolutePosition = lineStartPosition + columnIndex
+
+        // Check if already wrapped at this specific position
+        const existingWrapped = containerElement.querySelectorAll(`[data-graphql-id]`)
+        let alreadyWrapped = false
+        for (const wrapped of existingWrapped) {
+          if (wrapped.textContent === identifier.name) {
+            const startPos = parseInt(wrapped.getAttribute('data-graphql-start') || '0')
+            if (startPos === identifier.position.start) {
+              alreadyWrapped = true
+              break
+            }
+          }
+        }
+        if (alreadyWrapped) continue
+
+        // Create wrapper span
+        const wrapper = document.createElement('span')
+        const id = `${identifier.position.start}-${identifier.name}-${identifier.kind}`
+        wrapper.setAttribute('data-graphql-id', id)
+        wrapper.setAttribute('data-graphql-name', identifier.name)
+        wrapper.setAttribute('data-graphql-kind', identifier.kind)
+        wrapper.setAttribute('data-graphql-start', String(identifier.position.start))
+        wrapper.setAttribute('data-graphql-end', String(identifier.position.end))
+        wrapper.setAttribute('data-graphql-line', String(identifier.position.line))
+        wrapper.setAttribute('data-graphql-column', String(identifier.position.column))
+        wrapper.setAttribute('data-graphql-path', identifier.schemaPath.join(','))
+
+        // Find the position in the container and wrap the text
+        const walker = document.createTreeWalker(
+          containerElement,
+          NodeFilter.SHOW_TEXT,
+          null,
+        )
+
+        let currentPos = 0
+        let node: Node | null
+
+        while (node = walker.nextNode()) {
+          const textNode = node as Text
+          const text = textNode.textContent || ''
+
+          // Check if this text node contains our identifier
+          if (currentPos <= absolutePosition && absolutePosition < currentPos + text.length) {
+            const relativePos = absolutePosition - currentPos
+
+            if (text.substring(relativePos).startsWith(identifier.name)) {
+              // Split the text node
+              const before = text.substring(0, relativePos)
+              const identifierText = identifier.name
+              const after = text.substring(relativePos + identifierText.length)
+
+              const parent = textNode.parentNode!
+
+              if (before) {
+                parent.insertBefore(document.createTextNode(before), textNode)
+              }
+
+              wrapper.textContent = identifierText
+              parent.insertBefore(wrapper, textNode)
+
+              if (after) {
+                parent.insertBefore(document.createTextNode(after), textNode)
+              }
+
+              parent.removeChild(textNode)
+              break
+            }
+          }
 
-    // Process all identifiers
-    let wrappedCount = 0
-    for (const identifier of sortedIdentifiers) {
-      const wrapped = this.wrapIdentifier(containerElement, identifier)
-      if (wrapped) wrappedCount++
+          currentPos += text.length
+        }
+      }
     }
   }
 
@@ -117,100 +200,6 @@ export class SimplePositionCalculator {
 
     return results
   }
-
-  /**
-   * Wrap an identifier in a span for positioning
-   * Returns true if the identifier was successfully wrapped
-   */
-  private wrapIdentifier(containerElement: Element, identifier: Identifier): boolean {
-    const walker = document.createTreeWalker(
-      containerElement,
-      NodeFilter.SHOW_TEXT,
-      null,
-    )
-
-    let currentLine = 1
-    let currentColumn = 1
-    let node: Node | null
-
-    while (node = walker.nextNode()) {
-      const textNode = node as Text
-      const text = textNode.textContent || ''
-
-      // Check if already wrapped
-      if (textNode.parentElement?.hasAttribute('data-graphql-id')) {
-        // Update position tracking and continue
-        for (const char of text) {
-          if (char === '\n') {
-            currentLine++
-            currentColumn = 1
-          } else {
-            currentColumn++
-          }
-        }
-        continue
-      }
-
-      // Track position in the text
-      let textIndex = 0
-      while (textIndex < text.length) {
-        // Check if we're at the identifier's position
-        if (
-          currentLine === identifier.position.line
-          && currentColumn === identifier.position.column
-        ) {
-          // Verify it's actually our identifier
-          const remainingText = text.substring(textIndex)
-          if (remainingText.startsWith(identifier.name)) {
-            // Create a unique ID for this identifier
-            const id = `${identifier.position.start}-${identifier.name}-${identifier.kind}`
-
-            // Split the text node and wrap the identifier
-            const before = text.substring(0, textIndex)
-            const after = text.substring(textIndex + identifier.name.length)
-
-            const span = document.createElement('span')
-            span.setAttribute('data-graphql-id', id)
-            span.setAttribute('data-graphql-name', identifier.name)
-            span.setAttribute('data-graphql-kind', identifier.kind)
-            span.setAttribute('data-graphql-start', String(identifier.position.start))
-            span.setAttribute('data-graphql-end', String(identifier.position.end))
-            span.setAttribute('data-graphql-line', String(identifier.position.line))
-            span.setAttribute('data-graphql-column', String(identifier.position.column))
-            span.setAttribute('data-graphql-path', identifier.schemaPath.join(','))
-            span.textContent = identifier.name
-
-            const parent = textNode.parentNode!
-
-            if (before) {
-              parent.insertBefore(document.createTextNode(before), textNode)
-            }
-
-            parent.insertBefore(span, textNode)
-
-            if (after) {
-              parent.insertBefore(document.createTextNode(after), textNode)
-            }
-
-            parent.removeChild(textNode)
-            return true
-          }
-        }
-
-        // Update position tracking
-        const char = text[textIndex]
-        if (char === '\n') {
-          currentLine++
-          currentColumn = 1
-        } else {
-          currentColumn++
-        }
-        textIndex++
-      }
-    }
-
-    return false // Identifier not found
-  }
 }
 
 /**

package/src/lib/kit-temp.test.ts

@@ -74,8 +74,13 @@ describe('property-based tests', () => {
             expect(inAllowed).toBe(!inDenied)
           })
 
-          // Combined they reconstruct the original object
-          expect({ ...allowed, ...denied }).toEqual(obj)
+          // Combined they reconstruct the original object (only own properties)
+          const reconstructed = { ...allowed, ...denied }
+          const ownPropsObj = Object.keys(obj).reduce((acc, key) => {
+            acc[key] = obj[key]
+            return acc
+          }, {} as any)
+          expect(reconstructed).toEqual(ownPropsObj)
         },
       ),
     )
@@ -87,7 +92,14 @@ describe('property-based tests', () => {
         fc.object(),
         (obj) => {
           const filtered = objFilter(obj, () => true)
-          expect(filtered).toEqual(obj)
+
+          // Object.keys doesn't include __proto__, so we need to handle it specially
+          const objWithoutProto = Object.keys(obj).reduce((acc, key) => {
+            acc[key] = obj[key]
+            return acc
+          }, {} as any)
+
+          expect(filtered).toEqual(objWithoutProto)
 
           // Values are the same reference
           Object.keys(filtered).forEach(key => {