@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/constants/README.md

@@ -1,339 +0,0 @@
-# TachUI Layout Constants
-
-This module provides SwiftUI-style layout constants and utilities for responsive web layouts.
-
-## Overview
-
-TachUI now supports SwiftUI's `.infinity` constant for frame modifiers, enabling familiar responsive layout patterns for developers coming from SwiftUI.
-
-## Core Constants
-
-### `infinity`
-
-A special constant representing unlimited space availability, equivalent to SwiftUI's `.infinity`.
-
-```typescript
-import { infinity } from '@tachui/core'
-
-// Fill available width
-Text("Full Width")
-  .modifier
-  .frame({ maxWidth: infinity })
-  .build()
-
-// Fill both dimensions  
-Image("banner.jpg")
-  .modifier
-  .frame({ width: infinity, height: 200 })
-  .build()
-```
-
-### Type Safety
-
-All size-related modifiers now accept the `Dimension` type, which includes:
-- `number` - Pixel values (e.g., `200`)
-- `string` - CSS values (e.g., `'100%'`, `'50vh'`)
-- `infinity` - Unlimited space
-
-## Utility Functions
-
-### Basic Frame Utilities
-
-```typescript
-import { 
-  fillMaxWidth, 
-  fillMaxHeight, 
-  fillMaxSize, 
-  expand 
-} from '@tachui/core'
-
-// Fill maximum width (maxWidth: infinity)
-Button("Continue")
-  .modifier
-  .apply(fillMaxWidth())
-  .build()
-
-// Fill maximum height (maxHeight: infinity)
-ScrollView(content)
-  .modifier
-  .apply(fillMaxHeight())
-  .build()
-
-// Fill both max dimensions
-Container()
-  .modifier
-  .apply(fillMaxSize())
-  .build()
-
-// Expand to fill space (width: infinity, height: infinity)
-MainContent()
-  .modifier
-  .apply(expand())
-  .build()
-```
-
-### Layout Pattern Utilities
-
-```typescript
-import { 
-  fixedWidthExpandHeight,
-  fixedHeightExpandWidth,
-  responsive,
-  flexible
-} from '@tachui/core'
-
-// Sidebar: fixed width, full height
-Sidebar()
-  .modifier
-  .apply(fixedWidthExpandHeight(250))
-  .build()
-
-// Header: full width, fixed height  
-Header()
-  .modifier
-  .apply(fixedHeightExpandWidth(60))
-  .build()
-
-// Responsive card with constraints
-Card()
-  .modifier
-  .apply(responsive(320, 800, 200, 600))
-  .build()
-
-// Flexible content that adapts
-Content()
-  .modifier
-  .apply(flexible())
-  .build()
-```
-
-### SUI Compatibility (SUI = SwiftUI-inspired)
-
-```typescript
-import { SUI, LayoutPatterns } from '@tachui/core'
-
-// Direct SUI-style usage
-Text("Hello")
-  .modifier
-  .frame({ maxWidth: SUI.infinity })
-  .build()
-
-// Layout patterns
-Button("Action")
-  .modifier
-  .apply(LayoutPatterns.fullWidthButton())
-  .build()
-
-Sidebar()
-  .modifier
-  .apply(LayoutPatterns.sidebar(300))
-  .build()
-```
-
-## Migration from Workarounds
-
-### Before (Manual Workarounds)
-
-```typescript
-// Old way - manual percentage and flexbox
-Text("Content")
-  .modifier
-  .width('100%')
-  .flexGrow(1)
-  .build()
-
-HStack([
-  Text("Left"),
-  Spacer(), // To push content
-  Text("Right")
-])
-```
-
-### After (Infinity Support)
-
-```typescript
-// New way - SwiftUI-style infinity
-Text("Content")
-  .modifier
-  .frame({ maxWidth: infinity })
-  .build()
-
-Text("Centered")
-  .modifier
-  .frame({ maxWidth: infinity })
-  .textAlign('center')
-  .build()
-```
-
-## Common Patterns
-
-### Full-Width Buttons
-
-```typescript
-VStack([
-  Button("Primary Action")
-    .modifier
-    .frame({ maxWidth: infinity })
-    .backgroundColor('#007AFF')
-    .build(),
-    
-  Button("Secondary Action")
-    .modifier
-    .frame({ maxWidth: infinity })
-    .backgroundColor('#F2F2F2')
-    .build()
-])
-```
-
-### Equal-Width Elements
-
-```typescript
-HStack([
-  Button("Cancel")
-    .modifier
-    .frame({ maxWidth: infinity })
-    .build(),
-    
-  Button("OK")
-    .modifier
-    .frame({ maxWidth: infinity })
-    .build()
-])
-```
-
-### Responsive Content Areas
-
-```typescript
-VStack([
-  Header()
-    .modifier
-    .apply(fixedHeightExpandWidth(60))
-    .build(),
-    
-  HStack([
-    Sidebar()
-      .modifier
-      .apply(fixedWidthExpandHeight(250))
-      .build(),
-      
-    MainContent()
-      .modifier
-      .apply(expand())
-      .build()
-  ]),
-  
-  Footer()
-    .modifier
-    .apply(fixedHeightExpandWidth(40))
-    .build()
-])
-```
-
-### Modal Overlays
-
-```typescript
-ZStack([
-  // Background content
-  MainApp(),
-  
-  // Modal overlay
-  Show({
-    when: showModal,
-    children: Modal()
-      .modifier
-      .apply(fullScreen())
-      .backgroundColor('rgba(0,0,0,0.5)')
-      .build()
-  })
-])
-```
-
-## CSS Output
-
-The infinity constant generates efficient CSS:
-
-```typescript
-// Input
-.frame({ maxWidth: infinity })
-
-// Generated CSS
-.element {
-  max-width: 100%;
-  flex-grow: 1;
-}
-
-// Input  
-.frame({ width: infinity, height: infinity })
-
-// Generated CSS
-.element {
-  width: 100%;
-  height: 100%;
-  flex-grow: 1;
-}
-```
-
-## Performance
-
-- **Bundle Size**: ~200 bytes for infinity support
-- **Runtime Overhead**: Minimal symbol comparison
-- **CSS Generation**: Optimized output with proper flex properties
-- **Tree Shaking**: Unused utilities are eliminated
-
-## Browser Support
-
-Infinity support works across all modern browsers:
-- Chrome 29+
-- Firefox 28+ 
-- Safari 9+
-- Edge 12+
-
-## Advanced Usage
-
-### Conditional Infinity
-
-```typescript
-const isMobile = createSignal(false)
-
-Text("Responsive")
-  .modifier
-  .frame({ 
-    maxWidth: () => isMobile() ? infinity : 800
-  })
-  .build()
-```
-
-### Computed Dimensions
-
-```typescript
-const containerWidth = createSignal(400)
-
-Content()
-  .modifier
-  .frame({
-    width: infinity,
-    maxWidth: () => containerWidth() * 0.8
-  })
-  .build()
-```
-
-### Animation Support
-
-```typescript
-Text("Animated")
-  .modifier
-  .frame({ maxWidth: infinity })
-  .transition({ property: 'all', duration: 300 })
-  .build()
-```
-
-## Debugging
-
-Enable debug mode to see SUI equivalencies:
-
-```typescript
-import { logSuiEquivalent } from '@tachui/core'
-
-logSuiEquivalent('frame(maxWidth: .infinity)')
-// Logs: SUI Pattern: frame(maxWidth: .infinity) → TachUI: fillMaxWidth()
-```

package/src/constants/__tests__/frame-utils.test.ts

@@ -1,276 +0,0 @@
-/**
- * Tests for TachUI Frame Utilities
- */
-
-import { describe, it, expect } from 'vitest'
-import {
-  fillMaxWidth,
-  fillMaxHeight,
-  fillMaxSize,
-  expand,
-  fixedWidthExpandHeight,
-  fixedHeightExpandWidth,
-  constrainedExpand,
-  responsive,
-  flexible,
-  fullScreen,
-  remainingSpace,
-  equalShare
-} from '../frame-utils'
-import { infinity } from '../layout'
-import type { LayoutModifierProps } from '../../modifiers/types'
-
-describe('Frame Utilities', () => {
-  describe('fillMaxWidth', () => {
-    it('should create frame with infinity maxWidth', () => {
-      const modifier = fillMaxWidth()
-      expect(modifier.type).toBe('layout')
-      expect((modifier.properties as any).frame.maxWidth).toBe(infinity)
-    })
-
-    it('should not affect other dimensions', () => {
-      const modifier = fillMaxWidth()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBeUndefined()
-      expect(frame.height).toBeUndefined()
-      expect(frame.maxHeight).toBeUndefined()
-    })
-  })
-
-  describe('fillMaxHeight', () => {
-    it('should create frame with infinity maxHeight', () => {
-      const modifier = fillMaxHeight()
-      expect(modifier.type).toBe('layout')
-      expect((modifier.properties as any).frame.maxHeight).toBe(infinity)
-    })
-
-    it('should not affect other dimensions', () => {
-      const modifier = fillMaxHeight()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBeUndefined()
-      expect(frame.height).toBeUndefined()
-      expect(frame.maxWidth).toBeUndefined()
-    })
-  })
-
-  describe('fillMaxSize', () => {
-    it('should create frame with both infinity maxWidth and maxHeight', () => {
-      const modifier = fillMaxSize()
-      expect(modifier.type).toBe('layout')
-      const frame = (modifier.properties as any).frame
-      expect(frame.maxWidth).toBe(infinity)
-      expect(frame.maxHeight).toBe(infinity)
-    })
-
-    it('should not affect width and height directly', () => {
-      const modifier = fillMaxSize()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBeUndefined()
-      expect(frame.height).toBeUndefined()
-    })
-  })
-
-  describe('expand', () => {
-    it('should create frame with infinity width and height', () => {
-      const modifier = expand()
-      expect(modifier.type).toBe('layout')
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(infinity)
-      expect(frame.height).toBe(infinity)
-    })
-  })
-
-  describe('fixedWidthExpandHeight', () => {
-    it('should create frame with fixed width and infinity maxHeight', () => {
-      const modifier = fixedWidthExpandHeight(250)
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(250)
-      expect(frame.maxHeight).toBe(infinity)
-    })
-
-    it('should work with string width values', () => {
-      const modifier = fixedWidthExpandHeight('20%')
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe('20%')
-      expect(frame.maxHeight).toBe(infinity)
-    })
-  })
-
-  describe('fixedHeightExpandWidth', () => {
-    it('should create frame with fixed height and infinity maxWidth', () => {
-      const modifier = fixedHeightExpandWidth(60)
-      const frame = (modifier.properties as any).frame
-      expect(frame.height).toBe(60)
-      expect(frame.maxWidth).toBe(infinity)
-    })
-
-    it('should work with string height values', () => {
-      const modifier = fixedHeightExpandWidth('10vh')
-      const frame = (modifier.properties as any).frame
-      expect(frame.height).toBe('10vh')
-      expect(frame.maxWidth).toBe(infinity)
-    })
-  })
-
-  describe('constrainedExpand', () => {
-    it('should create frame with infinity dimensions and constraints', () => {
-      const modifier = constrainedExpand(800, 600)
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(infinity)
-      expect(frame.height).toBe(infinity)
-      expect(frame.maxWidth).toBe(800)
-      expect(frame.maxHeight).toBe(600)
-    })
-
-    it('should handle undefined constraints', () => {
-      const modifier = constrainedExpand()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(infinity)
-      expect(frame.height).toBe(infinity)
-      expect(frame.maxWidth).toBeUndefined()
-      expect(frame.maxHeight).toBeUndefined()
-    })
-
-    it('should handle partial constraints', () => {
-      const modifier = constrainedExpand(800)
-      const frame = (modifier.properties as any).frame
-      expect(frame.maxWidth).toBe(800)
-      expect(frame.maxHeight).toBeUndefined()
-    })
-  })
-
-  describe('responsive', () => {
-    it('should create frame with all constraint options', () => {
-      const modifier = responsive(320, 800, 200, 600)
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(infinity)
-      expect(frame.height).toBe(infinity)
-      expect(frame.minWidth).toBe(320)
-      expect(frame.maxWidth).toBe(800)
-      expect(frame.minHeight).toBe(200)
-      expect(frame.maxHeight).toBe(600)
-    })
-
-    it('should handle partial constraints', () => {
-      const modifier = responsive(320, 800)
-      const frame = (modifier.properties as any).frame
-      expect(frame.minWidth).toBe(320)
-      expect(frame.maxWidth).toBe(800)
-      expect(frame.minHeight).toBeUndefined()
-      expect(frame.maxHeight).toBeUndefined()
-    })
-
-    it('should work with string values', () => {
-      const modifier = responsive('20%', '80%', '100px', '500px')
-      const frame = (modifier.properties as any).frame
-      expect(frame.minWidth).toBe('20%')
-      expect(frame.maxWidth).toBe('80%')
-      expect(frame.minHeight).toBe('100px')
-      expect(frame.maxHeight).toBe('500px')
-    })
-  })
-
-  describe('flexible', () => {
-    it('should create frame with infinity maxWidth and maxHeight', () => {
-      const modifier = flexible()
-      const frame = (modifier.properties as any).frame
-      expect(frame.maxWidth).toBe(infinity)
-      expect(frame.maxHeight).toBe(infinity)
-      expect(frame.width).toBeUndefined()
-      expect(frame.height).toBeUndefined()
-    })
-  })
-
-  describe('fullScreen', () => {
-    it('should create frame with viewport dimensions', () => {
-      const modifier = fullScreen()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe('100vw')
-      expect(frame.height).toBe('100vh')
-    })
-  })
-
-  describe('remainingSpace', () => {
-    it('should create frame with infinity width and height', () => {
-      const modifier = remainingSpace()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(infinity)
-      expect(frame.height).toBe(infinity)
-    })
-  })
-
-  describe('equalShare', () => {
-    it('should create frame with infinity width for equal distribution', () => {
-      const modifier = equalShare()
-      const frame = (modifier.properties as any).frame
-      expect(frame.width).toBe(infinity)
-      expect(frame.height).toBeUndefined()
-    })
-  })
-
-  describe('Type safety', () => {
-    it('should create valid LayoutModifier instances', () => {
-      const modifiers = [
-        fillMaxWidth(),
-        fillMaxHeight(),
-        fillMaxSize(),
-        expand(),
-        flexible()
-      ]
-
-      modifiers.forEach(modifier => {
-        expect(modifier.type).toBe('layout')
-        expect(modifier.priority).toBeGreaterThan(0)
-        expect(modifier.properties).toBeDefined()
-        expect((modifier.properties as any).frame).toBeDefined()
-      })
-    })
-
-    it('should preserve frame structure', () => {
-      const modifier = responsive(320, 800, 200, 600)
-      const frame = (modifier.properties as LayoutModifierProps).frame
-
-      expect(frame).toBeDefined()
-      expect(typeof frame).toBe('object')
-      expect(frame?.width).toBe(infinity)
-      expect(frame?.height).toBe(infinity)
-    })
-  })
-
-  describe('Common use cases', () => {
-    it('should support button layouts', () => {
-      const buttonModifier = fillMaxWidth()
-      const frame = (buttonModifier.properties as any).frame
-      expect(frame.maxWidth).toBe(infinity)
-    })
-
-    it('should support sidebar layouts', () => {
-      const sidebarModifier = fixedWidthExpandHeight(250)
-      const frame = (sidebarModifier.properties as any).frame
-      expect(frame.width).toBe(250)
-      expect(frame.maxHeight).toBe(infinity)
-    })
-
-    it('should support header layouts', () => {
-      const headerModifier = fixedHeightExpandWidth(60)
-      const frame = (headerModifier.properties as any).frame
-      expect(frame.height).toBe(60)
-      expect(frame.maxWidth).toBe(infinity)
-    })
-
-    it('should support card layouts', () => {
-      const cardModifier = responsive(320, 800, 200)
-      const frame = (cardModifier.properties as any).frame
-      expect(frame.minWidth).toBe(320)
-      expect(frame.maxWidth).toBe(800)
-      expect(frame.minHeight).toBe(200)
-    })
-
-    it('should support modal layouts', () => {
-      const modalModifier = fullScreen()
-      const frame = (modalModifier.properties as any).frame
-      expect(frame.width).toBe('100vw')
-      expect(frame.height).toBe('100vh')
-    })
-  })
-})