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

package/src/lib/vite-reactive/reactive-asset-plugin.ts

@@ -0,0 +1,280 @@
+import type { Vite } from '#dep/vite/index'
+import type { ViteVirtual } from '#lib/vite-virtual'
+import { debugPolen } from '#singletons/debug'
+import { FileSystem } from '@effect/platform'
+import * as NodeFileSystem from '@effect/platform-node/NodeFileSystem'
+import { Cache, Effect } from 'effect'
+import * as Path from 'node:path'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface AssetReader<data, error = never, requirements = never> {
+  read: () => Effect.Effect<data, error, requirements>
+  clear: () => Effect.Effect<void, never, requirements>
+}
+
+export const createAssetReader = <data, error = never, requirements = never>(
+  reader: () => Effect.Effect<data, error, requirements>,
+): AssetReader<data, error, requirements> => {
+  // Use Cache for both caching and concurrent deduplication
+  const cacheService = Cache.make({
+    capacity: 1,
+    timeToLive: Infinity,
+    lookup: reader,
+  })
+
+  return {
+    read: () =>
+      Effect.gen(function*() {
+        const cache = yield* cacheService
+        return yield* cache.get('__constant_key__')
+      }),
+    clear: () =>
+      Effect.gen(function*() {
+        const cache = yield* cacheService
+        yield* cache.invalidateAll
+      }),
+  }
+}
+
+export interface ReactiveAssetPluginOptions<$Data, E = never, R = never> {
+  /**
+   * Name of the asset type (e.g., 'pages', 'examples', 'schema')
+   */
+  name: string
+
+  /**
+   * Asset reader with cache management
+   */
+  reader: AssetReader<$Data, E, R>
+
+  /**
+   * File patterns to watch and check
+   */
+  filePatterns: {
+    /**
+     * Paths or patterns to watch for changes
+     */
+    watch: string[] | (() => string[])
+
+    /**
+     * Check if a file change is relevant to this asset
+     */
+    isRelevant: (file: string) => boolean
+  }
+
+  /**
+   * Virtual modules that depend on this asset data
+   */
+  dependentVirtualModules: ViteVirtual.Identifier.Identifier[]
+
+  /**
+   * Optional asset emission configuration
+   */
+  emit?: {
+    /**
+     * Serializer function that converts data to string content
+     * Can return an Effect for async operations (must have FileSystem requirement if needed)
+     */
+    serializer: (data: Exclude<$Data, null>) => Effect.Effect<string, any, FileSystem.FileSystem> | string
+    /**
+     * Relative path for the emitted asset (e.g., 'schemas/catalog.json')
+     * Used for both dev assets and build assets with appropriate base paths
+     */
+    path: string
+  }
+  /**
+   * Optional hooks for customization
+   */
+  hooks?: {
+    /**
+     * Determines whether a full page reload is needed when data changes.
+     * Return true to trigger full browser reload, false for normal HMR.
+     */
+    shouldFullReload?: (oldData: $Data | null, newData: $Data) => boolean | Promise<boolean>
+    /**
+     * Called when diagnostics are available
+     */
+    onDiagnostics?: (data: $Data) => void | Promise<void>
+  }
+}
+
+// ============================================================================
+// Plugin Factory
+// ============================================================================
+
+/**
+ * Creates a Vite plugin that handles reactive asset updates with cache invalidation
+ * and virtual module coordination.
+ */
+export const ReactiveAssetPlugin = <T, E = never, R = never>(
+  options: ReactiveAssetPluginOptions<T, E, R>,
+): Vite.Plugin => {
+  const debug = debugPolen.sub(`vite-reactive:${options.name}`)
+  let viteServer: Vite.ViteDevServer | null = null
+  let viteConfig: Vite.ResolvedConfig
+
+  const invalidateVirtualModules = (server: Vite.ViteDevServer) => {
+    for (const vm of options.dependentVirtualModules) {
+      const module = server.moduleGraph.getModuleById(vm.id)
+      if (module) {
+        server.moduleGraph.invalidateModule(module)
+        debug(`Invalidated virtual module: ${vm.id}`)
+      }
+    }
+  }
+
+  // Helper to run the Effect reader with the provided layer
+  const runReader = async (reader: () => Effect.Effect<T, E, R>): Promise<T> => {
+    const effect = reader()
+    // Always provide NodeFileSystem.layer for file system operations
+    const finalEffect = effect.pipe(Effect.provide(NodeFileSystem.layer as any))
+    return await Effect.runPromise(finalEffect as Effect.Effect<T, E, never>)
+  }
+
+  const handleAssetChange = async (
+    file: string,
+    event: 'add' | 'unlink' | 'change',
+    server: Vite.ViteDevServer,
+  ): Promise<boolean> => {
+    if (!options.filePatterns.isRelevant(file)) return false
+
+    debug(`${options.name} file ${event}: ${file}`)
+
+    // Get old data if we need to compare
+    let oldData: T | null = null
+    if (options.hooks?.shouldFullReload) {
+      oldData = await runReader(options.reader.read)
+    }
+
+    // Clear cache and re-read
+    await Effect.runPromise(
+      options.reader.clear().pipe(Effect.provide(NodeFileSystem.layer as any)) as Effect.Effect<void, never, never>,
+    )
+    const newData = await runReader(options.reader.read)
+
+    // Run diagnostics hook if provided
+    if (options.hooks?.onDiagnostics) {
+      await options.hooks.onDiagnostics(newData)
+    }
+
+    // Invalidate all dependent virtual modules
+    invalidateVirtualModules(server)
+
+    // Check if full reload is needed
+    let needsFullReload = true
+    if (options.hooks?.shouldFullReload) {
+      needsFullReload = await options.hooks.shouldFullReload(oldData, newData)
+    }
+
+    // Handle asset emission in dev mode
+    if (options.emit && viteServer && newData) {
+      await Effect.runPromise(
+        Effect.gen(function*() {
+          // Run the serializer (could be Effect or plain string)
+          const serializerResult = options.emit!.serializer(newData as Exclude<T, null>)
+          const content = typeof serializerResult === 'string'
+            ? serializerResult
+            : yield* serializerResult
+
+          // Write to dev assets directory (in Vite's cache dir)
+          const devAssetsPath = Path.join(viteConfig.cacheDir, 'assets', options.emit!.path)
+          const devAssetsDir = Path.dirname(devAssetsPath)
+
+          // Create directory and write file using Effect's FileSystem
+          const fs = yield* FileSystem.FileSystem
+          yield* fs.makeDirectory(devAssetsDir, { recursive: true })
+          yield* fs.writeFileString(devAssetsPath, content)
+
+          debug(`Dev assets written: ${options.emit!.path}`)
+        }).pipe(
+          Effect.provide(NodeFileSystem.layer),
+        ),
+      )
+    }
+
+    return needsFullReload
+  }
+
+  return {
+    name: `polen:reactive-${options.name}`,
+
+    configResolved(resolvedConfig) {
+      viteConfig = resolvedConfig
+    },
+
+    configureServer(server) {
+      viteServer = server
+
+      // Set up file watching
+      const watchPaths = typeof options.filePatterns.watch === 'function'
+        ? options.filePatterns.watch()
+        : options.filePatterns.watch
+
+      for (const path of watchPaths) {
+        server.watcher.add(path)
+        debug(`Watching ${options.name} path: ${path}`)
+      }
+
+      // Handle file additions and deletions
+      const handleFileStructureChange = async (file: string, event: 'add' | 'unlink') => {
+        const needsFullReload = await handleAssetChange(file, event, server)
+
+        if (needsFullReload) {
+          debug(`Triggering full reload due to ${event} event`)
+          server.ws.send({ type: 'full-reload' })
+        }
+      }
+
+      server.watcher.on('add', (file) => handleFileStructureChange(file, 'add'))
+      server.watcher.on('unlink', (file) => handleFileStructureChange(file, 'unlink'))
+    },
+
+    async buildStart() {
+      // Handle asset emission in build mode
+      if (options.emit && !viteServer) {
+        // Read the data
+        const data = await runReader(options.reader.read)
+
+        if (!data) {
+          debug(`No data to emit for ${options.name}`)
+          return
+        }
+
+        // Run the serializer
+        const serializerResult = options.emit.serializer(data as Exclude<T, null>)
+        const content = typeof serializerResult === 'string'
+          ? serializerResult
+          : await Effect.runPromise(
+            serializerResult.pipe(
+              Effect.provide(NodeFileSystem.layer),
+            ),
+          )
+
+        // Emit the asset (Vite will place it in the correct output directory)
+        this.emitFile({
+          type: 'asset',
+          fileName: `assets/${options.emit.path}`,
+          source: content,
+        })
+
+        debug(`Build asset emitted: ${options.emit.path}`)
+      }
+    },
+
+    async handleHotUpdate({ file, server, modules }) {
+      const needsFullReload = await handleAssetChange(file, 'change', server)
+
+      if (needsFullReload) {
+        debug(`Triggering full reload due to change event`)
+        server.ws.send({ type: 'full-reload' })
+        return []
+      }
+
+      // Allow normal HMR to proceed
+      return modules
+    },
+  }
+}

package/src/sandbox.ts

@@ -1 +1,15 @@
-// Temporary sandbox file for testing
+//
+//
+//
+//
+//
+// Temporary Work File
+//
+// ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
+//
+// – Use freely
+// – Try to remember to not commit changes
+// – Included by development TypeScript configuration
+// – Excluded by build TypeScript configuration
+//
+//

package/src/template/components/Carousel.tsx

@@ -0,0 +1,224 @@
+import { Box, Flex } from '@radix-ui/themes'
+import useEmblaCarousel from 'embla-carousel-react'
+import * as React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { CarouselPill } from './CarouselPill.js'
+
+export interface CarouselProps {
+  /** Items to display in the carousel */
+  children: React.ReactNode[]
+  /** Whether to enable auto-play */
+  autoPlay?: boolean
+  /** Duration in ms between slides when auto-playing */
+  slideDuration?: number
+  /** Whether to loop back to start */
+  loop?: boolean
+  /** Alignment of slides */
+  align?: 'start' | 'center' | 'end'
+  /** Number of slides to scroll at once */
+  slidesToScroll?: number
+  /** Whether to show navigation dots */
+  showDots?: boolean
+  /** Callback when slide changes */
+  onSlideChange?: (index: number) => void
+  /** Custom class name for carousel container */
+  className?: string
+  /** Width of each slide as percentage (e.g., '80%' to show partial next slide) */
+  slideWidth?: string
+}
+
+export const Carousel: React.FC<CarouselProps> = ({
+  children,
+  autoPlay = false,
+  slideDuration = 10_000,
+  loop = true,
+  align = 'center',
+  slidesToScroll = 1,
+  showDots = true,
+  onSlideChange,
+  className,
+  slideWidth = children.length > 1 ? '80%' : '100%',
+}) => {
+  // Carousel setup
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop,
+    align,
+    slidesToScroll,
+    containScroll: false,
+  })
+
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  // Auto-play state
+  const [isHovering, setIsHovering] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const progressIntervalRef = useRef<NodeJS.Timeout | null>(null)
+  const elapsedRef = useRef<number>(0)
+  const PROGRESS_UPDATE_INTERVAL = 50
+
+  // No need for height tracking - flexbox handles it naturally
+
+  // Track selected slide
+  useEffect(() => {
+    if (!emblaApi) return
+
+    const onSelect = () => {
+      const index = emblaApi.selectedScrollSnap()
+      setSelectedIndex(index)
+      onSlideChange?.(index)
+      // Reset progress on slide change
+      elapsedRef.current = 0
+      setProgress(0)
+    }
+
+    emblaApi.on('select', onSelect)
+    onSelect()
+
+    return () => {
+      emblaApi.off('select', onSelect)
+    }
+  }, [emblaApi, onSlideChange])
+
+  // Auto-play functionality
+  const startAutoPlay = useCallback((resumeFromProgress = false) => {
+    if (progressIntervalRef.current) clearInterval(progressIntervalRef.current)
+
+    if (!resumeFromProgress) {
+      elapsedRef.current = 0
+      setProgress(0)
+    }
+
+    progressIntervalRef.current = setInterval(() => {
+      if (!isHovering) {
+        elapsedRef.current += PROGRESS_UPDATE_INTERVAL
+        const newProgress = (elapsedRef.current / slideDuration) * 100
+
+        if (newProgress >= 100) {
+          elapsedRef.current = 0
+          if (emblaApi && children.length > 1) {
+            emblaApi.scrollNext()
+          }
+        }
+
+        setProgress(Math.min(newProgress, 100))
+      }
+    }, PROGRESS_UPDATE_INTERVAL)
+  }, [emblaApi, autoPlay, isHovering, children.length, slideDuration])
+
+  const stopAutoPlay = useCallback((preserveProgress = false) => {
+    if (progressIntervalRef.current) {
+      clearInterval(progressIntervalRef.current)
+      progressIntervalRef.current = null
+    }
+    if (!preserveProgress) {
+      elapsedRef.current = 0
+      setProgress(0)
+    }
+  }, [])
+
+  // Handle auto-play start/stop
+  useEffect(() => {
+    if (autoPlay && !isHovering && children.length > 1) {
+      startAutoPlay(true)
+    } else {
+      stopAutoPlay(true)
+    }
+
+    return () => {
+      stopAutoPlay(false)
+    }
+  }, [autoPlay, isHovering, startAutoPlay, stopAutoPlay, children.length])
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!emblaApi) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        emblaApi.scrollPrev()
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        emblaApi.scrollNext()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [emblaApi])
+
+  if (children.length === 0) return null
+
+  return (
+    <Box
+      position='relative'
+      className={className}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      {/* Carousel viewport */}
+      <Box
+        ref={emblaRef}
+        style={{
+          overflow: 'hidden',
+          // Break out of container for full-width effect
+          marginLeft: 'calc(-50vw + 50%)',
+          marginRight: 'calc(-50vw + 50%)',
+          paddingLeft: 'calc(50vw - 50%)',
+          paddingRight: 'calc(50vw - 50%)',
+        }}
+      >
+        <Flex
+          style={{
+            display: 'flex',
+            // Don't override align-items - let it default to 'stretch'
+            // This makes all items equal height based on tallest content
+            gap: children.length > 1 ? '2rem' : 0,
+          }}
+        >
+          {React.Children.map(children, (child, index) => (
+            <Box
+              style={{
+                // Control width but let height be determined by content
+                flex: `0 0 ${slideWidth}`,
+                minWidth: 0,
+                // Opacity for focus effect
+                opacity: index === selectedIndex ? 1 : 0.5,
+                transition: 'opacity 0.3s ease-in-out',
+                // Let flexbox stretch items to equal height (default behavior)
+                // alignSelf defaults to 'auto' which inherits align-items: stretch
+                // Add overflow for tall content
+                overflow: 'auto',
+                // Make this a flex container to allow children to stretch
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              {child}
+            </Box>
+          ))}
+        </Flex>
+      </Box>
+
+      {/* Navigation pills with integrated timer */}
+      {children.length > 1 && showDots && (
+        <Flex justify='center' align='center' gap='2' mt='3'>
+          {React.Children.map(children, (_, index) => (
+            <CarouselPill
+              key={index}
+              isActive={index === selectedIndex}
+              progress={progress}
+              autoPlay={autoPlay}
+              isPaused={false}
+              isHovering={isHovering}
+              onClick={() => emblaApi?.scrollTo(index)}
+              index={index}
+            />
+          ))}
+        </Flex>
+      )}
+    </Box>
+  )
+}

package/src/template/components/CarouselPill.tsx

@@ -0,0 +1,101 @@
+import { Box } from '@radix-ui/themes'
+import * as React from 'react'
+
+export interface CarouselPillProps {
+  /** Whether this pill represents the active slide */
+  isActive: boolean
+  /** Progress percentage (0-100) for the active pill */
+  progress: number
+  /** Whether autoplay is enabled */
+  autoPlay: boolean
+  /** Whether the carousel is paused */
+  isPaused: boolean
+  /** Whether the carousel is being hovered */
+  isHovering: boolean
+  /** Click handler to navigate to this slide */
+  onClick: () => void
+  /** Slide index for accessibility */
+  index: number
+}
+
+export const CarouselPill: React.FC<CarouselPillProps> = ({
+  isActive,
+  progress,
+  autoPlay,
+  isPaused,
+  isHovering,
+  onClick,
+  index,
+}) => {
+  const pillWidth = 24
+  const pillHeight = 4
+  const borderRadius = 2
+  const gap = 2 // Gap between pill and progress stroke
+  const strokeWidth = 1.5
+
+  // SVG canvas needs to fit both pill and surrounding progress ring
+  const svgWidth = pillWidth + (gap * 2) + (strokeWidth * 2)
+  const svgHeight = pillHeight + (gap * 2) + (strokeWidth * 2)
+
+  // Progress ring dimensions (surrounds the pill with gap)
+  const progressWidth = pillWidth + (gap * 2) + 1
+  const progressHeight = pillHeight + (gap * 2) + 1
+  const progressRadius = borderRadius + gap
+
+  // Calculate perimeter for progress animation
+  const perimeter = 2 * (progressWidth + progressHeight - 2 * progressRadius) + 2 * Math.PI * progressRadius
+
+  return (
+    <Box
+      onClick={onClick}
+      style={{
+        cursor: 'pointer',
+        opacity: isActive ? 1 : 0.6,
+        transition: 'opacity 0.3s ease',
+      }}
+      aria-label={`Go to slide ${index + 1}`}
+    >
+      <svg
+        width={svgWidth}
+        height={svgHeight}
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+      >
+        {/* Background pill - centered in the SVG */}
+        <rect
+          x={gap + strokeWidth}
+          y={gap + strokeWidth}
+          width={pillWidth}
+          height={pillHeight}
+          rx={borderRadius}
+          ry={borderRadius}
+          fill={isActive ? 'var(--accent-9)' : 'var(--gray-5)'}
+          style={{
+            transition: 'fill 0.3s ease',
+          }}
+        />
+
+        {/* Progress ring - only for active slide with autoplay */}
+        {isActive && autoPlay && (
+          <rect
+            x={strokeWidth / 2}
+            y={strokeWidth / 2}
+            width={progressWidth}
+            height={progressHeight}
+            rx={progressRadius}
+            ry={progressRadius}
+            fill='none'
+            stroke='var(--accent-11)'
+            strokeWidth={strokeWidth}
+            strokeDasharray={perimeter}
+            strokeDashoffset={perimeter * (1 - progress / 100)}
+            style={{
+              transition: isPaused || isHovering ? 'none' : 'stroke-dashoffset 0.05s linear',
+              opacity: '0.5',
+              transformOrigin: 'center',
+            }}
+          />
+        )}
+      </svg>
+    </Box>
+  )
+}

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

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change'
+import { Change as GraphqlChange } from '#lib/change/$'
 import type React from 'react'
 
 interface ChangeBaseProps {