mvc-kit 2.12.5 → 2.13.1

package/examples/react/AuthExample/src/styles.css

@@ -0,0 +1,445 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --color-bg: #f5f7fa;
+  --color-surface: #ffffff;
+  --color-primary: #4f46e5;
+  --color-primary-hover: #4338ca;
+  --color-text: #1e293b;
+  --color-text-secondary: #64748b;
+  --color-border: #e2e8f0;
+  --color-error: #ef4444;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --radius: 8px;
+  --header-height: 56px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+/* Auth Page (login/register) */
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg);
+}
+
+.auth-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  width: 100%;
+  max-width: 420px;
+}
+
+.auth-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.auth-subtitle {
+  color: var(--color-text-secondary);
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.auth-subtitle code {
+  background: var(--color-bg);
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+}
+
+.auth-toggle {
+  text-align: center;
+  margin-top: 1.25rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.auth-loading {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: var(--color-text-secondary);
+}
+
+/* App Header (horizontal nav) */
+.app-header {
+  height: var(--header-height);
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.header-logo {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  margin-right: 1.5rem;
+}
+
+.header-link {
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius);
+  text-decoration: none;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: background 0.15s, color 0.15s;
+}
+
+.header-link:hover {
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.header-link.active {
+  background: #eef2ff;
+  color: var(--color-primary);
+}
+
+.header-user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.header-user-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Page Content */
+.page-content {
+  padding: 1.5rem;
+  max-width: 960px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+/* Cards */
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.stat-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.stat-label {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+/* Profile */
+.profile-card {
+  max-width: 480px;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.profile-details {
+  border-top: 1px solid var(--color-border);
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.875rem;
+}
+
+.detail-label {
+  color: var(--color-text-secondary);
+}
+
+/* Avatar */
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.avatar-lg {
+  width: 64px;
+  height: 64px;
+  font-size: 1.25rem;
+}
+
+/* Access Denied */
+.access-denied {
+  text-align: center;
+  padding: 3rem 1rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+
+.access-denied h2 {
+  color: var(--color-error);
+  margin-bottom: 1rem;
+}
+
+.access-denied p {
+  color: var(--color-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-bottom: 0.375rem;
+  color: var(--color-text);
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.form-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.form-input.error {
+  border-color: var(--color-error);
+}
+
+.form-error {
+  color: var(--color-error);
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.btn-secondary {
+  background: var(--color-bg);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-border);
+}
+
+.btn-danger {
+  background: var(--color-error);
+  color: white;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge-admin { background: #e0e7ff; color: #3730a3; }
+.badge-manager { background: #dbeafe; color: #1e40af; }
+.badge-member { background: #f1f5f9; color: #475569; }
+
+/* Error Banner */
+.error-banner {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #991b1b;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+/* Spinner */
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+.spinner-lg {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Links */
+.link {
+  color: var(--color-primary);
+  text-decoration: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+/* Toast */
+.toast-container {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.toast {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  animation: slideUp 0.3s ease-out;
+  min-width: 250px;
+}
+
+.toast-success {
+  background: #166534;
+  color: white;
+}
+
+.toast-error {
+  background: #991b1b;
+  color: white;
+}
+
+.toast-info {
+  background: #1e40af;
+  color: white;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/examples/react/AuthExample/src/types/auth.ts

@@ -0,0 +1,12 @@
+export interface AuthUser {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'manager' | 'member';
+  createdAt: string;
+}
+
+export interface AuthResponse {
+  user: AuthUser;
+  accessToken: string;
+}

package/examples/react/AuthExample/src/viewmodels/AuthViewModel.ts

@@ -0,0 +1,111 @@
+import { ViewModel, singleton, isAbortError, classifyError } from 'mvc-kit';
+import type { AuthUser } from '../types/auth';
+import { AuthService } from '../services/AuthService';
+import { AppEventBus } from '../events/AppEventBus';
+
+interface AuthState {
+  user: AuthUser | null;
+  accessToken: string | null;
+}
+
+interface AuthEvents {
+  loginFailed: { message: string };
+  sessionExpired: undefined;
+}
+
+const TOKEN_KEY = 'auth_token';
+
+export class AuthViewModel extends ViewModel<AuthState, AuthEvents> {
+  static DEFAULT_STATE: AuthState = { user: null, accessToken: null };
+
+  // --- Private fields ---
+  private authService = singleton(AuthService);
+  private bus = singleton(AppEventBus);
+
+  // --- Computed getters ---
+  get isAuthenticated(): boolean {
+    return this.state.user !== null && this.state.accessToken !== null;
+  }
+
+  get displayName(): string {
+    return this.state.user?.name ?? '';
+  }
+
+  get initials(): string {
+    const { user } = this.state;
+    if (!user) return '';
+    return user.name
+      .split(' ')
+      .map(p => p[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+
+  get isAdmin(): boolean {
+    return this.state.user?.role === 'admin';
+  }
+
+  get userRole(): string {
+    return this.state.user?.role ?? '';
+  }
+
+  // --- Lifecycle ---
+  async onInit() {
+    const token = localStorage.getItem(TOKEN_KEY);
+    if (token) {
+      await this.restoreSession(token);
+    }
+  }
+
+  // --- Actions ---
+  async login(email: string, password: string) {
+    try {
+      const { user, accessToken } = await this.authService.login(email, password, this.disposeSignal);
+      localStorage.setItem(TOKEN_KEY, accessToken);
+      this.set({ user, accessToken });
+      this.bus.emit('toast:show', { message: `Welcome, ${user.name}!`, severity: 'success' });
+    } catch (e) {
+      if (!isAbortError(e)) {
+        this.emit('loginFailed', { message: classifyError(e).message });
+      }
+      throw e;
+    }
+  }
+
+  async register(name: string, email: string, password: string) {
+    try {
+      const { user, accessToken } = await this.authService.register(name, email, password, this.disposeSignal);
+      localStorage.setItem(TOKEN_KEY, accessToken);
+      this.set({ user, accessToken });
+      this.bus.emit('toast:show', { message: `Welcome, ${user.name}!`, severity: 'success' });
+    } catch (e) {
+      if (!isAbortError(e)) {
+        this.emit('loginFailed', { message: classifyError(e).message });
+      }
+      throw e;
+    }
+  }
+
+  logout() {
+    const { accessToken } = this.state;
+    if (accessToken) {
+      this.authService.logout(accessToken).catch(() => {});
+    }
+    localStorage.removeItem(TOKEN_KEY);
+    this.set({ user: null, accessToken: null });
+    this.bus.emit('toast:show', { message: 'Logged out', severity: 'info' });
+  }
+
+  // --- Private ---
+  private async restoreSession(token: string) {
+    try {
+      const user = await this.authService.getProfile(token, this.disposeSignal);
+      this.set({ user, accessToken: token });
+    } catch (e) {
+      if (isAbortError(e)) throw e;
+      localStorage.removeItem(TOKEN_KEY);
+      this.emit('sessionExpired', undefined);
+    }
+  }
+}

package/examples/react/AuthExample/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/AuthExample/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: 3002,
+  },
+});

package/examples/react/ComplexApp/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 Complex Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

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

@@ -0,0 +1,17 @@
+import { Navbar } from './components/layout/Navbar';
+import { DashboardPage } from './components/dashboard/DashboardPage';
+import { ActivityFeed } from './components/activity/ActivityFeed';
+import { Toast } from './components/shared/Toast';
+
+export function App() {
+  return (
+    <div className="app">
+      <Navbar />
+      <main className="main-content">
+        <DashboardPage />
+        <ActivityFeed />
+      </main>
+      <Toast />
+    </div>
+  );
+}

package/examples/react/ComplexApp/src/channels/ActivityChannel.ts

@@ -0,0 +1,24 @@
+import { Channel } from 'mvc-kit';
+import { MockWebSocket } from '../mock-remote/MockWebSocket';
+import { getActivityWSConfig } from '../mock-remote/activity-api';
+import type { ActivityItem } from '../types/activity';
+
+export interface ActivityMessages {
+  activity: ActivityItem;
+}
+
+export class ActivityChannel extends Channel<ActivityMessages> {
+  static override MAX_ATTEMPTS = 5;
+
+  private ws: MockWebSocket | null = null;
+
+  protected open(signal: AbortSignal): void {
+    this.ws = new MockWebSocket(getActivityWSConfig());
+    this.ws.connect((data) => this.receive('activity', data), signal);
+  }
+
+  protected close(): void {
+    this.ws?.close();
+    this.ws = null;
+  }
+}

package/examples/react/ComplexApp/src/channels/DashboardChannel.ts

@@ -0,0 +1,26 @@
+import { Channel } from 'mvc-kit';
+import { MockWebSocket } from '../mock-remote/MockWebSocket';
+import { getDashboardConfig } from '../mock-remote/dashboard-generators';
+import type { DashboardDataPoint } from '../types/dashboard';
+
+export interface DashboardMessages {
+  data: DashboardDataPoint;
+}
+
+export abstract class DashboardChannel extends Channel<DashboardMessages> {
+  static SERVICE_ID: string;
+  static override MAX_ATTEMPTS = 5;
+
+  private ws: MockWebSocket | null = null;
+
+  protected open(signal: AbortSignal): void {
+    const serviceId = (this.constructor as typeof DashboardChannel).SERVICE_ID;
+    this.ws = new MockWebSocket(getDashboardConfig(serviceId));
+    this.ws.connect((data) => this.receive('data', data), signal);
+  }
+
+  protected close(): void {
+    this.ws?.close();
+    this.ws = null;
+  }
+}

package/examples/react/ComplexApp/src/channels/ErrorsChannel.ts

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+
+export class ErrorsChannel extends DashboardChannel {
+  static override SERVICE_ID = 'errors';
+}

package/examples/react/ComplexApp/src/channels/LatencyChannel.ts

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+
+export class LatencyChannel extends DashboardChannel {
+  static override SERVICE_ID = 'latency';
+}

package/examples/react/ComplexApp/src/channels/OrdersChannel.ts

@@ -0,0 +1,5 @@
+import { DashboardChannel } from './DashboardChannel';
+
+export class OrdersChannel extends DashboardChannel {
+  static override SERVICE_ID = 'orders';
+}