polen 0.11.0-next.12 → 0.11.0-next.14

package/src/template/components/Changelog/groups/FieldDeprecationReason.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/FieldDescription.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/FieldOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/InputFieldDefaultValue.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/InputFieldDescription.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/InputFieldOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/ObjectTypeInterfaceOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/SchemaRootType.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/TypeDescription.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/TypeOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/UnionMemberOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog.tsx

@@ -1,7 +1,6 @@
-import type { Api } from '#api/index'
+import { GraphqlChange } from '#lib/graphql-change'
 import { CRITICALITY_LEVELS } from '#lib/graphql-change/criticality'
-import { GraphqlChange } from '#lib/graphql-change/index'
-import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { GraphqlChangeset } from '#lib/graphql-changeset'
 import type { CriticalityLevel } from '@graphql-inspector/core'
 import { Box } from '@radix-ui/themes'
 import React from 'react'
@@ -19,7 +18,7 @@ export const renderDate = (date: Date) => {
   })
 }
 
-export const Changelog: React.FC<{ changesets: Api.Schema.NonEmptyChangeSets }> = ({ changesets }) => {
+export const Changelog: React.FC<{ changesets: GraphqlChangeset.Changelog }> = ({ changesets }) => {
   return (
     <Box>
       {changesets.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
@@ -38,12 +37,14 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
     })
 
     // Group changes
-    changeset.changes.forEach(change => {
-      const level = change.criticality.level
-      if (groups[level]) {
-        groups[level].push(change)
-      }
-    })
+    if (GraphqlChangeset.isIntermediateChangeSet(changeset)) {
+      changeset.changes.forEach(change => {
+        const level = change.criticality.level
+        if (groups[level]) {
+          groups[level].push(change)
+        }
+      })
+    }
 
     // Return only non-empty groups in order
     return CRITICALITY_LEVELS
@@ -52,7 +53,7 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
         level,
         changes: groups[level],
       }))
-  }, [changeset.changes])
+  }, [changeset])
 
   return (
     <Box mb='6'>

package/src/template/components/DeprecationReason.tsx

@@ -1,5 +1,5 @@
 import type { React } from '#dep/react/index'
-import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { GrafaidOld } from '#lib/grafaid-old'
 import { Text } from '@radix-ui/themes'
 import { Markdown } from './Markdown.js'
 

package/src/template/components/Description.tsx

@@ -2,7 +2,7 @@ import type { React } from '#dep/react/index'
 import { Text } from '@radix-ui/themes'
 import { Markdown } from './Markdown.js'
 // import type { Grafaid } from '#lib/grafaid'
-import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { GrafaidOld } from '#lib/grafaid-old'
 import type { GraphQLNamedType } from 'graphql'
 
 export const Description: React.FC<{ data: GraphQLNamedType | GrafaidOld.GraphQLField }> = ({ data }) => {

package/src/template/components/Field.tsx

@@ -1,22 +1,66 @@
+import { Api } from '#api/iso'
 import type { React } from '#dep/react/index'
-import { GrafaidOld } from '#lib/grafaid-old/index'
+import { GrafaidOld } from '#lib/grafaid-old'
+import { GraphQLPath } from '#lib/graphql-path'
+import { SchemaLifecycle } from '#lib/schema-lifecycle'
 import type { BoxProps } from '@radix-ui/themes'
-import { Box, Text } from '@radix-ui/themes'
+import { Badge, Box, Text } from '@radix-ui/themes'
+import { useSchemaLifecycle } from '../contexts/SchemaLifecycleContext.js'
 import { ArgumentListAnnotation } from './ArgumentListAnnotation.js'
 import { DeprecationReason } from './DeprecationReason.js'
 import { Description } from './Description.js'
 import { TypeAnnotation } from './TypeAnnotation.js'
 
-export const Field: React.FC<BoxProps & { data: GrafaidOld.GraphQLField }> = ({ data, ...boxProps }) => {
+export const Field: React.FC<
+  BoxProps & {
+    data: GrafaidOld.GraphQLField
+    parentTypeName?: string
+  }
+> = ({ data, parentTypeName, ...boxProps }) => {
+  const { lifecycle, currentVersion } = useSchemaLifecycle()
+
   const argumentList = GrafaidOld.isOutputField(data)
     ? <ArgumentListAnnotation field={data} />
     : null
 
+  // Get field lifecycle information if available
+  let fieldLifecycle = null
+  let addedDate = null
+  let removedDate = null
+  let isAvailable = true
+
+  if (lifecycle && parentTypeName) {
+    const fieldPath = GraphQLPath.Definition.field(parentTypeName, data.name)
+    fieldLifecycle = SchemaLifecycle.getFieldLifecycle(lifecycle, fieldPath)
+    if (fieldLifecycle) {
+      addedDate = SchemaLifecycle.getFieldAddedDate(lifecycle, fieldPath)
+      removedDate = SchemaLifecycle.getFieldRemovedDate(lifecycle, fieldPath)
+      isAvailable = SchemaLifecycle.isFieldCurrentlyAvailable(lifecycle, fieldPath)
+    }
+  }
+
   return (
     <Box {...boxProps} id={data.name}>
       <Description data={data} />
       <DeprecationReason data={data} />
-      <Text weight='medium'>{data.name}</Text>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <Text weight='medium'>{data.name}</Text>
+        {addedDate && (
+          <Badge color='green' variant='soft' size='1'>
+            Added {Api.Schema.dateToVersionString(addedDate)}
+          </Badge>
+        )}
+        {removedDate && (
+          <Badge color='red' variant='soft' size='1'>
+            Removed {Api.Schema.dateToVersionString(removedDate)}
+          </Badge>
+        )}
+        {!isAvailable && (
+          <Badge color='orange' variant='soft' size='1'>
+            Not available in current version
+          </Badge>
+        )}
+      </Box>
       <Text>
         {argumentList}
         :{` `}

package/src/template/components/FieldList.tsx

@@ -1,13 +1,14 @@
-import { Grafaid } from '#lib/grafaid/index'
+import { Grafaid } from '#lib/grafaid'
 import { Box } from '@radix-ui/themes'
 import type { FC } from 'react'
 import { Field } from './Field.js'
 
 export interface Props {
   data: Grafaid.Schema.TypesLike.Named
+  parentTypeName?: string
 }
 
-export const FieldList: FC<Props> = ({ data }) => {
+export const FieldList: FC<Props> = ({ data, parentTypeName }) => {
   if (!Grafaid.Schema.TypesLike.isFielded(data)) return null
 
   const fields = Grafaid.Schema.NodesLike.getFields(data)
@@ -20,6 +21,7 @@ export const FieldList: FC<Props> = ({ data }) => {
           mt='3'
           key={field.name}
           data={field}
+          parentTypeName={parentTypeName ?? data.name}
         />
       ))}
     </Box>

package/src/template/components/FieldListSection.tsx

@@ -1,5 +1,5 @@
 import type { React } from '#dep/react/index'
-import { Grafaid } from '#lib/grafaid/index'
+import { Grafaid } from '#lib/grafaid'
 import { Box, Heading } from '@radix-ui/themes'
 import type { GraphQLNamedType } from 'graphql'
 import { FieldList } from './FieldList.js'
@@ -13,7 +13,7 @@ export const FieldListSection: React.FC<{ data: GraphQLNamedType }> = ({ data })
   return (
     <Box>
       <Heading>Fields</Heading>
-      <FieldList data={data} />
+      <FieldList data={data} parentTypeName={data.name} />
     </Box>
   )
 }

package/src/template/components/HamburgerMenu.tsx

@@ -10,6 +10,7 @@ export interface HamburgerMenuProps {
   onClose: () => void
   sidebarData: Content.Item[]
   basePath?: string
+  topContent?: React.ReactNode
 }
 
 export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
@@ -18,6 +19,7 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
   onClose,
   sidebarData,
   basePath,
+  topContent,
 }) => {
   // Prevent body scroll when mobile menu is open
   useEffect(() => {
@@ -89,7 +91,7 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
                 <Cross2Icon width='18' height='18' />
               </IconButton>
             </Flex>
-            <Sidebar data={sidebarData} basePath={basePath} />
+            <Sidebar data={sidebarData} basePath={basePath} topContent={topContent} />
           </Box>
         </>
       )}

package/src/template/components/NamedType.tsx

@@ -1,6 +1,9 @@
-import { Box, Heading, Text } from '@radix-ui/themes'
+import { Api } from '#api/iso'
+import { SchemaLifecycle } from '#lib/schema-lifecycle'
+import { Badge, Box, Heading, Text } from '@radix-ui/themes'
 import { type GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
+import { useSchemaLifecycle } from '../contexts/SchemaLifecycleContext.js'
 import { FieldListSection } from './FieldListSection.js'
 import { Markdown } from './Markdown.js'
 
@@ -9,6 +12,8 @@ export interface Props {
 }
 
 export const NamedType: FC<Props> = ({ data }) => {
+  const { lifecycle, currentVersion } = useSchemaLifecycle()
+
   const description = data.description
     ? (
       <Text as='div' color='gray'>
@@ -16,9 +21,33 @@ export const NamedType: FC<Props> = ({ data }) => {
       </Text>
     )
     : null
+
+  // Get lifecycle information for this type
+  const typeLifecycle = lifecycle ? SchemaLifecycle.getTypeLifecycle(lifecycle, data.name) : null
+  const addedDate = lifecycle ? SchemaLifecycle.getTypeAddedDate(lifecycle, data.name) : null
+  const removedDate = lifecycle ? SchemaLifecycle.getTypeRemovedDate(lifecycle, data.name) : null
+  const isAvailable = lifecycle ? SchemaLifecycle.isTypeCurrentlyAvailable(lifecycle, data.name) : true
+
   return (
     <Box>
-      <Heading size='8'>{data.name}</Heading>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+        <Heading size='8'>{data.name}</Heading>
+        {addedDate && (
+          <Badge color='green' variant='soft' size='1'>
+            Added {Api.Schema.dateToVersionString(addedDate)}
+          </Badge>
+        )}
+        {removedDate && (
+          <Badge color='red' variant='soft' size='1'>
+            Removed {Api.Schema.dateToVersionString(removedDate)}
+          </Badge>
+        )}
+        {!isAvailable && (
+          <Badge color='orange' variant='soft' size='1'>
+            Not available in current version
+          </Badge>
+        )}
+      </Box>
       {description}
       <FieldListSection data={data} />
     </Box>

package/src/template/components/TypeIndex.tsx

@@ -1,4 +1,4 @@
-import { GrafaidOld } from '#lib/grafaid-old/index'
+import { GrafaidOld } from '#lib/grafaid-old'
 import { Box, Flex, Heading } from '@radix-ui/themes'
 import { Obj } from '@wollybeard/kit'
 import type { GraphQLNamedType, GraphQLSchema } from 'graphql'

package/src/template/components/graphql/type-kind-icon.tsx

@@ -1,5 +1,5 @@
 import type { React } from '#dep/react/index'
-import type { Grafaid } from '#lib/grafaid/index'
+import type { Grafaid } from '#lib/grafaid'
 import { Code } from '@radix-ui/themes'
 import { typeKindTokensIndex, unknownTypeKindToken } from './type-kind-tokens.js'
 

package/src/template/components/graphql/type-kind-tokens.ts

@@ -1,4 +1,4 @@
-import type { Grafaid } from '#lib/grafaid/index'
+import type { Grafaid } from '#lib/grafaid'
 import type { colorPropDef } from '@radix-ui/themes/props'
 
 type RadixColor = typeof colorPropDef[`color`][`values`][number]

package/src/template/components/graphql/type-link.tsx

@@ -1,4 +1,4 @@
-import { Grafaid } from '#lib/grafaid/index'
+import { Grafaid } from '#lib/grafaid'
 import { Code, Flex } from '@radix-ui/themes'
 import { ReferenceLink } from '../ReferenceLink.js'
 import { TypeKindIcon } from './graphql.js'

package/src/template/components/navbar/DefaultNavbar.tsx

@@ -0,0 +1,22 @@
+import type { NavbarProps } from '#api/hooks/types'
+import { Flex } from '@radix-ui/themes'
+import type React from 'react'
+
+export const DefaultNavbar: React.FC<NavbarProps> = ({ items, Item, Logo, ThemeToggle }) => {
+  return (
+    <>
+      <Logo />
+      <Flex direction='row' gap='4' style={{ flex: 1 }}>
+        {items
+          .filter(item => item.position !== 'right')
+          .map((item, index) => <Item key={index} item={item} index={index} />)}
+      </Flex>
+      <Flex direction='row' gap='4'>
+        {items
+          .filter(item => item.position === 'right')
+          .map((item, index) => <Item key={index} item={item} index={index} />)}
+      </Flex>
+      <ThemeToggle />
+    </>
+  )
+}

package/src/template/components/navbar/Item.tsx

@@ -0,0 +1,11 @@
+import type { NavbarItem } from '#api/content/navbar'
+import type React from 'react'
+import { Link as PolenLink } from '../Link.js'
+
+export const Item: React.FC<{ item: NavbarItem; index: number }> = ({ item }) => {
+  return (
+    <PolenLink color='gray' to={item.pathExp}>
+      {item.title}
+    </PolenLink>
+  )
+}

package/src/template/components/sidebar/Sidebar.tsx

@@ -8,9 +8,10 @@ interface Props extends LayoutProps, MarginProps, BoxOwnProps {
   data: Content.Item[]
   basePath?: string
   style?: React.CSSProperties
+  topContent?: React.ReactNode
 }
 
-export const Sidebar = ({ data, basePath, ...props }: Props) => {
+export const Sidebar = ({ data, basePath, topContent, ...props }: Props) => {
   return (
     <SidebarContext.Provider value={{ basePath }}>
       <Box
@@ -25,6 +26,11 @@ export const Sidebar = ({ data, basePath, ...props }: Props) => {
             }
           `}
         </style>
+        {topContent && (
+          <Box mb='4'>
+            {topContent}
+          </Box>
+        )}
         <Items items={data} />
       </Box>
     </SidebarContext.Provider>

package/src/template/contexts/SchemaLifecycleContext.tsx

@@ -0,0 +1,30 @@
+import type { React } from '#dep/react/index'
+import { SchemaLifecycle } from '#lib/schema-lifecycle'
+import { createContext, useContext } from 'react'
+
+interface SchemaLifecycleContextValue {
+  lifecycle: SchemaLifecycle.SchemaLifecycle | null
+  currentVersion: string
+}
+
+const SchemaLifecycleContext = createContext<SchemaLifecycleContextValue | undefined>(undefined)
+
+export const SchemaLifecycleProvider: React.FC<{
+  children: React.ReactNode
+  lifecycle: SchemaLifecycle.SchemaLifecycle | null
+  currentVersion: string
+}> = ({ children, lifecycle, currentVersion }) => {
+  return (
+    <SchemaLifecycleContext.Provider value={{ lifecycle, currentVersion }}>
+      {children}
+    </SchemaLifecycleContext.Provider>
+  )
+}
+
+export const useSchemaLifecycle = () => {
+  const context = useContext(SchemaLifecycleContext)
+  if (!context) {
+    throw new Error(`useSchemaLifecycle must be used within a SchemaLifecycleProvider`)
+  }
+  return context
+}

package/src/template/layouts/ChangelogLayout.tsx

@@ -4,7 +4,7 @@ import {
   isCriticalityDangerous,
   isCriticalitySafe,
 } from '#lib/graphql-change/criticality'
-import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { GraphqlChangeset } from '#lib/graphql-changeset'
 import { Box, Flex, Text } from '@radix-ui/themes'
 import type React from 'react'
 import { useEffect, useState } from 'react'
@@ -22,10 +22,17 @@ interface VersionCounts {
 }
 
 const calculateCounts = (version: GraphqlChangeset.ChangeSet): VersionCounts => {
+  if (GraphqlChangeset.isIntermediateChangeSet(version)) {
+    return {
+      breaking: version.changes.filter(isCriticalityBreaking).length,
+      dangerous: version.changes.filter(isCriticalityDangerous).length,
+      safe: version.changes.filter(isCriticalitySafe).length,
+    }
+  }
   return {
-    breaking: version.changes.filter(isCriticalityBreaking).length,
-    dangerous: version.changes.filter(isCriticalityDangerous).length,
-    safe: version.changes.filter(isCriticalitySafe).length,
+    breaking: 0,
+    dangerous: 0,
+    safe: 0,
   }
 }
 

package/src/template/layouts/SidebarLayout.tsx

@@ -10,9 +10,10 @@ interface Props {
   children: React.ReactNode
   sidebar: Content.Item[]
   basePath?: string
+  topContent?: React.ReactNode
 }
 
-export const SidebarLayout: React.FC<Props> = ({ children, sidebar, basePath }) => {
+export const SidebarLayout: React.FC<Props> = ({ children, sidebar, basePath, topContent }) => {
   const location = useLocation()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
@@ -47,6 +48,7 @@ export const SidebarLayout: React.FC<Props> = ({ children, sidebar, basePath })
             }}
             sidebarData={sidebar}
             basePath={basePath}
+            topContent={topContent}
           />
         </Box>
       )}
@@ -58,7 +60,7 @@ export const SidebarLayout: React.FC<Props> = ({ children, sidebar, basePath })
           gridColumn='1 / 3'
           gridRow='1 / auto'
         >
-          <Sidebar data={sidebar} basePath={basePath} />
+          <Sidebar data={sidebar} basePath={basePath} topContent={topContent} />
         </Box>
       )}
 

package/src/template/routes/changelog.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import type { GraphqlChangeset } from '#lib/graphql-changeset'
 import { route } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { Changelog } from '../components/Changelog.js'
@@ -28,7 +28,9 @@ const Component = () => {
 
   return (
     <ChangelogLayout versions={data.changesets}>
-      <Changelog changesets={data.changesets as [GraphqlChangeset.ChangeSet, ...GraphqlChangeset.ChangeSet[]]} />
+      <Changelog
+        changesets={data.changesets as [GraphqlChangeset.ChangeSet, ...GraphqlChangeset.ChangeSet[]]}
+      />
     </ChangelogLayout>
   )
 }

package/src/template/routes/reference.tsx

@@ -1,7 +1,7 @@
 import type { Content } from '#api/content/$'
 import { Api } from '#api/iso'
 import type { React } from '#dep/react/index'
-import { GrafaidOld } from '#lib/grafaid-old/index'
+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'
@@ -11,6 +11,7 @@ import { Field } from '../components/Field.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 { SidebarLayout } from '../layouts/index.js'
 import { schemaSource } from '../sources/schema-source.js'
 
@@ -23,10 +24,14 @@ export const loader = createLoader(async ({ params }) => {
   const schema = await schemaSource.get(currentVersion)
   const availableVersions = schemaSource.versions
 
+  // Load lifecycle data if available
+  const lifecycle = await schemaSource.getLifecycle()
+
   return {
     schema,
     currentVersion,
     availableVersions,
+    lifecycle,
   }
 })
 
@@ -81,22 +86,32 @@ const ReferenceView = () => {
       const type = data.schema.getType(params.type!)!
       const fields = (type as any).getFields()
       const field = fields[params.field!]
-      return <Field data={field} />
+      return (
+        <Field
+          data={field}
+          parentTypeName={params.type!}
+        />
+      )
     } else {
       neverCase(viewType)
     }
   })()
 
   return (
-    <SidebarLayout sidebar={sidebarItems} basePath={basePath}>
-      <Box mb={`4`}>
-        <VersionPicker
-          all={[...data.availableVersions]} // Convert readonly to mutable
-          current={data.currentVersion}
-        />
-      </Box>
-      {content}
-    </SidebarLayout>
+    <SchemaLifecycleProvider lifecycle={data.lifecycle} currentVersion={data.currentVersion}>
+      <SidebarLayout
+        sidebar={sidebarItems}
+        basePath={basePath}
+        topContent={
+          <VersionPicker
+            all={[...data.availableVersions]} // Convert readonly to mutable
+            current={data.currentVersion}
+          />
+        }
+      >
+        {content}
+      </SidebarLayout>
+    </SchemaLifecycleProvider>
   )
 }