Basic Store

import { create, createHook } from 'fluxo-ui/store';

interface CounterState {
  count: number;
}

const counterStore = create<CounterState>(() => ({ count: 0 }));
const useCounter = createHook(counterStore);

function Counter() {
  const { count } = useCounter();

  return (
    <div>
      <span>Count: {count}</span>
      <Button label="Increment"
        onClick={() => counterStore.setState(s => ({ count: s.count + 1 }))} />
      <Button label="Decrement"
        onClick={() => counterStore.setState(s => ({ count: s.count - 1 }))} />
      <Button label="Reset" variant="secondary"
        onClick={() => counterStore.reset()} />
    </div>
  );
}

import { create, createHook } from 'fluxo-ui/store';

const userStore = create<UserState>(() => ({
  firstName: 'John',
  lastName: 'Doe',
}));

userStore.compute(
  'fullName',
  (state) => `${state.firstName} ${state.lastName}`,
  ['firstName', 'lastName']
);

userStore.compute(
  'initials',
  (state) => `${state.firstName.charAt(0)}${state.lastName.charAt(0)}`.toUpperCase(),
  ['firstName', 'lastName']
);

const useUser = createHook(userStore);

function UserCard() {
  const state = useUser();
  const { firstName, lastName, fullName, initials } = state as any;

  return (
    <div>
      <div className="avatar">{initials}</div>
      <div>{fullName}</div>
      <TextInput value={firstName}
        onChange={(e) => userStore.setState({ firstName: e.value })} />
      <TextInput value={lastName}
        onChange={(e) => userStore.setState({ lastName: e.value })} />
    </div>
  );
}

import { create, createHook } from 'fluxo-ui/store';

const store = create<{ count: number }>(() => ({ count: 0 }));
const useStore = createHook(store);

function BatchDemo() {
  const renderCount = useRef(0);
  renderCount.current++;

  const { count } = useStore();

  const handleBatchIncrement = () => {
    // All three calls are batched into a single re-render
    store.setState((s) => ({ count: s.count + 1 }));
    store.setState((s) => ({ count: s.count + 1 }));
    store.setState((s) => ({ count: s.count + 1 }));
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Render count: {renderCount.current}</p>
      <Button label="+3 (Batched)" onClick={handleBatchIncrement} />
    </div>
  );
}

import { create, createHook } from 'fluxo-ui/store';

const profileStore = create<ProfileState>(() => ({
  user: { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
  settings: { theme: 'light', notifications: true, language: 'English' },
  metadata: { lastLogin: '...', version: 1 },
}));

const useProfile = createHook(profileStore);

// Hook with selector + shallow equality (true = shallow compare)
// Only re-renders when the user object reference changes
function UserCard() {
  const user = useProfile((s) => s.user, true);
  return <div>{user.name} ({user.role})</div>;
}

// Hook with selector — only re-renders when settings change
function SettingsPanel() {
  const settings = useProfile((s) => s.settings, true);
  return <div>{settings.theme} / {settings.language}</div>;
}

// Hook with no selector — re-renders on EVERY state change
function FullStateWatcher() {
  const state = useProfile();
  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

// External (non-React) path subscription
profileStore.on('change', 'user.name', (state) => {
  console.log('Name changed:', state.user.name);
});

profileStore.on('change', 'settings', (state) => {
  console.log('Settings changed:', state.settings);
});

import { create, createHook } from 'fluxo-ui/store';

// Store A — Task management
const taskStore = create<TaskState>(() => ({
  tasks: [{ id: 1, title: 'Build components', done: false }],
  nextId: 2,
  filter: 'all',
}));
taskStore.compute('completedCount', (s) => s.tasks.filter(t => t.done).length, ['tasks']);
taskStore.compute('progress', (s) => {
  const done = s.tasks.filter(t => t.done).length;
  return s.tasks.length ? Math.round((done / s.tasks.length) * 100) : 0;
}, ['tasks']);
const useTaskStore = createHook(taskStore);

// Store B — Notification feed
const notificationStore = create<NotificationState>(() => ({
  items: [],
  nextId: 1,
  muted: false,
}));
const useNotificationStore = createHook(notificationStore);

// Each store is fully independent — updating one never triggers
// re-renders in components that only subscribe to the other.
function TaskPanel() {
  const { tasks, filter } = useTaskStore();
  // Only re-renders when taskStore changes
}

function NotificationFeed() {
  const { items, muted } = useNotificationStore();
  // Only re-renders when notificationStore changes
}