polen 0.10.0-next.14 → 0.10.0-next.16

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

@@ -1,37 +1,21 @@
 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'
+import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.js'
+import type { GraphQLDocumentProps } from '../../../lib/graphql-document/components/GraphQLDocument.js'
 
 /**
  * Client-side wrapper that hydrates GraphQL documents with schema
  */
-export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
+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(() => {
-          // Silently fall back to unhighlighted code
-        })
-      }
-
       // Access virtual module only on client side
-      if (typeof window !== 'undefined') {
-        import('virtual:polen/project/data.jsonsuper').then(PROJECT_DATA => {
+      if (typeof window !== `undefined`) {
+        import(`virtual:polen/project/data.jsonsuper`).then(PROJECT_DATA => {
           const s = PROJECT_DATA.default?.schema?.versions?.[0]?.after
           // Schema loaded successfully
           if (s) {
@@ -41,13 +25,13 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
           // Schema loading is optional - continue without it
         })
       }
-    }, [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'>
+          <pre>
             <code className="language-graphql">{props.children}</code>
           </pre>
         </div>
@@ -57,7 +41,7 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
     // 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') {
+      if (typeof window !== `undefined`) {
         window.location.href = url
       }
     }
@@ -67,7 +51,6 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
         <GraphQLDocument
           {...props}
           schema={schema}
-          highlightedHtml={highlightedHtml || undefined}
           options={{
             debug: false, // Default to false for shipping
             ...props.options,
@@ -80,7 +63,7 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
     // Fall back to plain code block on error
     return (
       <div data-testid='graphql-document' className='graphql-document graphql-document-static'>
-        <pre className='shiki'>
+        <pre>
           <code className="language-graphql">{props.children}</code>
         </pre>
       </div>

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

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

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

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

package/src/template/components/graphql/type-kind-icon.tsx

@@ -1,10 +1,9 @@
 import type { React } from '#dep/react/index'
 import type { Grafaid } from '#lib/grafaid/index'
 import { Code } from '@radix-ui/themes'
-import { typeKindTokensIndex, unknownTypeKindToken } from './type-kind-tokens.ts'
+import { typeKindTokensIndex, unknownTypeKindToken } from './type-kind-tokens.js'
 
 export const TypeKindIcon: React.FC<{ kind: Grafaid.Schema.TypeKindName }> = ({ kind }) => {
-  // eslint-disable-next-line
   const { symbol, color } = typeKindTokensIndex[kind] ?? unknownTypeKindToken
 
   return <Code color={color} weight='bold' variant='outline'>{symbol}</Code>

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

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

package/src/template/components/layouts/SidebarLayout.tsx

@@ -0,0 +1,68 @@
+import type { Content } from '#api/content/$'
+import { Box, Grid } from '@radix-ui/themes'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router'
+import { HamburgerMenu } from '../HamburgerMenu.js'
+import { Sidebar } from '../sidebar/Sidebar.js'
+
+interface SidebarLayoutProps {
+  children: React.ReactNode
+  sidebar: Content.Item[]
+}
+
+export const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children, sidebar }) => {
+  const location = useLocation()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.pathname])
+
+  const isShowSidebar = sidebar && sidebar.length > 0
+
+  return (
+    <Grid
+      areas={{
+        initial: `'content'`,
+        sm: `'content'`,
+        md: `'sidebar sidebar . content content content content content'`,
+      }}
+      rows='auto'
+      columns={{ initial: `1fr`, sm: `1fr`, md: `repeat(8, 1fr)` }}
+      gapX={{ initial: `0`, sm: `0`, md: `2` }}
+    >
+      {/* Mobile menu - only show when sidebar exists */}
+      {isShowSidebar && (
+        <Box display={{ initial: `block`, md: `none` }} mb='4'>
+          <HamburgerMenu
+            isOpen={mobileMenuOpen}
+            onToggle={() => {
+              setMobileMenuOpen(!mobileMenuOpen)
+            }}
+            onClose={() => {
+              setMobileMenuOpen(false)
+            }}
+            sidebarData={sidebar}
+          />
+        </Box>
+      )}
+
+      {/* Desktop Sidebar */}
+      {isShowSidebar && (
+        <Box
+          display={{ initial: `none`, xs: `none`, sm: `none`, md: `block` }}
+          gridColumn='1 / 3'
+          gridRow='1 / auto'
+        >
+          <Sidebar data={sidebar} />
+        </Box>
+      )}
+
+      <Box gridArea='content / content / auto / 8' className='prose'>
+        {children}
+      </Box>
+    </Grid>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './SidebarLayout.js'

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

@@ -1,7 +1,7 @@
 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'
+import { Items } from './SidebarItem.js'
 
 interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
   data: Content.Item[]

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

@@ -3,7 +3,7 @@ import type { React } from '#dep/react/index'
 import { Texts } from '#template/components/Texts/index'
 import { Box, Flex } from '@radix-ui/themes'
 import { useLocation } from 'react-router'
-import { getPathActiveReport, Link } from '../Link.tsx'
+import { getPathActiveReport, Link } from '../Link.js'
 
 export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
   return (
@@ -31,7 +31,7 @@ export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
     return <SBLink link={item} />
   }
 
-  if (item.type === 'ItemSection' && item.isLinkToo) {
+  if (item.type === `ItemSection` && item.isLinkToo) {
     return <LinkedSection section={item} />
   }
 
@@ -113,7 +113,7 @@ const LinkedSection: React.FC<{
         <Flex
           direction='column'
           gap='2'
-          id={`section-${section.pathExp.replace(/\//g, '-')}`}
+          id={`section-${section.pathExp.replace(/\//g, `-`)}`}
           role='group'
           ml='5'
           py='2px'
@@ -140,7 +140,7 @@ const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
   return (
     <Link
       role='Sidebar Link'
-      to={'/' + link.pathExp}
+      to={`/` + link.pathExp}
       color={active.is ? `iris` : `gray`}
       style={{
         textDecoration: `none`,

package/src/template/constants.ts

@@ -0,0 +1,17 @@
+/**
+ * Default Polen global data structure
+ * This ensures we always have a consistent shape for hydration
+ */
+export const DEFAULT_POLEN_DATA = {
+  serverContext: {
+    theme: 'light' as const,
+    isDev: false,
+  },
+} as const
+
+export type PolenGlobalData = {
+  serverContext: {
+    theme: 'light' | 'dark' | 'system'
+    isDev: boolean
+  }
+}

package/src/template/contexts/ThemeContext.tsx

@@ -1,51 +1,82 @@
 import type { React } from '#dep/react/index'
 import { createContext, useContext, useEffect, useState } from 'react'
+import * as Theme from '../../lib/theme/theme.js'
 
-type ThemeAppearance = 'light' | 'dark'
+type ThemeAppearance = `light` | `dark`
+type ThemePreference = `light` | `dark` | `system`
 
 interface ThemeContextValue {
   appearance: ThemeAppearance
+  preference: ThemePreference
   toggleTheme: () => void
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
-const THEME_STORAGE_KEY = 'polen-theme-preference'
+// Create theme manager instance
+const themeManager = Theme.createThemeManager({
+  cookieName: `polen-theme-preference`,
+})
+
+// Theme CSS component to ensure consistent CSS on server and client
+const ThemeCSS: React.FC = () => {
+  const css = themeManager.getCSS()
+  return <style dangerouslySetInnerHTML={{ __html: css }} />
+}
 
 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'
+    // Initial appearance from server or browser
+    const serverTheme = globalThis.__POLEN__.serverContext.theme
+    if (serverTheme === 'system') {
+      // During SSR, default to light for system preference
+      // Client will detect actual preference on mount
+      return typeof globalThis.window !== 'undefined'
+        ? (globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+        : 'light'
     }
+    return serverTheme
+  })
 
-    return 'light'
+  const [preference, setPreference] = useState<ThemePreference>(() => {
+    // Initial preference from server-rendered theme
+    const serverTheme = globalThis.__POLEN__.serverContext.theme
+    // If server sent a specific theme (from cookie), use that as preference
+    // Otherwise it's system preference
+    return serverTheme
   })
 
   useEffect(() => {
-    // Persist to localStorage
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(THEME_STORAGE_KEY, appearance)
+    // Apply theme preference to DOM on mount and when it changes
+    themeManager.applyToDOM(preference)
+
+    // Update appearance based on preference
+    if (preference === 'system') {
+      const systemTheme = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      setAppearance(systemTheme)
+
+      // Listen for system theme changes
+      const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)')
+      const handleChange = (e: MediaQueryListEvent) => {
+        if (preference === 'system') {
+          setAppearance(e.matches ? 'dark' : 'light')
+        }
+      }
+      mediaQuery.addEventListener('change', handleChange)
+      return () => mediaQuery.removeEventListener('change', handleChange)
+    } else {
+      setAppearance(preference)
     }
-  }, [appearance])
+  }, [preference])
 
   const toggleTheme = () => {
-    setAppearance(prev => prev === 'light' ? 'dark' : 'light')
+    const newPref = themeManager.toggle() as ThemePreference
+    setPreference(newPref)
   }
 
   return (
-    <ThemeContext.Provider value={{ appearance, toggleTheme }}>
+    <ThemeContext.Provider value={{ appearance, preference, toggleTheme }}>
+      <ThemeCSS />
       {children}
     </ThemeContext.Provider>
   )
@@ -54,7 +85,7 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
 export const useTheme = () => {
   const context = useContext(ThemeContext)
   if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider')
+    throw new Error(`useTheme must be used within a ThemeProvider`)
   }
   return context
 }

package/src/template/entry.client.tsx

@@ -4,7 +4,7 @@ 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.tsx'
+import { routes } from './routes.js'
 
 // SPA
 
@@ -21,8 +21,13 @@ const router = createBrowserRouter(routes, {
   basename: PROJECT_DATA.basePath === `/` ? undefined : PROJECT_DATA.basePath.slice(0, -1), // Remove trailing slash for React Router
 })
 
+const rootElement = document.getElementById(`app`)
+if (!rootElement) {
+  throw new Error(`Could not find app root element`)
+}
+
 ReactDomClient.hydrateRoot(
-  document,
+  rootElement,
   (
     <StrictMode>
       <RouterProvider router={router} />

package/src/template/global.d.ts

@@ -0,0 +1,7 @@
+import type { PolenGlobalData } from './constants'
+
+declare global {
+  var __POLEN__: PolenGlobalData
+}
+
+export {}

package/src/template/routes/changelog.tsx

@@ -1,7 +1,8 @@
 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.tsx'
+import { Changelog } from '../components/Changelog.js'
+import { ChangelogLayout } from '../components/ChangelogLayout.js'
 
 const loader = createLoader(() => {
   return {
@@ -16,7 +17,11 @@ const Component = () => {
     return <div>No data to show. There is no schema is.</div>
   }
 
-  return <Changelog schema={data.schema} />
+  return (
+    <ChangelogLayout versions={data.schema.versions}>
+      <Changelog schema={data.schema} />
+    </ChangelogLayout>
+  )
 }
 
 export const changelog = createRoute({

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.tsx'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import type { reference } from './reference.tsx'
+import { Field } from '../components/Field.js'
+import { MissingSchema } from '../components/MissingSchema.js'
+import type { reference } from './reference.js'
 
 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.tsx'
-import { NamedType } from '../components/NamedType.tsx'
-import type { reference } from './reference.tsx'
+import { MissingSchema } from '../components/MissingSchema.js'
+import { NamedType } from '../components/NamedType.js'
+import type { reference } from './reference.js'
 
 const Component = () => {
   const params = useParams() as { type: string }

package/src/template/routes/reference.tsx

@@ -1,10 +1,13 @@
+import type { Content } from '#api/content/$'
+import { GrafaidOld } from '#lib/grafaid-old/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 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.tsx'
-import { reference$type } from './reference.$type.tsx'
+import { SidebarLayout } from '../components/layouts/index.js'
+import { MissingSchema } from '../components/MissingSchema.js'
+import { reference$type } from './reference.$type.js'
 
 const loader = createLoader(() => {
   const latestSchemaVersion = PROJECT_DATA.schema?.versions[0].after ?? null
@@ -20,10 +23,30 @@ const Component = () => {
     return <MissingSchema />
   }
 
+  // Build reference sidebar from schema types
+  const kindMap = GrafaidOld.getKindMap(data.schema)
+
+  const sidebarItems: Content.Item[] = []
+  const kindEntries = Object.entries(kindMap.list).filter(([_, types]) => types.length > 0)
+
+  for (const [title, types] of kindEntries) {
+    sidebarItems.push({
+      type: `ItemSection` as const,
+      title,
+      pathExp: `reference-${title.toLowerCase()}`,
+      isLinkToo: false,
+      links: types.map(type => ({
+        type: `ItemLink` as const,
+        title: type.name,
+        pathExp: `reference/${type.name}`,
+      })),
+    })
+  }
+
   return (
-    <Box className='prose'>
+    <SidebarLayout sidebar={sidebarItems}>
       <Outlet />
-    </Box>
+    </SidebarLayout>
   )
 }