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

package/src/lib/theme/theme.ts

@@ -0,0 +1,210 @@
+/**
+ * Theme management utilities using CSS-first approach with cookie persistence.
+ *
+ * Strategy:
+ * - CSS `prefers-color-scheme` handles initial theme (no JS needed)
+ * - User toggle sets cookie + updates DOM immediately
+ * - Server reads cookie on next visit for SSR hydration match
+ */
+
+export interface ThemeManager {
+  /**
+   * Read theme preference from cookie
+   */
+  readCookie(cookieString?: string): Theme | null
+
+  /**
+   * Write theme preference to cookie
+   */
+  writeCookie(theme: Theme): string
+
+  /**
+   * Apply theme to DOM (sets class on document element)
+   */
+  applyToDOM(theme: Theme): void
+
+  /**
+   * Get current theme from DOM
+   */
+  getCurrentFromDOM(): Theme | null
+
+  /**
+   * Toggle theme and persist to cookie
+   * Returns the new theme
+   */
+  toggle(): Theme
+
+  /**
+   * Set specific theme and persist to cookie
+   */
+  set(theme: Theme): void
+
+  /**
+   * Get CSS string for SSR injection
+   * Includes prefers-color-scheme fallback and cookie-based override
+   */
+  getCSS(): string
+}
+
+export type Theme = `light` | `dark` | `system`
+
+export interface ThemeOptions {
+  /**
+   * Cookie name for theme persistence
+   * @default 'theme'
+   */
+  cookieName?: string
+
+  /**
+   * CSS class prefix for theme classes
+   * @default ''
+   */
+  classPrefix?: string
+
+  /**
+   * Cookie max age in seconds
+   * @default 31536000 (1 year)
+   */
+  maxAge?: number
+
+  /**
+   * Cookie path
+   * @default '/'
+   */
+  path?: string
+}
+
+/**
+ * Create a theme manager instance
+ */
+export const createThemeManager = (options: ThemeOptions = {}): ThemeManager => {
+  const {
+    cookieName = `theme`,
+    classPrefix = ``,
+    maxAge = 31536000, // 1 year
+    path = `/`,
+  } = options
+
+  const getThemeClass = (theme: Theme): string => classPrefix ? `${classPrefix}${theme}` : theme
+
+  const readCookie = (cookieString?: string): Theme | null => {
+    const cookies = cookieString || (typeof document !== `undefined` ? document.cookie : ``)
+    if (!cookies) return null
+
+    const match = new RegExp(`(^| )${cookieName}=([^;]+)`).exec(cookies)
+    const value = match?.[2]
+
+    return value === `light` || value === `dark` || value === `system` ? value : null
+  }
+
+  const writeCookie = (theme: Theme): string => {
+    // If system is selected, delete the cookie by setting Max-Age to 0
+    const cookieValue = theme === `system`
+      ? `${cookieName}=; Max-Age=0; Path=${path}; SameSite=Strict`
+      : `${cookieName}=${theme}; Max-Age=${maxAge}; Path=${path}; SameSite=Strict`
+
+    // Set cookie if in browser
+    if (typeof document !== `undefined`) {
+      document.cookie = cookieValue
+    }
+
+    return cookieValue
+  }
+
+  const applyToDOM = (theme: Theme): void => {
+    if (typeof document === `undefined`) return
+
+    // If system, detect the actual theme to apply
+    const actualTheme = theme === `system`
+      ? (globalThis.matchMedia(`(prefers-color-scheme: dark)`).matches ? `dark` : `light`)
+      : theme
+
+    const themeClass = getThemeClass(actualTheme)
+    const otherTheme = actualTheme === `light` ? `dark` : `light`
+    const otherClass = getThemeClass(otherTheme)
+
+    document.documentElement.classList.remove(otherClass)
+    document.documentElement.classList.add(themeClass)
+
+    // Also update data-theme attribute for consistency with SSR
+    document.documentElement.setAttribute('data-theme', actualTheme)
+  }
+
+  const getCurrentFromDOM = (): Theme | null => {
+    if (typeof document === `undefined`) return null
+
+    const classList = document.documentElement.classList
+
+    if (classList.contains(getThemeClass(`dark`))) return `dark`
+    if (classList.contains(getThemeClass(`light`))) return `light`
+
+    return null
+  }
+
+  const set = (theme: Theme): void => {
+    writeCookie(theme)
+    applyToDOM(theme)
+  }
+
+  const toggle = (): Theme => {
+    // Get current theme preference from cookie
+    const cookieTheme = readCookie()
+
+    // Determine next theme in cycle: system → light → dark → system
+    let newTheme: Theme
+    if (!cookieTheme || cookieTheme === `system`) {
+      // Currently on system, go to light
+      newTheme = `light`
+    } else if (cookieTheme === `light`) {
+      // Currently on light, go to dark
+      newTheme = `dark`
+    } else {
+      // Currently on dark, go back to system
+      newTheme = `system`
+    }
+
+    set(newTheme)
+    return newTheme
+  }
+
+  const getCSS = (): string => {
+    const lightClass = getThemeClass(`light`)
+    const darkClass = getThemeClass(`dark`)
+
+    return `
+/* Theme CSS - handles both system preference and user override */
+:root {
+  /* Default light theme variables */
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark theme variables for system preference */
+    color-scheme: dark;
+  }
+}
+
+/* User preference overrides (set via cookie/JS) */
+html.${lightClass} {
+  /* Force light theme */
+  color-scheme: light;
+}
+
+html.${darkClass} {
+  /* Force dark theme */  
+  color-scheme: dark;
+}
+`.trim()
+  }
+
+  return {
+    readCookie,
+    writeCookie,
+    applyToDOM,
+    getCurrentFromDOM,
+    toggle,
+    set,
+    getCSS,
+  }
+}

package/src/lib/vite-plugin-json/index.ts

@@ -1 +1 @@
-export * as VitePluginJson from './vite-plugin-json.ts'
+export * as VitePluginJson from './vite-plugin-json.js'

package/src/lib/vite-plugin-json/vite-plugin-json.ts

@@ -73,7 +73,7 @@ export const create = (options: VitePluginJsonImportsOptions = {}): Plugin => {
   const pluginName = options.name ?? `json-imports`
 
   // Always exclude \0 prefixed modules
-  // eslint-disable-next-line no-control-regex
+
   const baseExcludePatterns: (string | RegExp)[] = [/^\0/]
   const moduleTypes = options.filter?.moduleTypes ?? [`json`]
   const isCustomCodec = Boolean(options.codec?.importPath)
@@ -81,7 +81,7 @@ export const create = (options: VitePluginJsonImportsOptions = {}): Plugin => {
   // Check if we should handle this file based on extension
   const shouldHandle = (id: string) => {
     // Exclude internal modules with \0 prefix
-    if (id.startsWith('\0')) return false
+    if (id.startsWith(`\0`)) return false
 
     // Check if it has one of our configured extensions
     return moduleTypes.some(type => id.endsWith(`.${type}`))
@@ -89,14 +89,14 @@ export const create = (options: VitePluginJsonImportsOptions = {}): Plugin => {
 
   return {
     name: pluginName,
-    enforce: 'pre' as const,
+    enforce: `pre` as const,
     // Transform files based on extension
     transform(code, id) {
       if (!shouldHandle(id)) return
 
       try {
         // Skip validation for superjson since the codec validates the envelope format
-        if (options.codec?.validate && !options.codec.importPath?.includes('superjson')) {
+        if (options.codec?.validate && !options.codec.importPath?.includes(`superjson`)) {
           codec.parse(code)
         }
 

package/src/lib/vite-plugin-mdx/index.ts

@@ -1 +1 @@
-export * from './vite-plugin-mdx.ts'
+export * from './vite-plugin-mdx.js'

package/src/lib/vite-plugin-mdx/vite-plugin-mdx.ts

@@ -1,5 +1,3 @@
-// TODO: use this or similar once transform hook can change module type and have result re-processed
-// @see  https://github.com/rolldown/rolldown/issues/4004
 // Note: This is adapted from `@mdx-js/mdx`
 
 import type { CompileOptions } from '@mdx-js/mdx'
@@ -28,7 +26,6 @@ interface ExtraOptions {
 
 export type Options = ApplicableOptions & ExtraOptions
 
-// eslint-disable-next-line
 export const createConfig = (options?: Readonly<Options> | null | undefined): Options => {
   const {
     exclude,
@@ -48,7 +45,7 @@ export const createConfig = (options?: Readonly<Options> | null | undefined): Op
  *
  * Uses Rolldown.
  */
-export function VitePluginMdx(options?: Readonly<Options> | null): Plugin {
+export const VitePluginMdx = (options?: Readonly<Options> | null): Plugin => {
   const config = createConfig(options)
 
   const filter = createFilter(config.include, config.exclude)
@@ -56,7 +53,6 @@ export function VitePluginMdx(options?: Readonly<Options> | null): Plugin {
 
   return {
     name: `mdx`,
-    // TODO: should not be needed?
     // enforce: `pre`, // Run before other transforms
     config(__config, env) {
       // Initialize processors with Vite environment info

package/src/lib/vite-plugin-reactive-data/index.ts

@@ -1 +1 @@
-export * as VitePluginReactiveData from './vite-plugin-reactive-data.ts'
+export * as VitePluginReactiveData from './vite-plugin-reactive-data.js'

package/src/lib/vite-plugin-reactive-data/vite-plugin-reactive-data.ts

@@ -1,4 +1,4 @@
-import { VitePluginJson } from '#lib/vite-plugin-json/index'
+import type { VitePluginJson } from '#lib/vite-plugin-json/index'
 import { debugPolen } from '#singletons/debug'
 import { type ComputedRef, effect, isRef } from '@vue/reactivity'
 import type { Plugin, ViteDevServer } from 'vite'
@@ -30,7 +30,7 @@ interface ReactiveDataOptions {
   name?: string
 }
 
-const pluginDebug = debugPolen.sub('vite-reactive-data')
+const pluginDebug = debugPolen.sub(`vite-reactive-data`)
 
 export const create = (options: ReactiveDataOptions): Plugin => {
   const codec = options.codec ?? JSON
@@ -38,24 +38,23 @@ export const create = (options: ReactiveDataOptions): Plugin => {
   const name = options.name ?? `reactive-data`
 
   const debug = pluginDebug.sub(name)
-  debug('constructor', { moduleId })
+  debug(`constructor`, { moduleId })
 
   let $server: ViteDevServer
   let $invalidationScheduled = false
 
   const tryInvalidate = () => {
     $invalidationScheduled = false
-    // updateTimer = undefined
-    if (!$server) throw new Error('Server not available yet - this should be impossible')
+    if (!$server) throw new Error(`Server not available yet - this should be impossible`)
     const moduleNode = $server.moduleGraph.getModuleById(moduleId)
     if (moduleNode) {
-      debug('invalidate', { id: moduleNode.id })
+      debug(`invalidate`, { id: moduleNode.id })
       $server.moduleGraph.invalidateModule(moduleNode)
     } else {
-      debug('cannot invalidate', {
-        reason: 'notInModuleGraph',
+      debug(`cannot invalidate`, {
+        reason: `notInModuleGraph`,
         moduleId,
-        hint: 'maybe it was not loaded yet',
+        hint: `maybe it was not loaded yet`,
       })
     }
   }
@@ -74,7 +73,7 @@ export const create = (options: ReactiveDataOptions): Plugin => {
   const getData = () => {
     if (isRef(options.data)) {
       return options.data.value
-    } else if (typeof options.data === 'function') {
+    } else if (typeof options.data === `function`) {
       return options.data()
     } else {
       return options.data
@@ -85,7 +84,7 @@ export const create = (options: ReactiveDataOptions): Plugin => {
   effect(() => {
     // Access data to track dependencies
     const data = getData()
-    debug('effect triggered', { data })
+    debug(`effect triggered`, { data })
 
     scheduleInvalidate()
   })
@@ -94,10 +93,10 @@ export const create = (options: ReactiveDataOptions): Plugin => {
     name,
 
     configureServer(_server) {
-      debug('hook configureServer')
+      debug(`hook configureServer`)
       $server = _server
       if ($invalidationScheduled) {
-        debug('try invalidate scheduled before server was ready')
+        debug(`try invalidate scheduled before server was ready`)
         tryInvalidate()
       }
     },
@@ -114,7 +113,7 @@ export const create = (options: ReactiveDataOptions): Plugin => {
       if (id !== moduleId) return
 
       const data = getData()
-      debug('hook load', { data })
+      debug(`hook load`, { data })
 
       return {
         code: codec.stringify(data),

package/src/lib/vite-plugins/index.ts

@@ -1,4 +1,4 @@
 /**
  * Export unified VitePlugins namespace
  */
-export * as VitePlugins from './vite-plugins.ts'
+export * as VitePlugins from './vite-plugins.js'

package/src/lib/vite-plugins/vite-plugins.ts

@@ -1 +1 @@
-export * from './build-logger.ts'
+export * from './build-logger.js'

package/src/lib/vite-virtual/identified-loader.ts

@@ -1,8 +1,8 @@
 import type { Vite } from '#dep/vite/index'
-import { StackProcessor } from '../stack-processor/index.ts'
-import { debug } from './debug.ts'
-import type { HookLoad, HookResolveId } from './hooks.ts'
-import type { Identifier } from './identifier.ts'
+import { StackProcessor } from '../stack-processor/index.js'
+import { debug } from './debug.js'
+import type { HookLoad, HookResolveId } from './hooks.js'
+import type { Identifier } from './identifier.js'
 
 export interface IdentifiedLoader {
   identifier: Identifier

package/src/lib/vite-virtual/identifier.ts

@@ -1,4 +1,4 @@
-import { createId, markNoPlugins, normalizeId } from './id.ts'
+import { createId, markNoPlugins, normalizeId } from './id.js'
 
 export interface Options {
   /**

package/src/lib/vite-virtual/index.ts

@@ -1 +1 @@
-export * as ViteVirtual from './vite-virtual.ts'
+export * as ViteVirtual from './vite-virtual.js'

package/src/lib/vite-virtual/vite-virtual.ts

@@ -1,3 +1,3 @@
-export * as Id from './id.ts'
-export * as IdentifiedLoader from './identified-loader.ts'
-export * as Identifier from './identifier.ts'
+export * as Id from './id.js'
+export * as IdentifiedLoader from './identified-loader.js'
+export * as Identifier from './identifier.js'

package/src/package-paths.ts

@@ -11,13 +11,25 @@ export interface PackagePaths {
   sourceExtension: `.js` | `.ts`
   sourceDir: string
   template: {
-    rootDir: string
-    server: {
-      app: string
-      entrypoint: string
+    absolute: {
+      rootDir: string
+      server: {
+        app: string
+        entrypoint: string
+      }
+      client: {
+        entrypoint: string
+      }
     }
-    client: {
-      entrypoint: string
+    relative: {
+      rootDir: string
+      server: {
+        app: string
+        entrypoint: string
+      }
+      client: {
+        entrypoint: string
+      }
     }
   }
 }
@@ -36,6 +48,8 @@ const isRunningFromSource = sourceDir.endsWith(sourceDirRelativeExp)
 
 const sourceKind = isRunningFromSource ? `.ts` : `.js`
 
+const templateDirRelative = isRunningFromSource ? `src/template` : `build/template`
+
 export const packagePaths: PackagePaths = {
   name: `polen`,
   isRunningFromSource,
@@ -47,13 +61,25 @@ export const packagePaths: PackagePaths = {
   rootDir: rootDir,
   sourceDir,
   template: {
-    rootDir: templateDir,
-    server: {
-      app: Path.join(templateDir, `server/app${sourceKind}`),
-      entrypoint: Path.join(templateDir, `server/main${sourceKind}`),
+    absolute: {
+      rootDir: templateDir,
+      server: {
+        app: Path.join(templateDir, `server/app${sourceKind}`),
+        entrypoint: Path.join(templateDir, `server/main${sourceKind}`),
+      },
+      client: {
+        entrypoint: Path.join(templateDir, `entry.client${isRunningFromSource ? `.tsx` : `.js`}`),
+      },
     },
-    client: {
-      entrypoint: Path.join(templateDir, `entry.client${isRunningFromSource ? `.tsx` : `.js`}`),
+    relative: {
+      rootDir: templateDirRelative,
+      server: {
+        app: `${templateDirRelative}/server/app${sourceKind}`,
+        entrypoint: `${templateDirRelative}/server/main${sourceKind}`,
+      },
+      client: {
+        entrypoint: `${templateDirRelative}/entry.client${isRunningFromSource ? `.tsx` : `.js`}`,
+      },
     },
   },
 }

package/src/project-data.ts

@@ -1,10 +1,12 @@
 import type { Config } from '#api/config/index'
-import type { Schema } from './api/schema/index.ts'
+import type { NavbarItem } from '#api/content/navbar'
+import type { Schema } from './api/schema/index.js'
 
 export interface ProjectData {
   schema: null | Schema.Schema
   basePath: string
   paths: Config.Config[`paths`][`project`]
+  navbar: NavbarItem[]
   server: {
     static: {
       directory: string

package/src/sandbox.ts

@@ -2,19 +2,19 @@ import { filePathToRouteLogical } from '#lib/file-router/scan'
 import { Path } from '@wollybeard/kit'
 
 // Test parsing of numbered directory
-const testPath1 = Path.parse('a/10_b/index.md')
+const testPath1 = Path.parse(`a/10_b/index.md`)
 const logical1 = filePathToRouteLogical(testPath1)
-console.log('Path 1:', testPath1)
-console.log('Logical 1:', logical1)
+console.log(`Path 1:`, testPath1)
+console.log(`Logical 1:`, logical1)
 
 // Test parsing of numbered file
-const testPath2 = Path.parse('a/10_b/g.md')
+const testPath2 = Path.parse(`a/10_b/g.md`)
 const logical2 = filePathToRouteLogical(testPath2)
-console.log('\nPath 2:', testPath2)
-console.log('Logical 2:', logical2)
+console.log(`\nPath 2:`, testPath2)
+console.log(`Logical 2:`, logical2)
 
 // Test directory structure
-const testPath3 = Path.parse('a/30_d/index.md')
+const testPath3 = Path.parse(`a/30_d/index.md`)
 const logical3 = filePathToRouteLogical(testPath3)
-console.log('\nPath 3:', testPath3)
-console.log('Logical 3:', logical3)
+console.log(`\nPath 3:`, testPath3)
+console.log(`Logical 3:`, logical3)

package/src/template/components/ArgumentList.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Heading, Text } from '@radix-ui/themes'
 import type { GraphQLArgument } from 'graphql'
 import type { FC } from 'react'
-import { TypeAnnotation } from './TypeAnnotation.tsx'
+import { TypeAnnotation } from './TypeAnnotation.js'
 
 export interface Props {
   args: readonly GraphQLArgument[]

package/src/template/components/ArgumentListAnnotation.tsx

@@ -2,8 +2,8 @@ import { GrafaidOld } from '#lib/grafaid-old/index'
 import { Box, Text } from '@radix-ui/themes'
 import type { GraphQLField } from 'graphql'
 import type { FC } from 'react'
-import { ArgumentAnnotation } from './ArgumentAnnotation.tsx'
-import { FieldList } from './FieldList.tsx'
+import { ArgumentAnnotation } from './ArgumentAnnotation.js'
+import { FieldList } from './FieldList.js'
 
 export interface Props {
   field: GraphQLField<any, any>

package/src/template/components/Changelog.tsx

@@ -4,8 +4,8 @@ import type { GraphqlChange } from '#lib/graphql-change/index'
 import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
 import { Box, Code } from '@radix-ui/themes'
 import type React from 'react'
-import type { Schema as ChangelogData } from '../../api/schema/index.ts'
-import { Graphql } from './graphql/index.ts'
+import type { Schema as ChangelogData } from '../../api/schema/index.js'
+import { Graphql } from './graphql/index.js'
 
 export const renderDate = (date: Date) => {
   return date.toLocaleString(`default`, {

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>
   )
 }