polen 0.10.0-next.15 → 0.10.0-next.17

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

@@ -0,0 +1,30 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const InputFieldDescription: React.FC<{ change: GraphqlChange.Group.InputFieldDescription }> = ({ change }) => {
+  switch (change.type) {
+    case `INPUT_FIELD_DESCRIPTION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added description to input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+          <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_DESCRIPTION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed description from input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+          <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_DESCRIPTION_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed description for input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+          <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,29 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const InputFieldOperation: React.FC<{ change: GraphqlChange.Group.InputFieldOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `INPUT_FIELD_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added input field <Code>{change.meta.addedInputFieldName}</Code> to <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed input field <Code>{change.meta.removedFieldName}</Code> from <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed field <Code>{change.meta.inputFieldName}</Code> type from <Code>{change.meta.oldInputFieldType}</Code>
+          {' '}
+          to <Code>{change.meta.newInputFieldType}</Code> on input <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const ObjectTypeInterfaceOperation: React.FC<{ change: GraphqlChange.Group.ObjectTypeInterfaceOperation }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `OBJECT_TYPE_INTERFACE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          <Code>{change.meta.objectTypeName}</Code> object implements <Code>{change.meta.addedInterfaceName}</Code>{' '}
+          interface
+        </ChangeBase>
+      )
+    case `OBJECT_TYPE_INTERFACE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          <Code>{change.meta.objectTypeName}</Code> object no longer implements{' '}
+          <Code>{change.meta.removedInterfaceName}</Code> interface
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,31 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const SchemaRootType: React.FC<{ change: GraphqlChange.Group.SchemaRootType }> = ({ change }) => {
+  switch (change.type) {
+    case `SCHEMA_QUERY_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema query root type changed from <Code>{change.meta.oldQueryTypeName}</Code> to{' '}
+          <Code>{change.meta.newQueryTypeName}</Code>
+        </ChangeBase>
+      )
+    case `SCHEMA_MUTATION_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema mutation root type changed from <Code>{change.meta.oldMutationTypeName || `null`}</Code> to{' '}
+          <Code>{change.meta.newMutationTypeName || `null`}</Code>
+        </ChangeBase>
+      )
+    case `SCHEMA_SUBSCRIPTION_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema subscription root type changed from <Code>{change.meta.oldSubscriptionTypeName || `null`}</Code> to
+          {' '}
+          <Code>{change.meta.newSubscriptionTypeName || `null`}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const TypeDescription: React.FC<{ change: GraphqlChange.Group.TypeDescription }> = ({ change }) => {
+  switch (change.type) {
+    case `TYPE_DESCRIPTION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added description to type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_DESCRIPTION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed description from type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_DESCRIPTION_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed description for type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const TypeOperation: React.FC<{ change: GraphqlChange.Group.TypeOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `TYPE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added type <Code>{change.meta.addedTypeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed type <Code>{change.meta.removedTypeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_KIND_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed type <Code>{change.meta.typeName}</Code> from {change.meta.oldTypeKind} to {change.meta.newTypeKind}
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const UnionMemberOperation: React.FC<{ change: GraphqlChange.Group.UnionMemberOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `UNION_MEMBER_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added <Code>{change.meta.addedUnionMemberTypeName}</Code> to union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+    case `UNION_MEMBER_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed <Code>{change.meta.removedUnionMemberTypeName}</Code> from union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/index.ts

@@ -0,0 +1,25 @@
+export { DirectiveArgument } from './DirectiveArgument.js'
+export { DirectiveArgumentDescription } from './DirectiveArgumentDescription.js'
+export { DirectiveArgumentOperation } from './DirectiveArgumentOperation.js'
+export { DirectiveDescription } from './DirectiveDescription.js'
+export { DirectiveLocationOperation } from './DirectiveLocationOperation.js'
+export { DirectiveOperation } from './DirectiveOperation.js'
+export { DirectiveUsage } from './DirectiveUsage.js'
+export { EnumValueDeprecationReason } from './EnumValueDeprecationReason.js'
+export { EnumValueDescription } from './EnumValueDescription.js'
+export { EnumValueOperation } from './EnumValueOperation.js'
+export { FieldArgument } from './FieldArgument.js'
+export { FieldArgumentDescription } from './FieldArgumentDescription.js'
+export { FieldArgumentOperation } from './FieldArgumentOperation.js'
+export { FieldDeprecation } from './FieldDeprecation.js'
+export { FieldDeprecationReason } from './FieldDeprecationReason.js'
+export { FieldDescription } from './FieldDescription.js'
+export { FieldOperation } from './FieldOperation.js'
+export { InputFieldDefaultValue } from './InputFieldDefaultValue.js'
+export { InputFieldDescription } from './InputFieldDescription.js'
+export { InputFieldOperation } from './InputFieldOperation.js'
+export { ObjectTypeInterfaceOperation } from './ObjectTypeInterfaceOperation.js'
+export { SchemaRootType } from './SchemaRootType.js'
+export { TypeDescription } from './TypeDescription.js'
+export { TypeOperation } from './TypeOperation.js'
+export { UnionMemberOperation } from './UnionMemberOperation.js'

package/src/template/components/Changelog.tsx

@@ -1,11 +1,15 @@
 import type { GrafaidOld } from '#lib/grafaid-old/index'
-import { Grafaid } from '#lib/grafaid/index'
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import { CRITICALITY_LEVELS } from '#lib/graphql-change/criticality'
+import { GraphqlChange } from '#lib/graphql-change/index'
 import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
-import { Box, Code } from '@radix-ui/themes'
+import type { CriticalityLevel } from '@graphql-inspector/core'
+import { Box } from '@radix-ui/themes'
+import { neverCase } from '@wollybeard/kit/language'
 import type React from 'react'
+import { useMemo } from 'react'
 import type { Schema as ChangelogData } from '../../api/schema/index.js'
-import { Graphql } from './graphql/index.js'
+import { CriticalitySection } from './Changelog/CriticalitySection.js'
+import * as Group from './Changelog/groups/index.js'
 
 export const renderDate = (date: Date) => {
   return date.toLocaleString(`default`, {
@@ -19,20 +23,50 @@ export const renderDate = (date: Date) => {
 export const Changelog: React.FC<{ schema: ChangelogData.Schema }> = ({ schema }) => {
   return (
     <Box>
-      {schema.versions.map(changeset => <Changeset key={changeset.date.getDate()} changeset={changeset} />)}
+      {schema.versions.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
     </Box>
   )
 }
 
 const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ changeset }) => {
+  // Group changes by criticality level
+  const groupedChanges = useMemo(() => {
+    const groups = {} as Record<CriticalityLevel, GraphqlChange.Change[]>
+
+    // Initialize empty arrays for each level
+    CRITICALITY_LEVELS.forEach(level => {
+      groups[level] = []
+    })
+
+    // Group changes
+    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
+      .filter(level => groups[level].length > 0)
+      .map(level => ({
+        level,
+        changes: groups[level],
+      }))
+  }, [changeset.changes])
+
   return (
-    <Box>
-      <h1 title={changeset.date.toISOString()}>
+    <Box mb='6'>
+      <h1 title={changeset.date.toISOString()} id={changeset.date.toISOString()}>
         {renderDate(changeset.date)}
       </h1>
-      <ul>
-        {changeset.changes.map(change => <Change key={change.message} change={change} schema={changeset.after} />)}
-      </ul>
+      {groupedChanges.map(group => (
+        <CriticalitySection key={group.level} level={group.level} changes={group.changes}>
+          {group.changes.map(change => (
+            <Change key={`${change.type}-${change.path || change.message}`} change={change} schema={changeset.after} />
+          ))}
+        </CriticalitySection>
+      ))}
     </Box>
   )
 }
@@ -40,58 +74,57 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
 const Change: React.FC<{ change: GraphqlChange.Change; schema: GrafaidOld.Schema.Schema }> = (
   { change, schema },
 ) => {
-  const getTypeOrThrow = (name: string) => {
-    const type = schema.getType(name)
-    if (!type) throw new Error(`Type ${name} not found`)
-    return type
-  }
-
-  switch (change.type) {
-    case `TYPE_ADDED`: {
-      const type = getTypeOrThrow(change.meta.addedTypeName)
-      return (
-        <li>
-          Added type <Graphql.TypeLink type={type} />
-        </li>
-      )
-    }
-    case `FIELD_ADDED`: {
-      const rootTypeMap = Grafaid.Schema.getRootTypeMap(schema)
-      const rootDetails = rootTypeMap.list.find(_ => _.name.canonical === change.meta.typeName)
-      const type = getTypeOrThrow(change.meta.typeName)
-      if (rootDetails) {
-        return (
-          <li>
-            Added {rootDetails.operationType}
-            {` `}
-            <Code
-              color='jade'
-              variant='ghost'
-              style={{ borderBottom: `1px dotted var(--jade-6)`, borderRadius: `0` }}
-            >
-              {change.meta.addedFieldName}
-            </Code>
-          </li>
-        )
-      }
-
-      return (
-        <li>
-          Added field{` `}
-          <Code
-            color='gray'
-            variant='ghost'
-            style={{ borderBottom: `1px dotted var(--gray-6)`, borderRadius: `0` }}
-          >
-            {change.meta.addedFieldName}
-          </Code>
-          {` `}
-          to type{` `}
-          <Graphql.TypeLink type={type} />.
-        </li>
-      )
-    }
-    default:
-      return <li>TODO: {change.type}</li>
+  if (GraphqlChange.Group.isTypeOperation(change)) {
+    return <Group.TypeOperation change={change} />
+  } else if (GraphqlChange.Group.isTypeDescription(change)) {
+    return <Group.TypeDescription change={change} />
+  } else if (GraphqlChange.Group.isFieldOperation(change)) {
+    return <Group.FieldOperation change={change} />
+  } else if (GraphqlChange.Group.isFieldDescription(change)) {
+    return <Group.FieldDescription change={change} />
+  } else if (GraphqlChange.Group.isFieldDeprecation(change)) {
+    return <Group.FieldDeprecation change={change} />
+  } else if (GraphqlChange.Group.isFieldDeprecationReason(change)) {
+    return <Group.FieldDeprecationReason change={change} />
+  } else if (GraphqlChange.Group.isFieldArgumentOperation(change)) {
+    return <Group.FieldArgumentOperation change={change} />
+  } else if (GraphqlChange.Group.isFieldArgument(change)) {
+    return <Group.FieldArgument change={change} />
+  } else if (GraphqlChange.Group.isFieldArgumentDescription(change)) {
+    return <Group.FieldArgumentDescription change={change} />
+  } else if (GraphqlChange.Group.isEnumValueOperation(change)) {
+    return <Group.EnumValueOperation change={change} />
+  } else if (GraphqlChange.Group.isEnumValueDescription(change)) {
+    return <Group.EnumValueDescription change={change} />
+  } else if (GraphqlChange.Group.isEnumValueDeprecationReason(change)) {
+    return <Group.EnumValueDeprecationReason change={change} />
+  } else if (GraphqlChange.Group.isInputFieldOperation(change)) {
+    return <Group.InputFieldOperation change={change} />
+  } else if (GraphqlChange.Group.isInputFieldDescription(change)) {
+    return <Group.InputFieldDescription change={change} />
+  } else if (GraphqlChange.Group.isInputFieldDefaultValue(change)) {
+    return <Group.InputFieldDefaultValue change={change} />
+  } else if (GraphqlChange.Group.isUnionMemberOperation(change)) {
+    return <Group.UnionMemberOperation change={change} />
+  } else if (GraphqlChange.Group.isObjectTypeInterfaceOperation(change)) {
+    return <Group.ObjectTypeInterfaceOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveOperation(change)) {
+    return <Group.DirectiveOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveDescription(change)) {
+    return <Group.DirectiveDescription change={change} />
+  } else if (GraphqlChange.Group.isDirectiveLocationOperation(change)) {
+    return <Group.DirectiveLocationOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgumentOperation(change)) {
+    return <Group.DirectiveArgumentOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgument(change)) {
+    return <Group.DirectiveArgument change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgumentDescription(change)) {
+    return <Group.DirectiveArgumentDescription change={change} />
+  } else if (GraphqlChange.Group.isSchemaRootType(change)) {
+    return <Group.SchemaRootType change={change} />
+  } else if (GraphqlChange.Group.isDirectiveUsage(change)) {
+    return <Group.DirectiveUsage change={change} />
+  } else {
+    neverCase(change)
   }
 }

package/src/template/components/ChangelogLayout.tsx

@@ -0,0 +1,157 @@
+import {
+  CRITICALITY_CONFIG,
+  isCriticalityBreaking,
+  isCriticalityDangerous,
+  isCriticalitySafe,
+} from '#lib/graphql-change/criticality'
+import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { Box, Flex, Text } from '@radix-ui/themes'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { renderDate } from './Changelog.js'
+
+interface ChangelogLayoutProps {
+  children: React.ReactNode
+  versions: GraphqlChangeset.ChangeSet[]
+}
+
+interface VersionCounts {
+  breaking: number
+  dangerous: number
+  safe: number
+}
+
+const calculateCounts = (version: GraphqlChangeset.ChangeSet): VersionCounts => {
+  return {
+    breaking: version.changes.filter(isCriticalityBreaking).length,
+    dangerous: version.changes.filter(isCriticalityDangerous).length,
+    safe: version.changes.filter(isCriticalitySafe).length,
+  }
+}
+
+const SidebarEntry: React.FC<{
+  version: GraphqlChangeset.ChangeSet
+  counts: VersionCounts
+  isActive: boolean
+}> = ({ version, counts, isActive }) => {
+  const dateId = version.date.toISOString()
+
+  return (
+    <Box mb='2'>
+      <a
+        href={`#${dateId}`}
+        style={{
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0.5rem 0.75rem',
+          borderRadius: '4px',
+          backgroundColor: isActive ? 'var(--gray-a3)' : 'transparent',
+          color: 'inherit',
+          transition: 'background-color 0.2s',
+        }}
+        onClick={(e) => {
+          e.preventDefault()
+          document.getElementById(dateId)?.scrollIntoView({ behavior: 'smooth' })
+        }}
+      >
+        <Text size='2' weight={isActive ? 'medium' : 'regular'}>
+          {renderDate(version.date)}
+        </Text>
+        <Flex gap='2' align='center'>
+          {counts.breaking > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.BREAKING.color }}>
+              {counts.breaking}
+            </Text>
+          )}
+          {counts.dangerous > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.DANGEROUS.color }}>
+              {counts.dangerous}
+            </Text>
+          )}
+          {counts.safe > 0 && (
+            <Text size='1' weight='medium' style={{ color: CRITICALITY_CONFIG.NON_BREAKING.color }}>
+              {counts.safe}
+            </Text>
+          )}
+        </Flex>
+      </a>
+    </Box>
+  )
+}
+
+export const ChangelogLayout: React.FC<ChangelogLayoutProps> = ({ children, versions }) => {
+  const [activeVersion, setActiveVersion] = useState<string | null>(null)
+
+  // Calculate counts for all versions (SSR-safe)
+  const versionsWithCounts = versions.map(version => ({
+    version,
+    counts: calculateCounts(version),
+  }))
+
+  // Set up scroll spy after hydration
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY + 100 // Offset for header
+
+      // Find the current version based on scroll position
+      let currentVersion: string | null = null
+
+      for (const { version } of versionsWithCounts) {
+        const element = document.getElementById(version.date.toISOString())
+        if (element) {
+          const { top } = element.getBoundingClientRect()
+          if (top <= 100) {
+            currentVersion = version.date.toISOString()
+          }
+        }
+      }
+
+      setActiveVersion(currentVersion)
+    }
+
+    // Initial check
+    handleScroll()
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [versionsWithCounts])
+
+  return (
+    <Flex gap='6' style={{ position: 'relative' }}>
+      {/* Sidebar */}
+      <Box
+        style={{
+          position: 'sticky',
+          top: '2rem',
+          height: 'fit-content',
+          minWidth: '250px',
+          maxHeight: 'calc(100vh - 4rem)',
+          overflowY: 'auto',
+        }}
+      >
+        <Text size='2' weight='medium' mb='3' style={{ display: 'block' }}>
+          Releases
+        </Text>
+        {versionsWithCounts.map(({ version, counts }) => (
+          <SidebarEntry
+            key={version.date.toISOString()}
+            version={version}
+            counts={counts}
+            isActive={activeVersion === version.date.toISOString()}
+          />
+        ))}
+      </Box>
+
+      {/* Main content */}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        {children}
+      </Box>
+    </Flex>
+  )
+}

package/src/template/components/layouts/SidebarLayout.tsx

@@ -0,0 +1,68 @@
+import type { Content } from '#api/content/$'
+import { Box, Grid } from '@radix-ui/themes'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router'
+import { HamburgerMenu } from '../HamburgerMenu.js'
+import { Sidebar } from '../sidebar/Sidebar.js'
+
+interface SidebarLayoutProps {
+  children: React.ReactNode
+  sidebar: Content.Item[]
+}
+
+export const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children, sidebar }) => {
+  const location = useLocation()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.pathname])
+
+  const isShowSidebar = sidebar && sidebar.length > 0
+
+  return (
+    <Grid
+      areas={{
+        initial: `'content'`,
+        sm: `'content'`,
+        md: `'sidebar sidebar . content content content content content'`,
+      }}
+      rows='auto'
+      columns={{ initial: `1fr`, sm: `1fr`, md: `repeat(8, 1fr)` }}
+      gapX={{ initial: `0`, sm: `0`, md: `2` }}
+    >
+      {/* Mobile menu - only show when sidebar exists */}
+      {isShowSidebar && (
+        <Box display={{ initial: `block`, md: `none` }} mb='4'>
+          <HamburgerMenu
+            isOpen={mobileMenuOpen}
+            onToggle={() => {
+              setMobileMenuOpen(!mobileMenuOpen)
+            }}
+            onClose={() => {
+              setMobileMenuOpen(false)
+            }}
+            sidebarData={sidebar}
+          />
+        </Box>
+      )}
+
+      {/* Desktop Sidebar */}
+      {isShowSidebar && (
+        <Box
+          display={{ initial: `none`, xs: `none`, sm: `none`, md: `block` }}
+          gridColumn='1 / 3'
+          gridRow='1 / auto'
+        >
+          <Sidebar data={sidebar} />
+        </Box>
+      )}
+
+      <Box gridArea='content / content / auto / 8' className='prose'>
+        {children}
+      </Box>
+    </Grid>
+  )
+}

package/src/template/components/layouts/index.ts

@@ -0,0 +1 @@
+export * from './SidebarLayout.js'

package/src/template/entry.client.tsx

@@ -1,5 +1,4 @@
 import '@radix-ui/themes/styles.css'
-import './styles/code-block.css'
 import { ReactDomClient } from '#dep/react-dom-client/index'
 import { StrictMode } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router'