@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/README.md

@@ -0,0 +1,195 @@
+# @tachui/core
+
+> The core tachUI framework - SwiftUI-inspired web development with fine-grained reactivity
+
+[![npm version](https://img.shields.io/npm/v/@tachui/core.svg)](https://www.npmjs.com/package/@tachui/core)
+[![License: MPL-2.0](https://img.shields.io/badge/License-MPL--2.0-blue.svg)](https://opensource.org/licenses/MPL-2.0)
+
+## Overview
+
+tachUI core provides a SwiftUI-inspired declarative framework for building web applications with fine-grained reactivity, direct DOM manipulation, and a familiar component-based architecture.
+
+## Features
+
+- 🎯 **SwiftUI-compatible API** - Familiar components and modifiers
+- ⚡ **Fine-grained reactivity** - SolidJS-inspired signal system
+- 🏗️ **50+ Components** - Complete UI component library
+- 🎨 **Chainable modifiers** - SwiftUI-style component styling
+- 📱 **Responsive design** - Built-in breakpoint system
+- 🔧 **TypeScript-first** - Complete type safety
+- 🚀 **Performance-focused** - Direct DOM manipulation
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install @tachui/core@0.8.0-alpha
+# or
+pnpm add @tachui/core@0.8.0-alpha
+```
+
+### Basic Example
+
+```typescript
+import { Text, Button, VStack, createSignal } from '@tachui/core'
+
+// Create reactive state
+const [count, setCount] = createSignal(0)
+
+// Build SwiftUI-style components
+const counterApp = VStack({
+  children: [
+    Text(() => `Count: ${count()}`)
+      .modifier.fontSize(24)
+      .fontWeight('bold')
+      .foregroundColor('#007AFF')
+      .build(),
+
+    Button('Increment', () => setCount(count() + 1))
+      .modifier.backgroundColor('#007AFF')
+      .foregroundColor('white')
+      .padding({ horizontal: 24, vertical: 12 })
+      .cornerRadius(8)
+      .build(),
+  ],
+  spacing: 16,
+  alignment: 'center',
+})
+
+// Mount to DOM
+counterApp.mount('#app')
+```
+
+## Core Components
+
+### Layout
+
+- **VStack, HStack, ZStack** - Flexible layout containers
+- **Grid** - Advanced grid systems with responsive support
+- **ScrollView** - Scrollable content with pull-to-refresh
+- **Spacer** - Flexible space distribution
+
+### Content & Input
+
+- **Text** - Typography with reactive content
+- **Image** - Progressive loading with content modes
+- **Button** - Interactive buttons with states
+- **BasicInput** - Text input with validation
+- **Toggle** - Switch controls with reactive binding
+
+### Data & Logic
+
+- **List, ForEach, Section** - Dynamic content rendering
+- **Show, Unless, When** - Conditional rendering
+- **Form** - Form containers with validation
+
+## Modifier System
+
+Chain modifiers just like SwiftUI:
+
+```typescript
+Text('Hello tachUI')
+  .modifier.fontSize(18)
+  .fontWeight('semibold')
+  .foregroundColor('#007AFF')
+  .padding(16)
+  .backgroundColor('#f0f8ff')
+  .cornerRadius(12)
+  .shadow({ x: 0, y: 2, radius: 4, color: 'rgba(0,122,255,0.2)' })
+  .onTap(() => console.log('Tapped!'))
+  .build()
+```
+
+### Available Modifiers
+
+- **Layout**: `.frame()`, `.padding()`, `.margin()`, `.position()`
+- **Appearance**: `.foregroundColor()`, `.backgroundColor()`, `.font()`, `.cornerRadius()`
+- **Visual Effects**: `.shadow()`, `.opacity()`, `.clipShape()`, `.backdrop()`
+- **Interactions**: `.onTap()`, `.onHover()`, `.disabled()`, `.cursor()`
+- **Responsive**: `.responsive()` - breakpoint-based styling
+
+## Reactivity System
+
+Fine-grained reactive updates using signals:
+
+```typescript
+import { createSignal, createComputed, createEffect } from '@tachui/core'
+
+// Create reactive state
+const [name, setName] = createSignal('World')
+const [count, setCount] = createSignal(0)
+
+// Computed values
+const greeting = createComputed(() => `Hello, ${name()}!`)
+
+// Side effects
+createEffect(() => {
+  console.log(`Count changed to: ${count()}`)
+})
+
+// Update state
+setName('tachUI')
+setCount(count() + 1)
+```
+
+## TypeScript Support
+
+Full TypeScript support with excellent IntelliSense:
+
+```typescript
+import { ComponentProps, Modifier } from '@tachui/core'
+
+// Typed component props
+interface MyComponentProps extends ComponentProps {
+  title: string
+  count: number
+  onUpdate?: (value: number) => void
+}
+
+// Custom components with modifiers
+const MyComponent = createComponent<MyComponentProps>('MyComponent', props => {
+  return Text(props.title)
+    .modifier.fontSize(props.count > 10 ? 20 : 16)
+    .build()
+})
+```
+
+## Performance
+
+tachUI's architecture provides:
+
+- **Surgical DOM updates** - Only affected elements re-render
+- **Automatic dependency tracking** - No manual effect management
+- **Memory-safe cleanup** - WeakMap-based automatic cleanup
+- **Sub-millisecond updates** - Direct DOM manipulation
+
+## Plugin Ecosystem
+
+Extend tachUI with additional packages:
+
+- **[@tachui/forms](https://npm.im/@tachui/forms)** - Advanced form components
+- **[@tachui/navigation](https://npm.im/@tachui/navigation)** - Navigation and routing
+- **[@tachui/symbols](https://npm.im/@tachui/symbols)** - Icon system
+- **[@tachui/mobile-patterns](https://npm.im/@tachui/mobile-patterns)** - Mobile UI patterns
+
+## Documentation
+
+- **[Getting Started Guide](https://github.com/tach-UI/tachUI/blob/main/docs/guide/getting-started.md)**
+- **[Component Reference](https://github.com/tach-UI/tachUI/blob/main/docs/guide/components/)**
+- **[API Documentation](https://github.com/tach-UI/tachUI/tree/main/docs/api/)**
+- **[Examples](https://github.com/tach-UI/tachUI/tree/main/apps/examples/)**
+
+## Community
+
+- **[GitHub Issues](https://github.com/tach-UI/tachUI/issues)** - Report bugs and request features
+- **[GitHub Discussions](https://github.com/tach-UI/tachUI/discussions)** - Ask questions and share ideas
+- **[Contributing Guide](https://github.com/tach-UI/tachUI/blob/main/CONTRIBUTING.md)** - How to contribute
+
+## License
+
+Mozilla Public License 2.0 - see [LICENSE](https://github.com/tach-UI/tachUI/blob/main/LICENSE) for details.
+
+---
+
+**tachUI** - The future of SwiftUI-inspired web development 🚀

package/dist/bundles/common.d.ts

@@ -14,7 +14,7 @@ export declare const BUNDLE_INFO: {
     readonly version: "0.1.0";
     readonly description: "Common TachUI bundle for typical web applications";
     readonly targetSize: "~115KB";
-    readonly recommendedComponents: readonly ["Text", "Button", "Image", "HStack", "VStack", "Spacer", "Show", "BasicForm", "BasicInput", "Toggle", "Picker", "Link", "List", "ScrollView", "Section", "Divider"];
+    readonly recommendedComponents: readonly ["Text", "Button", "Image", "HStack", "VStack", "Spacer", "Show", "BasicForm", "BasicInput", "Toggle", "Picker", "Link", "List", "Section", "Divider"];
     readonly useCase: "Typical web applications, forms, navigation, lists";
     readonly treeShakingHints: {
         readonly include: readonly ["reactive", "runtime", "components/basic", "components/forms", "modifiers/common"];

package/dist/bundles/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/bundles/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAA;AAE3B;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAed,CAAA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/bundles/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAA;AAE3B;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAiCd,CAAA"}

package/dist/bundles/minimal.d.ts

@@ -2,19 +2,31 @@
  * @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.
+ * Only includes essential components and modifiers.
  */
-export * from '../index';
+export * from '../reactive/signal';
+export * from '../reactive/computed';
+export * from '../reactive/effect';
+export { onCleanup, dispose, createCleanupGroup } from '../reactive/cleanup';
+export * from '../reactive/context';
+export * from '../runtime/dom-bridge';
+export * from '../runtime/component';
+export * from '../runtime/props';
+export * from '../modifiers/core';
+export { State, isState, unwrapValue } from '../state/state';
+export { createBinding, isBinding } from '../state/binding';
+export { Assets, Asset, ColorAsset, ImageAsset, FontAsset, registerAsset, createColorAsset, createImageAsset, createFontAsset, } from '../assets';
+export { infinity, Layout, isInfinity } from '../constants';
+export { LinearGradient } from '../gradients';
 /**
- * Minimal Bundle Metadata - guides tree-shaking tools
+ * Minimal Bundle Metadata
  */
 export declare const BUNDLE_INFO: {
     readonly name: "@tachui/core/minimal";
     readonly version: "0.1.0";
     readonly description: "Minimal TachUI bundle for calculator-style apps and landing pages";
     readonly targetSize: "~60KB";
-    readonly recommendedComponents: readonly ["Text", "Button", "Image", "HStack", "VStack", "Spacer", "Show"];
+    readonly recommendedComponents: readonly ["Text", "Button", "HStack", "VStack"];
     readonly useCase: "Calculator-style apps, landing pages, simple UIs";
     readonly treeShakingHints: {
         readonly include: readonly ["reactive", "runtime", "components/basic", "modifiers/basic"];

package/dist/bundles/minimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../src/bundles/minimal.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,UAAU,CAAA;AAExB;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAWd,CAAA"}
+{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../src/bundles/minimal.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,cAAc,qBAAqB,CAAA;AAGnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAOhC,cAAc,mBAAmB,CAAA;AAQjC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG3D,OAAO,EACL,MAAM,EACN,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,GAChB,MAAM,WAAW,CAAA;AAGlB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG3D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAI7C;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAiBd,CAAA"}

package/dist/bundles/production-minimal.d.ts

@@ -12,24 +12,10 @@ export * from '../reactive/context';
 export * from '../runtime/dom-bridge';
 export * from '../runtime/component';
 export * from '../runtime/props';
-export * from '../components/Text';
-export * from '../components/Button';
-export * from '../components/Image';
-export * from '../components/BasicInput';
-export * from '../components/Spacer';
-export * from '../components/Show';
-export { HStack, VStack, ZStack } from '../components/wrapper';
 export * from '../modifiers/core';
-export * from '../modifiers/padding';
-export * from '../modifiers/margin';
-export * from '../modifiers/size';
-export * from '../modifiers/typography';
-export * from '../modifiers/background';
 export { State, isState, unwrapValue } from '../state/state';
 export { createBinding, isBinding } from '../state/binding';
-export { Assets, Asset, ColorAsset, ImageAsset, FontAsset, registerAsset, createColorAsset, createImageAsset, createFontAsset, type AssetsInterface } from '../assets';
+export { Assets, Asset, ColorAsset, ImageAsset, FontAsset, registerAsset, createColorAsset, createImageAsset, createFontAsset, type AssetsInterface, } from '../assets';
 export { LinearGradient } from '../gradients';
-export { Divider } from '../components/Divider';
-export { ScrollView } from '../components/ScrollView';
-export { infinity, SUI, isInfinity, type Dimension, type InfinityValue } from '../constants';
+export { infinity, Layout, isInfinity, type Dimension, type InfinityValue, } from '../constants';
 //# sourceMappingURL=production-minimal.d.ts.map

package/dist/bundles/production-minimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"production-minimal.d.ts","sourceRoot":"","sources":["../../src/bundles/production-minimal.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,cAAc,qBAAqB,CAAA;AAGnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAGhC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAG9D,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AAGvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG3D,OAAO,EACL,MAAM,EACN,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,KAAK,eAAe,EACrB,MAAM,WAAW,CAAA;AAGlB,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"production-minimal.d.ts","sourceRoot":"","sources":["../../src/bundles/production-minimal.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,cAAc,qBAAqB,CAAA;AAGnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAMhC,cAAc,mBAAmB,CAAA;AAGjC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAG3D,OAAO,EACL,MAAM,EACN,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,KAAK,eAAe,GACrB,MAAM,WAAW,CAAA;AAGlB,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAO7C,OAAO,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,KAAK,SAAS,EACd,KAAK,aAAa,GACnB,MAAM,cAAc,CAAA"}