polen 0.9.1-next.2 → 0.10.0-next.11

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/HamburgerMenu.tsx

@@ -0,0 +1,96 @@
+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'
+
+export interface HamburgerMenuProps {
+  isOpen: boolean
+  onToggle: () => void
+  onClose: () => void
+  sidebarData: Content.Item[]
+}
+
+export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
+  isOpen,
+  onToggle,
+  onClose,
+  sidebarData,
+}) => {
+  // Prevent body scroll when mobile menu is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+
+    // Cleanup
+    return () => {
+      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' }}>
+        <IconButton
+          size='2'
+          variant='ghost'
+          onClick={onToggle}
+          aria-label='Toggle navigation menu'
+        >
+          {isOpen ? <Cross2Icon width='18' height='18' /> : <HamburgerMenuIcon width='18' height='18' />}
+        </IconButton>
+      </Box>
+
+      {/* Mobile Sidebar Drawer */}
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <Box
+            position='fixed'
+            inset='0'
+            style={{
+              backgroundColor: 'var(--black-a9)',
+              zIndex: 50,
+            }}
+            onClick={onClose}
+            display={{ initial: 'block', xs: 'block', sm: 'block', md: 'none', lg: 'none', xl: 'none' }}
+          />
+
+          {/* Drawer */}
+          <Box
+            position='fixed'
+            top='0'
+            left='0'
+            bottom='0'
+            width='280px'
+            style={{
+              backgroundColor: 'var(--color-background)',
+              boxShadow: 'var(--shadow-6)',
+              zIndex: 100,
+              overflowY: 'auto',
+            }}
+            p='4'
+            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>
+              <IconButton
+                size='2'
+                variant='ghost'
+                onClick={onClose}
+                aria-label='Close navigation menu'
+              >
+                <Cross2Icon width='18' height='18' />
+              </IconButton>
+            </Flex>
+            <Sidebar data={sidebarData} />
+          </Box>
+        </>
+      )}
+    </>
+  )
+}

package/src/template/components/Link.tsx

@@ -2,7 +2,7 @@ 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.js'
+import { ObjPartition } from '../../lib/kit-temp.ts'
 import type { LinkPropsRadix } from './RadixLink.jsx'
 import { LinkRadix } from './RadixLink.jsx'
 

package/src/template/components/Logo.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, Text } from '@radix-ui/themes'
+
+interface Props {
+  src: string
+  title?: string
+  height?: number
+  showTitle?: boolean
+}
+
+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' }}>
+        <img
+          src={src}
+          alt={title}
+          height={height}
+          className='polen-logo'
+          style={{
+            height: '100%',
+            width: 'auto',
+            transition: 'filter 0.2s ease-in-out',
+          }}
+        />
+      </Box>
+      {showTitle && (
+        <Text size='3' weight='medium'>
+          {title}
+        </Text>
+      )}
+      <style>
+        {`
+          .polen-logo {
+            filter: none;
+          }
+          
+          @media (prefers-color-scheme: dark) {
+            .polen-logo {
+              filter: invert(1);
+            }
+          }
+        `}
+      </style>
+    </Flex>
+  )
+}

package/src/template/components/NotFound.tsx

@@ -0,0 +1,28 @@
+import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes'
+import { Link as LinkReactRouter } from 'react-router'
+
+export const NotFound: React.FC = () => {
+  return (
+    <Flex direction='column' align='center' gap='6' style={{ textAlign: `center`, paddingTop: `4rem` }}>
+      <Heading size='9' style={{ color: `var(--gray-12)` }}>404</Heading>
+      <Box>
+        <Heading size='5' mb='2'>Page Not Found</Heading>
+        <Text size='3' color='gray'>
+          The page you're looking for doesn't exist or has been moved.
+        </Text>
+      </Box>
+      <Flex gap='3'>
+        <LinkReactRouter to='/'>
+          <Button variant='soft' size='3'>
+            Go Home
+          </Button>
+        </LinkReactRouter>
+        <LinkReactRouter to='/reference'>
+          <Button variant='outline' size='3'>
+            View API Reference
+          </Button>
+        </LinkReactRouter>
+      </Flex>
+    </Flex>
+  )
+}

package/src/template/components/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+import type { React } from '#dep/react/index'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { IconButton } from '@radix-ui/themes'
+import { useTheme } from '../contexts/ThemeContext.tsx'
+
+export const ThemeToggle: React.FC = () => {
+  const { appearance, toggleTheme } = useTheme()
+
+  return (
+    <IconButton
+      size='2'
+      variant='ghost'
+      color='gray'
+      onClick={toggleTheme}
+      aria-label={`Switch to ${appearance === 'light' ? 'dark' : 'light'} theme`}
+      style={{ cursor: 'pointer' }}
+    >
+      {appearance === 'light' ? <MoonIcon width='18' height='18' /> : <SunIcon width='18' height='18' />}
+    </IconButton>
+  )
+}

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

@@ -0,0 +1 @@
+export { Callout, Tabs } from '@radix-ui/themes'

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

@@ -1,10 +1,10 @@
-import type { FileRouter } from '#lib/file-router/index'
+import type { Content } from '#api/content/$'
 import { Box } from '@radix-ui/themes'
 import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props'
 import { Items } from './SidebarItem.tsx'
 
 interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
-  data: FileRouter.Sidebar.Item[]
+  data: Content.Item[]
   style?: React.CSSProperties
 }
 

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

@@ -1,16 +1,16 @@
+import type { Content } from '#api/content/$'
 import type { React } from '#dep/react/index'
-import type { FileRouter } from '#lib/file-router/index'
 import { Texts } from '#template/components/Texts/index'
-import { Box, Flex, Text } from '@radix-ui/themes'
+import { Box, Flex } from '@radix-ui/themes'
 import { useLocation } from 'react-router'
 import { getPathActiveReport, Link } from '../Link.tsx'
 
-export const Items: React.FC<{ items: FileRouter.Sidebar.Item[] }> = ({ items }) => {
+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}
         />
       ))}
@@ -26,7 +26,7 @@ export const Items: React.FC<{ items: FileRouter.Sidebar.Item[] }> = ({ items })
 //
 //
 
-export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
+export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
   if (item.type === `ItemLink`) {
     return <SBLink link={item} />
   }
@@ -47,7 +47,7 @@ export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
 //
 
 const SBLink: React.FC<{
-  link: FileRouter.Sidebar.ItemLink | FileRouter.Sidebar.ItemSection
+  link: Content.ItemLink | Content.ItemSection
 }> = ({ link }) => {
   const location = useLocation()
   const currentPathExp = location.pathname
@@ -81,7 +81,7 @@ const SBLink: React.FC<{
 //
 
 const Section: React.FC<{
-  section: FileRouter.Sidebar.ItemSection
+  section: Content.ItemSection
 }> = ({ section }) => {
   return (
     <Box mt='8'>
@@ -104,7 +104,7 @@ const Section: React.FC<{
 //
 
 const LinkedSection: React.FC<{
-  section: FileRouter.Sidebar.ItemSection
+  section: Content.ItemSection
 }> = ({ section }) => {
   return (
     <Box>
@@ -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}
             />
           ))}
@@ -133,7 +133,7 @@ const LinkedSection: React.FC<{
   )
 }
 
-const SectionLink: React.FC<{ link: FileRouter.Sidebar.ItemLink }> = ({ link }) => {
+const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
   const location = useLocation()
   const active = getPathActiveReport(link.pathExp, location.pathname)
 

package/src/template/contexts/ThemeContext.tsx

@@ -0,0 +1,60 @@
+import type { React } from '#dep/react/index'
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type ThemeAppearance = 'light' | 'dark'
+
+interface ThemeContextValue {
+  appearance: ThemeAppearance
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+const THEME_STORAGE_KEY = 'polen-theme-preference'
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [appearance, setAppearance] = useState<ThemeAppearance>(() => {
+    // Check if we're in the browser
+    if (typeof window === 'undefined') {
+      return 'light'
+    }
+
+    // Check localStorage first
+    const stored = localStorage.getItem(THEME_STORAGE_KEY)
+    if (stored === 'light' || stored === 'dark') {
+      return stored
+    }
+
+    // Check system preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+
+    return 'light'
+  })
+
+  useEffect(() => {
+    // Persist to localStorage
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(THEME_STORAGE_KEY, appearance)
+    }
+  }, [appearance])
+
+  const toggleTheme = () => {
+    setAppearance(prev => prev === 'light' ? 'dark' : 'light')
+  }
+
+  return (
+    <ThemeContext.Provider value={{ appearance, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/src/template/routes/reference.tsx

@@ -1,10 +1,9 @@
 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'
 
 const loader = createLoader(() => {
@@ -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>
   )
 }