@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/assets/ImageAsset.ts

@@ -1,91 +0,0 @@
-/**
- * Image Asset for TachUI Assets system
- *
- * Represents a theme-adaptive image with light and dark variants.
- */
-
-import { getCurrentTheme as _getCurrentTheme, getThemeSignal } from '../reactive/theme'
-import { getCurrentComputation } from '../reactive/context'
-import { Asset } from './Asset'
-
-/**
- * ImageAsset initialization options
- */
-export interface ImageAssetOptions {
-  default: string  // Required - fallback for any theme
-  light?: string   // Optional - light theme override
-  dark?: string    // Optional - dark theme override  
-  name: string     // Required - asset identifier
-  options?: { alt?: string; placeholder?: string } // Optional - metadata
-}
-
-export class ImageAsset extends Asset {
-  public readonly default: string
-  public readonly light?: string
-  public readonly dark?: string
-  public readonly alt?: string
-  public readonly placeholder?: string
-
-  constructor(options: ImageAssetOptions) {
-    super(options.name)
-
-    // Validate that default is provided
-    if (!options.default) {
-      throw new Error(`ImageAsset "${options.name}" must specify a default image path`)
-    }
-
-    this.default = options.default
-    this.light = options.light
-    this.dark = options.dark
-    this.alt = options.options?.alt
-    this.placeholder = options.options?.placeholder
-  }
-
-  static init(options: ImageAssetOptions): ImageAsset {
-    return new ImageAsset(options)
-  }
-
-  static getCurrentTheme(): string {
-    return _getCurrentTheme()
-  }
-
-  resolve(): string {
-    // If we're inside a reactive computation (effect/computed), use reactive theme signal
-    // Otherwise, use the static getCurrentTheme for backward compatibility with tests
-    const isInReactiveContext = getCurrentComputation() !== null
-    
-    let currentTheme: string
-    if (isInReactiveContext) {
-      // Use reactive theme signal for proper reactivity
-      const themeSignal = getThemeSignal()
-      currentTheme = themeSignal()
-    } else {
-      // Use static theme access for tests and non-reactive contexts
-      currentTheme = ImageAsset.getCurrentTheme()
-    }
-    
-    // Resolve priority: theme-specific → default
-    if (currentTheme === 'dark') {
-      return this.dark || this.default
-    } else {
-      return this.light || this.default
-    }
-  }
-
-  // Additional accessors
-  get src(): string {
-    return this.resolve()
-  }
-
-  get lightSrc(): string {
-    return this.light || this.default
-  }
-
-  get darkSrc(): string {
-    return this.dark || this.default
-  }
-
-  get defaultSrc(): string {
-    return this.default
-  }
-}

package/src/assets/README.md

@@ -1,190 +0,0 @@
-# TachUI Assets System
-
-The Assets system provides a unified way to manage theme-adaptive resources including colors, images, and other design assets in TachUI. It's designed to be similar to SwiftUI's asset management system while leveraging TachUI's reactive architecture.
-
-## Features
-
-- **Theme-Adaptive Assets**: Automatically adapt to light/dark mode
-- **Dot Notation Access**: Clean, intuitive API (`Assets.primaryColor`)
-- **Explicit Theme Access**: Force specific theme variants (`Assets.primaryColor.light`)
-- **Extensible**: Support for custom asset types beyond colors and images
-- **TypeScript Support**: Full type safety with proper interfaces
-- **Performance**: Efficient proxy-based access with caching
-
-## Usage
-
-### Basic Usage
-
-```typescript
-import { Assets, registerAsset, ColorAsset } from '@tachui/core/assets'
-
-// Register custom assets
-registerAsset('primaryColor', ColorAsset.init('#007AFF', '#0A84FF', 'primaryColor'))
-registerAsset('backgroundColor', ColorAsset.init('#FFFFFF', '#1a1a1a', 'backgroundColor'))
-
-// Use assets in components
-import { Text } from '@tachui/core/components'
-
-export function MyComponent() {
-  return Text('Hello World')
-    .modifier
-    .foregroundColor(Assets.primaryColor)  // Auto-adapts to current theme
-    .backgroundColor(Assets.backgroundColor)
-    .build()
-}
-```
-
-### Explicit Theme Access
-
-```typescript
-// Always use light variant
-Text('Always Light').modifier.foregroundColor(Assets.primaryColor.light)
-
-// Always use dark variant
-Text('Always Dark').modifier.foregroundColor(Assets.primaryColor.dark)
-```
-
-### Image Assets
-
-```typescript
-import { ImageAsset } from '@tachui/core/assets'
-
-// Register image assets
-registerAsset('logo', ImageAsset.init('/logo-light.png', '/logo-dark.png', 'logo'))
-
-// Use in components
-import { Image } from '@tachui/core/components'
-
-export function LogoComponent() {
-  return Image(Assets.logo)  // Auto-adapts to current theme
-    .modifier
-    .frame(100, 50)
-    .build()
-}
-```
-
-## Built-in System Assets
-
-TachUI provides built-in system colors that match SwiftUI's color system:
-
-```typescript
-// System colors
-Assets.systemBlue    // #007AFF (light) / #0A84FF (dark)
-Assets.systemGreen   // #34C759 (light) / #30D158 (dark)
-Assets.systemRed     // #FF3B30 (light) / #FF453A (dark)
-Assets.systemOrange  // #FF9500 (light) / #FF9F0A (dark)
-Assets.systemPurple  // #5856D6 (light) / #5E5CE6 (dark)
-Assets.systemPink    // #FF2D55 (light) / #FF375F (dark)
-Assets.systemGray    // #8E8E93 (both)
-Assets.systemBlack   // #000000 (both)
-Assets.systemWhite   // #FFFFFF (both)
-```
-
-## Creating Custom Assets
-
-### Color Assets
-
-```typescript
-import { ColorAsset } from '@tachui/core/assets'
-
-// Create a custom color asset
-const brandPrimary = ColorAsset.init('#FF6B35', '#FF8E6B', 'brandPrimary')
-
-// Register it
-registerAsset('brandPrimary', brandPrimary)
-
-// Use it
-Assets.brandPrimary  // Auto-adapts
-Assets.brandPrimary.light  // Always light
-Assets.brandPrimary.dark   // Always dark
-```
-
-### Image Assets
-
-```typescript
-import { ImageAsset } from '@tachui/core/assets'
-
-// Create a custom image asset
-const heroImage = ImageAsset.init('/hero-light.jpg', '/hero-dark.jpg', 'heroImage', {
-  alt: 'Hero banner image',
-  placeholder: '/placeholder.jpg'
-})
-
-// Register it
-registerAsset('heroImage', heroImage)
-
-// Use it
-Assets.heroImage  // Auto-adapts
-Assets.heroImage.lightSrc  // Always light source
-Assets.heroImage.darkSrc   // Always dark source
-```
-
-## Integration with Modifiers
-
-The Assets system seamlessly integrates with TachUI's modifier system:
-
-```typescript
-import { appearanceModifiers } from '@tachui/core/modifiers/core'
-
-// Use assets with modifiers
-const colorModifier = appearanceModifiers.foregroundColor(Assets.primaryColor)
-const backgroundModifier = appearanceModifiers.backgroundColor(Assets.backgroundColor)
-```
-
-## Advanced Usage
-
-### Asset Bundles
-
-For better organization, you can create logical groupings of assets:
-
-```typescript
-// Create semantic color bundles
-registerAsset('textPrimary', ColorAsset.init('#1a1a1a', '#ffffff', 'textPrimary'))
-registerAsset('textSecondary', ColorAsset.init('#666666', '#cccccc', 'textSecondary'))
-
-registerAsset('backgroundPrimary', ColorAsset.init('#FFFFFF', '#1a1a1a', 'backgroundPrimary'))
-registerAsset('backgroundSecondary', ColorAsset.init('#f8f9fa', '#2a2a2a', 'backgroundSecondary'))
-```
-
-### Custom Asset Types
-
-You can extend the system with custom asset types:
-
-```typescript
-import { Asset } from '@tachui/core/assets'
-
-class GradientAsset extends Asset {
-  constructor(
-    public readonly lightGradient: string,
-    public readonly darkGradient: string,
-    name: string
-  ) {
-    super(name)
-  }
-  
-  resolve(): string {
-    return getCurrentTheme() === 'dark' ? this.darkGradient : this.lightGradient
-  }
-}
-
-// Register custom asset
-registerAsset('primaryGradient', new GradientAsset(
-  'linear-gradient(to right, #007AFF, #5856D6)',
-  'linear-gradient(to right, #0A84FF, #5E5CE6)',
-  'primaryGradient'
-))
-```
-
-## Benefits
-
-1. **SwiftUI Familiarity**: Developers familiar with SwiftUI will feel at home
-2. **Automatic Theme Adaptation**: Colors automatically switch between light/dark modes
-3. **Semantic Naming**: Clear, purpose-driven asset names
-4. **Global Access**: Centralized asset definitions that can be imported anywhere
-5. **Type Safety**: Full TypeScript support with proper interfaces
-6. **Performance**: Reactive updates only when theme changes
-7. **Flexibility**: Developers can define custom palettes while using standard assets
-
-## Implementation Details
-
-The Assets system uses JavaScript Proxies to enable the clean dot notation API while providing automatic theme adaptation. Assets are resolved reactively based on the current theme, ensuring consistent appearance across your application.

package/src/assets/index.ts

@@ -1,175 +0,0 @@
-/**
- * TachUI Assets System
- *
- * Provides a unified system for managing theme-adaptive assets including colors, images, and other resources.
- */
-
-import { Asset } from './Asset'
-import { AssetCollection } from './AssetCollection'
-import { ColorAsset } from './ColorAsset'
-import { ImageAsset } from './ImageAsset'
-import { FontAsset, type FontAssetOptions } from './FontAsset'
-import type { AssetInfo, AssetsInterface } from './types'
-
-// Global asset collection
-const globalAssets = new AssetCollection()
-
-// Create the proxy that enables dot notation access
-const AssetsProxy = globalAssets.asProxy()
-
-// Export the Assets object with proper TypeScript interface
-export const Assets: AssetsInterface = AssetsProxy as AssetsInterface
-
-// Export asset classes and types
-export { Asset, ColorAsset, ImageAsset, FontAsset }
-export * from './types'
-export { 
-  FontWeightPreset as FontWeight, 
-  FontWidth, 
-  SystemFonts, 
-  createSystemFont, 
-  createGoogleFont, 
-  createVariableFont,
-  type FontAssetOptions,
-  type FontWeightValue,
-  type FontWidthValue 
-} from './FontAsset'
-
-// Convenience function for registering assets
-export function registerAsset(name: string, asset: Asset): void
-export function registerAsset(asset: Asset): void
-export function registerAsset(asset: Asset, name?: string): void
-export function registerAsset(nameOrAsset: string | Asset, assetOrName?: Asset | string): void {
-  if (typeof nameOrAsset === 'string' && assetOrName instanceof Asset) {
-    // Legacy usage: registerAsset(name, asset)
-    globalAssets.add(nameOrAsset, assetOrName)
-  } else if (nameOrAsset instanceof Asset && typeof assetOrName === 'string') {
-    // New usage: registerAsset(asset, overrideName)
-    globalAssets.add(assetOrName, nameOrAsset)
-  } else if (nameOrAsset instanceof Asset && assetOrName === undefined) {
-    // New usage: registerAsset(asset) - uses asset.name
-    globalAssets.add(nameOrAsset.name, nameOrAsset)
-  } else {
-    throw new Error('registerAsset requires either (name, asset), (asset), or (asset, overrideName)')
-  }
-}
-
-// Convenience functions for creating assets (updated to new API)
-export function createColorAsset(
-  light: string,
-  dark: string,
-  name: string = ''
-): ColorAsset {
-  return ColorAsset.init({
-    default: light,
-    light,
-    dark,
-    name
-  })
-}
-
-export function createImageAsset(
-  defaultPath: string,
-  light?: string,
-  dark?: string,
-  name: string = '',
-  options?: { alt?: string; placeholder?: string }
-): ImageAsset {
-  return ImageAsset.init({
-    default: defaultPath,
-    light,
-    dark,
-    name,
-    options
-  })
-}
-
-export function createFontAsset(
-  family: string,
-  fallbacks: string[] = [],
-  name: string = '',
-  options?: FontAssetOptions
-): FontAsset {
-  return FontAsset.init(family, fallbacks, name, options)
-}
-
-// Asset discovery function for debugging
-export function getAssetInfo(): AssetInfo[] {
-  const allAssets = globalAssets.getAll()
-  const assetInfos: AssetInfo[] = []
-
-  for (const [name, asset] of allAssets) {
-    let type: 'color' | 'image' | 'font' | 'custom' = 'custom'
-
-    if (asset instanceof ColorAsset) {
-      type = 'color'
-    } else if (asset instanceof ImageAsset) {
-      type = 'image'
-    } else if (asset instanceof FontAsset) {
-      type = 'font'
-    }
-
-    assetInfos.push({
-      name,
-      type,
-      asset,
-    })
-  }
-
-  return assetInfos.sort((a, b) => a.name.localeCompare(b.name))
-}
-
-// Asset discovery function to list all registered asset names
-export function listAssetNames(): string[] {
-  return Array.from(globalAssets.getAll().keys()).sort()
-}
-
-// Create built-in system assets using new simplified API
-registerAsset(ColorAsset.init({
-  default: '#007AFF',
-  light: '#007AFF',
-  dark: '#0A84FF',
-  name: 'systemBlue'
-}))
-registerAsset(ColorAsset.init({
-  default: '#34C759',
-  light: '#34C759',
-  dark: '#30D158',
-  name: 'systemGreen'
-}))
-registerAsset(ColorAsset.init({
-  default: '#FF3B30',
-  light: '#FF3B30',
-  dark: '#FF453A',
-  name: 'systemRed'
-}))
-registerAsset(ColorAsset.init({
-  default: '#FF9500',
-  light: '#FF9500',
-  dark: '#FF9F0A',
-  name: 'systemOrange'
-}))
-registerAsset(ColorAsset.init({
-  default: '#5856D6',
-  light: '#5856D6',
-  dark: '#5E5CE6',
-  name: 'systemPurple'
-}))
-registerAsset(ColorAsset.init({
-  default: '#FF2D55',
-  light: '#FF2D55',
-  dark: '#FF375F',
-  name: 'systemPink'
-}))
-registerAsset(ColorAsset.init({
-  default: '#8E8E93',
-  name: 'systemGray'
-}))
-registerAsset(ColorAsset.init({
-  default: '#000000',
-  name: 'systemBlack'
-}))
-registerAsset(ColorAsset.init({
-  default: '#FFFFFF',
-  name: 'systemWhite'
-}))

package/src/assets/test-assets.ts

@@ -1,69 +0,0 @@
-/**
- * Test file for the Assets system
- *
- * This file demonstrates the usage of the Assets system and can be used for manual testing.
- */
-
-import { getCurrentTheme, setTheme } from '../reactive'
-import { Assets, ColorAsset, ImageAsset, registerAsset } from './index'
-
-// Register test assets
-registerAsset('testPrimary', ColorAsset.init('#007AFF', '#0A84FF', 'testPrimary'))
-registerAsset('testBackground', ColorAsset.init('#FFFFFF', '#1a1a1a', 'testBackground'))
-registerAsset('testImage', ImageAsset.init('/logo-light.png', '/logo-dark.png', 'testImage'))
-
-// Test functions
-function testAssetAccess() {
-  console.log('=== Asset Access Tests ===')
-
-  // Test basic asset access
-  console.log('Assets.testPrimary:', Assets.testPrimary)
-  console.log('Assets.testPrimary.light:', Assets.testPrimary.light)
-  console.log('Assets.testPrimary.dark:', Assets.testPrimary.dark)
-
-  // Test resolution
-  console.log('Current theme:', getCurrentTheme())
-  console.log('Assets.testPrimary.resolve():', Assets.testPrimary.resolve())
-
-  // Test image assets
-  console.log('Assets.testImage:', Assets.testImage)
-  console.log('Assets.testImage.light:', Assets.testImage.light)
-  console.log('Assets.testImage.dark:', Assets.testImage.dark)
-  console.log('Assets.testImage.resolve():', Assets.testImage.resolve())
-}
-
-function testThemeSwitching() {
-  console.log('\n=== Theme Switching Tests ===')
-
-  // Test light theme
-  setTheme('light')
-  console.log('Light theme - Primary color:', Assets.testPrimary.resolve())
-  console.log('Light theme - Background color:', Assets.testBackground.resolve())
-  console.log('Light theme - Image source:', Assets.testImage.resolve())
-
-  // Test dark theme
-  setTheme('dark')
-  console.log('Dark theme - Primary color:', Assets.testPrimary.resolve())
-  console.log('Dark theme - Background color:', Assets.testBackground.resolve())
-  console.log('Dark theme - Image source:', Assets.testImage.resolve())
-}
-
-function testSystemAssets() {
-  console.log('\n=== System Assets Tests ===')
-
-  // Test system colors
-  console.log('System Blue (light):', Assets.systemBlue.light)
-  console.log('System Blue (dark):', Assets.systemBlue.dark)
-  console.log('System Blue (resolved):', Assets.systemBlue.resolve())
-
-  console.log('System Green (light):', Assets.systemGreen.light)
-  console.log('System Green (dark):', Assets.systemGreen.dark)
-  console.log('System Green (resolved):', Assets.systemGreen.resolve())
-}
-
-// Run tests
-console.log('Running Assets System Tests...')
-testAssetAccess()
-testThemeSwitching()
-testSystemAssets()
-console.log('\nAll tests completed!')

package/src/assets/test-integration.ts

@@ -1,46 +0,0 @@
-/**
- * Integration test for the Assets system
- *
- * This test verifies that the Assets system integrates correctly
- * with the rest of the TachUI framework.
- */
-
-import { Text, VStack } from '../components'
-import { appearanceModifiers } from '../modifiers/core'
-import { Assets, ColorAsset, ImageAsset, registerAsset } from './index'
-
-// Register some test assets
-registerAsset('primaryColor', ColorAsset.init('#007AFF', '#0A84FF', 'primaryColor'))
-registerAsset(
-  'backgroundImage',
-  ImageAsset.init('/bg-light.png', '/bg-dark.png', 'backgroundImage')
-)
-
-// Test using assets with components
-export function TestComponent() {
-  return VStack({
-    children: [
-      Text('Hello TachUI')
-        .modifier.foregroundColor(Assets.primaryColor) // Auto-adapts to theme
-        .fontSize(24)
-        .build(),
-
-      Text('Always Light')
-        .modifier.foregroundColor(Assets.primaryColor.light) // Always light
-        .build(),
-    ],
-  })
-}
-
-// Test using assets with modifiers directly
-export function testModifierUsage() {
-  // Using asset with foregroundColor modifier
-  const colorModifier = appearanceModifiers.foregroundColor(Assets.primaryColor)
-
-  // Using asset with backgroundColor modifier
-  const backgroundModifier = appearanceModifiers.backgroundColor(Assets.primaryColor.dark)
-
-  return [colorModifier, backgroundModifier]
-}
-
-console.log('Integration test completed successfully!')

package/src/assets/test-simple.ts

@@ -1,28 +0,0 @@
-/**
- * Simple test for the Assets system
- *
- * This test verifies that the Assets system is working correctly
- * by creating and using some basic assets.
- */
-
-import { Assets, ColorAsset, ImageAsset, registerAsset } from './index'
-
-// Register some test assets
-registerAsset('testColor', ColorAsset.init('#FF0000', '#00FF00', 'testColor'))
-registerAsset('testImage', ImageAsset.init('/test-light.png', '/test-dark.png', 'testImage'))
-
-// Test accessing assets
-console.log('Assets.testColor:', Assets.testColor)
-console.log('Assets.testColor.light:', Assets.testColor.light)
-console.log('Assets.testColor.dark:', Assets.testColor.dark)
-
-// Test resolving assets
-console.log('Assets.testColor.resolve():', Assets.testColor.resolve())
-
-// Test image assets
-console.log('Assets.testImage:', Assets.testImage)
-console.log('Assets.testImage.light:', Assets.testImage.light)
-console.log('Assets.testImage.dark:', Assets.testImage.dark)
-console.log('Assets.testImage.resolve():', Assets.testImage.resolve())
-
-console.log('Assets system test completed successfully!')

package/src/assets/types.ts

@@ -1,79 +0,0 @@
-/**
- * TypeScript types and interfaces for TachUI Assets System
- */
-
-import type { Asset } from './Asset'
-import type { ColorAsset } from './ColorAsset'
-import type { ImageAsset } from './ImageAsset'
-import type { FontAsset } from './FontAsset'
-
-// Re-export Asset for external use
-export type { Asset }
-
-/**
- * Interface for ColorAsset with theme-specific access
- */
-export interface ColorAssetProxy extends ColorAsset {
-  light: string
-  dark: string
-  toString(): string
-  valueOf(): string
-}
-
-/**
- * Interface for ImageAsset with theme-specific access
- */
-export interface ImageAssetProxy extends ImageAsset {
-  lightSrc: string
-  darkSrc: string
-  toString(): string
-  valueOf(): string
-}
-
-/**
- * Built-in system assets interface
- */
-export interface SystemAssets {
-  systemBlue: ColorAssetProxy
-  systemGreen: ColorAssetProxy
-  systemRed: ColorAssetProxy
-  systemOrange: ColorAssetProxy
-  systemPurple: ColorAssetProxy
-  systemPink: ColorAssetProxy
-  systemGray: ColorAssetProxy
-  systemBlack: ColorAssetProxy
-  systemWhite: ColorAssetProxy
-}
-
-/**
- * Interface for FontAsset with convenient access
- */
-export interface FontAssetProxy extends FontAsset {
-  toString(): string
-  valueOf(): string
-}
-
-/**
- * Main Assets interface with extensible custom asset support
- */
-export interface AssetsInterface extends SystemAssets {
-  [key: string]: ColorAssetProxy | ImageAssetProxy | FontAssetProxy | Asset
-}
-
-/**
- * Asset discovery information
- */
-export interface AssetInfo {
-  name: string
-  type: 'color' | 'image' | 'font' | 'custom'
-  asset: Asset
-}
-
-/**
- * Color validation result
- */
-export interface ColorValidationResult {
-  isValid: boolean
-  format?: 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'named'
-  error?: string
-}