polen 0.11.0-next.14 → 0.11.0-next.16

package/src/template/routes/pages.tsx

@@ -1,45 +1,11 @@
-import { route } from '#lib/react-router-aid/react-router-aid'
-import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
+import { route } from '#lib/react-router-effect/route'
 import { SidebarLayout } from '#template/layouts/index'
-import { MDXProvider } from '@mdx-js/react'
-import {
-  Badge,
-  Box,
-  Button,
-  Callout,
-  Card,
-  Code,
-  DataList,
-  Em,
-  Heading,
-  Link,
-  Quote,
-  Separator,
-  Strong,
-  Table,
-  Tabs,
-  Text,
-  Tooltip,
-} from '@radix-ui/themes'
 import { Outlet, useLocation } from 'react-router'
-import PROJECT_DATA_PAGES_CATALOG from 'virtual:polen/project/data/pages-catalog.jsonsuper'
+import { pagesCatalog } from 'virtual:polen/project/pages'
 import { routes } from 'virtual:polen/project/routes.jsx'
-import { CodeBlock } from '../components/CodeBlock.js'
-import { schemaSource } from '../sources/schema-source.js'
-
-const loader = createLoader(async () => {
-  // Check if schema exists first
-  if (schemaSource.isEmpty) {
-    return { schema: null }
-  }
-
-  // Fetch the latest schema for MDX pages
-  const schema = await schemaSource.get('latest')
-  return { schema }
-})
+import { MdxProvider } from '../providers/mdx.js'
 
 const Component = () => {
-  const { schema } = useLoaderData<typeof loader>()
   const location = useLocation()
 
   // Build sidebar from pages catalog
@@ -48,62 +14,19 @@ const Component = () => {
   const topLevelPath = pathSegments[0] ? `/${pathSegments[0]}` : '/'
 
   // Get the sidebar for this section
-  const sidebar = PROJECT_DATA_PAGES_CATALOG.sidebarIndex[topLevelPath]?.items || []
+  const sidebar = pagesCatalog.sidebarIndex[topLevelPath]?.items || []
 
   return (
-    <MDXProvider
-      components={{
-        // Map markdown elements to Radix with spacing
-        p: (props) => <Text as='p' mb='4' {...props} />,
-        h1: (props) => <Heading size='8' mt='6' mb='4' {...props} />,
-        h2: (props) => <Heading size='7' mt='6' mb='3' {...props} />,
-        h3: (props) => <Heading size='6' mt='5' mb='3' {...props} />,
-        h4: (props) => <Heading size='5' mt='5' mb='2' {...props} />,
-        h5: (props) => <Heading size='4' mt='4' mb='2' {...props} />,
-        h6: (props) => <Heading size='3' mt='4' mb='2' {...props} />,
-        strong: Strong,
-        em: Em,
-        code: Code,
-        blockquote: (props) => <Quote my='4' {...props} />,
-        a: Link,
-        hr: (props) => <Separator my='6' {...props} />,
-        table: Table.Root,
-        thead: Table.Header,
-        tbody: Table.Body,
-        tr: Table.Row,
-        th: Table.ColumnHeaderCell,
-        td: Table.Cell,
-        // Lists need spacing too
-        ul: (props) => <Box as='ul' mb='4' style={{ paddingLeft: '1.5rem' }} {...props} />,
-        ol: (props) => <Box as='ol' mb='4' style={{ paddingLeft: '1.5rem' }} {...props} />,
-        li: (props) => <Box as='li' mb='2' {...props} />,
-
-        // Direct Radix components for MDX
-        Badge,
-        Button,
-        // @ts-expect-error
-        Callout,
-        Card,
-        // @ts-expect-error
-        DataList,
-        // @ts-expect-error
-        Tabs,
-        Tooltip,
-
-        // Code Hike component with schema injected
-        CodeBlock: (props: any) => <CodeBlock {...props} schema={schema} />,
-      }}
-    >
+    <MdxProvider>
       <SidebarLayout sidebar={sidebar}>
         <Outlet />
       </SidebarLayout>
-    </MDXProvider>
+    </MdxProvider>
   )
 }
 
 export const pages = route({
   // Pathless layout route - doesn't affect URL paths
-  loader,
   Component,
   children: [...routes], // All MDX page routes go here
 })

package/src/template/routes/reference.tsx

@@ -1,53 +1,97 @@
-import type { Content } from '#api/content/$'
 import { Api } from '#api/iso'
-import type { React } from '#dep/react/index'
+import { Catalog } from '#lib/catalog/$'
 import { GrafaidOld } from '#lib/grafaid-old'
-import { route, routeIndex } 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 { 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 { 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 { 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'
-import { SchemaLifecycleProvider } from '../contexts/SchemaLifecycleContext.js'
+import { GraphqlLifecycleProvider } from '../contexts/GraphqlLifecycleContext.js'
 import { SidebarLayout } from '../layouts/index.js'
-import { schemaSource } from '../sources/schema-source.js'
 
-export const loader = createLoader(async ({ params }) => {
-  // Handle both versioned and unversioned routes:
-  // - Versioned: /reference/version/:version/:type → params.version exists
-  // - Unversioned: /reference/:type → params.version is undefined, defaults to latest
-  const currentVersion = params.version ?? Api.Schema.VERSION_LATEST
-
-  const schema = await schemaSource.get(currentVersion)
-  const availableVersions = schemaSource.versions
-
-  // Load lifecycle data if available
-  const lifecycle = await schemaSource.getLifecycle()
+const routeSchema = S.Struct({
+  catalog: Catalog.Catalog,
+  schema: Schema.Schema,
+})
 
-  return {
-    schema,
-    currentVersion,
-    availableVersions,
-    lifecycle,
+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(
+        Match.tagsExhaustive({
+          CatalogUnversioned: (c) => c.schema,
+          CatalogVersioned: (c) => {
+            // If version param provided, find that specific version
+            if (params.version) {
+              const requestedVersion = Version.decodeSync(params.version)
+              const found = c.entries.find(s => Version.equivalence(requestedVersion, s.version))
+              if (!found) {
+                // TODO: Return 404 error
+                throw new Error(`Version ${params.version} not found`)
+              }
+              return found
+            }
+            // No version param means "latest" - use the last entry
+            const latest = c.entries[c.entries.length - 1]
+            if (!latest) {
+              throw new Error('No schemas available in versioned catalog')
+            }
+            return latest
+          },
+        }),
+      )
+
+      return {
+        catalog,
+        schema,
+      }
+    }),
+  )
+}
 
 // Single component that handles all reference route variations
 const ReferenceView = () => {
   const params = useParams() as { version?: string; type?: string; field?: string }
-  const data = useLoaderData<typeof loader>()
+  const loaderData = useLoaderData(routeSchema)
+  const { catalog, schema } = loaderData
 
-  if (!data.schema) {
+  // Create lifecycles from schema
+  const lifecycle = Lifecycles.createFromSchema(schema)
+
+  if (!schema) {
+    // this would be some sort of internal error, make issue more clear.
     return <MissingSchema />
   }
 
   // Build reference sidebar from schema types
-  const kindMap = GrafaidOld.getKindMap(data.schema)
+  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) {
@@ -56,22 +100,32 @@ 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
+        }
+      }),
     })
   }
 
-  // Calculate basePath based on current version
-  const basePath = Api.Schema.Routing.createReferenceBasePath(data.currentVersion)
+  // Calculate basePath based on schema version
+  const basePath = Api.Schema.Routing.createReferenceBasePath(
+    Schema.getVersion(schema),
+  )
 
   // Determine view type and render appropriate content
   const viewType = Api.Schema.Routing.getReferenceViewType({
-    schema: data.schema,
-    type: params.type,
-    field: params.field,
+    schema: schema,
+    type: params.type || '',
+    field: params.field || '',
   })
 
   const content: React.ReactNode = (() => {
@@ -80,10 +134,10 @@ const ReferenceView = () => {
     } else if (viewType === 'type-missing' || viewType === 'field-missing') {
       return <MissingSchema />
     } else if (viewType === 'type') {
-      const type = data.schema.getType(params.type!)!
+      const type = schema.definition.getType(params.type!)!
       return <NamedType data={type} />
     } else if (viewType === 'field') {
-      const type = data.schema.getType(params.type!)!
+      const type = schema.definition.getType(params.type!)!
       const fields = (type as any).getFields()
       const field = fields[params.field!]
       return (
@@ -98,40 +152,49 @@ const ReferenceView = () => {
   })()
 
   return (
-    <SchemaLifecycleProvider lifecycle={data.lifecycle} currentVersion={data.currentVersion}>
+    <GraphqlLifecycleProvider lifecycle={lifecycle} schema={schema}>
       <SidebarLayout
         sidebar={sidebarItems}
         basePath={basePath}
-        topContent={
-          <VersionPicker
-            all={[...data.availableVersions]} // Convert readonly to mutable
-            current={data.currentVersion}
-          />
-        }
+        topContent={(() => {
+          const version = Schema.getVersion(schema)
+          return catalog._tag === 'CatalogVersioned' && version
+            ? (
+              <VersionPicker
+                data={catalog.entries.map(entry => entry.version)}
+                current={version}
+              />
+            )
+            : null
+        })()}
       >
         {content}
       </SidebarLayout>
-    </SchemaLifecycleProvider>
+    </GraphqlLifecycleProvider>
   )
 }
 
 // Define routes that handle type and field params
 const typeAndFieldRoutes = [
-  routeIndex({
+  route({
+    index: true,
     Component: ReferenceView,
-    loader,
+    loader: referenceLoader,
+    schema: routeSchema,
   }),
   route({
     path: `:type`,
     Component: ReferenceView,
     errorElement: <MissingSchema />,
-    loader,
+    loader: referenceLoader,
+    schema: routeSchema,
     children: [
       route({
         path: `:field`,
         Component: ReferenceView,
         errorElement: <MissingSchema />,
-        loader,
+        loader: referenceLoader,
+        schema: routeSchema,
       }),
     ],
   }),
@@ -143,13 +206,19 @@ const typeAndFieldRoutes = [
  * - Leaf routes have components and loaders that always run fresh
  * - Single ReferenceView component handles all variations
  */
-export const reference = route({
-  path: `reference`,
-  children: [
-    ...typeAndFieldRoutes,
-    route({
-      path: `version/:version`,
-      children: typeAndFieldRoutes,
-    }),
-  ],
-})
+
+export const reference = !schemasCatalog
+  ? null
+  : route({
+    path: `reference`,
+    children: [
+      ...typeAndFieldRoutes,
+      // Only add version routes if versioned
+      ...(Catalog.Versioned.is(schemasCatalog)
+        ? [route({
+          path: `version/:version`,
+          children: typeAndFieldRoutes,
+        })]
+        : []),
+    ],
+  })

package/src/template/routes/root.tsx

@@ -1,17 +1,15 @@
 import type { NavbarProps } from '#api/hooks/types'
 import type { ReactRouter } from '#dep/react-router/index'
-import { route } from '#lib/react-router-aid/react-router-aid'
-import { createLoader } from '#lib/react-router-loader/react-router-loader'
+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'
+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.jsonsuper'
+import { templateConfig } from 'virtual:polen/project/config'
 import * as projectHooks from 'virtual:polen/project/hooks'
-import PROJECT_SCHEMA from 'virtual:polen/project/schema.jsonsuper'
-import { templateVariables } from 'virtual:polen/template/variables'
-import { Link as PolenLink } from '../components/Link.js'
+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'
@@ -19,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'
@@ -37,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
@@ -49,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}
           />
@@ -61,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)
+}
 
 //
 //
@@ -104,9 +160,13 @@ const children: ReactRouter.RouteObject[] = [index, pages]
 //
 //
 
-if (PROJECT_SCHEMA) {
-  children.push(changelog)
-  children.push(reference)
+if (templateConfig.schema?.enabled) {
+  if (changelog) {
+    children.push(changelog)
+  }
+  if (reference) {
+    children.push(reference)
+  }
 }
 
 //
@@ -118,14 +178,14 @@ if (PROJECT_SCHEMA) {
 //
 //
 
-const notFoundRoute = route({
+const notFoundRoute = {
   id: `*_not_found`,
   path: `*`,
   Component: NotFound,
   handle: {
     statusCode: 404,
   },
-})
+}
 children.push(notFoundRoute)
 
 //
@@ -143,7 +203,7 @@ const storeModules = import.meta.glob('../stores/!($.*)*.ts', { eager: true }) a
 export const root = route({
   path: `/`,
   Component,
-  loader: createLoader(async () => {
+  loader: async () => {
     // Reset all stores on SSR to prevent cross-request pollution
     if (import.meta.env.SSR) {
       for (const module of Object.values(storeModules)) {
@@ -154,6 +214,6 @@ export const root = route({
     }
 
     return {}
-  }),
+  },
   children,
 })

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

@@ -3,12 +3,12 @@ import type { Hono } from '#dep/hono/index'
 import type { ReactRouter } from '#dep/react-router/index'
 import { React } from '#dep/react/index'
 import { ResponseInternalServerError } from '#lib/kit-temp'
-import type { ReactRouterAid } from '#lib/react-router-aid'
+import type { RouteHandle } from '#lib/react-router-effect/react-router-effect'
 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>
@@ -99,7 +99,7 @@ const getStatusCode = (
   }
 
   // Then check for custom status in route handle
-  const handle = Arr.getLast(context.matches)?.route.handle as ReactRouterAid.RouteHandle | undefined
+  const handle = Arr.getLast(context.matches)?.route.handle as RouteHandle | undefined
   if (handle?.statusCode) {
     return handle.statusCode
   }