@tachui/core 0.7.0-alpha1

package/src/assets/index.ts

@@ -0,0 +1,175 @@
+/**
+ * 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

@@ -0,0 +1,69 @@
+/**
+ * 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

@@ -0,0 +1,46 @@
+/**
+ * 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

@@ -0,0 +1,28 @@
+/**
+ * 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

@@ -0,0 +1,79 @@
+/**
+ * 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

@@ -0,0 +1,30 @@
+/**
+ * @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

@@ -0,0 +1,29 @@
+/**
+ * @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

@@ -0,0 +1,26 @@
+/**
+ * @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

@@ -0,0 +1,26 @@
+/**
+ * @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

@@ -0,0 +1,67 @@
+/**
+ * @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