polen 0.11.0-next.2 → 0.11.0-next.20

package/src/lib/services-crud/memory.ts

@@ -0,0 +1,86 @@
+import { Effect, Layer } from 'effect'
+import * as path from 'node:path'
+import { CrudService } from './service.js'
+
+/**
+ * Options for configuring the memory CRUD service.
+ */
+export interface MemoryOptions {
+  /**
+   * Base path for all operations (defaults to '.')
+   */
+  basePath?: string
+
+  /**
+   * Initial files to populate the memory filesystem
+   */
+  initialFiles?: Map<string, string> | Record<string, string>
+}
+
+/**
+ * Create a CRUD service layer backed by in-memory storage.
+ *
+ * This service stores all data in memory using a Map, making it perfect for:
+ * - Unit testing with isolated, predictable state
+ * - Temporary data storage that doesn't need persistence
+ * - Fast operations without disk I/O overhead
+ *
+ * The service maintains proper path semantics and directory structure
+ * simulation while keeping everything in memory.
+ *
+ * @param options - Configuration options
+ * @returns Layer providing CrudService backed by memory storage
+ */
+export const memory = (options?: MemoryOptions) => {
+  const basePath = options?.basePath || '.'
+  const initialFilesInput = options?.initialFiles instanceof Map
+    ? options.initialFiles
+    : new Map(Object.entries(options?.initialFiles || {}))
+
+  // Convert initial files to use full paths and create persistent storage
+  const files = new Map<string, string>()
+  for (const [filename, content] of initialFilesInput) {
+    const fullPath = path.join(basePath, filename)
+    files.set(fullPath, content)
+  }
+
+  return Layer.succeed(CrudService, {
+    read: (relativePath: string) =>
+      Effect.sync(() => {
+        const fullPath = path.join(basePath, relativePath)
+        const content = files.get(fullPath)
+        if (content === undefined) {
+          throw new Error(`File not found: ${relativePath}`)
+        }
+        return content
+      }),
+
+    write: (relativePath: string, data: string) =>
+      Effect.sync(() => {
+        const fullPath = path.join(basePath, relativePath)
+        files.set(fullPath, data)
+      }),
+
+    list: (relativePath: string) =>
+      Effect.sync(() => {
+        const searchPath = path.join(basePath, relativePath)
+        const normalizedSearchPath = searchPath.endsWith('/') ? searchPath : searchPath + '/'
+
+        // Find all files in the directory
+        return Array.from(files.keys())
+          .filter(filePath => {
+            const dir = path.dirname(filePath)
+            const normalizedDir = dir.endsWith('/') ? dir : dir + '/'
+            return normalizedDir === normalizedSearchPath
+              || (searchPath === basePath && dir === searchPath)
+          })
+          .map(filePath => path.basename(filePath))
+      }),
+
+    remove: (relativePath: string) =>
+      Effect.sync(() => {
+        const fullPath = path.join(basePath, relativePath)
+        files.delete(fullPath)
+      }),
+  })
+}

package/src/lib/services-crud/service.ts

@@ -0,0 +1,49 @@
+import { Context, Effect } from 'effect'
+
+/**
+ * Core CRUD service interface for basic file operations.
+ *
+ * This interface provides platform-agnostic CRUD operations for string-based file content.
+ * Implementations can target different platforms (filesystem, memory, HTTP, etc.) while
+ * maintaining the same interface contract.
+ */
+export interface CrudService {
+  /**
+   * Read file contents as a string.
+   *
+   * @param path - Relative path to the file
+   * @returns Effect resolving to file contents as string
+   */
+  readonly read: (path: string) => Effect.Effect<string, Error>
+
+  /**
+   * Write string data to a file.
+   * Implementations should auto-create parent directories as needed.
+   *
+   * @param path - Relative path to the file
+   * @param data - String content to write
+   * @returns Effect resolving when write is complete
+   */
+  readonly write: (path: string, data: string) => Effect.Effect<void, Error>
+
+  /**
+   * List contents of a directory.
+   *
+   * @param path - Relative path to the directory
+   * @returns Effect resolving to array of filenames in the directory
+   */
+  readonly list: (path: string) => Effect.Effect<readonly string[], Error>
+
+  /**
+   * Remove a file or directory.
+   *
+   * @param path - Relative path to the file or directory to remove
+   * @returns Effect resolving when removal is complete
+   */
+  readonly remove: (path: string) => Effect.Effect<void, Error>
+}
+
+/**
+ * Service tag for dependency injection.
+ */
+export const CrudService = Context.GenericTag<CrudService>('@polen/services-crud/CrudService')

package/src/lib/stack-processor/stack-processor.ts

@@ -1,6 +1,29 @@
 import type { Bool, Fn, Prom } from '@wollybeard/kit'
 import { Undefined } from '@wollybeard/kit'
+import { Effect } from 'effect'
 
+/**
+ * Effect-based version that processes functions sequentially until predicate is met
+ */
+export const untilEffect = <A extends readonly unknown[], R, E, Context>(
+  predicate: (value: R) => boolean,
+) =>
+<fns extends readonly ((..._: A) => Effect.Effect<R, E, Context>)[]>(
+  fns: fns,
+) =>
+(...args: A): Effect.Effect<R | undefined, E, Context> =>
+  Effect.gen(function*() {
+    for (const fn of fns) {
+      const result = yield* fn(...args)
+      if (predicate(result)) return result
+    }
+    return undefined
+  })
+
+/**
+ * Legacy Promise-based version for backward compatibility
+ * @deprecated Use untilEffect for better error handling and composition
+ */
 export const until = (
   predicate: Bool.Predicate,
 ) =>
@@ -15,4 +38,13 @@ export const until = (
   }
 }
 
+/**
+ * Effect-based version that processes functions until a defined result is found
+ */
+export const untilDefinedEffect = untilEffect(Undefined.isnt)
+
+/**
+ * Legacy Promise-based version for backward compatibility
+ * @deprecated Use untilDefinedEffect
+ */
 export const untilDefined = until(Undefined.isnt)

package/src/lib/swiss/$$.ts

@@ -0,0 +1,5 @@
+// Barrel export - all public APIs
+export { Grid } from './grid.js'
+export { Body, Extended, Item, Viewport } from './items.js'
+export { SubGrid } from './subgrid.js'
+export * from './types.js'

package/src/lib/swiss/$.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'vitest'
+import { extractSpacingProps } from './utils.js'
+
+describe('Swiss Grid Radix Props Integration', () => {
+  test('extractSpacingProps handles margin props', () => {
+    const props = {
+      mt: '4',
+      mb: '2',
+      mx: { initial: '3', md: '5' },
+      otherProp: 'value',
+    }
+
+    const result = extractSpacingProps(props)
+
+    // Should have className and style properties
+    expect(result).toHaveProperty('className')
+    expect(result).toHaveProperty('style')
+
+    // Should not have the margin props in the result
+    expect(result).not.toHaveProperty('mt')
+    expect(result).not.toHaveProperty('mb')
+    expect(result).not.toHaveProperty('mx')
+
+    // Should preserve other props
+    expect(result.otherProp).toBe('value')
+  })
+
+  test('extractSpacingProps handles padding props', () => {
+    const props = {
+      p: '6',
+      py: { xs: '2', lg: '8' },
+      pl: '9',
+      customProp: 'test',
+    }
+
+    const result = extractSpacingProps(props)
+
+    // Should have className and style properties
+    expect(result).toHaveProperty('className')
+    expect(result).toHaveProperty('style')
+
+    // Should not have the padding props in the result
+    expect(result).not.toHaveProperty('p')
+    expect(result).not.toHaveProperty('py')
+    expect(result).not.toHaveProperty('pl')
+
+    // Should preserve other props
+    expect(result.customProp).toBe('test')
+  })
+
+  test('extractSpacingProps handles both margin and padding props', () => {
+    const props = {
+      m: '4',
+      p: { initial: '2', md: '4' },
+      mt: '-2',
+      className: 'custom-class',
+      style: { color: 'red' },
+    }
+
+    const result = extractSpacingProps(props)
+
+    // Should have className and style properties
+    expect(result).toHaveProperty('className')
+    expect(result).toHaveProperty('style')
+
+    // className should include custom class if provided
+    if (result.className) {
+      expect(result.className).toContain('custom-class')
+    }
+
+    // style should be merged if provided
+    if (result.style && typeof result.style === 'object') {
+      expect(result.style).toHaveProperty('color', 'red')
+    }
+
+    // Should not have the spacing props in the result
+    expect(result).not.toHaveProperty('m')
+    expect(result).not.toHaveProperty('p')
+    expect(result).not.toHaveProperty('mt')
+  })
+
+  test('extractSpacingProps handles empty props', () => {
+    const props = {}
+    const result = extractSpacingProps(props)
+
+    expect(result).toBeDefined()
+    // May or may not have className/style, but should not throw
+  })
+})

package/src/lib/swiss/$.ts

@@ -0,0 +1,2 @@
+// Namespace export - Swiss
+export * as Swiss from './$$.js'

package/src/lib/swiss/grid.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import type { GridProps } from './types.js'
+import { cx, extractLayoutProps, generateCSSVars } from './utils.js'
+
+/**
+ * Swiss Grid container component.
+ *
+ * Creates a 12-column grid with semantic zones for content placement.
+ * Integrates with Radix UI Themes space scale for consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <Grid maxWidth={1440} gutter="var(--space-4)">
+ *   {children}
+ * </Grid>
+ * ```
+ */
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  (
+    {
+      children,
+      maxWidth = 1440,
+      gutter,
+      margins,
+      columns = 12,
+      debug = false,
+      className: userClassName,
+      style: userStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    // Extract Radix layout props (margin, padding, position, etc.)
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Generate CSS variables from props
+    const cssVars = React.useMemo(
+      () =>
+        generateCSSVars({
+          maxWidth,
+          ...(gutter !== undefined && { gutter }),
+          ...(margins !== undefined && { margins }),
+          columns,
+        }),
+      [maxWidth, gutter, margins, columns],
+    )
+
+    return (
+      <div
+        ref={ref}
+        className={cx('swiss-grid', debug && 'swiss-grid--debug', layoutClassName, userClassName)}
+        style={{ ...cssVars, ...layoutStyle, ...userStyle }}
+        {...restProps}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+
+Grid.displayName = 'Swiss.Grid'

package/src/lib/swiss/items.tsx

@@ -0,0 +1,288 @@
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import type { GridItemProps, ItemProps } from './types.js'
+import { cx, extractLayoutProps, generateDataAttributes } from './utils.js'
+
+/**
+ * Grid item that spans the body zone (main 12-column area).
+ *
+ * @example
+ * ```tsx
+ * <Body>
+ *   <Article />
+ * </Body>
+ * ```
+ */
+export const Body = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild = false, subgrid = false, flow, className: userClassName, style: userStyle, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Build style with subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: React.CSSProperties = { ...layoutStyle }
+
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        data-span='body'
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Body.displayName = 'Swiss.Body'
+
+/**
+ * Grid item that spans the viewport zone (full viewport width).
+ *
+ * @example
+ * ```tsx
+ * <Viewport>
+ *   <Hero />
+ * </Viewport>
+ * ```
+ */
+export const Viewport = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild = false, subgrid = false, flow, className: userClassName, style: userStyle, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Build style with subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: React.CSSProperties = { ...layoutStyle }
+
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        data-span='viewport'
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Viewport.displayName = 'Swiss.Viewport'
+
+/**
+ * Grid item that spans the extended zone (subtly breaks out of body).
+ *
+ * @example
+ * ```tsx
+ * <Extended>
+ *   <Feature />
+ * </Extended>
+ * ```
+ */
+export const Extended = React.forwardRef<HTMLDivElement, GridItemProps>(
+  ({ children, asChild = false, subgrid = false, flow, className: userClassName, style: userStyle, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Build style with subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: React.CSSProperties = { ...layoutStyle }
+
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        data-span='extended'
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Extended.displayName = 'Swiss.Extended'
+
+/**
+ * Flexible grid item with responsive span and column support.
+ *
+ * @example
+ * ```tsx
+ * // Responsive span
+ * <Item span={{ initial: 'viewport', md: 'body' }}>
+ *   <Content />
+ * </Item>
+ *
+ * // Column span within body
+ * <Item cols={6}>
+ *   <HalfWidth />
+ * </Item>
+ * ```
+ */
+export const Item = React.forwardRef<HTMLDivElement, ItemProps>(
+  (
+    {
+      children,
+      asChild = false,
+      subgrid = false,
+      flow,
+      span = 'body',
+      cols,
+      start,
+      className: userClassName,
+      style: userStyle,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'div'
+
+    // Extract Radix layout props
+    const { className: layoutClassName, style: layoutStyle, ...restProps } = extractLayoutProps(props)
+
+    // Process cols to handle both number and string values, and combine with start if provided
+    const processedCols = React.useMemo(() => {
+      if (cols === undefined) return undefined
+
+      // Helper function to combine start and cols
+      const combineStartAndCols = (startVal: any, colsVal: any) => {
+        // If cols is a string with explicit positioning, ignore start
+        if (typeof colsVal === 'string') {
+          return colsVal
+        }
+        // If cols is a number and start is provided, combine them
+        if (typeof colsVal === 'number' && startVal !== undefined) {
+          return `${startVal} / span ${colsVal}`
+        }
+        // Otherwise just convert number cols to span
+        if (typeof colsVal === 'number') {
+          return `span ${colsVal}`
+        }
+        return colsVal
+      }
+
+      // Handle responsive object for cols
+      if (typeof cols === 'object' && !Array.isArray(cols)) {
+        const processed: any = {}
+
+        // Get start values (responsive or single)
+        const startResponsive = start !== undefined && typeof start === 'object' && !Array.isArray(start)
+
+        for (const [breakpoint, value] of Object.entries(cols)) {
+          if (value !== undefined) {
+            // Get corresponding start value for this breakpoint
+            const startVal = startResponsive
+              ? (start as any)[breakpoint]
+              : start
+
+            processed[breakpoint] = combineStartAndCols(startVal, value)
+          }
+        }
+        return processed
+      }
+
+      // Handle single value
+      return combineStartAndCols(start, cols)
+    }, [cols, start])
+
+    // Generate data attributes for responsive span behavior only when cols is not specified
+    // When cols is provided, we're doing column spanning within a grid, not zone spanning
+    const dataAttrs = React.useMemo(
+      () =>
+        cols !== undefined
+          ? {} // No data-span when cols is specified
+          : generateDataAttributes({
+            span,
+          }),
+      [span, cols],
+    )
+
+    // Build combined style with grid-column from processed cols and subgrid support
+    const combinedStyle = React.useMemo(() => {
+      const style: any = { ...layoutStyle }
+
+      // Apply grid-column based on processed cols
+      if (processedCols !== undefined) {
+        if (typeof processedCols === 'object') {
+          // For responsive cols, we need to handle this differently
+          // For now, just use the initial value if present
+          if (processedCols.initial) {
+            style.gridColumn = processedCols.initial
+          }
+          // TODO: Handle responsive values properly with CSS variables or media queries
+        } else {
+          style.gridColumn = processedCols
+        }
+      }
+
+      // Add subgrid support
+      if (subgrid) {
+        style.display = 'grid'
+        style.gridTemplateColumns = 'subgrid'
+        // Default to 'row' (horizontal) layout, map to CSS grid-auto-flow
+        const effectiveFlow = flow || 'row'
+        style.gridAutoFlow = effectiveFlow === 'row' ? 'column' : 'row'
+      }
+
+      return { ...style, ...userStyle }
+    }, [layoutStyle, processedCols, subgrid, flow, userStyle])
+
+    return (
+      <Comp
+        ref={ref}
+        className={cx('swiss-item', layoutClassName, userClassName)}
+        {...dataAttrs}
+        style={combinedStyle}
+        {...restProps}
+      >
+        {children}
+      </Comp>
+    )
+  },
+)
+
+Item.displayName = 'Swiss.Item'