polen 0.11.0-next.15 → 0.11.0-next.16

package/src/template/routes/reference.tsx

@@ -1,19 +1,21 @@
-import type { Content } from '#api/content/$'
 import { Api } from '#api/iso'
 import { Catalog } from '#lib/catalog/$'
 import { GrafaidOld } from '#lib/grafaid-old'
+import { Grafaid } from '#lib/grafaid/$'
 import { S } from '#lib/kit-temp/effect'
 import { Lifecycles } from '#lib/lifecycles/$'
 import { route, useLoaderData } from '#lib/react-router-effect/react-router-effect'
 import { Schema } from '#lib/schema/$'
+import { Swiss } from '#lib/swiss'
 import { Version } from '#lib/version/$'
-import { catalog } from '#template/data/catalog'
+import { Flex } from '@radix-ui/themes'
 import { neverCase } from '@wollybeard/kit/language'
 import { Effect, Match } from 'effect'
 import React from 'react'
 import { useParams } from 'react-router'
-import { catalogBridge, hasCatalog } from '../catalog-bridge.js'
+import { schemasCatalog } from 'virtual:polen/project/schemas'
 import { Field } from '../components/Field.js'
+import { TypeKindIcon } from '../components/graphql/graphql.js'
 import { MissingSchema } from '../components/MissingSchema.js'
 import { NamedType } from '../components/NamedType.js'
 import { VersionPicker } from '../components/VersionPicker.js'
@@ -25,8 +27,19 @@ const routeSchema = S.Struct({
   schema: Schema.Schema,
 })
 
-const referenceLoader = ({ params }: any) =>
-  catalogBridge.view().pipe(
+const referenceLoader = ({ params }: any) => {
+  // This should never be called when schemasCatalog is null
+  // because the route won't be added to the router
+  // But we return an Effect.fail for safety
+  if (!schemasCatalog) {
+    return Effect.fail(
+      new Error(
+        'No schema catalog available. This page requires a GraphQL schema to be configured. '
+          + 'Please ensure your Polen configuration includes a valid schema source.',
+      ),
+    )
+  }
+  return Effect.succeed(schemasCatalog).pipe(
     Effect.map(catalog => {
       // Resolve the actual schema based on catalog type and params
       const schema = Match.value(catalog).pipe(
@@ -59,6 +72,7 @@ const referenceLoader = ({ params }: any) =>
       }
     }),
   )
+}
 
 // Single component that handles all reference route variations
 const ReferenceView = () => {
@@ -67,7 +81,7 @@ const ReferenceView = () => {
   const { catalog, schema } = loaderData
 
   // Create lifecycles from schema
-  const lifecycle = React.useMemo(() => Lifecycles.createFromSchema(schema), [schema])
+  const lifecycle = Lifecycles.createFromSchema(schema)
 
   if (!schema) {
     // this would be some sort of internal error, make issue more clear.
@@ -77,7 +91,7 @@ const ReferenceView = () => {
   // Build reference sidebar from schema types
   const kindMap = GrafaidOld.getKindMap(schema.definition)
 
-  const sidebarItems: Content.Item[] = []
+  const sidebarItems: any[] = [] // Will be cast to template types in SidebarLayout
   const kindEntries = Object.entries(kindMap.list).filter(([_, types]) => types.length > 0)
 
   for (const [title, types] of kindEntries) {
@@ -86,11 +100,19 @@ const ReferenceView = () => {
       title,
       pathExp: `reference-${title.toLowerCase()}`,
       isLinkToo: false,
-      links: types.map(type => ({
-        type: `ItemLink` as const,
-        title: type.name,
-        pathExp: type.name, // Just the type name, basePath will be prepended
-      })),
+      links: types.map(type => {
+        const kind = Grafaid.Schema.typeKindFromClass(type)
+        return {
+          type: `ItemLink` as const,
+          title: (
+            <Flex align='center' gap='1' display='inline-flex'>
+              <TypeKindIcon kind={kind} />
+              {type.name}
+            </Flex>
+          ),
+          pathExp: type.name, // Just the type name, basePath will be prepended
+        }
+      }),
     })
   }
 
@@ -185,14 +207,14 @@ const typeAndFieldRoutes = [
  * - Single ReferenceView component handles all variations
  */
 
-export const reference = !hasCatalog()
+export const reference = !schemasCatalog
   ? null
   : route({
     path: `reference`,
     children: [
       ...typeAndFieldRoutes,
       // Only add version routes if versioned
-      ...(Catalog.Versioned.is(catalog)
+      ...(Catalog.Versioned.is(schemasCatalog)
         ? [route({
           path: `version/:version`,
           children: typeAndFieldRoutes,

package/src/template/routes/root.tsx

@@ -1,18 +1,15 @@
 import type { NavbarProps } from '#api/hooks/types'
 import type { ReactRouter } from '#dep/react-router/index'
-import { S } from '#lib/kit-temp/effect'
 import { route } from '#lib/react-router-effect/route'
+import { Swiss } from '#lib/swiss'
 import type { Stores } from '#template/stores/$'
-import { Box, Flex, Theme } from '@radix-ui/themes'
-
-const schema = S.Struct({})
+import { Box, Theme } from '@radix-ui/themes'
 import { Link as LinkReactRouter } from 'react-router'
-import { Outlet, ScrollRestoration } 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.json'
+import { templateConfig } from 'virtual:polen/project/config'
 import * as projectHooks from 'virtual:polen/project/hooks'
-import PROJECT_SCHEMA from 'virtual:polen/project/schema.json'
-import { templateVariables } from 'virtual:polen/template/variables'
+import { navbar } from 'virtual:polen/project/navbar'
 import { Logo } from '../components/Logo.js'
 import { DefaultNavbar } from '../components/navbar/DefaultNavbar.js'
 import { Item } from '../components/navbar/Item.js'
@@ -20,7 +17,11 @@ import { NotFound } from '../components/NotFound.js'
 import { ThemeToggle } from '../components/ThemeToggle.js'
 import { ToastContainer } from '../components/ToastContainer.js'
 import { ThemeProvider, useTheme } from '../contexts/ThemeContext.js'
+import { swissSharpTheme } from '../theme/swiss-sharp.js'
+import '../theme/swiss-sharp.css'
+import '../../lib/swiss/styles.css'
 import { changelog } from './changelog.js'
+import { examplesRoute } from './examples/_.js'
 import { index } from './index.js'
 import { pages } from './pages.js'
 import { reference } from './reference.js'
@@ -38,9 +39,16 @@ export const Component = () => {
 
 const Layout = () => {
   const { appearance } = useTheme()
+  const location = useLocation()
+
+  // Check if we're on home page with cinematic hero
+  const isHomeWithCinematicHero = location.pathname === '/'
+    && templateConfig.home.enabled
+    && templateConfig.home.hero.enabled
+    && templateConfig.home.hero.layout === 'cinematic'
 
   const navbarProps: NavbarProps = {
-    items: PROJECT_DATA.navbar,
+    items: navbar,
     Item,
     Logo: () => (
       <LinkReactRouter
@@ -50,7 +58,7 @@ const Layout = () => {
         <Box display={{ initial: `block`, md: `block` }}>
           <Logo
             src={logoSrc}
-            title={templateVariables.title}
+            title={templateConfig.templateVariables.title}
             height={30}
             showTitle={true}
           />
@@ -62,39 +70,86 @@ const Layout = () => {
 
   const NavbarComponent = projectHooks.navbar || DefaultNavbar
 
-  const header = (
-    <Flex
-      align='center'
-      gap={{ initial: `4`, md: `8` }}
-      pb='4'
-      mb={{ initial: `4`, md: `8` }}
-      style={{
-        borderBottom: `1px solid var(--gray-3)`,
-      }}
-    >
-      <NavbarComponent {...navbarProps} />
-    </Flex>
-  )
-
   return (
-    <Theme asChild appearance={appearance} radius='none'>
-      <Box
-        width={{ initial: `100%`, sm: `100%`, md: `var(--container-4)` }}
-        maxWidth='100vw'
-        my={{ initial: `0`, sm: `0`, md: `8` }}
-        mx='auto'
-        px={{ initial: `4`, sm: `4`, md: `0` }}
-        py={{ initial: `4`, sm: `4`, md: `0` }}
+    <Theme
+      asChild
+      appearance={appearance}
+      {...swissSharpTheme}
+    >
+      <Swiss.Grid
+        maxWidth='1440px'
+        gutter='var(--space-4)'
+        margins='var(--space-5)'
       >
-        {header}
+        {/* Navbar */}
+        {isHomeWithCinematicHero
+          ? (
+            // Cinematic hero mode: navbar is fixed overlay
+            <Theme asChild appearance='dark'>
+              <Swiss.Grid
+                position='fixed'
+                top={'0'}
+                left={'0'}
+                right={'0'}
+                py={'6'}
+                style={{
+                  zIndex: 100,
+                  background: 'rgba(0, 0, 0, 0.2)',
+                }}
+              >
+                <Swiss.Body subgrid>
+                  <NavbarComponent {...navbarProps} />
+                </Swiss.Body>
+              </Swiss.Grid>
+            </Theme>
+          )
+          : (
+            // Normal mode: navbar in grid flow
+            <Swiss.Body
+              subgrid
+              py={'6'}
+              mb={{ initial: '4', md: '8' }}
+              style={{
+                borderBottom: '1px solid var(--gray-3)',
+              }}
+            >
+              <NavbarComponent {...navbarProps} />
+            </Swiss.Body>
+          )}
         <Outlet />
         <ToastContainer />
-      </Box>
+      </Swiss.Grid>
     </Theme>
   )
 }
 
-const children: ReactRouter.RouteObject[] = [index, pages]
+const children: ReactRouter.RouteObject[] = []
+
+// Conditionally add index route based on home.enabled
+// When home is disabled, reference page becomes the root
+if (templateConfig.home.enabled !== false) {
+  children.push(index)
+} else if (reference && templateConfig.schema?.enabled) {
+  // When home is disabled and reference exists, make reference the index
+  // We'll handle this by adding a redirect from index route
+  children.push(index)
+}
+
+children.push(pages)
+
+//
+//
+//
+//
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Examples Routes
+//
+//
+//
+
+// Use the enabled flag from config
+if (templateConfig.examples.enabled) {
+  children.push(examplesRoute)
+}
 
 //
 //
@@ -105,8 +160,10 @@ const children: ReactRouter.RouteObject[] = [index, pages]
 //
 //
 
-if (PROJECT_SCHEMA) {
-  children.push(changelog)
+if (templateConfig.schema?.enabled) {
+  if (changelog) {
+    children.push(changelog)
+  }
   if (reference) {
     children.push(reference)
   }
@@ -146,7 +203,6 @@ const storeModules = import.meta.glob('../stores/!($.*)*.ts', { eager: true }) a
 export const root = route({
   path: `/`,
   Component,
-  schema,
   loader: async () => {
     // Reset all stores on SSR to prevent cross-request pollution
     if (import.meta.env.SSR) {

package/src/template/server/create-page-html-response.ts

@@ -8,7 +8,7 @@ import * as Theme from '#lib/theme/theme'
 import { Arr } from '@wollybeard/kit'
 import * as ReactDomServer from 'react-dom/server'
 import { createStaticRouter, StaticRouterProvider } from 'react-router'
-import { templateVariables } from 'virtual:polen/template/variables'
+import { templateConfig } from 'virtual:polen/project/config'
 import type { PolenGlobalData } from '../constants.js'
 import { view } from './view.js'
 
@@ -65,7 +65,7 @@ export const createPageHtmlResponse = async (
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${templateVariables.title}</title>
+    <title>${templateConfig.templateVariables.title}</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   </head>
   <body>

package/src/template/server/main.ts

@@ -1,24 +1,24 @@
 import { serve } from '@hono/node-server' // TODO: support non-node platforms.
 import { Path } from '@wollybeard/kit'
 import { neverCase } from '@wollybeard/kit/language'
-import PROJECT_DATA from 'virtual:polen/project/data.json'
+import { templateConfig } from 'virtual:polen/project/config'
 import { createApp } from './app.js'
 
 if (__BUILDING__) {
   switch (__BUILD_ARCHITECTURE__) {
     case `ssg`:
     case `ssr`:
-      const port = process.env[`PORT`] ? parseInt(process.env[`PORT`]) : PROJECT_DATA.server.port
+      const port = process.env[`PORT`] ? parseInt(process.env[`PORT`]) : templateConfig.server.port
       const app = createApp({
         paths: {
           assets: {
             directory: Path.join(
-              PROJECT_DATA.paths.project.relative.build.root,
-              PROJECT_DATA.paths.project.relative.build.relative.assets.root,
+              templateConfig.paths.project.relative.build.root,
+              templateConfig.paths.project.relative.build.relative.assets.root,
             ),
-            route: PROJECT_DATA.server.routes.assets,
+            route: templateConfig.server.routes.assets,
           },
-          base: PROJECT_DATA.basePath,
+          base: templateConfig.build.base,
         },
       })
       serve({ fetch: app.fetch, port })

package/src/template/server/view.ts

@@ -1,9 +1,9 @@
 import { createStaticHandler } from 'react-router'
-import PROJECT_DATA from 'virtual:polen/project/data.json'
+import { templateConfig } from 'virtual:polen/project/config'
 import { routes } from '../routes.js'
 
 export const view = createStaticHandler(routes, {
-  ...(PROJECT_DATA.basePath !== '/' && {
-    basename: PROJECT_DATA.basePath.slice(0, -1), // Remove trailing slash for React Router
+  ...(templateConfig.build.base !== '/' && {
+    basename: templateConfig.build.base.slice(0, -1), // Remove trailing slash for React Router
   }),
 })

package/src/template/stores/changelog.ts

@@ -22,7 +22,7 @@ export type VersionState = S.Schema.Type<typeof VersionState>
  */
 export const State = S.Struct({
   // Using a plain object instead of HashMap for valtio compatibility
-  // Keys are Version.toString() results
+  // Keys are Version.encodeSync() results
   versionMemory: S.Record({
     key: S.String,
     value: VersionState,
@@ -56,7 +56,7 @@ export const store = proxy({
    * Remember the current revision for a version
    */
   rememberRevision(schema: SchemaLib.Versioned.Versioned, revision: Revision.Revision | null) {
-    const versionKey = Version.toString(schema.version)
+    const versionKey = Version.encodeSync(schema.version)
     store.versionMemory = {
       ...store.versionMemory,
       [versionKey]: { currentRevision: revision },
@@ -67,7 +67,7 @@ export const store = proxy({
    * Get the remembered revision for a version
    */
   getRememberedRevision(schema: SchemaLib.Versioned.Versioned): Revision.Revision | null {
-    const versionKey = Version.toString(schema.version)
+    const versionKey = Version.encodeSync(schema.version)
     return store.versionMemory[versionKey]?.currentRevision ?? null
   },
 

package/src/template/theme/swiss-sharp.css

@@ -0,0 +1,117 @@
+/**
+ * Swiss Sharp Theme - CSS Variable Overrides
+ *
+ * Implements a sharp, minimal design system inspired by Swiss International Style.
+ * Features: extreme typography contrast, sharp corners, mathematical spacing.
+ *
+ * This theme respects Radix UI's light/dark mode switching by NOT overriding color variables.
+ * Only structural and typographic properties are customized.
+ */
+
+/* Ensure body background matches theme background */
+:root,
+body {
+    background-color: var(--color-background, white);
+    padding: 0;
+    margin: 0;
+}
+
+/* Dark mode body background */
+:is(.dark, .dark-theme) body {
+    background-color: var(--color-background, #111111);
+}
+
+/* Apply to both light and dark theme modes */
+.radix-themes,
+.light,
+.light-theme,
+.dark,
+.dark-theme {
+    /* ============================================================================
+   * Typography - Sharp & Extreme Contrast
+   * ============================================================================ */
+
+    /* Font families - clean sans-serif */
+    --default-font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --heading-font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --code-font-family:
+        "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
+
+    /* Font adjustments for impact */
+    --heading-font-size-adjust: 1.05;
+    --heading-letter-spacing: -0.04em;
+    --heading-line-height: 0.9;
+
+    /* Weight system - extreme contrast */
+    --font-weight-light: 200;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 900;
+
+    /* Letter spacing - tighter for sharpness */
+    --letter-spacing-1: 0.04em;
+    --letter-spacing-2: 0.02em;
+    --letter-spacing-3: 0em;
+    --letter-spacing-4: -0.01em;
+    --letter-spacing-5: -0.02em;
+    --letter-spacing-6: -0.025em;
+    --letter-spacing-7: -0.03em;
+    --letter-spacing-8: -0.035em;
+    --letter-spacing-9: -0.04em;
+
+    /* ============================================================================
+   * Accent Color - Sharp Blue
+   * ============================================================================ */
+
+    /* Override accent with a sharp blue - works in both light and dark */
+    --accent-9: #0055ff;
+    --accent-10: #0044dd;
+    --accent-11: #0033bb;
+
+    /* ============================================================================
+   * Spacing - Using Radix defaults to avoid breaking components
+   * ============================================================================ */
+
+    /* Removed custom spacing - was breaking dropdown and other component layouts */
+
+    /* ============================================================================
+   * Radius - All Sharp (Zero Radius)
+   * ============================================================================ */
+
+    --radius-1: 0px;
+    --radius-2: 0px;
+    --radius-3: 0px;
+    --radius-4: 0px;
+    --radius-5: 0px;
+    --radius-6: 0px;
+    --radius-full: 0px;
+    --radius-thumb: 0px;
+
+    /* ============================================================================
+   * Shadows - Minimal & Sharp
+   * ============================================================================ */
+
+    /* Minimal shadows - using semi-transparent blacks for theme compatibility */
+    --shadow-1: 0 1px 0 0 rgba(0, 0, 0, 0.05);
+    --shadow-2: 0 2px 0 0 rgba(0, 0, 0, 0.1);
+    --shadow-3: 0 4px 0 0 rgba(0, 0, 0, 0.15);
+    --shadow-4: 0 8px 0 0 rgba(0, 0, 0, 0.2);
+    --shadow-5: 0 12px 0 0 rgba(0, 0, 0, 0.25);
+    --shadow-6: 0 16px 0 0 rgba(0, 0, 0, 0.3);
+
+    /* ============================================================================
+   * Cursors - Minimal
+   * ============================================================================ */
+
+    --cursor-button: pointer;
+    --cursor-checkbox: pointer;
+    --cursor-disabled: not-allowed;
+    --cursor-link: pointer;
+    --cursor-menu-item: pointer;
+    --cursor-radio: pointer;
+    --cursor-slider-thumb: grab;
+    --cursor-slider-thumb-active: grabbing;
+    --cursor-switch: pointer;
+}

package/src/template/theme/swiss-sharp.ts

@@ -0,0 +1,14 @@
+import type { ThemeProps } from '@radix-ui/themes'
+
+/**
+ * Swiss Sharp Theme Configuration
+ *
+ * A minimal, sharp design system inspired by Swiss International Style.
+ * Features mathematical grids, extreme typography contrast, and monochromatic palette.
+ */
+export const swissSharpTheme: Partial<ThemeProps> = {
+  accentColor: 'blue',
+  grayColor: 'gray',
+  radius: 'none',
+  panelBackground: 'solid',
+}

package/src/types/virtual-modules.d.ts

@@ -3,37 +3,44 @@ declare module 'virtual:polen/vite/client/manifest' {
   export default manifest
 }
 
-declare module 'virtual:polen/template/variables' {
-  export const templateVariables: import('#api/config/configurator').TemplateVariables
-}
-
 declare module 'virtual:polen/project/routes.jsx' {
   export const routes: import('#vite/plugins/core').ProjectRoutesModule['routes']
 }
 
-declare module 'virtual:polen/template/schema-augmentations' {
-  export const schemaAugmentations: import('#api/schema/augmentations/schema-augmentation').Augmentation[]
+declare module 'virtual:polen/project/assets/logo.svg' {
+  const logo: {
+    light: string
+    dark: string
+    mode: 'single' | 'dual'
+    designedFor: 'light' | 'dark'
+  }
+  export default logo
 }
 
-declare module 'virtual:polen/project/data.json' {
-  const data: import('#project-data').ProjectData
-  export { data as default }
+declare module 'virtual:polen/project/assets/hero' {
+  const src: string | null
+  export default src
 }
 
-declare module 'virtual:polen/project/schema.json' {
-  // Object mapping filenames to JSON content for the catalog bridge
-  const schema: Record<string, string> | null
-  export { schema as default }
+declare module 'virtual:polen/project/schemas' {
+  export const schemasCatalog: import('#lib/catalog/$').Catalog.Catalog | null
 }
 
-declare module 'virtual:polen/project/data/pages-catalog.json' {
-  const data: import('#vite/plugins/pages').ProjectPagesCatalog
-  export { data as default }
+declare module 'virtual:polen/project/pages' {
+  export const pagesCatalog: import('#vite/plugins/pages').ProjectPagesCatalog
 }
 
-declare module 'virtual:polen/project/assets/logo.svg' {
-  const src: string
-  export default src
+declare module 'virtual:polen/project/examples' {
+  export const examplesCatalog: import('#api/examples/$').Examples.Catalog.Catalog
+  export const IndexComponent: React.ComponentType | null
+}
+
+declare module 'virtual:polen/project/config' {
+  export const templateConfig: import('#api/config-template/template').TemplateConfig
+}
+
+declare module 'virtual:polen/project/navbar' {
+  export const navbar: import('#api/content/navbar').NavbarItem[]
 }
 
 declare module 'virtual:polen/project/hooks' {

package/src/vite/config.ts

@@ -1,4 +1,4 @@
-import type { Api } from '#api/index'
+import type { Api } from '#api/$'
 import { Vite } from '#dep/vite/index'
 import { Main } from './plugins/main.js'
 

package/src/vite/logger.ts

@@ -1,12 +1,11 @@
-import type { Config } from '#api/api'
+import type { Api } from '#api/$'
 import { Vite } from '#dep/vite/index'
 import { Err, Str } from '@wollybeard/kit'
 import { stripAnsi } from 'consola/utils'
-import { onError } from 'effect/Stream'
 
 const baseLogger = Vite.createLogger(undefined)
 
-export const createLogger = (config: Config.Config): Vite.Logger => {
+export const createLogger = (config: Api.Config.Config): Vite.Logger => {
   return {
     ...baseLogger,
     info(msg, options) {