fiboui 1.0.0 → 1.0.2

package/src/core/state.ts

@@ -1,233 +1,297 @@
+export type Listener<T> = (value: T) => void;
+export type Unsubscribe = () => void;
 
+// --- Dependency Tracking System ---
 
+let activeEffect: Effect | null = null;
 
+export interface Subscribable<T> {
+  subscribe(listener: Listener<T>): Unsubscribe;
+  subscribeEffect(effect: Effect): void;
+  unsubscribeEffect(effect: Effect): void;
+}
 
+export class Effect {
+  private dependencies = new Set<Subscribable<any>>();
+  private _onDispose?: () => void;
 
+  constructor(private fn: () => void) {
+    this.run();
+  }
 
-export type StateGetter<T> = () => T;
-export type StateSetter<T> = (value: T | ((prev: T) => T)) => void;
-export type StateHook<T> = [T, StateSetter<T>];
-
-
+  run() {
+    const prevEffect = activeEffect;
+    activeEffect = this;
+    try {
+      this.cleanup();
+      this.fn();
+    } finally {
+      activeEffect = prevEffect;
+    }
+  }
 
+  track(dep: Subscribable<any>) {
+    this.dependencies.add(dep);
+    dep.subscribeEffect(this);
+  }
 
+  trigger() {
+    this.run();
+  }
 
-export interface Signal<T> {
-  value: T;
-  subscribe(callback: (value: T) => void): () => void;
-}
+  cleanup() {
+    this.dependencies.forEach(dep => dep.unsubscribeEffect(this));
+    this.dependencies.clear();
+  }
 
-export interface ComputedSignal<T> extends Omit<Signal<T>, 'value'> {
-  readonly value: T;
+  dispose() {
+    this.cleanup();
+    this._onDispose?.();
+  }
 }
 
-type EffectCleanup = void | (() => void);
-
+export class Tracker {
+  private dependencies = new Set<Subscribable<any>>();
 
-class SignalImpl<T> implements Signal<T> {
-  private _value: T;
-  private subscribers = new Set<(value: T) => void>();
+  constructor(private _onInvalidate: () => void) {}
 
-  constructor(initialValue: T) {
-    this._value = initialValue;
+  execute<T>(fn: () => T): T {
+    const prevEffect = activeEffect;
+    activeEffect = this as any; // Cast because implementation matches behavior we need
+    
+    try {
+        this.cleanup();
+        return fn();
+    } finally {
+        activeEffect = prevEffect;
+    }
   }
 
-  get value(): T {
-    return this._value;
+  // Called by Signals when they are accessed
+  track(dep: Subscribable<any>) {
+    this.dependencies.add(dep);
+    dep.subscribeEffect(this as any);
   }
 
-  set value(newValue: T) {
-    if (this._value !== newValue) {
-      this._value = newValue;
-      this.notify();
-    }
+  // Called by Signals when they change
+  trigger() {
+    this._onInvalidate();
   }
 
-  subscribe(callback: (value: T) => void): () => void {
-    this.subscribers.add(callback);
-    return () => this.subscribers.delete(callback);
+  cleanup() {
+    this.dependencies.forEach(dep => dep.unsubscribeEffect(this as any));
+    this.dependencies.clear();
   }
 
-  private notify() {
-    this.subscribers.forEach(callback => callback(this._value));
+  dispose() {
+    this.cleanup();
   }
 }
 
+// --- Signals ---
 
-class ComputedSignalImpl<T> implements ComputedSignal<T> {
-  private _value: T;
-  private subscribers = new Set<(value: T) => void>();
-  private dependencies = new Set<Signal<any>>();
-  private unsubscribers: (() => void)[] = [];
+export class Signal<T> implements Subscribable<T> {
+  private listeners = new Set<Listener<T>>();
+  private effects = new Set<Effect>();
 
-  constructor(private compute: () => T) {
-    this._value = this.recompute();
-  }
+  constructor(private _value: T) {}
 
   get value(): T {
+    if (activeEffect) {
+      activeEffect.track(this);
+    }
     return this._value;
   }
 
-  subscribe(callback: (value: T) => void): () => void {
-    this.subscribers.add(callback);
-    return () => this.subscribers.delete(callback);
-  }
-
-  private recompute(): T {
-    
-    this.unsubscribers.forEach(unsub => unsub());
-    this.unsubscribers = [];
-    this.dependencies.clear();
-
-    
-    const newValue = this.compute();
-    
+  set value(newValue: T) {
     if (this._value !== newValue) {
       this._value = newValue;
       this.notify();
     }
+  }
 
-    return newValue;
+  subscribe(listener: Listener<T>): Unsubscribe {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
   }
 
-  private notify() {
-    this.subscribers.forEach(callback => callback(this._value));
+  subscribeEffect(effect: Effect) {
+    this.effects.add(effect);
   }
-}
 
+  unsubscribeEffect(effect: Effect) {
+    this.effects.delete(effect);
+  }
 
-export function signal<T>(initialValue: T): Signal<T> {
-  return new SignalImpl(initialValue);
+  private notify() {
+    const effectsToRun = Array.from(this.effects);
+    const listenersToRun = Array.from(this.listeners);
+    
+    effectsToRun.forEach(e => e.trigger());
+    listenersToRun.forEach(l => l(this._value));
+  }
 }
 
-
-export function computed<T>(fn: () => T): ComputedSignal<T> {
-  return new ComputedSignalImpl(fn);
+export function signal<T>(initialValue: T): Signal<T> {
+  return new Signal(initialValue);
 }
 
+// --- Computed ---
+
+export class ComputedSignal<T> implements Subscribable<T> {
+  private listeners = new Set<Listener<T>>();
+  private effects = new Set<Effect>();
+  private _value!: T;
+  private _dirty = true;
+  private internalEffect: Effect;
+
+  constructor(private fn: () => T) {
+    this.internalEffect = new Effect(() => {
+        if (!this._dirty) {
+            this._dirty = true;
+            this.notify();
+        }
+    });
+  }
 
-export function effect(fn: () => EffectCleanup): () => void {
-  let cleanup: EffectCleanup;
-  
-  const run = () => {
-    if (typeof cleanup === 'function') {
-      cleanup();
+  get value(): T {
+    if (activeEffect) {
+        activeEffect.track(this);
     }
-    cleanup = fn();
-  };
-
-  run(); 
-  
-  return () => {
-    if (typeof cleanup === 'function') {
-      cleanup();
+    if (this._dirty) {
+        const prevEffect = activeEffect;
+        activeEffect = this.internalEffect;
+        try {
+             this.internalEffect.cleanup();
+             this._value = this.fn();
+             this._dirty = false;
+        } finally {
+            activeEffect = prevEffect;
+        }
     }
-  };
-}
+    return this._value;
+  }
 
+  subscribe(listener: Listener<T>): Unsubscribe {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
 
+  subscribeEffect(effect: Effect) {
+    this.effects.add(effect);
+  }
 
+  unsubscribeEffect(effect: Effect) {
+    this.effects.delete(effect);
+  }
 
+  private notify() {
+    const effectsToRun = Array.from(this.effects);
+    const listenersToRun = Array.from(this.listeners);
+    
+    effectsToRun.forEach(e => e.trigger());
+    listenersToRun.forEach(l => l(this._value));
+  }
+}
 
-export interface Observable<T> {
-  get(): T;
-  set(value: T): void;
-  subscribe(listener: (value: T) => void): () => void;
+export function computed<T>(fn: () => T): ComputedSignal<T> {
+  return new ComputedSignal(fn);
 }
 
-class ObservableImpl<T> implements Observable<T> {
-  private _value: T;
-  private listeners = new Set<(value: T) => void>();
+// --- Observables ---
 
-  constructor(initialValue: T) {
-    this._value = initialValue;
-  }
+export class Observable<T> implements Subscribable<T> {
+  private listeners = new Set<Listener<T>>();
+  private effects = new Set<Effect>();
+
+  constructor(private _value: T) {}
 
   get(): T {
+    if (activeEffect) {
+        activeEffect.track(this);
+    }
     return this._value;
   }
 
-  set(value: T): void {
-    if (this._value !== value) {
-      this._value = value;
-      this.listeners.forEach(listener => listener(value));
+  set(newValue: T) {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this.notify();
     }
   }
 
-  subscribe(listener: (value: T) => void): () => void {
+  subscribe(listener: Listener<T>): Unsubscribe {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
-}
 
+  subscribeEffect(effect: Effect) {
+    this.effects.add(effect);
+  }
 
-export function observable<T>(initialValue: T): Observable<T> {
-  return new ObservableImpl(initialValue);
-}
-
+  unsubscribeEffect(effect: Effect) {
+    this.effects.delete(effect);
+  }
 
+  private notify() {
+    Array.from(this.effects).forEach(e => e.trigger());
+    Array.from(this.listeners).forEach(l => l(this._value));
+  }
+}
 
+export function observable<T>(initialValue: T): Observable<T> {
+  return new Observable(initialValue);
+}
 
+// --- Store ---
 
-export interface Store<T> {
+export interface Store<T> extends Subscribable<T> {
   getState(): T;
-  setState(updater: Partial<T> | ((state: T) => Partial<T>)): void;
-  subscribe(listener: (state: T) => void): () => void;
+  setState(fn: Partial<T> | ((state: T) => Partial<T>)): void;
 }
 
-class StoreImpl<T> implements Store<T> {
-  private state: T;
-  private listeners = new Set<(state: T) => void>();
+export class StoreImpl<T> implements Store<T> {
+  private listeners = new Set<Listener<T>>();
+  private effects = new Set<Effect>();
 
-  constructor(initialState: T) {
-    this.state = initialState;
-  }
+  constructor(private state: T) {}
 
   getState(): T {
+    if (activeEffect) {
+        activeEffect.track(this);
+    }
     return this.state;
   }
 
-  setState(updater: Partial<T> | ((state: T) => Partial<T>)): void {
-    const updates = typeof updater === 'function' ? updater(this.state) : updater;
-    this.state = { ...this.state, ...updates };
-    this.listeners.forEach(listener => listener(this.state));
+  setState(partial: Partial<T> | ((state: T) => Partial<T>)): void {
+    const next = typeof partial === 'function' ? (partial as any)(this.state) : partial;
+    const newState = { ...this.state, ...next };
+    
+    if (this.state !== newState) {
+        this.state = newState;
+        this.notify();
+    }
   }
 
-  subscribe(listener: (state: T) => void): () => void {
+  subscribe(listener: Listener<T>): Unsubscribe {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
-}
-
-
-export function createStore<T extends object>(initialState: T): Store<T> {
-  return new StoreImpl(initialState);
-}
-
-
-
 
+  subscribeEffect(effect: Effect) {
+     this.effects.add(effect);
+  }
 
-export interface ProviderConfig<T = any> {
-  key: string;
-  value: T;
-}
-
-export interface ConsumerConfig {
-  key: string;
-}
-
-
-const providerRegistry = new Map<string, any>();
-
-export function registerProvider<T>(key: string, value: T): void {
-  providerRegistry.set(key, value);
-}
+  unsubscribeEffect(effect: Effect) {
+     this.effects.delete(effect);
+  }
 
-export function getProvider<T>(key: string): T | undefined {
-  return providerRegistry.get(key);
+  private notify() {
+    Array.from(this.effects).forEach(e => e.trigger());
+    Array.from(this.listeners).forEach(l => l(this.state));
+  }
 }
 
-export function clearProviders(): void {
-  providerRegistry.clear();
+export function createStore<T>(initialState: T): Store<T> {
+  return new StoreImpl(initialState);
 }

package/src/demo.tsx

@@ -48,12 +48,17 @@ import {
   Progress
 } from './index';
 
+
+
 const Gallery = () => {
   const { setTheme } = useFiboTheme();
 
   return (
       Box().classNames(['bg-gray-50', 'min-h-screen', 'p-12']).gap(14).children([
         
+        // --- CLEAN ARCHITECTURE DEMO ---
+
+        
         
         Row().alignItems("center").justifyContent("between").classNames(['mb-12']).children([
              Column().gap(8).children([

package/src/interactive/Button/index.ts

@@ -102,8 +102,9 @@ const ButtonInner = React.memo((props: any) => {
           if (!disabled) {
             
             if (document.documentElement.classList.contains('fibo-theme-material')) {
+              const target = e.currentTarget;
               import('../../core/effects').then(({ createRipple }) => {
-                createRipple(e);
+                createRipple(e, target);
               });
             }
             onPress?.();

package/src/interactive/TextField/index.ts

@@ -1,6 +1,7 @@
-import React, { ReactElement, ChangeEvent } from 'react';
+import React, { ReactElement, ChangeEvent, useEffect, useState } from 'react';
 import { FiboBuilder, createBuilder } from '../../core/builder';
 import { BaseProps } from '../../core/types';
+import { Signal } from '../../core/state';
 
 const applyMask = (value: string, mask: string) => {
     let i = 0;
@@ -31,10 +32,27 @@ const TextFieldInner = React.memo((props: any) => {
         error, 
         mask,
         type,
+        value, // Can be string or Signal
         onChange,
         ...inputRest 
     } = props;
 
+    // Handle Signal or primitive value
+    const isSignal = value instanceof Signal;
+    const [localValue, setLocalValue] = useState(isSignal ? value.value : value);
+
+    // Sync with Signal updates
+    useEffect(() => {
+        if (isSignal) {
+            const unsubscribe = value.subscribe((val: string) => {
+                setLocalValue(val);
+            });
+            return unsubscribe;
+        } else {
+            setLocalValue(value);
+        }
+    }, [value, isSignal]);
+
     const isPassword = type === 'password';
     const effectiveType = isPassword && showPassword ? 'text' : type;
 
@@ -51,8 +69,14 @@ const TextFieldInner = React.memo((props: any) => {
                 }
             } as React.ChangeEvent<HTMLInputElement>;
             
+            if (isSignal) {
+                value.value = newValue; // Update signal
+            }
             onChange?.(syntheticEvent);
         } else {
+            if (isSignal) {
+                value.value = newValue; // Update signal
+            }
             onChange?.(e);
         }
     };
@@ -67,6 +91,7 @@ const TextFieldInner = React.memo((props: any) => {
               className: 'fibo-textfield-input',
               type: effectiveType,
               onChange: handleChange,
+              value: localValue,
               ...inputRest
           }),
           label && React.createElement(
@@ -107,7 +132,7 @@ const TextFieldInner = React.memo((props: any) => {
 });
 
 class TextFieldBuilder extends FiboBuilder {
-  private _value: string = '';
+  private _value: string | Signal<string> = '';
   private _label: string = '';
   private _placeholder: string = '';
   private _type: string = 'text';
@@ -121,7 +146,7 @@ class TextFieldBuilder extends FiboBuilder {
     this._value = value;
   }
 
-  value(val: string): this {
+  value(val: string | Signal<string>): this {
     this._value = val;
     return this;
   }
@@ -186,12 +211,10 @@ class TextFieldBuilder extends FiboBuilder {
   }
 }
 
-
-
 export const TextField = createBuilder(TextFieldBuilder);
 
 export interface TextFieldProps extends BaseProps {
-  value: string;
+  value: string | Signal<string>;
   label?: string;
   placeholder?: string;
   onChange?: (value: string) => void;

package/src/structure/Box/index.ts

@@ -25,8 +25,10 @@ class BoxBuilder extends FiboBuilder {
 
     const className = classes.filter(Boolean).join(' ');
     const style = this.getStyle();
-    const children = this.processChildren();
     
+    // Universal builder handles observer logic now.
+    // processChildren handles function execution if present.
+    const children = this.processChildren();
     
     const props = {
         className,
@@ -39,7 +41,6 @@ class BoxBuilder extends FiboBuilder {
   }
 }
 
-
 export const Box = createBuilder(BoxBuilder);
 
 export interface BoxProps extends ChildrenProps {}

package/dist/effects-Co9C_Dyx.mjs

@@ -1,9 +0,0 @@
-const c = (n, r = "rgba(255, 255, 255, 0.3)") => {
-  const t = n.currentTarget, e = document.createElement("span"), i = Math.max(t.clientWidth, t.clientHeight), o = i / 2, l = t.getBoundingClientRect();
-  e.style.width = e.style.height = `${i}px`, e.style.left = `${n.clientX - l.left - o}px`, e.style.top = `${n.clientY - l.top - o}px`, e.style.position = "absolute", e.style.borderRadius = "50%", e.style.transform = "scale(0)", e.style.animation = "fibo-ripple 600ms linear", e.style.backgroundColor = r, e.style.pointerEvents = "none", (t.querySelector(".fibo-ripple-container") || t).appendChild(e), setTimeout(() => {
-    e.remove();
-  }, 600);
-};
-export {
-  c as createRipple
-};

package/dist/examples/ScaffoldExamples.d.ts

@@ -1,3 +0,0 @@
-export declare function App(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-export declare function EcommerceApp(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-export declare function DashboardApp(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;

package/dist/examples/StateExamples.d.ts

@@ -1,5 +0,0 @@
-export declare function SignalCounterExample(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-export declare function ObservableExample(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-export declare function StoreExample(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-export declare function ProviderExample(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-export declare function LocalStateExample(): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;