polen 0.10.0-next.10 → 0.10.0-next.12

package/src/template/components/CodeBlockEnhancer.tsx

@@ -0,0 +1,192 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router'
+import { useTheme } from '../contexts/ThemeContext.tsx'
+
+export const CodeBlockEnhancer = () => {
+  const { appearance } = useTheme()
+  const location = useLocation()
+
+  useEffect(() => {
+    // Add styles for code block enhancements
+    const styleId = 'code-block-enhancer-styles'
+    let styleElement = document.getElementById(styleId) as HTMLStyleElement
+
+    if (!styleElement) {
+      styleElement = document.createElement('style')
+      styleElement.id = styleId
+      document.head.appendChild(styleElement)
+    }
+
+    styleElement.textContent = `
+      /* Enhanced code block styles */
+      pre.shiki {
+        position: relative;
+      }
+      
+      pre.shiki[data-title] {
+        margin-top: 0;
+        border-radius: 0 0 8px 8px !important;
+      }
+      
+      pre.shiki[data-title]::before {
+        content: attr(data-title);
+        display: block;
+        position: absolute;
+        top: -2.5rem;
+        left: -1px;
+        right: -1px;
+        background-color: ${appearance === 'dark' ? '#2a2b3d' : '#f3f4f6'};
+        border: 1px solid var(--gray-4);
+        border-bottom: 1px solid ${appearance === 'dark' ? '#3a3b4d' : '#e5e7eb'};
+        border-radius: 8px 8px 0 0;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--gray-11);
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+      
+      pre.shiki[data-title][data-language]::after {
+        content: attr(data-language);
+        position: absolute;
+        top: -2rem;
+        right: 1rem;
+        font-size: 0.75rem;
+        color: var(--gray-9);
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+      
+      .code-block-copy {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+        cursor: pointer;
+        border: none;
+        border-radius: 4px;
+        transition: all 0.2s;
+        background-color: ${appearance === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.8)'};
+        backdrop-filter: blur(4px);
+        color: ${appearance === 'dark' ? '#fff' : '#000'};
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+      
+      pre.shiki[data-title] .code-block-copy {
+        top: -2rem;
+        right: 6rem;
+        background-color: transparent;
+        color: var(--gray-11);
+      }
+      
+      .code-block-copy:hover {
+        background-color: var(--accent-9) !important;
+        color: white !important;
+      }
+      
+      .code-block-copy[data-copied="true"] {
+        background-color: var(--green-9) !important;
+        color: white !important;
+      }
+    `
+
+    return () => {
+      if (styleElement && styleElement.parentNode) {
+        styleElement.parentNode.removeChild(styleElement)
+      }
+    }
+  }, [appearance])
+
+  useEffect(() => {
+    const enhanceCodeBlocks = () => {
+      const codeBlocks = document.querySelectorAll('pre.shiki:not([data-enhanced])')
+
+      codeBlocks.forEach((block) => {
+        const preElement = block as HTMLPreElement
+        preElement.setAttribute('data-enhanced', 'true')
+
+        // Get language from class name
+        const classes = preElement.className.split(' ')
+        const language = classes.find(c => c !== 'shiki' && c !== 'shiki-light' && c !== 'shiki-dark') || 'text'
+
+        // Check for title in first line
+        const codeElement = preElement.querySelector('code')
+        if (!codeElement) return
+
+        const firstLine = codeElement.textContent?.split('\n')[0] || ''
+        let title = ''
+
+        const titleMatch = firstLine.match(/^\/\/\s*title:\s*(.+)$/i)
+        if (titleMatch && titleMatch[1]) {
+          title = titleMatch[1]
+          // Remove title line from display
+          const firstLineElement = codeElement.querySelector('span.line') as HTMLElement
+          if (firstLineElement) {
+            firstLineElement.style.display = 'none'
+          }
+
+          // Set data attributes for CSS
+          preElement.setAttribute('data-title', title)
+          preElement.setAttribute('data-language', language)
+          preElement.style.marginTop = '3rem'
+        }
+
+        // Create copy button
+        const copyButton = document.createElement('button')
+        copyButton.className = 'code-block-copy'
+        copyButton.textContent = 'Copy'
+        copyButton.setAttribute('data-copied', 'false')
+
+        copyButton.onclick = async (e) => {
+          e.preventDefault()
+          e.stopPropagation()
+
+          // Get clean code without the title line
+          const code = codeElement.textContent || ''
+          const cleanCode = title ? code.split('\n').slice(1).join('\n') : code
+
+          try {
+            await navigator.clipboard.writeText(cleanCode)
+            copyButton.textContent = 'Copied!'
+            copyButton.setAttribute('data-copied', 'true')
+            setTimeout(() => {
+              copyButton.textContent = 'Copy'
+              copyButton.setAttribute('data-copied', 'false')
+            }, 2000)
+          } catch (err) {
+            console.error('Failed to copy:', err)
+          }
+        }
+
+        // Append copy button directly to pre element
+        preElement.appendChild(copyButton)
+      })
+    }
+
+    // Small delay to ensure DOM is ready
+    const timeoutId = setTimeout(enhanceCodeBlocks, 100)
+
+    return () => {
+      clearTimeout(timeoutId)
+      // Clean up enhanced code blocks
+      document.querySelectorAll('pre.shiki[data-enhanced]').forEach(block => {
+        block.removeAttribute('data-enhanced')
+        block.removeAttribute('data-title')
+        block.removeAttribute('data-language')
+        const copyButton = block.querySelector('.code-block-copy')
+        if (copyButton) {
+          copyButton.remove()
+        }
+        // Restore hidden title lines
+        const firstLine = block.querySelector('span.line') as HTMLElement
+        if (firstLine && firstLine.style.display === 'none') {
+          firstLine.style.display = ''
+        } // Reset margin
+
+        ;(block as HTMLElement).style.marginTop = ''
+      })
+    }
+  }, [location.pathname]) // Re-run when route changes
+
+  return null
+}

package/src/template/components/DeprecationReason.tsx

@@ -1,7 +1,7 @@
 import type { GrafaidOld } from '#lib/grafaid-old/index'
 import { Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Markdown } from './Markdown.jsx'
+import { Markdown } from './Markdown.tsx'
 
 export const DeprecationReason: FC<{ data: GrafaidOld.GraphQLField }> = ({ data }) => {
   if (!data.deprecationReason) return null

package/src/template/components/Description.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Markdown } from './Markdown.jsx'
+import { Markdown } from './Markdown.tsx'
 // import type { Grafaid } from '#lib/grafaid'
 import type { GrafaidOld } from '#lib/grafaid-old/index'
 import type { GraphQLNamedType } from 'graphql'

package/src/template/components/Field.tsx

@@ -2,10 +2,10 @@ import { GrafaidOld } from '#lib/grafaid-old/index'
 import type { BoxProps } from '@radix-ui/themes'
 import { Box, Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { ArgumentListAnnotation } from './ArgumentListAnnotation.jsx'
-import { DeprecationReason } from './DeprecationReason.jsx'
-import { Description } from './Description.jsx'
-import { TypeAnnotation } from './TypeAnnotation.jsx'
+import { ArgumentListAnnotation } from './ArgumentListAnnotation.tsx'
+import { DeprecationReason } from './DeprecationReason.tsx'
+import { Description } from './Description.tsx'
+import { TypeAnnotation } from './TypeAnnotation.tsx'
 
 export type Props = BoxProps & {
   data: GrafaidOld.GraphQLField

package/src/template/components/FieldList.tsx

@@ -1,7 +1,7 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Box } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Field } from './Field.jsx'
+import { Field } from './Field.tsx'
 
 export interface Props {
   data: Grafaid.Schema.TypesLike.Named

package/src/template/components/FieldListSection.tsx

@@ -2,7 +2,7 @@ import { Grafaid } from '#lib/grafaid/index'
 import { Box, Heading } from '@radix-ui/themes'
 import type { GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
-import { FieldList } from './FieldList.jsx'
+import { FieldList } from './FieldList.tsx'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/Link.tsx

@@ -3,8 +3,8 @@ import type { LinkProps as LinkPropsReactRouter } from 'react-router'
 import { Link as LinkReactRouter, useLocation } from 'react-router'
 // todo: #lib/kit-temp does not work as import
 import { ObjPartition } from '../../lib/kit-temp.ts'
-import type { LinkPropsRadix } from './RadixLink.jsx'
-import { LinkRadix } from './RadixLink.jsx'
+import type { LinkPropsRadix } from './RadixLink.tsx'
+import { LinkRadix } from './RadixLink.tsx'
 
 const reactRouterPropKeys = [
   'discover',

package/src/template/components/MDXComponents.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+
+interface PreProps {
+  children: React.ReactNode
+  className?: string
+  'data-enhanced'?: string
+}
+
+interface CodeProps {
+  children: string
+  className?: string
+}
+
+/**
+ * Custom pre component that intercepts GraphQL code blocks
+ */
+const Pre: React.FC<PreProps> = ({ children, className, ...props }) => {
+  // Check if this is a Shiki-enhanced code block
+  const isShiki = props['data-enhanced'] === 'true'
+
+  // Extract the code element
+  const codeElement = React.Children.toArray(children).find(
+    child => React.isValidElement(child) && child.type === 'code',
+  ) as React.ReactElement<CodeProps> | undefined
+
+  if (!codeElement) {
+    return <pre className={className} {...props}>{children}</pre>
+  }
+
+  // Check if it's a GraphQL code block
+  const codeClassName = codeElement.props.className || ''
+  const isGraphQL = codeClassName.includes('language-graphql') || codeClassName.includes('language-gql')
+
+  if (isGraphQL && isShiki) {
+    // Extract the plain text content from the code element
+    const plainText = extractPlainText(codeElement.props.children)
+
+    // For now, just render the Shiki-highlighted code normally
+    // The GraphQLDocument component will be enhanced client-side
+    return (
+      <div data-testid='graphql-document' data-graphql-code={plainText}>
+        <pre className={className} {...props}>{children}</pre>
+      </div>
+    )
+  }
+
+  // For non-GraphQL code blocks, render normally
+  return <pre className={className} {...props}>{children}</pre>
+}
+
+/**
+ * Extract plain text from React children (recursive)
+ */
+function extractPlainText(children: React.ReactNode): string {
+  if (typeof children === 'string') {
+    return children
+  }
+
+  if (Array.isArray(children)) {
+    return children.map(extractPlainText).join('')
+  }
+
+  if (React.isValidElement(children)) {
+    const props = (children as React.ReactElement<any>).props
+    if (props?.children) {
+      return extractPlainText(props.children)
+    }
+  }
+
+  return ''
+}
+
+/**
+ * Simple server-side rendering of React element to HTML string
+ */
+function renderToStaticMarkup(element: React.ReactNode): string {
+  // For server-side, we just need to preserve the structure
+  if (typeof element === 'string') return element
+
+  if (React.isValidElement(element)) {
+    const { type, props } = element as React.ReactElement<any>
+    const tagName = typeof type === 'string' ? type : 'div'
+    const attrs = Object.entries(props || {})
+      .filter(([key]) => key !== 'children' && !key.startsWith('__'))
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(' ')
+
+    const children = props?.children ? renderToStaticMarkup(props.children) : ''
+    return `<${tagName}${attrs ? ' ' + attrs : ''}>${children}</${tagName}>`
+  }
+
+  if (Array.isArray(element)) {
+    return element.map(renderToStaticMarkup).join('')
+  }
+
+  return ''
+}
+
+export const mdxComponents = {
+  pre: Pre,
+}

package/src/template/components/NamedType.tsx

@@ -1,8 +1,8 @@
 import { Box, Heading, Text } from '@radix-ui/themes'
 import { type GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
-import { FieldListSection } from './FieldListSection.jsx'
-import { Markdown } from './Markdown.jsx'
+import { FieldListSection } from './FieldListSection.tsx'
+import { Markdown } from './Markdown.tsx'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/TestComponent.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export const TestComponent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  console.log('TestComponent rendered!')
+  return <div style={{ border: '2px solid red', padding: '10px' }}>TEST: {children}</div>
+}

package/src/template/components/TypeAnnotation.tsx

@@ -2,7 +2,7 @@ import { Text } from '@radix-ui/themes'
 import type { GraphQLType } from 'graphql'
 import { isInputObjectType, isListType, isNamedType, isNonNullType, isScalarType } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.jsx'
+import { Link } from './Link.tsx'
 
 export interface Props {
   type: GraphQLType // Can be either GraphQLInputType or GraphQLOutputType

package/src/template/components/TypeFieldsLinkList.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Heading } from '@radix-ui/themes'
 import type { GraphQLInterfaceType, GraphQLObjectType } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.jsx'
+import { Link } from './Link.tsx'
 
 export interface Props {
   type: GraphQLObjectType | GraphQLInterfaceType

package/src/template/components/TypeIndex.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Heading } from '@radix-ui/themes'
 import { Obj } from '@wollybeard/kit'
 import type { GraphQLNamedType, GraphQLSchema } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.jsx'
+import { Link } from './Link.tsx'
 
 export interface Props {
   schema: GraphQLSchema

package/src/template/components/content/$$.ts

@@ -1 +1,2 @@
 export { Callout, Tabs } from '@radix-ui/themes'
+export { GraphQLDocumentWithSchema } from './GraphQLDocumentWithSchema.tsx'

package/src/template/components/content/GraphQLDocumentWithSchema.tsx

@@ -0,0 +1,18 @@
+import type { GraphQLSchema } from 'graphql'
+import React from 'react'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
+import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+
+/**
+ * Wrapper component that provides schema from virtual module directly to GraphQLDocument
+ * This bypasses the context issue with MDX components
+ */
+export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
+  const schema = PROJECT_DATA.schema?.versions[0]?.after
+  console.log('Template wrapper - schema:', schema ? 'EXISTS' : 'UNDEFINED')
+  console.log('Template wrapper - props:', props)
+  console.log('Template wrapper - PROJECT_DATA.schema:', PROJECT_DATA.schema)
+
+  return <GraphQLDocument {...props} schema={schema} />
+}

package/src/template/components/content/GraphQLDocumentWrapper.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { useNavigate } from 'react-router'
+import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
+import { highlightCode } from '../../../lib/shiki/shiki.ts'
+
+/**
+ * Client-side wrapper that hydrates GraphQL documents with schema
+ */
+export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
+  try {
+    const [schema, setSchema] = React.useState<any>(null)
+    const [isClient, setIsClient] = React.useState(false)
+    const [highlightedHtml, setHighlightedHtml] = React.useState<string | null>(null)
+
+    React.useEffect(() => {
+      setIsClient(true)
+
+      // Highlight the code
+      if (typeof props.children === 'string') {
+        highlightCode({
+          code: props.children,
+          lang: 'graphql',
+          theme: 'light', // You can make this dynamic based on theme
+        }).then(html => {
+          setHighlightedHtml(html)
+        }).catch(err => {
+          console.error('Failed to highlight code:', err)
+        })
+      }
+
+      // Access virtual module only on client side
+      if (typeof window !== 'undefined') {
+        import('virtual:polen/project/data.jsonsuper').then(PROJECT_DATA => {
+          const s = PROJECT_DATA.default?.schema?.versions?.[0]?.after
+          if (s) {
+            setSchema(s)
+          }
+        }).catch(err => {
+          console.error('Failed to load schema:', err)
+        })
+      }
+    }, [props.children])
+
+    // During SSR, render a simple code block
+    if (!isClient) {
+      return (
+        <div data-testid='graphql-document' className='graphql-document graphql-document-static'>
+          <pre className='shiki shiki-themes github-light tokyo-night'>
+            <code className="language-graphql">{props.children}</code>
+          </pre>
+        </div>
+      )
+    }
+
+    // During client render, use the full component
+    // Pass a custom navigate function that doesn't require router
+    const handleNavigate = (url: string) => {
+      if (typeof window !== 'undefined') {
+        window.location.href = url
+      }
+    }
+
+    return (
+      <div data-testid='graphql-document'>
+        <GraphQLDocument
+          {...props}
+          schema={schema}
+          highlightedHtml={highlightedHtml || undefined}
+          options={{
+            ...props.options,
+            onNavigate: handleNavigate,
+            debug: false, // Disable debug mode for shipping
+          }}
+        />
+      </div>
+    )
+  } catch (err) {
+    console.error('GraphQLDocumentWithSchema error:', err)
+    return <div>Error rendering GraphQL document</div>
+  }
+}

package/src/template/components/graphql/graphql.tsx

@@ -1,2 +1,2 @@
-export * from './type-kind-icon.jsx'
-export * from './type-link.jsx'
+export * from './type-kind-icon.tsx'
+export * from './type-link.tsx'

package/src/template/components/graphql/index.ts

@@ -1 +1 @@
-export * as Graphql from './graphql.jsx'
+export * as Graphql from './graphql.tsx'

package/src/template/components/graphql/type-link.tsx

@@ -1,7 +1,7 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Code, Flex } from '@radix-ui/themes'
-import { Link } from '../Link.jsx'
-import { TypeKindIcon } from './graphql.jsx'
+import { Link } from '../Link.tsx'
+import { TypeKindIcon } from './graphql.tsx'
 import { typeKindTokensIndex } from './type-kind-tokens.ts'
 
 export const TypeLink: React.FC<{ type: Grafaid.Schema.TypesLike.Named }> = ({ type }) => {

package/src/template/components/sidebar/SidebarItem.tsx

@@ -8,9 +8,9 @@ import { getPathActiveReport, Link } from '../Link.tsx'
 export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
   return (
     <Flex direction='column' gap='2px'>
-      {items.map((item) => (
+      {items.map((item, index) => (
         <Item
-          key={item.pathExp}
+          key={`${item.pathExp}-${index}`}
           item={item}
         />
       ))}
@@ -121,9 +121,9 @@ const LinkedSection: React.FC<{
             borderLeft: `1px solid var(--gray-5)`,
           }}
         >
-          {section.links.map((link) => (
+          {section.links.map((link, index) => (
             <SectionLink
-              key={link.pathExp}
+              key={`${link.pathExp}-${index}`}
               link={link}
             />
           ))}

package/src/template/entry.client.tsx

@@ -2,12 +2,12 @@
 // But then, we won't get it from the client manifest. But we could get it from the server manifest. Should we do that?
 // But then, that wouldn't work for SPA. Does that matter? Just put a conditional here e.g. if (import.meta.env.PROD) ...?
 import '@radix-ui/themes/styles.css'
-// import './styles/code-block.css' // TODO: Handle CSS in build process
+import './styles/code-block.css'
 import { ReactDomClient } from '#dep/react-dom-client/index'
 import { StrictMode } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { routes } from './routes.jsx'
+import { routes } from './routes.tsx'
 
 // SPA
 

package/src/template/routes/changelog.tsx

@@ -1,7 +1,7 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { Changelog } from '../components/Changelog.jsx'
+import { Changelog } from '../components/Changelog.tsx'
 
 const loader = createLoader(() => {
   return {

package/src/template/routes/reference.$type.$field.tsx

@@ -2,9 +2,9 @@ import { Grafaid } from '#lib/grafaid/index'
 import { ReactRouterAid } from '#lib/react-router-aid/index'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { Field } from '../components/Field.jsx'
-import { MissingSchema } from '../components/MissingSchema.jsx'
-import type { reference } from './reference.jsx'
+import { Field } from '../components/Field.tsx'
+import { MissingSchema } from '../components/MissingSchema.tsx'
+import type { reference } from './reference.tsx'
 
 const Component = () => {
   const params = useParams() as { type: string; field: string }

package/src/template/routes/reference.$type.tsx

@@ -1,9 +1,9 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { MissingSchema } from '../components/MissingSchema.jsx'
-import { NamedType } from '../components/NamedType.jsx'
-import type { reference } from './reference.jsx'
+import { MissingSchema } from '../components/MissingSchema.tsx'
+import { NamedType } from '../components/NamedType.tsx'
+import type { reference } from './reference.tsx'
 
 const Component = () => {
   const params = useParams() as { type: string }

package/src/template/routes/reference.tsx

@@ -1,11 +1,10 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
-import { Container, Flex } from '@radix-ui/themes'
+import { Box } from '@radix-ui/themes'
 import { Outlet } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { MissingSchema } from '../components/MissingSchema.jsx'
-import { TypeIndex } from '../components/TypeIndex.jsx'
-import { reference$type } from './reference.$type.jsx'
+import { MissingSchema } from '../components/MissingSchema.tsx'
+import { reference$type } from './reference.$type.tsx'
 
 const loader = createLoader(() => {
   const latestSchemaVersion = PROJECT_DATA.schema?.versions[0].after ?? null
@@ -22,12 +21,9 @@ const Component = () => {
   }
 
   return (
-    <Flex direction='row' align='start'>
-      <TypeIndex schema={data.schema} />
-      <Container>
-        <Outlet />
-      </Container>
-    </Flex>
+    <Box className='prose'>
+      <Outlet />
+    </Box>
   )
 }