polen 0.11.0-next.15 → 0.11.0-next.17

package/src/template/routes/pages.tsx

@@ -1,29 +1,9 @@
 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.json'
+import { pagesCatalog } from 'virtual:polen/project/pages'
 import { routes } from 'virtual:polen/project/routes.jsx'
-import { CodeBlock } from '../components/CodeBlock.js'
+import { MdxProvider } from '../providers/mdx.js'
 
 const Component = () => {
   const location = useLocation()
@@ -34,56 +14,14 @@ 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 - schema will be loaded client-side if needed
-        CodeBlock: (props: any) => <CodeBlock {...props} schema={null} />,
-      }}
-    >
+    <MdxProvider>
       <SidebarLayout sidebar={sidebar}>
         <Outlet />
       </SidebarLayout>
-    </MDXProvider>
+    </MdxProvider>
   )
 }
 

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 { Version } from '#lib/version/$'
-import { catalog } from '#template/data/catalog'
+import { Flex } from '@radix-ui/themes'
 import { neverCase } from '@wollybeard/kit/language'
+import { HashMap, Option } from 'effect'
 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(
@@ -36,15 +49,15 @@ const referenceLoader = ({ params }: any) =>
             // 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) {
+              const foundOption = HashMap.get(c.entries, requestedVersion)
+              if (Option.isNone(foundOption)) {
                 // TODO: Return 404 error
                 throw new Error(`Version ${params.version} not found`)
               }
-              return found
+              return Option.getOrThrow(foundOption)
             }
             // No version param means "latest" - use the last entry
-            const latest = c.entries[c.entries.length - 1]
+            const latest = Catalog.Versioned.getLatestOrThrow(c)
             if (!latest) {
               throw new Error('No schemas available in versioned catalog')
             }
@@ -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
+        }
+      }),
     })
   }
 
@@ -139,7 +161,7 @@ const ReferenceView = () => {
           return catalog._tag === 'CatalogVersioned' && version
             ? (
               <VersionPicker
-                data={catalog.entries.map(entry => entry.version)}
+                data={Catalog.Versioned.getVersions(catalog)}
                 current={version}
               />
             )
@@ -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',
+}