polen 0.10.0-next.13 → 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,8 +1,6 @@
-import { ensureEnd } from '#lib/kit-temp'
-import { VitePluginJson } from '#lib/vite-plugin-json/index'
-import { superjson } from '#singletons/superjson'
+import type { VitePluginJson } from '#lib/vite-plugin-json/index'
+import { debugPolen } from '#singletons/debug'
 import { type ComputedRef, effect, isRef } from '@vue/reactivity'
-import { Debug } from '@wollybeard/kit'
 import type { Plugin, ViteDevServer } from 'vite'
 
 interface ReactiveDataOptions {
@@ -19,11 +17,9 @@ interface ReactiveDataOptions {
    * - A reactive value directly
    */
   data: ComputedRef<object | unknown[]> | (() => object | unknown[]) | object | unknown[]
-  /** Debounce updates (ms). If not set, uses process.nextTick for batching */
-  debounce?: number
   /**
    * JSON codec to use (e.g., superjson)
-   * Default: superjson
+   * Default: JSON
    * Only used when includeJsonPlugin is true
    */
   codec?: VitePluginJson.Codec
@@ -32,54 +28,52 @@ interface ReactiveDataOptions {
    @default 'reactive-data'
    */
   name?: string
-  /**
-   * Module type to return. Default: 'json'
-   * Use 'superjson' to avoid conflicts with built-in JSON plugin
-   */
-  moduleType?: string
 }
 
-const debug = Debug.create('vite-plugin-reactive-data')
+const pluginDebug = debugPolen.sub(`vite-reactive-data`)
 
 export const create = (options: ReactiveDataOptions): Plugin => {
-  const codec = options.codec ?? superjson
-  const moduleType = options.moduleType ?? 'json'
-  const moduleId = ensureEnd(options.moduleId, `.${moduleType}`)
+  const codec = options.codec ?? JSON
+  const moduleId = options.moduleId
   const name = options.name ?? `reactive-data`
 
-  let server: ViteDevServer
-  let updateTimer: NodeJS.Timeout | undefined
-  let updateScheduled = false
+  const debug = pluginDebug.sub(name)
+  debug(`constructor`, { moduleId })
 
-  const doUpdate = () => {
-    debug('update')
-    updateTimer = undefined
-    updateScheduled = false
-    if (!server) return
-    const moduleNode = server.moduleGraph.getModuleById(moduleId)
+  let $server: ViteDevServer
+  let $invalidationScheduled = false
+
+  const tryInvalidate = () => {
+    $invalidationScheduled = false
+    if (!$server) throw new Error(`Server not available yet - this should be impossible`)
+    const moduleNode = $server.moduleGraph.getModuleById(moduleId)
     if (moduleNode) {
-      server.moduleGraph.invalidateModule(moduleNode)
+      debug(`invalidate`, { id: moduleNode.id })
+      $server.moduleGraph.invalidateModule(moduleNode)
+    } else {
+      debug(`cannot invalidate`, {
+        reason: `notInModuleGraph`,
+        moduleId,
+        hint: `maybe it was not loaded yet`,
+      })
     }
   }
 
-  const scheduleUpdate = () => {
-    if (options.debounce) {
-      // User wants actual debouncing for rapid updates
-      if (updateTimer) clearTimeout(updateTimer)
-      updateTimer = setTimeout(doUpdate, options.debounce)
-    } else {
-      // Just batch synchronous updates using nextTick
-      if (updateScheduled) return
-      updateScheduled = true
-      process.nextTick(doUpdate)
-    }
+  const scheduleInvalidate = () => {
+    if ($invalidationScheduled) return // already scheduled
+
+    $invalidationScheduled = true
+
+    if (!$server) return // server will flush when ready
+
+    tryInvalidate()
   }
 
   // Helper to get the current data value
   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
@@ -90,20 +84,21 @@ export const create = (options: ReactiveDataOptions): Plugin => {
   effect(() => {
     // Access data to track dependencies
     const data = getData()
-    debug('data changed:', data)
-    // Trigger update only if server is available
-    if (server) {
-      scheduleUpdate()
-    }
+    debug(`effect triggered`, { data })
+
+    scheduleInvalidate()
   })
 
   return {
     name,
 
     configureServer(_server) {
-      server = _server
-      // Trigger initial update since server is now available
-      scheduleUpdate()
+      debug(`hook configureServer`)
+      $server = _server
+      if ($invalidationScheduled) {
+        debug(`try invalidate scheduled before server was ready`)
+        tryInvalidate()
+      }
     },
 
     resolveId(id) {
@@ -112,20 +107,18 @@ export const create = (options: ReactiveDataOptions): Plugin => {
       }
     },
 
-    load: {
-      // todo: doesn't work for some reason, prefer over handler
-      // filter: {
-      //   id: {
-      //     include: moduleId,
-      //   },
-      // },
-      handler: (id) => {
-        if (id !== moduleId) return
-
-        const data = getData()
-        // Return just the raw JSON string - let the JSON plugin handle the transformation
-        return codec.stringify(data)
-      },
+    // todo make use of Vite's builtin json plugin
+    // for example, call it here somehow
+    load(id) {
+      if (id !== moduleId) return
+
+      const data = getData()
+      debug(`hook load`, { data })
+
+      return {
+        code: codec.stringify(data),
+        map: null,
+      }
     },
   }
 }

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.js`),
-      entrypoint: Path.join(templateDir, `server/main.js`),
+    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.jsx`),
+    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`, {