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

package/src/template/components/CodeBlock.tsx

@@ -1,73 +1,19 @@
-import { highlightCode } from '#lib/shiki/index'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 interface CodeBlockProps {
   children: string
   language?: string
   className?: string
-  showLineNumbers?: boolean
-  highlightLines?: number[]
-  diffLines?: { add: number[]; remove: number[] }
-  focusLines?: number[]
-  showInvisibles?: boolean
 }
 
 export const CodeBlock: React.FC<CodeBlockProps> = ({
   children,
   language = `text`,
   className = ``,
-  showLineNumbers = false,
-  highlightLines = [],
-  diffLines,
-  focusLines = [],
-  showInvisibles = false,
 }) => {
-  const [html, setHtml] = useState<string>(``)
-  const [isLoading, setIsLoading] = useState(true)
-
-  // TODO: Implement proper theme detection
-  // For now, we'll rely on CSS to handle theme switching
-  const theme = `light` // Default to light theme
-
-  useEffect(() => {
-    const renderCode = async () => {
-      try {
-        const output = await highlightCode({
-          code: children,
-          lang: language,
-          theme,
-          showLineNumbers,
-          highlightLines,
-          diffLines,
-          focusLines,
-          showInvisibles,
-        })
-
-        setHtml(output)
-      } catch (error) {
-        console.error(`Failed to highlight code:`, error)
-        // Fallback to plain text
-        setHtml(`<pre><code>${children}</code></pre>`)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    renderCode()
-  }, [children, language, showLineNumbers, highlightLines, diffLines, focusLines, showInvisibles])
-
-  if (isLoading) {
-    return (
-      <pre className={className}>
-        <code>{children}</code>
-      </pre>
-    )
-  }
-
   return (
-    <div
-      className={`code-block ${className}`}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <pre className={`code-block ${className}`}>
+      <code className={`language-${language}`}>{children}</code>
+    </pre>
   )
 }

package/src/template/components/CodeBlockEnhancer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useLocation } from 'react-router'
-import { useTheme } from '../contexts/ThemeContext.tsx'
+import { useTheme } from '../contexts/ThemeContext.js'
 
 export const CodeBlockEnhancer = () => {
   const { appearance } = useTheme()
@@ -8,11 +8,11 @@ export const CodeBlockEnhancer = () => {
 
   useEffect(() => {
     // Add styles for code block enhancements
-    const styleId = 'code-block-enhancer-styles'
+    const styleId = `code-block-enhancer-styles`
     let styleElement = document.getElementById(styleId) as HTMLStyleElement
 
     if (!styleElement) {
-      styleElement = document.createElement('style')
+      styleElement = document.createElement(`style`)
       styleElement.id = styleId
       document.head.appendChild(styleElement)
     }
@@ -35,9 +35,9 @@ export const CodeBlockEnhancer = () => {
         top: -2.5rem;
         left: -1px;
         right: -1px;
-        background-color: ${appearance === 'dark' ? '#2a2b3d' : '#f3f4f6'};
+        background-color: ${appearance === `dark` ? `#2a2b3d` : `#f3f4f6`};
         border: 1px solid var(--gray-4);
-        border-bottom: 1px solid ${appearance === 'dark' ? '#3a3b4d' : '#e5e7eb'};
+        border-bottom: 1px solid ${appearance === `dark` ? `#3a3b4d` : `#e5e7eb`};
         border-radius: 8px 8px 0 0;
         padding: 0.5rem 1rem;
         font-size: 0.875rem;
@@ -66,9 +66,9 @@ export const CodeBlockEnhancer = () => {
         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)'};
+        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'};
+        color: ${appearance === `dark` ? `#fff` : `#000`};
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       }
       
@@ -99,62 +99,62 @@ export const CodeBlockEnhancer = () => {
 
   useEffect(() => {
     const enhanceCodeBlocks = () => {
-      const codeBlocks = document.querySelectorAll('pre.shiki:not([data-enhanced])')
+      const codeBlocks = document.querySelectorAll(`pre.shiki:not([data-enhanced])`)
 
       codeBlocks.forEach((block) => {
         const preElement = block as HTMLPreElement
-        preElement.setAttribute('data-enhanced', 'true')
+        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'
+        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')
+        const codeElement = preElement.querySelector(`code`)
         if (!codeElement) return
 
-        const firstLine = codeElement.textContent?.split('\n')[0] || ''
-        let title = ''
+        const firstLine = codeElement.textContent?.split(`\n`)[0] || ``
+        let title = ``
 
-        const titleMatch = firstLine.match(/^\/\/\s*title:\s*(.+)$/i)
-        if (titleMatch && titleMatch[1]) {
+        const titleMatch = /^\/\/\s*title:\s*(.+)$/i.exec(firstLine)
+        if (titleMatch?.[1]) {
           title = titleMatch[1]
           // Remove title line from display
-          const firstLineElement = codeElement.querySelector('span.line') as HTMLElement
+          const firstLineElement = codeElement.querySelector(`span.line`) as HTMLElement | null
           if (firstLineElement) {
-            firstLineElement.style.display = 'none'
+            firstLineElement.style.display = `none`
           }
 
           // Set data attributes for CSS
-          preElement.setAttribute('data-title', title)
-          preElement.setAttribute('data-language', language)
-          preElement.style.marginTop = '3rem'
+          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')
+        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
+          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')
+            copyButton.textContent = `Copied!`
+            copyButton.setAttribute(`data-copied`, `true`)
             setTimeout(() => {
-              copyButton.textContent = 'Copy'
-              copyButton.setAttribute('data-copied', 'false')
+              copyButton.textContent = `Copy`
+              copyButton.setAttribute(`data-copied`, `false`)
             }, 2000)
           } catch (err) {
-            console.error('Failed to copy:', err)
+            console.error(`Failed to copy:`, err)
           }
         }
 
@@ -169,21 +169,21 @@ export const CodeBlockEnhancer = () => {
     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')
+      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 = ''
+        const firstLine = block.querySelector(`span.line`) as HTMLElement | null
+        if (firstLine && firstLine.style.display === `none`) {
+          firstLine.style.display = ``
         } // Reset margin
 
-        ;(block as HTMLElement).style.marginTop = ''
+        ;(block as HTMLElement).style.marginTop = ``
       })
     }
   }, [location.pathname]) // Re-run when route changes

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.tsx'
+import { Markdown } from './Markdown.js'
 
 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.tsx'
+import { Markdown } from './Markdown.js'
 // 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.tsx'
-import { DeprecationReason } from './DeprecationReason.tsx'
-import { Description } from './Description.tsx'
-import { TypeAnnotation } from './TypeAnnotation.tsx'
+import { ArgumentListAnnotation } from './ArgumentListAnnotation.js'
+import { DeprecationReason } from './DeprecationReason.js'
+import { Description } from './Description.js'
+import { TypeAnnotation } from './TypeAnnotation.js'
 
 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.tsx'
+import { Field } from './Field.js'
 
 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.tsx'
+import { FieldList } from './FieldList.js'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/HamburgerMenu.tsx

@@ -2,7 +2,7 @@ import type { Content } from '#api/content/$'
 import { Cross2Icon, HamburgerMenuIcon } from '@radix-ui/react-icons'
 import { Box, Flex, IconButton, Text } from '@radix-ui/themes'
 import { useEffect } from 'react'
-import { Sidebar } from '../components/sidebar/Sidebar.tsx'
+import { Sidebar } from '../components/sidebar/Sidebar.js'
 
 export interface HamburgerMenuProps {
   isOpen: boolean
@@ -20,21 +20,21 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
   // Prevent body scroll when mobile menu is open
   useEffect(() => {
     if (isOpen) {
-      document.body.style.overflow = 'hidden'
+      document.body.style.overflow = `hidden`
     } else {
-      document.body.style.overflow = ''
+      document.body.style.overflow = ``
     }
 
     // Cleanup
     return () => {
-      document.body.style.overflow = ''
+      document.body.style.overflow = ``
     }
   }, [isOpen])
 
   return (
     <>
       {/* Mobile menu button - show on mobile/tablet, hide on desktop */}
-      <Box display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}>
+      <Box display={{ initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }}>
         <IconButton
           size='2'
           variant='ghost'
@@ -53,11 +53,11 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
             position='fixed'
             inset='0'
             style={{
-              backgroundColor: 'var(--black-a9)',
+              backgroundColor: `var(--black-a9)`,
               zIndex: 50,
             }}
             onClick={onClose}
-            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+            display={{ initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }}
           />
 
           {/* Drawer */}
@@ -68,13 +68,13 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
             bottom='0'
             width='280px'
             style={{
-              backgroundColor: 'var(--color-background)',
-              boxShadow: 'var(--shadow-6)',
+              backgroundColor: `var(--color-background)`,
+              boxShadow: `var(--shadow-6)`,
               zIndex: 100,
-              overflowY: 'auto',
+              overflowY: `auto`,
             }}
             p='4'
-            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+            display={{ initial: `block`, xs: `block`, sm: `block`, md: `none`, lg: `none`, xl: `none` }}
           >
             <Flex justify='between' align='center' mb='4'>
               <Text size='5' weight='bold'>Navigation</Text>

package/src/template/components/Link.tsx

@@ -2,38 +2,46 @@ import type { FC } from 'react'
 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.tsx'
-import { LinkRadix } from './RadixLink.tsx'
+import { ObjPartition } from '../../lib/kit-temp.js'
+import { useClientOnly } from '../hooks/useClientOnly.js'
+import type { LinkPropsRadix } from './RadixLink.js'
+import { LinkRadix } from './RadixLink.js'
 
 const reactRouterPropKeys = [
-  'discover',
-  'prefetch',
-  'reloadDocument',
-  'replace',
-  'state',
-  'preventScrollReset',
-  'relative',
-  'to',
-  'viewTransition',
-  'children',
+  `discover`,
+  `prefetch`,
+  `reloadDocument`,
+  `replace`,
+  `state`,
+  `preventScrollReset`,
+  `relative`,
+  `to`,
+  `viewTransition`,
+  `children`,
 ] as const
 
-export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> = props => {
+export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, `asChild`>> = props => {
   const location = useLocation()
-  const toPathExp = typeof props.to === 'string' ? props.to : props.to.pathname || ''
-  const active = getPathActiveReport(toPathExp, location.pathname)
+  const toPathExp = typeof props.to === `string` ? props.to : props.to.pathname || ``
+
+  const active = useClientOnly(
+    () => getPathActiveReport(toPathExp, location.pathname),
+    { is: false, isDirect: false, isDescendant: false },
+  )
 
   const { picked: reactRouterProps, omitted: radixProps } = ObjPartition(props, reactRouterPropKeys)
 
+  // Only add data attributes if they're true
+  const linkRadixProps = {
+    ...radixProps,
+    asChild: true,
+    ...(active.is && { 'data-active': true }),
+    ...(active.isDirect && { 'data-active-direct': true }),
+    ...(active.isDescendant && { 'data-active-descendant': true }),
+  }
+
   return (
-    <LinkRadix
-      asChild
-      {...radixProps}
-      data-active={active.is || undefined}
-      data-active-direct={active.isDirect || undefined}
-      data-active-descendant={active.isdescendant || undefined}
-    >
+    <LinkRadix {...linkRadixProps}>
       <LinkReactRouter {...reactRouterProps} />
     </LinkRadix>
   )
@@ -42,7 +50,7 @@ export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> =
 export interface PathActiveReport {
   is: boolean
   isDirect: boolean
-  isdescendant: boolean
+  isDescendant: boolean
 }
 
 export const getPathActiveReport = (
@@ -50,17 +58,17 @@ export const getPathActiveReport = (
   currentPathExp: string,
 ): PathActiveReport => {
   // Normalize both paths for comparison
-  const normalizedPath = pathExp.startsWith('/') ? pathExp.slice(1) : pathExp
-  const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
+  const normalizedPath = pathExp.startsWith(`/`) ? pathExp.slice(1) : pathExp
+  const normalizedCurrentPath = currentPathExp.startsWith(`/`) ? currentPathExp.slice(1) : currentPathExp
 
   const isDirect = normalizedCurrentPath === normalizedPath
-  const isdescendant = normalizedCurrentPath.startsWith(normalizedPath + '/')
+  const isDescendant = normalizedCurrentPath.startsWith(normalizedPath + `/`)
     && normalizedCurrentPath !== normalizedPath
-  const is = isDirect || isdescendant
+  const is = isDirect || isDescendant
 
   return {
     is,
     isDirect,
-    isdescendant,
+    isDescendant,
   }
 }

package/src/template/components/Logo.tsx

@@ -10,16 +10,16 @@ interface Props {
 export const Logo: React.FC<Props> = ({ src, title, height = 30, showTitle = true }) => {
   return (
     <Flex align='center' gap='2'>
-      <Box style={{ height, display: 'flex', alignItems: 'center' }}>
+      <Box style={{ height, display: `flex`, alignItems: `center` }}>
         <img
           src={src}
           alt={title}
           height={height}
           className='polen-logo'
           style={{
-            height: '100%',
-            width: 'auto',
-            transition: 'filter 0.2s ease-in-out',
+            height: `100%`,
+            width: `auto`,
+            transition: `filter 0.2s ease-in-out`,
           }}
         />
       </Box>

package/src/template/components/MDXComponents.tsx

@@ -3,99 +3,15 @@ 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
+ * Simple pre component that renders code blocks as-is
  */
 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.tsx'
-import { Markdown } from './Markdown.tsx'
+import { FieldListSection } from './FieldListSection.js'
+import { Markdown } from './Markdown.js'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/TestComponent.tsx

@@ -1,6 +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>
+  console.log(`TestComponent rendered!`)
+  return <div style={{ border: `2px solid red`, padding: `10px` }}>TEST: {children}</div>
 }

package/src/template/components/Texts/MinorHeading.tsx

@@ -8,10 +8,10 @@ export const MinorHeading: React.FC<TextProps> = (props) => {
       weight='bold'
       style={{
         ...props.style,
-        color: 'var(--accent-10)',
-        fontSize: '0.6rem',
-        letterSpacing: '0.025rem',
-        textTransform: 'uppercase',
+        color: `var(--accent-10)`,
+        fontSize: `0.6rem`,
+        letterSpacing: `0.025rem`,
+        textTransform: `uppercase`,
       }}
     />
   )

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

@@ -1 +1 @@
-export * as Texts from './texts.ts'
+export * as Texts from './texts.js'

package/src/template/components/Texts/texts.ts

@@ -1 +1 @@
-export * from './MinorHeading.tsx'
+export * from './MinorHeading.js'