polen 0.10.0-next.13 → 0.10.0-next.15

package/src/lib/graphql-document/example.ts

@@ -6,30 +6,30 @@
  * for the interactive GraphQL Document Component.
  */
 
-import { GraphQLDocument } from './$.ts'
+import { GraphQLDocument } from './$.js'
 
 // Example GraphQL query with various constructs
 const exampleQuery = `
-  query GetPokemonWithAbilities($id: ID!, $limit: Int = 10) {
-    pokemon(id: $id) {
+  query GetUserWithProjects($id: ID!, $limit: Int = 10) {
+    user(id: $id) {
       name
-      abilities(first: $limit) {
+      projects(first: $limit) {
         name
-        isHidden
-        pokemon {
+        isPrivate
+        owner {
           name
         }
       }
-      ... on ElectricPokemon {
-        voltage
+      ... on EnterpriseUser {
+        organization
       }
     }
   }
 
-  fragment PokemonBasics on Pokemon {
+  fragment UserBasics on User {
     name
-    type
-    level
+    email
+    role
   }
 `
 
@@ -37,7 +37,7 @@ const exampleQuery = `
  * Demonstrate basic analysis
  */
 export const analyzeExample = () => {
-  console.log('🔍 Analyzing GraphQL Document...\n')
+  console.log(`🔍 Analyzing GraphQL Document...\n`)
 
   const result = GraphQLDocument.analyze(exampleQuery)
 
@@ -50,8 +50,8 @@ export const analyzeExample = () => {
     console.log(`${getKindEmoji(kind)} ${kind} (${identifiers.length}):`)
     for (const identifier of identifiers) {
       const pos = `${identifier.position.line}:${identifier.position.column}`
-      const path = identifier.schemaPath.join(' → ')
-      const parent = identifier.parentType ? ` (in ${identifier.parentType})` : ''
+      const path = identifier.schemaPath.join(` → `)
+      const parent = identifier.parentType ? ` (in ${identifier.parentType})` : ``
       console.log(`  • ${identifier.name}${parent} → ${path} @ ${pos}`)
     }
     console.log()
@@ -64,7 +64,7 @@ export const analyzeExample = () => {
  * Demonstrate identifier lookup by position
  */
 export const demonstratePositionLookup = () => {
-  console.log('📍 Position-based Identifier Lookup...\n')
+  console.log(`📍 Position-based Identifier Lookup...\n`)
 
   const identifiers = GraphQLDocument.extractIdentifiers(exampleQuery)
 
@@ -87,7 +87,7 @@ export const demonstratePositionLookup = () => {
     console.log(`🎯 Identifier near position ${targetPosition}:`)
     console.log(`   Name: ${closestIdentifier.name}`)
     console.log(`   Kind: ${closestIdentifier.kind}`)
-    console.log(`   Schema Path: ${closestIdentifier.schemaPath.join(' → ')}`)
+    console.log(`   Schema Path: ${closestIdentifier.schemaPath.join(` → `)}`)
     console.log(`   Context: ${JSON.stringify(closestIdentifier.context, null, 2)}`)
   }
 }
@@ -96,21 +96,21 @@ export const demonstratePositionLookup = () => {
  * Demonstrate how this enables hyperlink generation
  */
 export const demonstrateHyperlinkGeneration = () => {
-  console.log('🔗 Hyperlink Generation Preview...\n')
+  console.log(`🔗 Hyperlink Generation Preview...\n`)
 
   const identifiers = GraphQLDocument.extractIdentifiers(exampleQuery)
 
   // Show how each identifier could become a hyperlink
-  const typeIdentifiers = identifiers.byKind.get('Type') || []
-  const fieldIdentifiers = identifiers.byKind.get('Field') || []
+  const typeIdentifiers = identifiers.byKind.get(`Type`) || []
+  const fieldIdentifiers = identifiers.byKind.get(`Field`) || []
 
-  console.log('📝 Type References → Schema Links:')
+  console.log(`📝 Type References → Schema Links:`)
   for (const identifier of typeIdentifiers) {
     const referenceUrl = `/reference/${identifier.name}`
     console.log(`  ${identifier.name} → ${referenceUrl}`)
   }
 
-  console.log('\n📝 Field References → Schema Links:')
+  console.log(`\n📝 Field References → Schema Links:`)
   for (const identifier of fieldIdentifiers.slice(0, 5)) { // Show first 5
     const referenceUrl = identifier.parentType
       ? `/reference/${identifier.parentType}#${identifier.name}`
@@ -123,35 +123,35 @@ export const demonstrateHyperlinkGeneration = () => {
  * Show the foundation for hover tooltips
  */
 export const demonstrateTooltipFoundation = () => {
-  console.log('💬 Tooltip Foundation...\n')
+  console.log(`💬 Tooltip Foundation...\n`)
 
   const identifiers = GraphQLDocument.extractIdentifiers(exampleQuery)
 
   // Show context information that would be displayed in tooltips
-  const fieldIdentifiers = identifiers.byKind.get('Field') || []
+  const fieldIdentifiers = identifiers.byKind.get(`Field`) || []
 
   for (const identifier of fieldIdentifiers.slice(0, 3)) { // Show first 3
     console.log(`🏷️  ${identifier.name}:`)
     console.log(`    Position: Line ${identifier.position.line}, Column ${identifier.position.column}`)
-    console.log(`    Schema Path: ${identifier.schemaPath.join(' → ')}`)
-    console.log(`    Parent Type: ${identifier.parentType || 'Root'}`)
-    console.log(`    Operation: ${identifier.context.operationType || 'None'}`)
-    console.log(`    Selection Path: ${identifier.context.selectionPath.join(' → ')}`)
+    console.log(`    Schema Path: ${identifier.schemaPath.join(` → `)}`)
+    console.log(`    Parent Type: ${identifier.parentType || `Root`}`)
+    console.log(`    Operation: ${identifier.context.operationType || `None`}`)
+    console.log(`    Selection Path: ${identifier.context.selectionPath.join(` → `)}`)
     console.log()
   }
 }
 
 // Helper function
-function getKindEmoji(kind: string): string {
+const getKindEmoji = (kind: string): string => {
   const emojis: Record<string, string> = {
-    'Type': '🏷️',
-    'Field': '📋',
-    'Argument': '⚙️',
-    'Variable': '💰',
-    'Directive': '🎯',
-    'Fragment': '🧩',
+    'Type': `🏷️`,
+    'Field': `📋`,
+    'Argument': `⚙️`,
+    'Variable': `💰`,
+    'Directive': `🎯`,
+    'Fragment': `🧩`,
   }
-  return emojis[kind] || '❓'
+  return emojis[kind] || `❓`
 }
 
 // Run example if executed directly

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

@@ -24,14 +24,14 @@
  * @see {@link GraphQLDocument} for the main React component
  */
 
-export * from './analysis.ts'
-export * from './components/index.ts'
-export * from './positioning-simple.ts'
-export * from './schema-integration.ts'
-export * from './types.ts'
+export * from './analysis.js'
+export * from './components/index.js'
+export * from './positioning-simple.js'
+export * from './schema-integration.js'
+export * from './types.js'
 
 // Re-export key functions for convenience
-export { analyze, analyzer, extractIdentifiers } from './analysis.ts'
-export { GraphQLDocument } from './components/GraphQLDocument.tsx'
-export { createSimpleOverlay, createSimplePositionCalculator } from './positioning-simple.ts'
-export { analyzeWithSchema, createPolenSchemaResolver } from './schema-integration.ts'
+export { analyze, analyzer, extractIdentifiers } from './analysis.js'
+export { GraphQLDocument } from './components/GraphQLDocument.js'
+export { createSimpleOverlay, createSimplePositionCalculator } from './positioning-simple.js'
+export { analyzeWithSchema, createPolenSchemaResolver } from './schema-integration.js'

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

@@ -6,7 +6,7 @@
 
 import { act, renderHook } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import { useTooltipState } from './use-tooltip-state.ts'
+import { useTooltipState } from './use-tooltip-state.js'
 
 describe('useTooltipState', () => {
   it('shows tooltip after hover delay', () => {

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

@@ -2,9 +2,9 @@
  * @vitest-environment jsdom
  */
 
-import { beforeEach, describe, expect, it } from 'vitest'
-import { createSimpleOverlay, createSimplePositionCalculator } from './positioning-simple.ts'
-import type { Identifier } from './types.ts'
+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 = (
@@ -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)
@@ -108,7 +106,7 @@ describe('Simple Positioning Engine', () => {
         toJSON: () => ({}),
       })
 
-      const userSpan = container.querySelector('[data-graphql-id]') as HTMLElement
+      const userSpan = container.querySelector('[data-graphql-id]')!
       userSpan.getBoundingClientRect = () => ({
         top: 10,
         left: 20,
@@ -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

@@ -5,7 +5,7 @@
  * This simplified version focuses on working with Polen's existing infrastructure.
  */
 
-import type { Identifier } from './types.ts'
+import type { Identifier } from './types.js'
 
 /**
  * DOM position for rendering overlays
@@ -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
+        }
+      }
     }
   }
 
@@ -78,13 +161,13 @@ export class SimplePositionCalculator {
     const results = new Map<string, PositionResult>()
 
     // Find all wrapped identifiers
-    const wrappedIdentifiers = containerElement.querySelectorAll('[data-graphql-id]')
+    const wrappedIdentifiers = containerElement.querySelectorAll(`[data-graphql-id]`)
 
     // Use the provided element for relative positioning, or the container itself
     const referenceElement = relativeToElement || containerElement
 
     for (const element of wrappedIdentifiers) {
-      const id = element.getAttribute('data-graphql-id')
+      const id = element.getAttribute(`data-graphql-id`)
       if (!id) continue
 
       // Get position relative to the reference element
@@ -100,15 +183,15 @@ export class SimplePositionCalculator {
 
       // Reconstruct identifier from data attributes
       const identifier: Identifier = {
-        name: element.getAttribute('data-graphql-name') || '',
-        kind: (element.getAttribute('data-graphql-kind') || 'Field') as Identifier['kind'],
+        name: element.getAttribute(`data-graphql-name`) || ``,
+        kind: (element.getAttribute(`data-graphql-kind`) || `Field`) as Identifier[`kind`],
         position: {
-          start: parseInt(element.getAttribute('data-graphql-start') || '0'),
-          end: parseInt(element.getAttribute('data-graphql-end') || '0'),
-          line: parseInt(element.getAttribute('data-graphql-line') || '1'),
-          column: parseInt(element.getAttribute('data-graphql-column') || '1'),
+          start: parseInt(element.getAttribute(`data-graphql-start`) || `0`),
+          end: parseInt(element.getAttribute(`data-graphql-end`) || `0`),
+          line: parseInt(element.getAttribute(`data-graphql-line`) || `1`),
+          column: parseInt(element.getAttribute(`data-graphql-column`) || `1`),
         },
-        schemaPath: (element.getAttribute('data-graphql-path') || '').split(',').filter(Boolean),
+        schemaPath: (element.getAttribute(`data-graphql-path`) || ``).split(`,`).filter(Boolean),
         context: { selectionPath: [] },
       }
 
@@ -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
-  }
 }
 
 /**
@@ -225,16 +214,16 @@ export const createSimpleOverlay = (
     className?: string
   },
 ): HTMLElement => {
-  const overlay = document.createElement('div')
+  const overlay = document.createElement(`div`)
 
   // Base styles for positioning
-  overlay.style.position = 'absolute'
+  overlay.style.position = `absolute`
   overlay.style.top = `${position.top}px`
   overlay.style.left = `${position.left}px`
   overlay.style.width = `${position.width}px`
   overlay.style.height = `${position.height}px`
-  overlay.style.cursor = 'pointer'
-  overlay.style.zIndex = '10'
+  overlay.style.cursor = `pointer`
+  overlay.style.zIndex = `10`
 
   // Add custom class if provided
   if (options?.className) {
@@ -242,20 +231,20 @@ export const createSimpleOverlay = (
   }
 
   // Data attributes
-  overlay.setAttribute('data-graphql-overlay', 'true')
-  overlay.setAttribute('data-graphql-name', identifier.name)
-  overlay.setAttribute('data-graphql-kind', identifier.kind)
+  overlay.setAttribute(`data-graphql-overlay`, `true`)
+  overlay.setAttribute(`data-graphql-name`, identifier.name)
+  overlay.setAttribute(`data-graphql-kind`, identifier.kind)
 
   // Event handlers
   if (options?.onClick) {
-    overlay.addEventListener('click', (e) => {
+    overlay.addEventListener(`click`, (e) => {
       e.preventDefault()
       options.onClick!(identifier)
     })
   }
 
   if (options?.onHover) {
-    overlay.addEventListener('mouseenter', (e) => {
+    overlay.addEventListener(`mouseenter`, (e) => {
       options.onHover!(identifier, e)
     })
   }

package/src/lib/graphql-document/schema-integration.test.ts

@@ -1,6 +1,6 @@
 import { buildSchema } from 'graphql'
 import { describe, expect, it } from 'vitest'
-import { analyzeWithSchema, createPolenSchemaResolver } from './schema-integration.ts'
+import { analyzeWithSchema, createPolenSchemaResolver } from './schema-integration.js'
 
 // Test schema
 const testSchema = buildSchema(`