@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

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
-}

package/src/bundles/common.ts

@@ -1,30 +0,0 @@
-/**
- * @fileoverview TachUI Common Bundle (~115KB)
- * 
- * Optimized for typical web applications (80% of use cases).
- * This bundle re-exports the complete framework but with metadata
- * to guide bundlers for common web app optimization.
- */
-
-// For Phase 3, we export everything but provide metadata for optimal tree-shaking
-export * from '../index.js'
-
-/**
- * Common Bundle Metadata - guides tree-shaking tools
- */
-export const BUNDLE_INFO = {
-  name: '@tachui/core/common',
-  version: '0.1.0', 
-  description: 'Common TachUI bundle for typical web applications',
-  targetSize: '~115KB',
-  recommendedComponents: [
-    'Text', 'Button', 'Image', 'HStack', 'VStack', 'Spacer', 'Show',
-    'BasicForm', 'BasicInput', 'Toggle', 'Picker', 'Link',
-    'List', 'ScrollView', 'Section', 'Divider'
-  ],
-  useCase: 'Typical web applications, forms, navigation, lists',
-  treeShakingHints: {
-    include: ['reactive', 'runtime', 'components/basic', 'components/forms', 'modifiers/common'],
-    exclude: ['components/advanced', 'modifiers/advanced', 'gradients/complex']
-  }
-} as const

package/src/bundles/complete.ts

@@ -1,29 +0,0 @@
-/**
- * @fileoverview TachUI Complete Bundle (6.2MB - Backward Compatibility)
- * 
- * Complete framework with all components and features.
- * Maintains backward compatibility with existing applications.
- * 
- * Bundle Contents:
- * - Everything from common bundle
- * - All advanced components (DatePicker, Stepper, Slider, etc.)
- * - All modifiers and utilities
- * - Complete plugin system
- * - Development tools and debugging
- */
-
-// Re-export everything from existing index (maintains backward compatibility)
-export * from '../index.js'
-
-/**
- * Complete Bundle Metadata
- */
-export const BUNDLE_INFO = {
-  name: '@tachui/core',
-  version: '0.1.0',
-  description: 'Complete TachUI framework with all components and features',
-  targetSize: '6.2MB',
-  components: 'ALL_COMPONENTS',
-  modifiers: 'ALL_MODIFIERS', 
-  useCase: 'Backward compatibility, feature-rich applications, everything included'
-} as const

package/src/bundles/essential.ts

@@ -1,26 +0,0 @@
-/**
- * @fileoverview TachUI Essential Bundle (~20KB)
- * 
- * Core runtime only - optimized for custom component development.
- * This bundle re-exports the complete framework but with metadata
- * to guide bundlers for runtime-only optimization.
- */
-
-// For Phase 3, we export everything but provide metadata for runtime-only tree-shaking
-export * from '../index.js'
-
-/**
- * Essential Bundle Metadata - guides tree-shaking tools
- */
-export const BUNDLE_INFO = {
-  name: '@tachui/core/essential',
-  version: '0.1.0',
-  description: 'Essential TachUI runtime for custom component development',
-  targetSize: '~20KB',
-  recommendedComponents: [],
-  useCase: 'Custom component development, maximum granular control',
-  treeShakingHints: {
-    include: ['reactive', 'runtime/core', 'compiler/core'],
-    exclude: ['components/*', 'modifiers/*', 'gradients/*', 'animations/*', 'plugins/*']
-  }
-} as const

package/src/bundles/minimal.ts

@@ -1,26 +0,0 @@
-/**
- * @fileoverview TachUI Minimal Bundle (~60KB)
- * 
- * Optimized for calculator-style apps and landing pages.
- * This bundle re-exports the complete framework but with metadata
- * to guide bundlers on tree-shaking optimization.
- */
-
-// For Phase 3, we export everything but provide metadata for optimal tree-shaking
-export * from '../index'
-
-/**
- * Minimal Bundle Metadata - guides tree-shaking tools
- */
-export const BUNDLE_INFO = {
-  name: '@tachui/core/minimal',
-  version: '0.1.0',
-  description: 'Minimal TachUI bundle for calculator-style apps and landing pages',
-  targetSize: '~60KB',
-  recommendedComponents: ['Text', 'Button', 'Image', 'HStack', 'VStack', 'Spacer', 'Show'],
-  useCase: 'Calculator-style apps, landing pages, simple UIs',
-  treeShakingHints: {
-    include: ['reactive', 'runtime', 'components/basic', 'modifiers/basic'],
-    exclude: ['components/advanced', 'modifiers/advanced', 'gradients', 'animations']
-  }
-} as const

package/src/bundles/production-minimal.ts

@@ -1,67 +0,0 @@
-/**
- * @fileoverview TachUI Production Minimal Bundle (~45KB)
- * 
- * Validation-free minimal bundle optimized for production.
- * No development tools or TypeScript dependencies.
- */
-
-// Core reactive system
-export * from '../reactive/signal'
-export * from '../reactive/computed'
-export * from '../reactive/effect'
-export { onCleanup, dispose, createCleanupGroup } from '../reactive/cleanup'
-export * from '../reactive/context'
-
-// Essential runtime
-export * from '../runtime/dom-bridge'
-export * from '../runtime/component'
-export * from '../runtime/props'
-
-// Basic components only
-export * from '../components/Text'
-export * from '../components/Button' 
-export * from '../components/Image'
-export * from '../components/BasicInput'
-export * from '../components/Spacer'
-export * from '../components/Show'
-
-// Layout containers (from wrapper)
-export { HStack, VStack, ZStack } from '../components/wrapper'
-
-// Essential modifiers
-export * from '../modifiers/core'
-export * from '../modifiers/padding'
-export * from '../modifiers/margin'
-export * from '../modifiers/size'
-export * from '../modifiers/typography'
-export * from '../modifiers/background'
-
-// State management  
-export { State, isState, unwrapValue } from '../state/state'
-export { createBinding, isBinding } from '../state/binding'
-
-// Assets system (essential for apps)
-export {
-  Assets,
-  Asset,
-  ColorAsset,
-  ImageAsset,
-  FontAsset,
-  registerAsset,
-  createColorAsset,
-  createImageAsset,
-  createFontAsset,
-  type AssetsInterface
-} from '../assets'
-
-// Gradients (needed by intro app)
-export { LinearGradient } from '../gradients'
-
-// Additional components needed by intro
-export { Divider } from '../components/Divider'
-export { ScrollView } from '../components/ScrollView'
-
-// Constants (for dimensions)
-export { infinity, SUI, isInfinity, type Dimension, type InfinityValue } from '../constants'
-
-// No validation imports - completely excluded from production