@tachui/core 0.7.0-alpha1 → 0.7.1-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
+# or
+pnpm add @tachui/core
+```
+
+### 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/ScrollView-h-6wYMAm.js

@@ -0,0 +1,515 @@
+import { i as m, a as v } from "./scheduler-7SvC3a21.js";
+import { c as E } from "./effect-CytAc9em.js";
+import { aa as w } from "./Spacer-BbteDQ9I.js";
+import "./context--zQFIImS.js";
+import "./dom-bridge-Cx-s6Ihx.js";
+import { dR as T } from "./concatenated-component-DPcl2TEO.js";
+var C = Object.defineProperty, R = (s, t, e) => t in s ? C(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, y = (s, t, e) => R(s, typeof t != "symbol" ? t + "" : t, e);
+const a = {
+  colors: {
+    default: "#E5E5E5",
+    light: "#F0F0F0",
+    medium: "#D1D1D1",
+    heavy: "#A0A0A0"
+  },
+  thickness: {
+    thin: 1,
+    medium: 2,
+    thick: 3
+  },
+  spacing: {
+    small: 8,
+    medium: 16,
+    large: 24
+  }
+};
+class O {
+  constructor(t) {
+    y(this, "type", "component"), y(this, "id"), y(this, "props"), y(this, "theme", a), this.props = t, this.id = `divider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  resolveValue(t) {
+    return m(t) ? t() : t;
+  }
+  getBaseStyles() {
+    const t = this.props.orientation === "vertical", e = this.resolveValue(this.props.thickness ?? this.theme.thickness.thin), o = this.resolveValue(this.props.color ?? this.theme.colors.default), l = this.props.style ?? "solid", c = this.resolveValue(this.props.opacity ?? 1), h = this.resolveValue(this.props.margin ?? this.theme.spacing.medium), p = this.resolveValue(this.props.length), n = {
+      border: "none",
+      margin: "0",
+      padding: "0",
+      backgroundColor: o,
+      opacity: String(c),
+      flexShrink: "0"
+    };
+    return t ? (n.width = `${e}px`, n.height = p ? typeof p == "string" ? p : `${p}px` : "100%", n.marginLeft = `${h}px`, n.marginRight = `${h}px`, n.alignSelf = "stretch") : (n.height = `${e}px`, n.width = p ? typeof p == "string" ? p : `${p}px` : "100%", n.marginTop = `${h}px`, n.marginBottom = `${h}px`), (l === "dashed" || l === "dotted") && (n.backgroundColor = "transparent", t ? n.borderRight = `${e}px ${l} ${o}` : n.borderTop = `${e}px ${l} ${o}`), n;
+  }
+  render() {
+    const t = T("div", {
+      role: "separator",
+      "aria-orientation": this.props.orientation ?? "horizontal",
+      style: this.getBaseStyles()
+    });
+    return ["color", "thickness", "length", "margin", "opacity"].forEach((o) => {
+      const l = this.props[o];
+      m(l) && E(() => {
+        const c = this.getBaseStyles(), h = t.element;
+        h && Object.assign(h.style, c);
+      });
+    }), t.getAttribute = (o) => {
+      const l = t.props?.[o];
+      return l == null ? null : String(l);
+    }, t.setAttribute = (o, l) => {
+      t.props || (t.props = {}), t.props[o] = l;
+    }, t;
+  }
+}
+function u(s = {}) {
+  return w(new O(s));
+}
+const B = {
+  /**
+   * Create a thin horizontal divider
+   */
+  thin(s) {
+    return u({
+      thickness: a.thickness.thin,
+      color: s
+    });
+  },
+  /**
+   * Create a medium horizontal divider
+   */
+  medium(s) {
+    return u({
+      thickness: a.thickness.medium,
+      color: s
+    });
+  },
+  /**
+   * Create a thick horizontal divider
+   */
+  thick(s) {
+    return u({
+      thickness: a.thickness.thick,
+      color: s
+    });
+  },
+  /**
+   * Create a vertical divider
+   */
+  vertical(s, t) {
+    return u({
+      orientation: "vertical",
+      length: s,
+      thickness: t
+    });
+  },
+  /**
+   * Create a dashed divider
+   */
+  dashed(s, t) {
+    return u({
+      style: "dashed",
+      color: s,
+      thickness: t
+    });
+  },
+  /**
+   * Create a dotted divider
+   */
+  dotted(s, t) {
+    return u({
+      style: "dotted",
+      color: s,
+      thickness: t
+    });
+  },
+  /**
+   * Create a subtle divider with light color
+   */
+  subtle() {
+    return u({
+      color: a.colors.light,
+      opacity: 0.6
+    });
+  },
+  /**
+   * Create a prominent divider with heavier color
+   */
+  prominent() {
+    return u({
+      color: a.colors.heavy,
+      thickness: a.thickness.medium
+    });
+  }
+}, D = {
+  theme: a,
+  /**
+   * Create a custom divider theme
+   */
+  createTheme(s) {
+    return {
+      colors: { ...a.colors, ...s.colors },
+      thickness: { ...a.thickness, ...s.thickness },
+      spacing: { ...a.spacing, ...s.spacing }
+    };
+  },
+  /**
+   * Preset color schemes
+   */
+  colors: {
+    light: a.colors.light,
+    medium: a.colors.medium,
+    heavy: a.colors.heavy,
+    primary: "#007AFF",
+    success: "#34C759",
+    warning: "#FF9500",
+    danger: "#FF3B30"
+  }
+};
+var $ = Object.defineProperty, P = (s, t, e) => t in s ? $(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, i = (s, t, e) => P(s, typeof t != "symbol" ? t + "" : t, e);
+class z {
+  constructor(t) {
+    this.props = t, i(this, "type", "component"), i(this, "id"), i(this, "mounted", !1), i(this, "cleanup", []), i(this, "scrollElement", null), i(this, "contentOffsetSignal"), i(this, "setContentOffset"), i(this, "contentSizeSignal"), i(this, "setContentSize"), i(this, "setIsScrolling"), i(this, "pullToRefreshStateSignal"), i(this, "setPullToRefreshState"), i(this, "scrollEventThrottle"), i(this, "lastScrollTime", 0), i(this, "scrollVelocity", { x: 0, y: 0 }), i(this, "lastScrollOffset", { x: 0, y: 0 }), i(this, "pullStartY", 0), i(this, "isPulling", !1), i(this, "handleScroll", (r) => {
+      if (!this.scrollElement) return;
+      const f = performance.now(), d = f - this.lastScrollTime;
+      if (d < this.scrollEventThrottle) return;
+      const S = {
+        x: this.scrollElement.scrollLeft,
+        y: this.scrollElement.scrollTop
+      };
+      this.scrollVelocity = this.calculateVelocity(S, d), this.setContentOffset(S), this.setContentSize({
+        width: this.scrollElement.scrollWidth,
+        height: this.scrollElement.scrollHeight
+      });
+      const g = this.detectScrollEdges(), x = {
+        offset: S,
+        velocity: this.scrollVelocity,
+        contentSize: {
+          width: this.scrollElement.scrollWidth,
+          height: this.scrollElement.scrollHeight
+        },
+        containerSize: {
+          width: this.scrollElement.clientWidth,
+          height: this.scrollElement.clientHeight
+        },
+        edges: g
+      };
+      this.props.onScroll && this.props.onScroll(x), g.top && this.props.onReachTop && this.props.onReachTop(), g.bottom && this.props.onReachBottom && this.props.onReachBottom(), g.left && this.props.onReachLeft && this.props.onReachLeft(), g.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = S, this.lastScrollTime = f;
+    }), i(this, "handleScrollStart", () => {
+      this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
+    }), i(this, "handleScrollEnd", () => {
+      this.setIsScrolling(!1), this.props.onScrollEnd && this.props.onScrollEnd();
+    }), i(this, "handleTouchStart", (r) => {
+      this.props.refreshControl?.enabled && (this.pullStartY = r.touches[0].clientY, this.isPulling = !1);
+    }), i(this, "handleTouchMove", (r) => {
+      if (!this.props.refreshControl?.enabled || !this.scrollElement) return;
+      const d = r.touches[0].clientY - this.pullStartY, S = this.props.refreshControl.threshold || 80;
+      this.scrollElement.scrollTop <= 0 && d > 0 && (this.isPulling = !0, d > S ? this.setPullToRefreshState("ready") : this.setPullToRefreshState("pulling"));
+    }), i(this, "handleTouchEnd", async () => {
+      if (!this.props.refreshControl?.enabled || !this.isPulling) return;
+      if (this.pullToRefreshStateSignal() === "ready") {
+        this.setPullToRefreshState("refreshing");
+        try {
+          await this.props.refreshControl.onRefresh();
+        } catch (f) {
+          console.error("Pull to refresh error:", f);
+        } finally {
+          this.setPullToRefreshState("idle");
+        }
+      } else
+        this.setPullToRefreshState("idle");
+      this.isPulling = !1;
+    }), this.id = `scrollview-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.scrollEventThrottle = t.scrollEventThrottle || 16;
+    const [e, o] = v({ x: 0, y: 0 });
+    this.contentOffsetSignal = e, this.setContentOffset = o;
+    const [l, c] = v({ width: 0, height: 0 });
+    this.contentSizeSignal = l, this.setContentSize = c;
+    const [, h] = v(!1);
+    this.setIsScrolling = h;
+    const [p, n] = v("idle");
+    if (this.pullToRefreshStateSignal = p, this.setPullToRefreshState = n, t.contentOffset && m(t.contentOffset)) {
+      this.setContentOffset(t.contentOffset());
+      const r = E(() => {
+        t.contentOffset && m(t.contentOffset) && this.setContentOffset(t.contentOffset());
+      });
+      this.cleanup.push(() => r.dispose());
+    }
+    if (t.contentSize && m(t.contentSize)) {
+      this.setContentSize(t.contentSize());
+      const r = E(() => {
+        t.contentSize && m(t.contentSize) && this.setContentSize(t.contentSize());
+      });
+      this.cleanup.push(() => r.dispose());
+    }
+  }
+  /**
+   * Calculate scroll velocity
+   */
+  calculateVelocity(t, e) {
+    const o = t.x - this.lastScrollOffset.x, l = t.y - this.lastScrollOffset.y;
+    return {
+      x: e > 0 ? o / e : 0,
+      y: e > 0 ? l / e : 0
+    };
+  }
+  /**
+   * Detect scroll edges
+   */
+  detectScrollEdges() {
+    if (!this.scrollElement)
+      return { top: !1, bottom: !1, left: !1, right: !1 };
+    const { scrollTop: t, scrollLeft: e, scrollHeight: o, scrollWidth: l, clientHeight: c, clientWidth: h } = this.scrollElement;
+    return {
+      top: t <= 0,
+      bottom: t + c >= o - 1,
+      left: e <= 0,
+      right: e + h >= l - 1
+    };
+  }
+  /**
+   * Set up scroll event handlers
+   */
+  setupScrollHandlers(t) {
+    let e;
+    const o = () => {
+      clearTimeout(e), this.handleScrollStart();
+    }, l = () => {
+      clearTimeout(e), e = setTimeout(() => {
+        this.handleScrollEnd();
+      }, 150);
+    }, c = (h) => {
+      o(), this.handleScroll(h), l();
+    };
+    t.addEventListener("scroll", c, { passive: !0 }), t.addEventListener("touchstart", this.handleTouchStart, { passive: !0 }), t.addEventListener("touchmove", this.handleTouchMove, { passive: !1 }), t.addEventListener("touchend", this.handleTouchEnd, { passive: !0 }), this.cleanup.push(() => {
+      t.removeEventListener("scroll", c), t.removeEventListener("touchstart", this.handleTouchStart), t.removeEventListener("touchmove", this.handleTouchMove), t.removeEventListener("touchend", this.handleTouchEnd), clearTimeout(e);
+    });
+  }
+  /**
+   * Get overflow styles based on direction
+   */
+  getOverflowStyles(t) {
+    switch (t) {
+      case "vertical":
+        return {
+          overflowX: "hidden",
+          overflowY: "auto"
+        };
+      case "horizontal":
+        return {
+          overflowX: "auto",
+          overflowY: "hidden"
+        };
+      case "both":
+        return {
+          overflow: "auto"
+        };
+      default:
+        return {
+          overflowX: "hidden",
+          overflowY: "auto"
+        };
+    }
+  }
+  /**
+   * Apply additional scroll view styling (position and overflow already set in initial render)
+   */
+  applyScrollViewStyles(t) {
+    const { showsScrollIndicator: e = !0, bounces: o = !0 } = this.props;
+    if (!e) {
+      t.style.scrollbarWidth = "none", t.style.msOverflowStyle = "none";
+      const l = document.createElement("style");
+      l.textContent = `
+        #${t.id}::-webkit-scrollbar {
+          display: none;
+        }
+      `, document.head.appendChild(l), this.cleanup.push(() => {
+        document.head.removeChild(l);
+      });
+    }
+    o ? t.style.webkitOverflowScrolling = "touch" : t.style.overscrollBehavior = "none", t.style.scrollBehavior = "smooth";
+  }
+  /**
+   * Apply content insets
+   */
+  applyContentInsets(t) {
+    const { contentInset: e } = this.props;
+    if (e) {
+      const { top: o = 0, bottom: l = 0, left: c = 0, right: h = 0 } = e;
+      t.style.padding = `${o}px ${h}px ${l}px ${c}px`;
+    }
+  }
+  /**
+   * Create pull to refresh indicator
+   */
+  createPullToRefreshIndicator() {
+    if (!this.props.refreshControl?.enabled) return null;
+    const t = this.pullToRefreshStateSignal(), e = this.props.refreshControl.tintColor || "#007AFF";
+    let o = "";
+    switch (t) {
+      case "pulling":
+        o = "↓ Pull to refresh";
+        break;
+      case "ready":
+        o = "↑ Release to refresh";
+        break;
+      case "refreshing":
+        o = "⟳ Refreshing...";
+        break;
+      default:
+        o = "";
+    }
+    return o ? {
+      type: "component",
+      id: `${this.id}-refresh`,
+      mounted: !1,
+      cleanup: [],
+      props: {},
+      render: () => [
+        T(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-60px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              padding: "10px 20px",
+              backgroundColor: "#f8f9fa",
+              borderRadius: "20px",
+              color: e,
+              fontSize: "14px",
+              fontWeight: "500",
+              textAlign: "center",
+              zIndex: 1e3,
+              transition: "all 0.3s ease",
+              opacity: t === "idle" ? 0 : 1
+            }
+          },
+          o
+        )
+      ]
+    } : null;
+  }
+  /**
+   * Scroll to specific position
+   */
+  scrollTo(t, e = "smooth") {
+    if (!this.scrollElement) return;
+    const o = { behavior: e };
+    t.x !== void 0 && (o.left = t.x), t.y !== void 0 && (o.top = t.y), this.scrollElement.scrollTo(o);
+  }
+  /**
+   * Scroll to top
+   */
+  scrollToTop(t = "smooth") {
+    this.scrollTo({ x: 0, y: 0 }, t);
+  }
+  /**
+   * Scroll to bottom
+   */
+  scrollToBottom(t = "smooth") {
+    this.scrollElement && this.scrollTo(
+      {
+        x: 0,
+        y: this.scrollElement.scrollHeight - this.scrollElement.clientHeight
+      },
+      t
+    );
+  }
+  /**
+   * Render the scroll view component
+   */
+  render() {
+    const { children: t = [], scrollEnabled: e = !0 } = this.props, o = T(
+      "div",
+      {
+        class: "tachui-scrollview-content",
+        style: {
+          minHeight: "100%",
+          minWidth: "100%"
+        }
+      },
+      ...t.flatMap((r) => r.render())
+    ), l = this.createPullToRefreshIndicator(), c = [];
+    if (l) {
+      const r = l.render(), f = Array.isArray(r) ? r : [r];
+      c.push(...f.filter((d) => d));
+    }
+    c.push(o);
+    const { direction: h = "vertical" } = this.props, p = this.getOverflowStyles(h), n = T(
+      "div",
+      {
+        id: this.id,
+        class: "tachui-scrollview",
+        style: {
+          height: "100%",
+          width: "100%",
+          position: "relative",
+          ...p
+        }
+      },
+      ...c
+    );
+    if (n.element) {
+      const r = n.element;
+      this.scrollElement = r, this.applyScrollViewStyles(r), this.setupScrollHandlers(r), o.element && this.applyContentInsets(o.element);
+      const f = () => {
+        const d = m(e) ? e() : e;
+        r.style.overflow = d ? "auto" : "hidden", r.style.pointerEvents = d ? "auto" : "none";
+      };
+      if (m(e)) {
+        const d = E(f);
+        this.cleanup.push(() => d.dispose());
+      } else
+        f();
+    }
+    return [n];
+  }
+}
+function b(s = {}) {
+  const t = new z(s);
+  return w(t);
+}
+const Y = {
+  /**
+   * Create a scroll view with pull to refresh
+   */
+  withRefresh(s, t, e = {}) {
+    return b({
+      children: s,
+      refreshControl: {
+        enabled: !0,
+        onRefresh: t,
+        ...e
+      }
+    });
+  },
+  /**
+   * Create a horizontal scroll view
+   */
+  horizontal(s, t = {}) {
+    return b({
+      ...t,
+      children: s,
+      direction: "horizontal"
+    });
+  },
+  /**
+   * Create a paged scroll view
+   */
+  paged(s, t = {}) {
+    return b({
+      ...t,
+      children: s,
+      pagingEnabled: !0
+    });
+  }
+};
+export {
+  u as D,
+  z as E,
+  b as S,
+  D as a,
+  B as b,
+  Y as c,
+  a as d
+};