polen 0.10.0-next.14 → 0.10.0-next.4

package/src/lib/graphql-document/components/GraphQLIdentifierPopover.tsx

@@ -1,197 +0,0 @@
-/**
- * GraphQL Identifier Popover using Radix Themes
- *
- * Displays rich information about GraphQL identifiers on hover/click
- */
-
-import type { React } from '#dep/react/index'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import { Badge, Box, Card, Flex, IconButton, Link, Popover, Text } from '@radix-ui/themes'
-import type { Documentation } from '../schema-integration.ts'
-import type { Identifier } from '../types.ts'
-
-export interface GraphQLIdentifierPopoverProps {
-  /** The identifier being shown */
-  identifier: Identifier
-  /** Documentation from schema */
-  documentation: Documentation
-  /** Whether this identifier has an error */
-  hasError?: boolean
-  /** Reference URL for "View docs" link */
-  referenceUrl: string
-  /** Whether popover is open */
-  open: boolean
-  /** Whether popover is pinned */
-  isPinned: boolean
-  /** Callback when open state changes */
-  onOpenChange: (open: boolean) => void
-  /** Callback to navigate to docs */
-  onNavigate?: (url: string) => void
-  /** The trigger element */
-  children: React.ReactNode
-}
-
-/**
- * Popover content for GraphQL identifiers
- */
-export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> = ({
-  identifier,
-  documentation,
-  hasError = false,
-  referenceUrl,
-  open,
-  isPinned,
-  onOpenChange,
-  onNavigate,
-  children,
-}) => {
-  // Determine badge color based on identifier kind
-  const getBadgeColor = () => {
-    switch (identifier.kind) {
-      case 'Type':
-        return 'blue'
-      case 'Field':
-        return 'green'
-      case 'Argument':
-        return 'orange'
-      case 'Variable':
-        return 'purple'
-      case 'Directive':
-        return 'amber'
-      case 'Fragment':
-        return 'cyan'
-      default:
-        return 'gray'
-    }
-  }
-
-  return (
-    <Popover.Root open={open} onOpenChange={onOpenChange}>
-      <Popover.Trigger>
-        {children}
-      </Popover.Trigger>
-
-      <Popover.Content
-        className='graphql-identifier-popover'
-        style={{ maxWidth: 400 }}
-        onInteractOutside={(e) => {
-          // Prevent closing when clicking inside popover if pinned
-          if (isPinned) {
-            e.preventDefault()
-          }
-        }}
-      >
-        <Flex direction='column' gap='2'>
-          {/* Header with name, kind, and close button */}
-          <Flex justify='between' align='center'>
-            <Flex align='center' gap='2'>
-              <Text size='2' weight='bold'>
-                {identifier.name}
-              </Text>
-              <Badge color={getBadgeColor()} size='1'>
-                {identifier.kind}
-              </Badge>
-            </Flex>
-            {isPinned && (
-              <IconButton
-                size='1'
-                variant='ghost'
-                onClick={() => onOpenChange(false)}
-                aria-label='Close popover'
-              >
-                <Cross2Icon />
-              </IconButton>
-            )}
-          </Flex>
-
-          {/* Type signature */}
-          <Box>
-            <Text size='1' color='gray'>
-              Type: <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.typeInfo}</Text>
-            </Text>
-          </Box>
-
-          {/* Description */}
-          {documentation.description && (
-            <Box>
-              <Text size='1'>
-                {documentation.description}
-              </Text>
-            </Box>
-          )}
-
-          {/* Default value for arguments */}
-          {documentation.defaultValue && (
-            <Box>
-              <Text size='1' color='gray'>
-                Default:{' '}
-                <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.defaultValue}</Text>
-              </Text>
-            </Box>
-          )}
-
-          {/* Deprecation warning */}
-          {documentation.deprecated && (
-            <Box
-              style={{
-                padding: '8px',
-                backgroundColor: 'var(--amber-2)',
-                borderRadius: '4px',
-                border: '1px solid var(--amber-6)',
-              }}
-            >
-              <Text size='1' color='amber'>
-                ⚠️ Deprecated: {documentation.deprecated.reason}
-              </Text>
-              {documentation.deprecated.replacement && (
-                <Text size='1' color='amber'>
-                  Use {documentation.deprecated.replacement} instead.
-                </Text>
-              )}
-            </Box>
-          )}
-
-          {/* Error message */}
-          {hasError && (
-            <Box
-              style={{
-                padding: '8px',
-                backgroundColor: 'var(--red-2)',
-                borderRadius: '4px',
-                border: '1px solid var(--red-6)',
-              }}
-            >
-              <Text size='1' color='red'>
-                ❌ {identifier.kind} not found in schema
-              </Text>
-            </Box>
-          )}
-
-          {/* Schema path */}
-          <Box>
-            <Text size='1' color='gray'>
-              Path: {identifier.schemaPath.join(' → ')}
-            </Text>
-          </Box>
-
-          {/* View docs link */}
-          {onNavigate && !hasError && (
-            <Box>
-              <Link
-                size='1'
-                href={referenceUrl}
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault()
-                  onNavigate(referenceUrl)
-                  onOpenChange(false)
-                }}
-              >
-                View full documentation →
-              </Link>
-            </Box>
-          )}
-        </Flex>
-      </Popover.Content>
-    </Popover.Root>
-  )
-}

package/src/lib/graphql-document/components/IdentifierLink.tsx

@@ -1,160 +0,0 @@
-/**
- * Interactive overlay for GraphQL identifiers
- */
-
-import type { React } from '#dep/react/index'
-import type { DOMPosition } from '../positioning-simple.ts'
-import type { SchemaResolution } from '../schema-integration.ts'
-import type { Identifier } from '../types.ts'
-import { GraphQLIdentifierPopover } from './GraphQLIdentifierPopover.tsx'
-
-export interface IdentifierLinkProps {
-  /** The GraphQL identifier */
-  identifier: Identifier
-  /** Schema resolution information */
-  resolution: SchemaResolution
-  /** DOM position for overlay placement */
-  position: DOMPosition
-  /** Navigation handler */
-  onNavigate: (url: string) => void
-  /** Whether to show debug visuals */
-  debug?: boolean
-  /** Whether this tooltip is open */
-  isOpen: boolean
-  /** Whether this tooltip is pinned */
-  isPinned: boolean
-  /** Handle hover start */
-  onHoverStart: () => void
-  /** Handle hover end */
-  onHoverEnd: () => void
-  /** Toggle pin state */
-  onTogglePin: () => void
-  /** Handle tooltip hover */
-  onTooltipHover: () => void
-}
-
-/**
- * Interactive overlay for a GraphQL identifier
- *
- * Renders an invisible clickable area over the identifier text
- * with hover popovers and navigation to schema reference pages.
- */
-export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
-  identifier,
-  resolution,
-  position,
-  onNavigate,
-  debug = false,
-  isOpen,
-  isPinned,
-  onHoverStart,
-  onHoverEnd,
-  onTogglePin,
-  onTooltipHover,
-}) => {
-  // Determine visual state
-  const isClickable = resolution.exists
-  const hasError = !resolution.exists && (identifier.kind === 'Type' || identifier.kind === 'Field')
-  const isDeprecated = !!resolution.deprecated
-
-  // Build class names
-  const classNames = [
-    'graphql-identifier-overlay',
-    `graphql-${identifier.kind.toLowerCase()}`,
-    isClickable && 'graphql-clickable',
-    hasError && 'graphql-error',
-    isDeprecated && 'graphql-deprecated',
-    isOpen && 'graphql-hovered',
-    isOpen && 'graphql-tooltip-open',
-    debug && 'graphql-debug',
-  ].filter(Boolean).join(' ')
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    onTogglePin()
-  }
-
-  // Create trigger element
-  const triggerElement = isClickable
-    ? (
-      <a
-        href={resolution.referenceUrl}
-        className={classNames + ' graphql-identifier-link'}
-        style={{
-          position: 'absolute',
-          top: position.top,
-          left: position.left,
-          width: position.width,
-          height: position.height,
-          cursor: 'pointer',
-          zIndex: 10,
-          pointerEvents: 'auto',
-          display: 'block',
-          textDecoration: 'none',
-          // Debug mode visual
-          ...(debug && {
-            backgroundColor: hasError ? 'rgba(239, 68, 68, 0.1)' : 'rgba(59, 130, 246, 0.1)',
-            border: `1px solid ${hasError ? 'rgba(239, 68, 68, 0.3)' : 'rgba(59, 130, 246, 0.3)'}`,
-          }),
-        }}
-        onClick={handleClick}
-        onMouseEnter={onHoverStart}
-        onMouseLeave={onHoverEnd}
-        aria-label={`${identifier.kind} ${identifier.name} - Click to view documentation`}
-        data-graphql-identifier={identifier.name}
-        data-graphql-kind={identifier.kind}
-      />
-    )
-    : (
-      <div
-        className={classNames}
-        style={{
-          position: 'absolute',
-          top: position.top,
-          left: position.left,
-          width: position.width,
-          height: position.height,
-          cursor: 'pointer', // Make it clickable even for errors
-          zIndex: 10,
-          pointerEvents: 'auto',
-          // Debug mode visual
-          ...(debug && {
-            backgroundColor: 'rgba(239, 68, 68, 0.1)',
-            border: `1px solid rgba(239, 68, 68, 0.3)`,
-          }),
-        }}
-        onClick={handleClick}
-        onMouseEnter={onHoverStart}
-        onMouseLeave={onHoverEnd}
-        role='button'
-        aria-label={`${identifier.kind} ${identifier.name} - Click to view information`}
-        data-graphql-identifier={identifier.name}
-        data-graphql-kind={identifier.kind}
-      />
-    )
-
-  return (
-    <GraphQLIdentifierPopover
-      identifier={identifier}
-      documentation={resolution.documentation || {
-        description: hasError
-          ? `${identifier.kind} "${identifier.name}" not found in schema. This ${identifier.kind.toLowerCase()} does not exist in the current GraphQL schema.`
-          : `${identifier.kind}: ${identifier.name}`,
-        typeInfo: identifier.kind,
-      }}
-      hasError={hasError}
-      referenceUrl={resolution.referenceUrl}
-      open={isOpen}
-      isPinned={isPinned}
-      onOpenChange={(open) => {
-        if (!open && isPinned) {
-          onTogglePin() // Unpin when closing
-        }
-      }}
-      onNavigate={isClickable ? onNavigate : undefined}
-    >
-      {triggerElement}
-    </GraphQLIdentifierPopover>
-  )
-}

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

@@ -1,167 +0,0 @@
-/**
- * Minimal styles for GraphQL Document interactive code blocks
- */
-
-export const graphqlDocumentStyles = `
-/* Container styles */
-.graphql-document {
-  position: relative;
-}
-
-.graphql-interaction-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
-.graphql-interaction-layer > * {
-  pointer-events: auto;
-}
-
-/* Identifier overlay styles */
-.graphql-identifier-overlay {
-  transition: background-color 0.2s ease;
-}
-
-/* Clickable identifiers get visual feedback */
-.graphql-identifier-overlay.graphql-clickable {
-  /* Subtle underline effect using box-shadow to not affect layout */
-  box-shadow: 0 1px 0 0 rgba(var(--accent-9), 0.3);
-  transition: box-shadow 0.2s ease, background-color 0.2s ease;
-}
-
-.graphql-identifier-overlay.graphql-clickable:hover {
-  background-color: rgba(var(--accent-3), 0.5);
-  box-shadow: 0 1px 0 0 rgba(var(--accent-9), 0.6);
-}
-
-/* Active/open state */
-.graphql-identifier-overlay.graphql-tooltip-open {
-  background-color: rgba(var(--accent-3), 0.5);
-  box-shadow: 0 1px 0 0 var(--accent-9);
-}
-
-/* Error state */
-.graphql-identifier-overlay.graphql-error {
-  box-shadow: 0 1.5px 0 0 var(--red-9);
-}
-
-.graphql-identifier-overlay.graphql-error:hover {
-  background-color: rgba(var(--red-3), 0.5);
-}
-
-/* Deprecated state */
-.graphql-identifier-overlay.graphql-deprecated {
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-
-/* Debug mode */
-.graphql-identifier-overlay.graphql-debug {
-  background-color: rgba(59, 130, 246, 0.1) !important;
-  border: 1px solid rgba(59, 130, 246, 0.3) !important;
-}
-
-/* Kind-specific colors */
-.graphql-identifier-overlay.graphql-type.graphql-clickable {
-  box-shadow: 0 1px 0 0 rgba(var(--blue-9), 0.3);
-}
-
-.graphql-identifier-overlay.graphql-field.graphql-clickable {
-  box-shadow: 0 1px 0 0 rgba(var(--green-9), 0.3);
-}
-
-.graphql-identifier-overlay.graphql-argument.graphql-clickable {
-  box-shadow: 0 1px 0 0 rgba(var(--orange-9), 0.3);
-}
-
-.graphql-identifier-overlay.graphql-variable {
-  box-shadow: 0 1px 0 0 rgba(var(--purple-9), 0.3);
-}
-
-.graphql-identifier-overlay.graphql-directive.graphql-clickable {
-  box-shadow: 0 1px 0 0 rgba(var(--amber-9), 0.3);
-}
-
-/* Popover animation */
-.graphql-identifier-popover {
-  animation: graphql-popover-show 150ms ease-out;
-}
-
-@keyframes graphql-popover-show {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Validation errors */
-.graphql-validation-errors {
-  margin-top: 1rem;
-  padding: 0.5rem;
-  background-color: var(--red-2);
-  border: 1px solid var(--red-6);
-  border-radius: 4px;
-}
-
-.graphql-error {
-  color: var(--red-11);
-  font-size: 0.875rem;
-  margin: 0.25rem 0;
-}
-
-/* Loading state */
-.graphql-document.graphql-loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.graphql-document.graphql-loading::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin: -10px 0 0 -10px;
-  border: 2px solid var(--gray-6);
-  border-top-color: var(--accent-9);
-  border-radius: 50%;
-  animation: graphql-spinner 0.8s linear infinite;
-}
-
-@keyframes graphql-spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Copy button */
-.graphql-document-copy {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  z-index: 10;
-}
-
-.graphql-document:hover .graphql-document-copy {
-  opacity: 0.8;
-}
-
-.graphql-document-copy:hover {
-  opacity: 1 !important;
-}
-
-.graphql-document-copy[data-copied="true"] {
-  opacity: 1 !important;
-  color: var(--green-9);
-}`

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

@@ -1,5 +0,0 @@
-export * from './CopyButton.tsx'
-export * from './GraphQLDocument.tsx'
-export * from './GraphQLDocumentWithSchema.tsx'
-export * from './GraphQLIdentifierPopover.tsx'
-export * from './IdentifierLink.tsx'

package/src/lib/graphql-document/demo.md

@@ -1,155 +0,0 @@
-# GraphQL Document Component Demo
-
-This page demonstrates the interactive GraphQL Document component that transforms static code blocks into rich, interactive documentation.
-
-## Basic Query Example
-
-Hover over the identifiers below to see type information and documentation. Click on types and fields to navigate to their reference pages.
-
-```graphql
-query GetUser($id: ID!) {
-  user(id: $id) {
-    id
-    name
-    email
-    posts(first: 10) {
-      id
-      title
-      content
-      author {
-        name
-      }
-    }
-  }
-}
-```
-
-## Mutation Example
-
-This mutation creates a new post. Notice how the component provides information about input types and return values.
-
-```graphql
-mutation CreatePost($input: CreatePostInput!) {
-  createPost(input: $input) {
-    id
-    title
-    content
-    createdAt
-    author {
-      id
-      name
-    }
-  }
-}
-```
-
-## Subscription Example
-
-Subscriptions work the same way - all GraphQL operations are fully interactive.
-
-```graphql
-subscription OnCommentAdded($postId: ID!) {
-  commentAdded(postId: $postId) {
-    id
-    content
-    author {
-      name
-      avatar
-    }
-    createdAt
-  }
-}
-```
-
-## Fragment Example
-
-Fragments are also supported with full type information and navigation.
-
-```graphql
-fragment UserInfo on User {
-  id
-  name
-  email
-  profile {
-    bio
-    avatar
-    website
-  }
-}
-
-query GetUserWithFragment($id: ID!) {
-  user(id: $id) {
-    ...UserInfo
-    posts {
-      id
-      title
-    }
-  }
-}
-```
-
-## Error Handling
-
-The component validates GraphQL against the schema and highlights errors. Try hovering over the invalid field below:
-
-```graphql
-query InvalidQuery {
-  user {
-    nonExistentField
-    name
-  }
-}
-```
-
-## Plain Mode
-
-Sometimes you want to show GraphQL without interactivity. Use the `plain` option:
-
-```graphql plain
-query SimpleQuery {
-  users {
-    name
-  }
-}
-```
-
-## Debug Mode
-
-Enable debug mode to see the overlay boundaries:
-
-```graphql debug
-query DebugExample {
-  user {
-    id
-    name
-  }
-}
-```
-
-## Features
-
-The GraphQL Document component provides:
-
-- **Interactive Navigation**: Click on any type or field to navigate to its reference documentation
-- **Hover Tooltips**: See type information, descriptions, and deprecation warnings
-- **Schema Validation**: Invalid queries are highlighted with error messages
-- **Syntax Highlighting**: Beautiful syntax highlighting with Shiki
-- **Smart Positioning**: Tooltips automatically position themselves to stay within the viewport
-- **Accessibility**: Full keyboard navigation and screen reader support
-
-## Configuration Options
-
-```graphql validate=false
-# This query won't be validated at build time
-query {
-  anything {
-    goes
-  }
-}
-```
-
-Available options:
-
-- `plain` - Disable all interactive features
-- `debug` - Show overlay boundaries for debugging
-- `validate=false` - Skip validation for this block