mvc-kit 2.13.0 → 2.13.1

package/examples/react/ComplexApp/src/viewmodels/AppStateViewModel.ts

@@ -0,0 +1,26 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import { AppEventBus } from '../events/AppEventBus';
+
+interface AppState {
+  online: boolean;
+  socialPanelOpen: boolean;
+}
+
+export class AppStateViewModel extends ViewModel<AppState> {
+  static DEFAULT_STATE: AppState = { online: true, socialPanelOpen: false };
+
+  private bus = singleton(AppEventBus);
+
+  toggleOnline() {
+    const online = !this.state.online;
+    this.set({ online });
+    this.bus.emit('toast:show', {
+      message: online ? 'Back online' : 'Gone offline',
+      type: online ? 'success' : 'error',
+    });
+  }
+
+  toggleSocialPanel() {
+    this.set({ socialPanelOpen: !this.state.socialPanelOpen });
+  }
+}

package/examples/react/ComplexApp/src/viewmodels/DashboardCardViewModel.ts

@@ -0,0 +1,69 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import type { Collection } from 'mvc-kit';
+import type { DashboardChannel } from '../channels/DashboardChannel';
+import type { DashboardDataPoint } from '../types/dashboard';
+import { AppStateViewModel } from './AppStateViewModel';
+
+export abstract class DashboardCardViewModel extends ViewModel {
+  protected abstract channel: DashboardChannel;
+  protected abstract collection: Collection<DashboardDataPoint>;
+  private appState = singleton(AppStateViewModel);
+
+  // --- Computed getters ---
+
+  get dataPoints(): DashboardDataPoint[] {
+    return this.collection.items;
+  }
+
+  get latestValue(): number {
+    const items = this.collection.items;
+    return items.length > 0 ? items[items.length - 1]!.count : 0;
+  }
+
+  get previousValue(): number {
+    const items = this.collection.items;
+    return items.length > 1 ? items[items.length - 2]!.count : 0;
+  }
+
+  get trend(): 'up' | 'down' | 'flat' {
+    if (this.collection.length < 2) return 'flat';
+    const diff = this.latestValue - this.previousValue;
+    if (diff > 0) return 'up';
+    if (diff < 0) return 'down';
+    return 'flat';
+  }
+
+  get isConnected(): boolean {
+    return this.channel.state.connected;
+  }
+
+  get isOnline(): boolean {
+    return this.appState.state.online;
+  }
+
+  get dataPointCount(): number {
+    return this.collection.length;
+  }
+
+  // --- Lifecycle ---
+
+  protected onInit() {
+    this.pipeChannel(this.channel, 'data', this.collection);
+
+    if (this.appState.state.online) {
+      this.channel.connect();
+    }
+
+    this.subscribeTo(this.appState, () => {
+      if (this.appState.state.online) {
+        this.channel.connect();
+      } else {
+        this.channel.disconnect();
+      }
+    });
+  }
+
+  protected onDispose() {
+    this.channel.dispose();
+  }
+}

package/examples/react/ComplexApp/src/viewmodels/ErrorsCardViewModel.ts

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { ErrorsChannel } from '../channels/ErrorsChannel';
+import { ErrorsCollection } from '../collections/ErrorsCollection';
+
+export class ErrorsCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(ErrorsChannel);
+  protected collection = singleton(ErrorsCollection);
+}

package/examples/react/ComplexApp/src/viewmodels/LatencyCardViewModel.ts

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { LatencyChannel } from '../channels/LatencyChannel';
+import { LatencyCollection } from '../collections/LatencyCollection';
+
+export class LatencyCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(LatencyChannel);
+  protected collection = singleton(LatencyCollection);
+}

package/examples/react/ComplexApp/src/viewmodels/OrdersCardViewModel.ts

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { OrdersChannel } from '../channels/OrdersChannel';
+import { OrdersCollection } from '../collections/OrdersCollection';
+
+export class OrdersCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(OrdersChannel);
+  protected collection = singleton(OrdersCollection);
+}

package/examples/react/ComplexApp/src/viewmodels/RevenueCardViewModel.ts

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { RevenueChannel } from '../channels/RevenueChannel';
+import { RevenueCollection } from '../collections/RevenueCollection';
+
+export class RevenueCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(RevenueChannel);
+  protected collection = singleton(RevenueCollection);
+}

package/examples/react/ComplexApp/src/viewmodels/SocialFeedViewModel.ts

@@ -0,0 +1,39 @@
+import { ViewModel, singleton } from 'mvc-kit';
+import type { SocialPost } from '../types/social';
+import { SocialFeedResource } from '../resources/SocialFeedResource';
+
+interface SocialFeedState {
+  page: number;
+}
+
+export class SocialFeedViewModel extends ViewModel<SocialFeedState> {
+  private resource = singleton(SocialFeedResource);
+
+  // --- Computed getters ---
+
+  get posts(): SocialPost[] {
+    return this.resource.items;
+  }
+
+  get hasMore(): boolean {
+    return this.resource.hasMore;
+  }
+
+  get postCount(): number {
+    return this.resource.length;
+  }
+
+  // --- Lifecycle ---
+
+  protected onInit() {
+    if (this.resource.length === 0) this.loadMore();
+  }
+
+  // --- Actions ---
+
+  async loadMore() {
+    const page = this.state.page;
+    this.set({ page: page + 1 });
+    await this.resource.loadPage(page);
+  }
+}

package/examples/react/ComplexApp/src/viewmodels/TrafficCardViewModel.ts

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { TrafficChannel } from '../channels/TrafficChannel';
+import { TrafficCollection } from '../collections/TrafficCollection';
+
+export class TrafficCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(TrafficChannel);
+  protected collection = singleton(TrafficCollection);
+}

package/examples/react/ComplexApp/src/viewmodels/UsersMetricCardViewModel.ts

@@ -0,0 +1,9 @@
+import { singleton } from 'mvc-kit';
+import { DashboardCardViewModel } from './DashboardCardViewModel';
+import { UsersMetricChannel } from '../channels/UsersMetricChannel';
+import { UsersMetricCollection } from '../collections/UsersMetricCollection';
+
+export class UsersMetricCardViewModel extends DashboardCardViewModel {
+  protected channel = singleton(UsersMetricChannel);
+  protected collection = singleton(UsersMetricCollection);
+}

package/examples/react/ComplexApp/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": false,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "mvc-kit": ["../../../src/index.ts"],
+      "mvc-kit/react": ["../../../src/react/index.ts"]
+    }
+  },
+  "include": ["src"]
+}

package/examples/react/ComplexApp/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  root: import.meta.dirname,
+  define: {
+    __MVC_KIT_DEV__: true,
+  },
+  resolve: {
+    alias: {
+      'mvc-kit/react': resolve(import.meta.dirname, '../../../src/react/index.ts'),
+      'mvc-kit': resolve(import.meta.dirname, '../../../src/index.ts'),
+    },
+  },
+  server: {
+    port: 3001,
+  },
+});

package/examples/react/FullApp/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>mvc-kit Full Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/examples/react/FullApp/src/App.tsx

@@ -0,0 +1,28 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AppShell } from './components/layout/AppShell';
+import { LoginPage } from './components/auth/LoginPage';
+import { DashboardPage } from './components/dashboard/DashboardPage';
+import { UsersPage } from './components/users/UsersPage';
+import { LocationsPage } from './components/locations/LocationsPage';
+import { LocationProfilePage } from './components/locations/LocationProfilePage';
+import { MessagingPage } from './components/messaging/MessagingPage';
+import { Toast } from './components/shared/Toast';
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route element={<AppShell />}>
+          <Route path="/dashboard" element={<DashboardPage />} />
+          <Route path="/users" element={<UsersPage />} />
+          <Route path="/locations" element={<LocationsPage />} />
+          <Route path="/locations/:id" element={<LocationProfilePage />} />
+          <Route path="/messaging" element={<MessagingPage />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+      <Toast />
+    </BrowserRouter>
+  );
+}

package/examples/react/FullApp/src/collections/ConversationsCollection.ts

@@ -0,0 +1,4 @@
+import { Collection } from 'mvc-kit';
+import type { ConversationState } from '../types/conversation';
+
+export class ConversationsCollection extends Collection<ConversationState> {}

package/examples/react/FullApp/src/collections/LocationsCollection.ts

@@ -0,0 +1,4 @@
+import { Collection } from 'mvc-kit';
+import type { LocationState } from '../types/location';
+
+export class LocationsCollection extends Collection<LocationState> {}

package/examples/react/FullApp/src/components/auth/LoginPage.tsx

@@ -0,0 +1,80 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSingleton, useEvent, useModel } from 'mvc-kit/react';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { LoginFormModel } from '../../models/LoginFormModel';
+
+export function LoginPage() {
+  const [authState, authVM] = useSingleton(AuthViewModel);
+  const { loading, error } = authVM.async.login;
+  const { state, errors, valid, dirty, model } = useModel(
+    () => new LoginFormModel({ email: '', password: '' }),
+  );
+  const navigate = useNavigate();
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (authState.isAuthenticated) {
+      navigate('/dashboard');
+    }
+  }, [authState.isAuthenticated, navigate]);
+
+  // Show inline error from loginFailed event
+  useEvent(authVM, 'loginFailed', () => {
+    // Error is already shown via vm.async.login error state
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!valid) return;
+    authVM.login(state.email, state.password);
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1 className="login-title">mvc-kit Demo</h1>
+        <p className="login-subtitle">
+          Enter any email and password (6+ chars) to log in
+        </p>
+
+        {error && <div className="error-banner">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label className="form-label">Email</label>
+            <input
+              className={`form-input ${errors.email && dirty ? 'error' : ''}`}
+              type="text"
+              value={state.email}
+              onChange={e => model.setEmail(e.target.value)}
+              placeholder="alice@example.com"
+            />
+            {errors.email && dirty && <div className="form-error">{errors.email}</div>}
+          </div>
+
+          <div className="form-group">
+            <label className="form-label">Password</label>
+            <input
+              className={`form-input ${errors.password && dirty ? 'error' : ''}`}
+              type="password"
+              value={state.password}
+              onChange={e => model.setPassword(e.target.value)}
+              placeholder="6+ characters"
+            />
+            {errors.password && dirty && <div className="form-error">{errors.password}</div>}
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            style={{ width: '100%', marginTop: '0.5rem' }}
+            disabled={!valid || loading}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/dashboard/DashboardPage.tsx

@@ -0,0 +1,29 @@
+import { useLocal } from 'mvc-kit/react';
+import { DashboardViewModel } from '../../viewmodels/DashboardViewModel';
+import { StatsCard } from './StatsCard';
+import { RecentActivityCard } from './RecentActivityCard';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+
+export function DashboardPage() {
+  const [, vm] = useLocal(DashboardViewModel, {});
+  const { loading, error } = vm.async.load;
+
+  return (
+    <div>
+      <h1 className="page-title">Dashboard</h1>
+
+      {loading && <Spinner />}
+      {error && <ErrorBanner message={error} />}
+
+      <div className="stats-grid">
+        <StatsCard title="Total Users" value={vm.totalUsers} subtitle={`${vm.activeUsers} active`} />
+        <StatsCard title="Total Locations" value={vm.totalLocations} subtitle={`${vm.activeLocations} active`} />
+        <StatsCard title="Admins" value={vm.usersByRole['admin'] ?? 0} />
+        <StatsCard title="Managers" value={vm.usersByRole['manager'] ?? 0} />
+      </div>
+
+      <RecentActivityCard users={vm.recentUsers} />
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/dashboard/RecentActivityCard.tsx

@@ -0,0 +1,35 @@
+import type { UserState } from '../../types/user';
+
+interface RecentActivityCardProps {
+  users: UserState[];
+}
+
+export function RecentActivityCard({ users }: RecentActivityCardProps) {
+  return (
+    <div className="card">
+      <h3 style={{ marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600 }}>
+        Recent Team Members
+      </h3>
+      <ul className="activity-list">
+        {users.map(user => (
+          <li key={user.id} className="activity-item">
+            <div className="avatar">
+              {user.firstName[0]}{user.lastName[0]}
+            </div>
+            <div>
+              <div style={{ fontWeight: 500 }}>
+                {user.firstName} {user.lastName}
+              </div>
+              <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)' }}>
+                {user.role} &middot; Joined {new Date(user.createdAt).toLocaleDateString()}
+              </div>
+            </div>
+            <span className={`badge badge-${user.status}`} style={{ marginLeft: 'auto' }}>
+              {user.status}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/dashboard/StatsCard.tsx

@@ -0,0 +1,19 @@
+interface StatsCardProps {
+  title: string;
+  value: number | string;
+  subtitle?: string;
+}
+
+export function StatsCard({ title, value, subtitle }: StatsCardProps) {
+  return (
+    <div className="stat-card">
+      <div className="stat-value">{value}</div>
+      <div className="stat-label">{title}</div>
+      {subtitle && (
+        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-secondary)', marginTop: '0.25rem' }}>
+          {subtitle}
+        </div>
+      )}
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/layout/AppShell.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { useSingleton } from 'mvc-kit/react';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+
+export function AppShell() {
+  const [state, vm] = useSingleton(AuthViewModel);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!state.isAuthenticated) {
+      navigate('/login');
+    }
+  }, [state.isAuthenticated, navigate]);
+
+  if (!state.isAuthenticated || !state.user) return null;
+
+  return (
+    <div className="app-shell">
+      <Sidebar />
+      <div className="main-area">
+        <Header user={state.user} onLogout={() => vm.logout()} />
+        <div className="page-content">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/react/FullApp/src/components/layout/Header.tsx

@@ -0,0 +1,25 @@
+import type { UserState } from '../../types/user';
+
+interface HeaderProps {
+  user: UserState;
+  onLogout: () => void;
+}
+
+export function Header({ user, onLogout }: HeaderProps) {
+  return (
+    <header className="header">
+      <div />
+      <div className="header-user">
+        <span style={{ fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+          {user.firstName} {user.lastName}
+        </span>
+        <div className="avatar">
+          {user.firstName[0]}{user.lastName[0]}
+        </div>
+        <button className="btn btn-secondary btn-sm" onClick={onLogout}>
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+}

package/examples/react/FullApp/src/components/layout/Sidebar.tsx

@@ -0,0 +1,29 @@
+import { Link, useLocation } from 'react-router-dom';
+
+const navItems = [
+  { path: '/dashboard', label: 'Dashboard' },
+  { path: '/users', label: 'Users' },
+  { path: '/locations', label: 'Locations' },
+  { path: '/messaging', label: 'Messaging' },
+];
+
+export function Sidebar() {
+  const { pathname } = useLocation();
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-logo">mvc-kit</div>
+      <nav className="sidebar-nav">
+        {navItems.map(item => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`sidebar-link ${pathname.startsWith(item.path) ? 'active' : ''}`}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}

package/examples/react/FullApp/src/components/locations/LocationFilters.tsx

@@ -0,0 +1,60 @@
+import type { LocationState } from '../../types/location';
+
+interface LocationFiltersProps {
+  search: string;
+  typeFilter: 'all' | LocationState['type'];
+  statusFilter: 'all' | LocationState['status'];
+  onSearchChange: (value: string) => void;
+  onTypeFilterChange: (value: 'all' | LocationState['type']) => void;
+  onStatusFilterChange: (value: 'all' | LocationState['status']) => void;
+}
+
+export function LocationFilters({
+  search,
+  typeFilter,
+  statusFilter,
+  onSearchChange,
+  onTypeFilterChange,
+  onStatusFilterChange,
+}: LocationFiltersProps) {
+  return (
+    <div className="filters">
+      <div className="filter-group">
+        <label className="filter-label">Search</label>
+        <input
+          className="filter-input"
+          type="text"
+          value={search}
+          onChange={e => onSearchChange(e.target.value)}
+          placeholder="Search by name or city..."
+        />
+      </div>
+      <div className="filter-group">
+        <label className="filter-label">Type</label>
+        <select
+          className="filter-select"
+          value={typeFilter}
+          onChange={e => onTypeFilterChange(e.target.value as 'all' | LocationState['type'])}
+        >
+          <option value="all">All Types</option>
+          <option value="office">Office</option>
+          <option value="warehouse">Warehouse</option>
+          <option value="retail">Retail</option>
+        </select>
+      </div>
+      <div className="filter-group">
+        <label className="filter-label">Status</label>
+        <select
+          className="filter-select"
+          value={statusFilter}
+          onChange={e => onStatusFilterChange(e.target.value as 'all' | LocationState['status'])}
+        >
+          <option value="all">All Statuses</option>
+          <option value="active">Active</option>
+          <option value="inactive">Inactive</option>
+          <option value="maintenance">Maintenance</option>
+        </select>
+      </div>
+    </div>
+  );
+}