polen 0.10.0-next.14 → 0.10.0-next.15

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/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,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.tsx'
+import { Changelog } from '../components/Changelog.js'
 
 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.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

@@ -3,8 +3,8 @@ import { createLoader, useLoaderData } from '#lib/react-router-loader/react-rout
 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 { MissingSchema } from '../components/MissingSchema.js'
+import { reference$type } from './reference.$type.js'
 
 const loader = createLoader(() => {
   const latestSchemaVersion = PROJECT_DATA.schema?.versions[0].after ?? null

package/src/template/routes/root.tsx

@@ -10,48 +10,40 @@ import { Link as LinkReactRouter } from 'react-router'
 import { Outlet, ScrollRestoration, useLocation } from 'react-router'
 import logoSrc from 'virtual:polen/project/assets/logo.svg'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import projectDataNavbar from 'virtual:polen/project/data/navbar.jsonsuper'
 import projectPagesCatalog from 'virtual:polen/project/data/pages-catalog.jsonsuper'
 import { routes } from 'virtual:polen/project/routes.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
-import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.tsx'
-import { CodeBlockEnhancer } from '../components/CodeBlockEnhancer.tsx'
-import { HamburgerMenu } from '../components/HamburgerMenu.tsx'
-import { Link } from '../components/Link.tsx'
-import { Logo } from '../components/Logo.tsx'
-import { NotFound } from '../components/NotFound.tsx'
-import { Sidebar } from '../components/sidebar/Sidebar.tsx'
-import { ThemeToggle } from '../components/ThemeToggle.tsx'
-import { ThemeProvider, useTheme } from '../contexts/ThemeContext.tsx'
-import { changelog } from './changelog.tsx'
-import { index } from './index.tsx'
-import { reference } from './reference.tsx'
+import { GraphQLSchemaProvider } from '../../lib/graphql-document/schema-context.js'
+import { CodeBlockEnhancer } from '../components/CodeBlockEnhancer.js'
+import { HamburgerMenu } from '../components/HamburgerMenu.js'
+import { Link } from '../components/Link.js'
+import { Logo } from '../components/Logo.js'
+import { NotFound } from '../components/NotFound.js'
+import { Sidebar } from '../components/sidebar/Sidebar.js'
+import { ThemeToggle } from '../components/ThemeToggle.js'
+import { ThemeProvider, useTheme } from '../contexts/ThemeContext.js'
+import { changelog } from './changelog.js'
+import { index } from './index.js'
+import { reference } from './reference.js'
 
 export const Component = () => {
   const schema = PROJECT_DATA.schema?.versions[0]?.after || null
 
   // Make schema available globally for MDX components
-  if (typeof window !== 'undefined' && schema) {
+  if (typeof window !== `undefined` && schema) {
     ;(window as any).__POLEN_GRAPHQL_SCHEMA__ = schema
   }
 
   return (
-    <html lang='en'>
-      <head>
-        <meta charSet='utf-8' />
-        <meta name='viewport' content='width=device-width, initial-scale=1' />
-        <title>{templateVariables.title}</title>
-      </head>
-      <body style={{ margin: 0 }}>
-        <ThemeProvider>
-          <GraphQLSchemaProvider schema={schema}>
-            <Layout />
-            <CodeBlockEnhancer />
-          </GraphQLSchemaProvider>
-        </ThemeProvider>
-        <ScrollRestoration />
-      </body>
-    </html>
+    <>
+      <ThemeProvider>
+        <GraphQLSchemaProvider schema={schema}>
+          <Layout />
+          <CodeBlockEnhancer />
+        </GraphQLSchemaProvider>
+      </ThemeProvider>
+      <ScrollRestoration />
+    </>
   )
 }
 
@@ -77,7 +69,7 @@ const Layout = () => {
   }
 
   const currentNavPathExp = getCurrentNavPathExp()
-  const isReferencePage = currentNavPathExp === '/reference'
+  const isReferencePage = currentNavPathExp === `/reference`
 
   const sidebar = (() => {
     if (isReferencePage && PROJECT_DATA.schema) {
@@ -90,12 +82,12 @@ const Layout = () => {
 
       for (const [title, types] of kindEntries) {
         sidebarItems.push({
-          type: 'ItemSection' as const,
+          type: `ItemSection` as const,
           title,
           pathExp: `reference-${title.toLowerCase()}`,
           isLinkToo: false,
           links: types.map(type => ({
-            type: 'ItemLink' as const,
+            type: `ItemLink` as const,
             title: type.name,
             pathExp: `reference/${type.name}`,
           })),
@@ -113,11 +105,11 @@ const Layout = () => {
 
   const header = (
     <Flex
-      gridArea={'header'}
+      gridArea={`header`}
       align='center'
-      gap={{ initial: '4', md: '8' }}
+      gap={{ initial: `4`, md: `8` }}
       pb='4'
-      mb={{ initial: '4', md: '8' }}
+      mb={{ initial: `4`, md: `8` }}
       style={{
         borderBottom: `1px solid var(--gray-3)`,
       }}
@@ -126,8 +118,12 @@ const Layout = () => {
       {isShowSidebar && (
         <HamburgerMenu
           isOpen={mobileMenuOpen}
-          onToggle={() => setMobileMenuOpen(!mobileMenuOpen)}
-          onClose={() => setMobileMenuOpen(false)}
+          onToggle={() => {
+            setMobileMenuOpen(!mobileMenuOpen)
+          }}
+          onClose={() => {
+            setMobileMenuOpen(false)
+          }}
           sidebarData={sidebar.items}
         />
       )}
@@ -136,12 +132,12 @@ const Layout = () => {
         to='/'
         style={{ color: `inherit`, textDecoration: `none` }}
       >
-        <Box display={{ initial: 'block', md: 'block' }}>
+        <Box display={{ initial: `block`, md: `block` }}>
           <Logo src={logoSrc} title={templateVariables.title} height={30} showTitle={true} />
         </Box>
       </LinkReactRouter>
       <Flex direction='row' gap='4' style={{ flex: 1 }}>
-        {projectDataNavbar.map((item, key) => (
+        {PROJECT_DATA.navbar.map((item, key) => (
           <Link key={key} color='gray' to={item.pathExp}>
             {item.title}
           </Link>
@@ -154,28 +150,28 @@ const Layout = () => {
   return (
     <Theme asChild appearance={appearance}>
       <Grid
-        width={{ initial: '100%', sm: '100%', md: 'var(--container-4)' }}
+        width={{ initial: `100%`, sm: `100%`, md: `var(--container-4)` }}
         maxWidth='100vw'
         areas={{
-          initial: "'header' 'content'",
-          sm: "'header' 'content'",
+          initial: `'header' 'content'`,
+          sm: `'header' 'content'`,
           md:
-            "'header header header header header header header header' 'sidebar sidebar . content content content content content'",
+            `'header header header header header header header header' 'sidebar sidebar . content content content content content'`,
         }}
         rows='min-content auto'
-        columns={{ initial: '1fr', sm: '1fr', md: 'repeat(8, 1fr)' }}
-        gapX={{ initial: '0', sm: '0', md: '2' }}
-        my={{ initial: '0', sm: '0', md: '8' }}
+        columns={{ initial: `1fr`, sm: `1fr`, md: `repeat(8, 1fr)` }}
+        gapX={{ initial: `0`, sm: `0`, md: `2` }}
+        my={{ initial: `0`, sm: `0`, md: `8` }}
         mx='auto'
-        px={{ initial: '4', sm: '4', md: '0' }}
-        py={{ initial: '4', sm: '4', md: '0' }}
+        px={{ initial: `4`, sm: `4`, md: `0` }}
+        py={{ initial: `4`, sm: `4`, md: `0` }}
       >
         {header}
 
         {/* Desktop Sidebar */}
         {isShowSidebar && (
           <Box
-            display={{ initial: 'none', xs: 'none', sm: 'none', md: 'block' }}
+            display={{ initial: `none`, xs: `none`, sm: `none`, md: `block` }}
             gridColumn='1 / 3'
             gridRow='2 / auto'
           >

package/src/template/routes.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from 'react-router'
-import { root } from './routes/root.tsx'
+import { root } from './routes/root.js'
 
 export const routes: RouteObject[] = [
   root,

package/src/template/server/app.ts

@@ -1,12 +1,13 @@
 import { Hono } from '#dep/hono/index'
+import { createHtmlTransformer, type HtmlTransformer } from '#lib/html-utils/html-transformer'
 import { serveStatic } from '@hono/node-server/serve-static'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import viteClientAssetManifest from 'virtual:polen/vite/client/manifest'
-import { injectManifestIntoHtml } from './manifest.ts'
-import { PageMiddleware } from './middleware/page.ts'
-import { UnsupportedAssetsMiddleware } from './middleware/unsupported-assets.ts'
-
-export type HtmlTransformer = (html: string, ctx: Hono.Context) => Promise<string> | string
+import { injectManifestIntoHtml } from './manifest.js'
+import { PageMiddleware } from './middleware/page.js'
+import { UnsupportedAssetsMiddleware } from './middleware/unsupported-assets.js'
+import { createPolenDataInjector } from './transformers/inject-polen-data.js'
+import { createThemeInitInjector } from './transformers/inject-theme-init.js'
 
 export interface AppHooks {
   transformHtml?: HtmlTransformer[]
@@ -20,17 +21,23 @@ export const createApp = (options: AppOptions = {}) => {
   const app = new Hono.Hono()
 
   // Collect all HTML transformers
-  const htmlTransformers: HtmlTransformer[] = [...(options.hooks?.transformHtml || [])]
+  const htmlTransformers: HtmlTransformer[] = [
+    // Always inject Polen global data (both dev and prod)
+    createPolenDataInjector(),
+    // Theme initialization must come after Polen data
+    createThemeInitInjector(),
+    ...(options.hooks?.transformHtml || []),
+  ]
 
   // Core middleware
-  app.use('*', UnsupportedAssetsMiddleware())
+  app.use(`*`, UnsupportedAssetsMiddleware())
 
   // Production-specific setup
   if (__BUILDING__) {
     // Add manifest transformer
-    htmlTransformers.push((html, _ctx) => {
+    htmlTransformers.push(createHtmlTransformer((html, ___ctx) => {
       return injectManifestIntoHtml(html, viteClientAssetManifest, PROJECT_DATA.basePath)
-    })
+    }))
 
     // Static file serving
     app.use(
@@ -39,7 +46,7 @@ export const createApp = (options: AppOptions = {}) => {
     )
   }
 
-  app.all('*', PageMiddleware(htmlTransformers))
+  app.all(`*`, PageMiddleware(htmlTransformers))
 
   return app
 }