flexium 0.8.14

package/README.md

@@ -0,0 +1,219 @@
+# Flexium
+
+[![npm version](https://img.shields.io/npm/v/flexium.svg)](https://www.npmjs.com/package/flexium)
+[![npm downloads](https://img.shields.io/npm/dm/flexium.svg)](https://www.npmjs.com/package/flexium)
+[![license](https://img.shields.io/npm/l/flexium.svg)](https://github.com/Wick-Lim/flexium.js/blob/main/LICENSE)
+
+**Simpler, Faster, Unified.**
+
+Flexium is a next-generation UI framework that unifies state management, async data fetching, and global state into a single, powerful API: `state()`.
+
+## Key Features
+
+- **Unified State API** - No more `useState`, `useRecoil`, `useQuery` separation. Just `state()`.
+- **No Virtual DOM** - Direct DOM updates for maximum performance and minimal memory usage.
+- **Tiny Bundle** - ~8KB (min+gzip) including Router and Motion.
+- **Cross-Platform** - DOM, Canvas, and SSR renderers included.
+- **TypeScript First** - Full type inference out of the box.
+- **Zero-Config JSX** - Works with standard tooling.
+
+## Installation
+
+```bash
+npm install flexium
+```
+
+## Quick Start
+
+```bash
+npm create flexium@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+## The Only API You Need: `state()`
+
+Flexium unifies all state concepts into one function.
+
+### Local State
+
+```tsx
+import { state } from 'flexium/core';
+import { render } from 'flexium/dom';
+
+function Counter() {
+  const [count, setCount] = state(0);
+
+  return (
+    <button onclick={() => setCount(c => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}
+
+render(<Counter />, document.getElementById('app'));
+```
+
+### Global State
+
+Just add a `key` to share state across components. Keys can be strings or arrays.
+
+```tsx
+// Define global state with array key
+const [theme, setTheme] = state('light', { key: ['app', 'theme'] });
+
+function ThemeToggle() {
+  const [theme, setTheme] = state(undefined, { key: ['app', 'theme'] });
+
+  return (
+    <button onclick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
+      Theme: {theme}
+    </button>
+  );
+}
+```
+
+### Async Resources
+
+Pass an async function to handle data fetching automatically.
+
+```tsx
+function UserProfile({ id }) {
+  const [user, refetch, isLoading, error] = state(async () => {
+    const res = await fetch(`/api/users/${id}`);
+    return res.json();
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error!</div>;
+
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      <button onclick={() => refetch()}>Reload</button>
+    </div>
+  );
+}
+```
+
+### Derived State
+
+```tsx
+const [count, setCount] = state(1);
+const [double] = state(() => count * 2);
+```
+
+### Array Keys & Params
+
+```tsx
+// Array keys for dynamic caching (like TanStack Query)
+const [user] = state(fetchUser, { key: ['user', userId] });
+
+// Explicit params for better DX
+const [data] = state(
+  async ({ userId, postId }) => fetchPost(userId, postId),
+  {
+    key: ['posts', userId, postId],
+    params: { userId, postId }
+  }
+);
+```
+
+## Package Structure
+
+```
+flexium
+├── /core       # Core reactivity: state(), effect(), batch()
+├── /dom        # DOM renderer: render(), Portal
+├── /canvas     # Canvas renderer: Canvas, Rect, Circle, Text
+├── /primitives # Cross-platform components: Row, Column, Stack
+├── /router     # SPA routing: Router, Route, Link
+└── /server     # SSR utilities
+```
+
+## Control Flow
+
+Use native JavaScript for control flow - no special components needed:
+
+```tsx
+// Conditional rendering
+{isLoggedIn ? <Dashboard /> : <Login />}
+
+// Short-circuit for simple conditions
+{isAdmin && <AdminPanel />}
+
+// List rendering with optimized reconciliation
+{items.map(item => <Item key={item.id} data={item} />)}
+
+// Pattern matching with ternary chains
+{status === 'loading' ? <Loading /> :
+ status === 'error' ? <Error /> :
+ status === 'success' ? <Success /> :
+ <Default />}
+```
+
+## Canvas Rendering
+
+```tsx
+import { Canvas, Rect, Circle, Text } from 'flexium/canvas';
+
+function App() {
+  const [x, setX] = state(100);
+
+  return (
+    <Canvas width={400} height={300}>
+      <Rect x={0} y={0} width={400} height={300} fill="#1a1a2e" />
+      <Circle x={x} y={150} radius={30} fill="#e94560" />
+      <Text x={200} y={50} text="Hello Canvas!" fill="white" />
+    </Canvas>
+  );
+}
+```
+
+## Cross-Platform Primitives
+
+```tsx
+import { Row, Column, Text, Pressable } from 'flexium/primitives';
+
+function App() {
+  return (
+    <Column gap={16} padding={20}>
+      <Text size="xl" weight="bold">Welcome</Text>
+      <Row gap={8}>
+        <Pressable onPress={() => console.log('clicked')}>
+          <Text>Click me</Text>
+        </Pressable>
+      </Row>
+    </Column>
+  );
+}
+```
+
+## Routing
+
+```tsx
+import { Router, Route, Link } from 'flexium/router';
+
+function App() {
+  return (
+    <Router>
+      <nav>
+        <Link href="/">Home</Link>
+        <Link href="/about">About</Link>
+      </nav>
+      <Route path="/" component={Home} />
+      <Route path="/about" component={About} />
+      <Route path="/users/:id" component={UserProfile} />
+    </Router>
+  );
+}
+```
+
+## Documentation
+
+Full documentation available at [https://flexium.junhyuk.im](https://flexium.junhyuk.im)
+
+## License
+
+MIT

package/dist/DrawText-CeXBL8Ev.d.ts

@@ -0,0 +1,309 @@
+import { S as Signal } from './signal-mNtlF8-v.js';
+
+/**
+ * Core Flexium types
+ */
+/**
+ * Flexium Node - internal representation of UI elements
+ */
+interface FNode {
+    type: string;
+    props: Record<string, any>;
+    children: FNode[];
+}
+
+/**
+ * Cross-platform Primitives Type Definitions
+ *
+ * These types work across web (DOM) and React Native
+ */
+
+/**
+ * Common style properties that work on both web and React Native
+ * Based on Flexbox layout model
+ */
+interface CommonStyle {
+    display?: 'flex' | 'none';
+    flex?: number;
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    alignSelf?: 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch';
+    gap?: number;
+    padding?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    margin?: number;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginHorizontal?: number;
+    marginVertical?: number;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    backgroundColor?: string;
+    borderRadius?: number;
+    borderTopLeftRadius?: number;
+    borderTopRightRadius?: number;
+    borderBottomLeftRadius?: number;
+    borderBottomRightRadius?: number;
+    opacity?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    borderTopWidth?: number;
+    borderRightWidth?: number;
+    borderBottomWidth?: number;
+    borderLeftWidth?: number;
+    position?: 'relative' | 'absolute';
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+    zIndex?: number;
+    transform?: string;
+}
+/**
+ * Text-specific style properties
+ */
+interface TextStyle extends CommonStyle {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number;
+    fontFamily?: string;
+    fontStyle?: 'normal' | 'italic';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    textDecoration?: 'none' | 'underline' | 'line-through';
+    lineHeight?: number;
+    letterSpacing?: number;
+}
+/**
+ * Text component props
+ * Universal text display
+ */
+interface TextProps {
+    children?: any;
+    style?: TextStyle;
+    /** Press/click handler (unified API for web and mobile) */
+    onPress?: () => void;
+    /** CSS class name */
+    class?: string;
+}
+/**
+ * Image component props
+ */
+interface ImageProps {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    style?: CommonStyle;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+/**
+ * Pressable component props
+ * Universal touchable/clickable element
+ */
+interface PressableProps {
+    children?: any;
+    onPress: () => void;
+    onPressIn?: () => void;
+    onPressOut?: () => void;
+    disabled?: boolean;
+    style?: CommonStyle;
+    activeOpacity?: number;
+}
+/**
+ * ScrollView component props
+ */
+interface ScrollViewProps {
+    children?: any;
+    style?: CommonStyle;
+    horizontal?: boolean;
+    /** Show horizontal scrollbar (default: true) */
+    showScrollbarX?: boolean;
+    /** Show vertical scrollbar (default: true) */
+    showScrollbarY?: boolean;
+}
+/**
+ * Canvas container props
+ */
+interface CanvasProps {
+    width: number;
+    height: number;
+    children?: any;
+    style?: CommonStyle;
+    id?: string;
+}
+/**
+ * Rectangle drawing props
+ */
+interface DrawRectProps {
+    x: number | Signal<number>;
+    y: number | Signal<number>;
+    width: number | Signal<number>;
+    height: number | Signal<number>;
+    fill?: string | Signal<string>;
+    stroke?: string | Signal<string>;
+    strokeWidth?: number | Signal<number>;
+    opacity?: number | Signal<number>;
+}
+/**
+ * Circle drawing props
+ */
+interface DrawCircleProps {
+    x: number | Signal<number>;
+    y: number | Signal<number>;
+    radius: number | Signal<number>;
+    fill?: string | Signal<string>;
+    stroke?: string | Signal<string>;
+    strokeWidth?: number | Signal<number>;
+    opacity?: number | Signal<number>;
+}
+/**
+ * Path drawing props
+ */
+interface DrawPathProps {
+    d: string | Signal<string>;
+    fill?: string | Signal<string>;
+    stroke?: string | Signal<string>;
+    strokeWidth?: number | Signal<number>;
+    opacity?: number | Signal<number>;
+}
+/**
+ * Canvas text drawing props
+ */
+interface DrawTextProps {
+    x: number | Signal<number>;
+    y: number | Signal<number>;
+    text: string | Signal<string>;
+    fill?: string | Signal<string>;
+    fontSize?: number | Signal<number>;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    textAlign?: 'left' | 'center' | 'right';
+    textBaseline?: 'top' | 'middle' | 'bottom' | 'alphabetic';
+}
+/**
+ * Line drawing props
+ */
+interface DrawLineProps {
+    x1: number | Signal<number>;
+    y1: number | Signal<number>;
+    x2: number | Signal<number>;
+    y2: number | Signal<number>;
+    stroke?: string | Signal<string>;
+    strokeWidth?: number | Signal<number>;
+    opacity?: number | Signal<number>;
+}
+/**
+ * Arc drawing props
+ */
+interface DrawArcProps {
+    x: number | Signal<number>;
+    y: number | Signal<number>;
+    radius: number | Signal<number>;
+    startAngle: number | Signal<number>;
+    endAngle: number | Signal<number>;
+    counterclockwise?: boolean;
+    fill?: string | Signal<string>;
+    stroke?: string | Signal<string>;
+    strokeWidth?: number | Signal<number>;
+    opacity?: number | Signal<number>;
+}
+
+/**
+ * Canvas - Declarative canvas container with JSX drawing
+ *
+ * Supports Signal-based reactive rendering
+ *
+ * @example
+ * ```tsx
+ * const x = signal(50)
+ *
+ * <Canvas width={300} height={200}>
+ *   <Rect x={x} y={50} width={100} height={50} fill="blue" />
+ *   <Circle x={150} y={100} radius={30} fill="red" />
+ * </Canvas>
+ * ```
+ */
+
+declare function Canvas(props: CanvasProps): FNode;
+
+/**
+ * DrawRect - Canvas rectangle primitive
+ *
+ * @example
+ * ```tsx
+ * <DrawRect x={10} y={10} width={100} height={50} fill="blue" />
+ * ```
+ */
+
+declare function DrawRect(props: DrawRectProps): FNode;
+
+/**
+ * DrawCircle - Canvas circle primitive
+ *
+ * @example
+ * ```tsx
+ * <DrawCircle x={100} y={100} radius={50} fill="red" />
+ * ```
+ */
+
+declare function DrawCircle(props: DrawCircleProps): FNode;
+
+/**
+ * DrawArc - Canvas arc primitive
+ *
+ * @example
+ * ```tsx
+ * <DrawArc x={100} y={100} radius={50} startAngle={0} endAngle={Math.PI} fill="green" />
+ * ```
+ */
+
+declare function DrawArc(props: DrawArcProps): FNode;
+
+/**
+ * DrawLine - Canvas line primitive
+ *
+ * @example
+ * ```tsx
+ * <DrawLine x1={10} y1={10} x2={100} y2={100} stroke="black" strokeWidth={2} />
+ * ```
+ */
+
+declare function DrawLine(props: DrawLineProps): FNode;
+
+/**
+ * DrawPath - Canvas path primitive
+ *
+ * @example
+ * ```tsx
+ * <DrawPath d="M 10 10 L 100 100" stroke="black" strokeWidth={2} />
+ * ```
+ */
+
+declare function DrawPath(props: DrawPathProps): FNode;
+
+/**
+ * DrawText - Canvas text primitive
+ *
+ * @example
+ * ```tsx
+ * <DrawText x={50} y={50} text="Hello Canvas" fontSize={20} fill="black" />
+ * ```
+ */
+
+declare function DrawText(props: DrawTextProps): FNode;
+
+export { Canvas as C, DrawRect as D, type FNode as F, type ImageProps as I, type PressableProps as P, type ScrollViewProps as S, type TextProps as T, DrawCircle as a, DrawArc as b, DrawLine as c, DrawPath as d, DrawText as e, type CanvasProps as f, type DrawRectProps as g, type DrawCircleProps as h, type DrawArcProps as i, type DrawLineProps as j, type DrawPathProps as k, type DrawTextProps as l, type CommonStyle as m, type TextStyle as n };