polen 0.11.0-next.16 → 0.11.0-next.18

package/src/lib/lifecycles/lifecycles.ts

@@ -3,7 +3,7 @@ import { Change } from '#lib/change/$'
 import { Revision } from '#lib/revision/$'
 import { Schema } from '#lib/schema/$'
 import { Version } from '#lib/version/$'
-import { Match } from 'effect'
+import { Match, Option } from 'effect'
 
 // ============================================================================
 // Lifecycles Type - Simple Index
@@ -44,21 +44,21 @@ export type Since =
 /**
  * Extract the type name from a change
  */
-const extractTypeNameFromChange = (change: Change.Change): string | null => {
+const extractTypeNameFromChange = (change: Change.Change): Option.Option<string> => {
   return Match.value(change).pipe(
-    Match.tag('TYPE_ADDED', (c) => c.name),
-    Match.tag('TYPE_REMOVED', (c) => c.name),
-    Match.tag('FIELD_ADDED', (c) => c.typeName),
-    Match.tag('FIELD_REMOVED', (c) => c.typeName),
-    Match.tag('INPUT_FIELD_ADDED', (c) => c.inputName),
-    Match.tag('INPUT_FIELD_REMOVED', (c) => c.inputName),
-    Match.tag('ENUM_VALUE_ADDED', (c) => c.enumName),
-    Match.tag('ENUM_VALUE_REMOVED', (c) => c.enumName),
-    Match.tag('UNION_MEMBER_ADDED', (c) => c.unionName),
-    Match.tag('UNION_MEMBER_REMOVED', (c) => c.unionName),
-    Match.tag('OBJECT_TYPE_INTERFACE_ADDED', (c) => c.objectName),
-    Match.tag('OBJECT_TYPE_INTERFACE_REMOVED', (c) => c.objectName),
-    Match.orElse(() => null),
+    Match.tag('TYPE_ADDED', (c) => Option.some(c.name)),
+    Match.tag('TYPE_REMOVED', (c) => Option.some(c.name)),
+    Match.tag('FIELD_ADDED', (c) => Option.some(c.typeName)),
+    Match.tag('FIELD_REMOVED', (c) => Option.some(c.typeName)),
+    Match.tag('INPUT_FIELD_ADDED', (c) => Option.some(c.inputName)),
+    Match.tag('INPUT_FIELD_REMOVED', (c) => Option.some(c.inputName)),
+    Match.tag('ENUM_VALUE_ADDED', (c) => Option.some(c.enumName)),
+    Match.tag('ENUM_VALUE_REMOVED', (c) => Option.some(c.enumName)),
+    Match.tag('UNION_MEMBER_ADDED', (c) => Option.some(c.unionName)),
+    Match.tag('UNION_MEMBER_REMOVED', (c) => Option.some(c.unionName)),
+    Match.tag('OBJECT_TYPE_INTERFACE_ADDED', (c) => Option.some(c.objectName)),
+    Match.tag('OBJECT_TYPE_INTERFACE_REMOVED', (c) => Option.some(c.objectName)),
+    Match.orElse(() => Option.none()),
   )
 }
 
@@ -72,8 +72,9 @@ export const createFromSchema = (schema: Schema.Schema): Lifecycles => {
   for (const revision of schema.revisions) {
     // Process all changes in this revision
     for (const change of revision.changes) {
-      const typeName = extractTypeNameFromChange(change)
-      if (typeName) {
+      const typeNameOption = extractTypeNameFromChange(change)
+      if (Option.isSome(typeNameOption)) {
+        const typeName = typeNameOption.value
         if (!lifecycles[typeName]) {
           lifecycles[typeName] = []
         }
@@ -100,8 +101,9 @@ export const create = (catalog: Catalog.Catalog): Lifecycles => {
     for (const revision of schema.revisions) {
       // Process all changes in this revision
       for (const change of revision.changes) {
-        const typeName = extractTypeNameFromChange(change)
-        if (typeName) {
+        const typeNameOption = extractTypeNameFromChange(change)
+        if (Option.isSome(typeNameOption)) {
+          const typeName = typeNameOption.value
           if (!lifecycles[typeName]) {
             lifecycles[typeName] = []
           }
@@ -119,7 +121,7 @@ export const create = (catalog: Catalog.Catalog): Lifecycles => {
   Catalog.fold(
     // Versioned catalog - process each versioned schema
     (versioned) => {
-      for (const schema of versioned.entries) {
+      for (const schema of Catalog.Versioned.getAll(versioned)) {
         processSchema(schema)
       }
     },
@@ -477,9 +479,9 @@ export const getFieldLifecycle = (
   lifecycles: Lifecycles,
   typeName: string,
   fieldName: string,
-): { events: ChangeEntry[] } | undefined => {
+): Option.Option<{ events: ChangeEntry[] }> => {
   const entries = lifecycles[typeName]
-  if (!entries) return undefined
+  if (!entries) return Option.none()
 
   // Filter entries related to this specific field
   const fieldEntries = entries.filter(entry => {
@@ -497,25 +499,28 @@ export const getFieldLifecycle = (
         && entry.change.fieldName === fieldName)
   })
 
-  if (fieldEntries.length === 0) return undefined
+  if (fieldEntries.length === 0) return Option.none()
 
   // Return in a format compatible with existing code that expects an object with events
-  return { events: fieldEntries }
+  return Option.some({ events: fieldEntries })
 }
 
 /**
  * Get type lifecycle info (for compatibility with existing UI code)
  */
-export const getTypeLifecycle = (lifecycles: Lifecycles, typeName: string): { events: ChangeEntry[] } | undefined => {
+export const getTypeLifecycle = (
+  lifecycles: Lifecycles,
+  typeName: string,
+): Option.Option<{ events: ChangeEntry[] }> => {
   const entries = lifecycles[typeName]
-  if (!entries) return undefined
+  if (!entries) return Option.none()
 
   // Filter entries related to type-level changes
   const typeEntries = entries.filter(entry => {
     return entry.change._tag === 'TYPE_ADDED' || entry.change._tag === 'TYPE_REMOVED'
   })
 
-  if (typeEntries.length === 0) return undefined
+  if (typeEntries.length === 0) return Option.none()
 
-  return { events: typeEntries }
+  return Option.some({ events: typeEntries })
 }

package/src/lib/version-coverage/$$.ts

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

package/src/lib/{version-selection/version-selection.ts → version-coverage/version-coverage.ts}

@@ -58,7 +58,7 @@ export const encodeSync = S.encodeSync(VersionCoverage)
 export const equivalence = S.equivalence(VersionCoverage)
 
 // ============================================================================
-// Domain Logic
+// Domain Logic - Basic Operations
 // ============================================================================
 
 /**

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

@@ -4,6 +4,7 @@ import { DateOnly } from '#lib/date-only/$'
 import { Revision } from '#lib/revision/$'
 import { Schema } from '#lib/schema/$'
 import { Version } from '#lib/version/$'
+import { HashMap, Option } from 'effect'
 const CRITICALITY_LEVELS = ['BREAKING', 'DANGEROUS', 'NON_BREAKING'] as const
 import type { CriticalityLevel } from '@graphql-inspector/core'
 import { Box, Heading } from '@radix-ui/themes'
@@ -35,8 +36,7 @@ export const Changelog: React.FC<{ catalog: Catalog.Catalog }> = ({ catalog }) =
   useEffect(() => {
     if (urlVersion) return
     if (Catalog.Unversioned.is(catalog)) return
-    const latestSchema = catalog.entries[0]
-    if (!latestSchema) return
+    const latestSchema = Catalog.Versioned.getLatestOrThrow(catalog)
     const latestVersion = Version.encodeSync(latestSchema.version)
     navigate(`/changelog/version/${latestVersion}`, { replace: true })
   }, [catalog, urlVersion, navigate])
@@ -51,10 +51,14 @@ export const Changelog: React.FC<{ catalog: Catalog.Catalog }> = ({ catalog }) =
     } else {
       // For versioned catalogs, always show specific version (never all)
       if (urlVersion) {
-        const entry = catalog.entries.find(e => Version.encodeSync(e.version) === urlVersion)
-        return entry
-          ? { revisions: entry.revisions, schema: entry }
-          : { revisions: [], schema: null }
+        const entryOption = Option.map(
+          HashMap.findFirst(catalog.entries, (_, key) => Version.encodeSync(key) === urlVersion),
+          ([, value]) => value,
+        )
+        return Option.match(entryOption, {
+          onNone: () => ({ revisions: [], schema: null }),
+          onSome: (entry) => ({ revisions: entry.revisions, schema: entry }),
+        })
       }
       // This shouldn't happen due to redirect above, but return empty as fallback
       return { revisions: [], schema: null }

package/src/template/components/GraphQLDocument.tsx

@@ -1,12 +1,7 @@
 import { Catalog } from '#lib/catalog/$'
 import { Document } from '#lib/document/$'
-import { S } from '#lib/kit-temp/$'
-import type { Schema } from '#lib/schema/$'
-import { VersionCoverage } from '#lib/version-selection/$'
-import { VersionCoverageSet } from '#lib/version-selection/version-selection'
-import { Version } from '#lib/version/$'
-import { Array, HashMap, Match } from 'effect'
-import type { GraphQLSchema } from 'graphql'
+import { VersionCoverage } from '#lib/version-coverage'
+import { Either, Option } from 'effect'
 import * as React from 'react'
 import { useHighlighted } from '../hooks/use-highlighted.js'
 import { GraphQLInteractive } from './GraphQLInteractive/GraphQLInteractive.js'
@@ -47,7 +42,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   /// ━ VERSION MANAGEMENT
   const isControlled = controlledVersionCoverage !== undefined
   const [internalVersionCoverage, setInternalVersionCoverage] = React.useState<VersionCoverage.VersionCoverage | null>(
-    Catalog.getLatestVersionIdentifier(schemaCatalog),
+    Option.getOrNull(Catalog.getLatestVersion(schemaCatalog)),
   )
   const selectedVersionCoverage = isControlled ? controlledVersionCoverage : internalVersionCoverage
   const internalOnVersionChange = (version: VersionCoverage.VersionCoverage) => {
@@ -58,11 +53,15 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   }
 
   /// ━ DATA RESOLUTION
-  const {
-    schema,
-    content,
-  } = resolveSelectedVerCov(document, selectedVersionCoverage, schemaCatalog)
+  const result = Document.resolveDocumentAndSchema(document, schemaCatalog, selectedVersionCoverage)
 
+  // Handle resolution errors gracefully
+  if (Either.isLeft(result)) {
+    console.error('Failed to resolve document and schema:', result.left.message)
+    return null
+  }
+
+  const { schema, content } = result.right
   const highlightedCode = useHighlighted(content, { interactive: true })
 
   if (!highlightedCode) {
@@ -87,59 +86,3 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     />
   )
 }
-
-/**
- * Matches a document with an optional schema catalog, returning the document content,
- * corresponding schema, and available versions for the selected version.
- *
- * @param document - The document to retrieve content from (required)
- * @param selectedVersionCoverage - The version to select (optional, defaults to latest)
- * @param schemaCatalog - The schema catalog to match against (optional)
- * @returns Object with document content, optional schema, and available versions
- * @throws {Error} If versions in catalog don't match versions in document
- */
-type Result = { content: string; schema?: Schema.Schema }
-const resolveSelectedVerCov = (
-  document: Document.Document,
-  selectedVersionCoverage?: VersionCoverage.VersionCoverage | null,
-  schemaCatalog?: Catalog.Catalog,
-): Result => {
-  if (Document.Unversioned.is(document)) {
-    return {
-      content: document.document,
-      schema: Match.value(schemaCatalog).pipe(
-        Match.tagsExhaustive({
-          CatalogUnversioned: (catalog) => catalog.schema,
-          CatalogVersioned: (catalog) => Catalog.Versioned.getLatest(catalog),
-        }),
-      ),
-    }
-  }
-
-  return Match.value(selectedVersionCoverage).pipe(
-    Match.whenOr(null, undefined, _ => {
-      const content = Document.Versioned.getContentForLatestVersionOrThrow(document)
-      return { content }
-    }),
-    Match.orElse(_ => {
-      const version = VersionCoverage.getLatest(_)
-
-      const content = Document.Versioned.getContentForVersion(document, version)
-      if (!content) {
-        throw new Error(`Version ${Version.encodeSync(version)} not covered by document`)
-      }
-
-      if (!schemaCatalog) return { version, content }
-
-      if (Catalog.Unversioned.is(schemaCatalog)) {
-        throw new Error('Cannot use a set of versions with an unversioned catalog')
-      }
-      const schema = schemaCatalog.entries.find(e => Version.equivalence(e.version, version))
-      if (!schema) {
-        throw new Error(`Version ${Version.encodeSync(version)} not found in catalog`)
-      }
-
-      return { content, schema: schema }
-    }),
-  )
-}

package/src/template/components/GraphQLInteractive/lib/parser.ts

@@ -7,6 +7,7 @@
 
 import { Api } from '#api/iso'
 import type { CodeAnnotation } from 'codehike/code'
+import { Either } from 'effect'
 import {
   getNamedType,
   type GraphQLArgument,
@@ -504,41 +505,65 @@ class SemanticContext {
 }
 
 /**
- * Parse GraphQL code into interactive tokens with semantic information
+ * Error types for GraphQL parsing
+ */
+export type ParseError =
+  | { readonly _tag: 'InvalidInput'; readonly message: string }
+  | { readonly _tag: 'DocumentTooLarge'; readonly maxSize: number; readonly actualSize: number }
+  | { readonly _tag: 'TreeSitterError'; readonly message: string }
+  | { readonly _tag: 'ParserInitError'; readonly message: string }
+
+const makeParseError = {
+  invalidInput: (message: string): ParseError => ({ _tag: 'InvalidInput', message }),
+  documentTooLarge: (maxSize: number, actualSize: number): ParseError => ({
+    _tag: 'DocumentTooLarge',
+    maxSize,
+    actualSize,
+  }),
+  treeSitterError: (message: string): ParseError => ({ _tag: 'TreeSitterError', message }),
+  parserInitError: (message: string): ParseError => ({ _tag: 'ParserInitError', message }),
+}
+
+/**
+ * Parse GraphQL code into interactive tokens with semantic information (Either version)
  *
  * @param code - The raw GraphQL code to parse
  * @param annotations - CodeHike annotations that might affect rendering
  * @param schema - Optional GraphQL schema for semantic analysis
- * @returns Array of tokens representing the parsed code
+ * @returns Either with array of tokens on right or ParseError on left
  */
-export async function parseGraphQLWithTreeSitter(
+export async function parseGraphQLWithTreeSitterEither(
   code: string,
   annotations: CodeAnnotation[] = [],
   schema?: GraphQLSchema,
-): Promise<GraphQLToken[]> {
+): Promise<Either.Either<GraphQLToken[], ParseError>> {
   // Validate input
   if (!code || typeof code !== 'string') {
-    throw new Error('Invalid GraphQL code: code must be a non-empty string')
+    return Either.left(makeParseError.invalidInput('Invalid GraphQL code: code must be a non-empty string'))
   }
 
   // Prevent parsing extremely large documents that could cause performance issues
-  if (code.length > 100_000) {
-    throw new Error('GraphQL document too large: maximum 100,000 characters allowed')
+  const maxSize = 100_000
+  if (code.length > maxSize) {
+    return Either.left(makeParseError.documentTooLarge(maxSize, code.length))
   }
 
   // Step 1: Parse with tree-sitter
-  const parser = await getParser()
+  let parser: WebTreeSitter.Parser
+  try {
+    parser = await getParser()
+  } catch (error) {
+    return Either.left(makeParseError.parserInitError(
+      error instanceof Error ? error.message : 'Failed to initialize parser',
+    ))
+  }
+
   const tree = parser.parse(code)
 
   if (!tree) {
-    throw new Error('Tree-sitter failed to parse GraphQL code')
+    return Either.left(makeParseError.treeSitterError('Tree-sitter failed to parse GraphQL code'))
   }
 
-  // Check if tree-sitter found syntax errors (disabled for now as it may be too strict)
-  // if (tree.rootNode.hasError) {
-  //   throw new Error('GraphQL syntax error detected by tree-sitter parser')
-  // }
-
   try {
     // Step 2: Walk tree and attach semantics
     const tokens = collectTokensWithSemantics(tree, code, schema, annotations)
@@ -546,26 +571,53 @@ export async function parseGraphQLWithTreeSitter(
     // Step 3: Add error hint tokens after invalid fields
     const tokensWithHints = addErrorHintTokens(tokens, code, annotations)
 
-    return tokensWithHints
+    return Either.right(tokensWithHints)
+  } catch (error) {
+    return Either.left(makeParseError.treeSitterError(
+      error instanceof Error ? error.message : 'Failed to process tokens',
+    ))
   } finally {
-    // ## Tree-sitter Resource Lifecycle Management
-    //
-    // Tree-sitter creates native WASM objects that must be explicitly freed to prevent memory leaks.
-    // The tree object holds references to parsed nodes and internal parser state that won't be
-    // garbage collected automatically by JavaScript.
-    //
-    // Critical cleanup points:
-    // 1. Always call tree.delete() in a finally block to ensure cleanup even on errors
-    // 2. Do not access tree or any of its nodes after calling delete()
-    // 3. The parser instance is cached globally and reused across multiple parsing calls
-    //
-    // Memory safety: Once tree.delete() is called, all WebTreeSitter.Node references become invalid.
-    // Our tokens hold references to these nodes, but only use their text and position properties
-    // which are copied during token creation, so the nodes can be safely deleted.
+    // Tree-sitter Resource Lifecycle Management
     tree.delete()
   }
 }
 
+/**
+ * Parse GraphQL code into interactive tokens with semantic information
+ *
+ * @param code - The raw GraphQL code to parse
+ * @param annotations - CodeHike annotations that might affect rendering
+ * @param schema - Optional GraphQL schema for semantic analysis
+ * @returns Array of tokens representing the parsed code
+ * @deprecated Use parseGraphQLWithTreeSitterEither for better error handling
+ */
+export async function parseGraphQLWithTreeSitter(
+  code: string,
+  annotations: CodeAnnotation[] = [],
+  schema?: GraphQLSchema,
+): Promise<GraphQLToken[]> {
+  const result = await parseGraphQLWithTreeSitterEither(code, annotations, schema)
+
+  if (Either.isLeft(result)) {
+    const error = result.left
+    switch (error._tag) {
+      case 'InvalidInput':
+        throw new Error(error.message)
+      case 'DocumentTooLarge':
+        throw new Error(`GraphQL document too large: maximum ${error.maxSize} characters allowed`)
+      case 'TreeSitterError':
+      case 'ParserInitError':
+        throw new Error(error.message)
+      default: {
+        const exhaustiveCheck: never = error
+        throw new Error(`Unhandled parse error: ${JSON.stringify(exhaustiveCheck)}`)
+      }
+    }
+  }
+
+  return result.right
+}
+
 /**
  * Get or create the tree-sitter parser instance
  */

package/src/template/components/VersionCoveragePicker.tsx

@@ -1,6 +1,6 @@
 import { Catalog } from '#lib/catalog/$'
 import { Document } from '#lib/document/$'
-import { VersionCoverage } from '#lib/version-selection/$'
+import { VersionCoverage } from '#lib/version-coverage'
 import { Select } from '@radix-ui/themes'
 import { HashMap } from 'effect'
 import type { FC } from 'react'
@@ -30,12 +30,11 @@ export const VersionCoveragePicker: FC<Props> = ({
     <Select.Root
       value={VersionCoverage.toLabel(current)}
       onValueChange={(label) => {
-        // Find selection by label and pick first version from it
+        // Find the full version coverage by label and pass it entirely
         const selection = options.find(s => VersionCoverage.toLabel(s) === label)
         if (selection) {
-          const versions = VersionCoverage.toVersions(selection)
-          const version = versions[0]
-          if (version) onChange(version)
+          // Pass the entire VersionCoverage, not just the first version
+          onChange(selection)
         }
       }}
     >

package/src/template/components/VersionPicker.tsx

@@ -1,6 +1,8 @@
 import { Api } from '#api/iso'
 import type { React } from '#dep/react/index'
+import { Catalog } from '#lib/catalog/$'
 import { Version } from '#lib/version/$'
+import { HashMap, Option } from 'effect'
 import { useNavigate } from 'react-router'
 import { schemasCatalog } from 'virtual:polen/project/schemas'
 import { useReferencePath } from '../hooks/useReferencePath.js'
@@ -33,12 +35,17 @@ export const VersionPicker: React.FC<Props> = ({ data, current }) => {
 
       // Find the schema for the target version
       // Note: newVersion is a string that we need to parse
-      const targetSchema = catalog.entries.find(schema => Version.encodeSync(schema.version) === newVersion)
+      const targetSchemaOption = Option.map(
+        HashMap.findFirst(catalog.entries, (_, key) => Version.encodeSync(key) === newVersion),
+        ([, value]) => value,
+      )
 
-      if (!targetSchema) {
+      if (Option.isNone(targetSchemaOption)) {
         throw new Error(`Version ${newVersion} not found`)
       }
 
+      const targetSchema = Option.getOrThrow(targetSchemaOption)
+
       // Find fallback path if needed
       const fallbackPath = Api.Schema.Validation.findFallbackPath(targetSchema.definition, currentPath)
       // Get redirect description if path changed

package/src/template/components/home/FeaturesGrid.tsx

@@ -80,7 +80,7 @@ function getDefaultFeatures(): Feature[] {
   if (schemasCatalog) {
     try {
       // Get the latest schema from the catalog
-      const latestSchema = Catalog.getLatestSchema(schemasCatalog)
+      const latestSchema = Catalog.getLatest(schemasCatalog)
 
       if (latestSchema && latestSchema.definition) {
         // Build stats from the schema definition

package/src/template/components/home/HeroSection.tsx

@@ -84,7 +84,7 @@ export const Hero: React.FC<HeroProps> = ({
   let schemaStats = null
   if (schemasCatalog) {
     try {
-      const latestSchema = Catalog.getLatestSchema(schemasCatalog)
+      const latestSchema = Catalog.getLatest(schemasCatalog)
       if (latestSchema && latestSchema.definition) {
         const versionStats = CatalogStatistics.analyzeSchema(latestSchema.definition, 'current')
         schemaStats = {

package/src/template/components/home/QuickStart.tsx

@@ -1,5 +1,6 @@
 import { Box, Card, Heading, Section, Tabs, Text } from '@radix-ui/themes'
 import { highlight } from 'codehike/code'
+import { Effect } from 'effect'
 import * as React from 'react'
 import { CodeBlock } from '../CodeBlock.js'
 
@@ -73,14 +74,22 @@ export const QuickStartSection: React.FC<Props> = ({ examples = defaultExamples
 
   React.useEffect(() => {
     const highlightExamples = async () => {
-      const highlighted = await Promise.all(
-        examples.map(async (example) => ({
-          label: example.label,
-          codeblock: await highlight(
-            { value: example.code, lang: example.language, meta: '' },
-            { theme: 'github-light' },
+      const highlighted = await Effect.runPromise(
+        Effect.all(
+          examples.map((example) =>
+            Effect.tryPromise({
+              try: async () => ({
+                label: example.label,
+                codeblock: await highlight(
+                  { value: example.code, lang: example.language, meta: '' },
+                  { theme: 'github-light' },
+                ),
+              }),
+              catch: (error) => new Error(`Failed to highlight ${example.label}: ${error}`),
+            })
           ),
-        })),
+          { concurrency: 'unbounded' },
+        ),
       )
       setHighlightedExamples(highlighted)
     }

package/src/template/components/home/RecentChanges.tsx

@@ -3,6 +3,8 @@ import * as React from 'react'
 import { Link } from 'react-router'
 import { schemasCatalog } from 'virtual:polen/project/schemas'
 
+import { Catalog } from '#lib/catalog'
+
 interface RecentChangesProps {
   limit?: number
   showVersions?: boolean
@@ -30,7 +32,7 @@ export const RecentChangesSection: React.FC<RecentChangesProps> = ({
 
     // For versioned catalogs, we look at entries
     if (schemasCatalog._tag === 'CatalogVersioned') {
-      const entries = schemasCatalog.entries || []
+      const entries = Catalog.Versioned.getAll(schemasCatalog)
       const recentEntries = entries.slice(0, limit)
 
       return recentEntries.flatMap(entry =>

package/src/template/hooks/use-highlighted.ts

@@ -1,5 +1,6 @@
 import type { HighlightedCode } from 'codehike/code'
 import { highlight } from 'codehike/code'
+import { Duration, Effect } from 'effect'
 import * as React from 'react'
 
 /**
@@ -29,26 +30,37 @@ export const useHighlighted = (
   const [highlightedCode, setHighlightedCode] = React.useState<HighlightedCode | null>(null)
 
   React.useEffect(() => {
-    const highlightContent = async () => {
-      // Add a timeout to detect if highlight is hanging
-      const timeoutPromise = new Promise((_, reject) => {
-        setTimeout(() => reject(new Error('Highlight timeout after 5 seconds')), 5000)
-      })
-
-      const highlightPromise = highlight(
-        {
-          value: content,
-          lang: config.lang,
-          meta: metaString,
-        },
-        {
-          theme: 'github-light',
-        },
-      )
+    const HIGHLIGHT_TIMEOUT = Duration.seconds(5)
 
-      const highlighted = await Promise.race([highlightPromise, timeoutPromise])
-
-      setHighlightedCode(highlighted as any)
+    const highlightContent = async () => {
+      try {
+        const highlighted = await Effect.runPromise(
+          Effect.tryPromise({
+            try: () =>
+              highlight(
+                {
+                  value: content,
+                  lang: config.lang,
+                  meta: metaString,
+                },
+                {
+                  theme: 'github-light',
+                },
+              ),
+            catch: (error) => new Error(`Highlight failed: ${error}`),
+          }).pipe(
+            Effect.timeout(HIGHLIGHT_TIMEOUT),
+            Effect.catchTag(
+              'TimeoutException',
+              () => Effect.fail(new Error(`Highlight timeout after ${Duration.toSeconds(HIGHLIGHT_TIMEOUT)} seconds`)),
+            ),
+          ),
+        )
+        setHighlightedCode(highlighted)
+      } catch (error) {
+        console.error('Failed to highlight code:', error)
+        setHighlightedCode(null)
+      }
     }
     highlightContent()
   }, [content, config.lang, config.interactive])